feat(components/accordion): border-bottom can be dded to accordion it…

…em header #1322
zyfra · Jun 21, 2024 · 673c6f5 · 673c6f5
1 parent f6e8708
commit 673c6f5
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/apps/doc/src/app/components/accordion/accordion-example.component.html b/apps/doc/src/app/components/accordion/accordion-example.component.html
@@ -47,6 +47,9 @@
  [title]="title"
  [icon]="icon"
  [isExpanded]="isExpanded"
+ [style.--prizm-accordion-item-header-border-color-expanded]="
+ prizmAccordionHeaderExpandedBorderColor
+ "
  prizmDocHostElementKey="PrizmAccordionItemComponent"
  >
  <ng-template prizmAccordionTools>
@@ -65,7 +68,13 @@
  </span>
  </ng-template>
  </prizm-accordion-item>
- <prizm-accordion-item [disabled]="disabled" [title]="'Title number 3'">
+ <prizm-accordion-item
+ [disabled]="disabled"
+ [title]="'Title number 3'"
+ [style.--prizm-accordion-item-header-border-color-expanded]="
+ prizmAccordionHeaderExpandedBorderColor
+ "
+ >
  <ng-template prizmAccordionTools>
  <prizm-checkbox [disabled]="disabled" label="Checkbox label is here but..."></prizm-checkbox>
  </ng-template>
@@ -106,6 +115,14 @@
  hostComponentKey="PrizmAccordionItemComponent"
  heading="PrizmAccordionItemComponent"
  >
+ <ng-template
+ [(documentationPropertyValue)]="prizmAccordionHeaderExpandedBorderColor"
+ documentationPropertyName="prizm-accordion-item-header-border-color-expanded"
+ documentationPropertyType="string"
+ documentationPropertyMode="css-var"
+ >
+ Accordion Header Border Bottom Color for expanded items (default - transparent)
+ </ng-template>
  <ng-template
  [(documentationPropertyValue)]="isExpanded"
  documentationPropertyName="isExpanded"

diff --git a/apps/doc/src/app/components/accordion/accordion-example.component.ts b/apps/doc/src/app/components/accordion/accordion-example.component.ts
@@ -18,6 +18,7 @@ export class AccordionExampleComponent {
  public iconVariants: ReadonlyArray<PolymorphContent> = ['', ...PRIZM_ICONS_NAMES];
  public icon: PolymorphContent = this.iconVariants[0];
  public isExpanded = false;
+ public prizmAccordionHeaderExpandedBorderColor = '';
 
  public readonly exampleBasicAccordion: TuiDocExample = {
  TypeScript: import('./examples/accordion-basic-example/accordion-basic-example.component?raw'),

diff --git a/...ponents/accordion/examples/accordion-basic-example/accordion-basic-example.component.html b/...ponents/accordion/examples/accordion-basic-example/accordion-basic-example.component.html
@@ -1,5 +1,8 @@
 <prizm-accordion>
- <prizm-accordion-item [title]="'Static_title_h3 - 16 Medium'">
+ <prizm-accordion-item
+ [title]="'Static_title_h3 - 16 Medium'"
+ [style.--prizm-accordion-item-header-border-color-expanded]="'var(--prizm-background-stroke)'"
+ >
  <ng-template prizmAccordionContent>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
  стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
@@ -10,7 +13,10 @@
  используется.
  </ng-template>
  </prizm-accordion-item>
- <prizm-accordion-item [title]="'Title number 2'">
+ <prizm-accordion-item
+ [title]="'Title number 2'"
+ [style.--prizm-accordion-item-header-border-color-expanded]="'var(--prizm-background-stroke)'"
+ >
  <ng-template prizmAccordionContent>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
  стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник

diff --git a/...ents/src/lib/components/accordion/components/accordion-item/accordion-item.component.less b/...ents/src/lib/components/accordion/components/accordion-item/accordion-item.component.less
@@ -20,7 +20,7 @@
  }
 
  &__header {
- height: 47px;
+ height: 48px;
  padding: 0 16px;
 
  display: flex;
@@ -80,6 +80,10 @@
  transform: rotate(180deg);
  }
 
+ .accordion__header {
+ border-bottom: 1px solid var(--prizm-accordion-item-header-border-color-expanded, transparent);
+ }
+
  &:focus {
  box-shadow: none;
  }