Skip to content

Commit

Permalink
Merge pull request #1316 from zyfra/fix/accordion-3.11
Browse files Browse the repository at this point in the history
fix: accordion styles fixes #1116, #1236, #1285
  • Loading branch information
ZurabDev authored Jan 30, 2024
2 parents 5caffac + a6ba757 commit 6cb4b78
Show file tree
Hide file tree
Showing 13 changed files with 342 additions and 32 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<prizm-accordion>
<prizm-accordion-item title="Static_title_h3 - 16 Medium">
<prizm-accordion-item [title]="'Static_title_h3 - 16 Medium'">
<ng-template prizmAccordionContent>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
Expand All @@ -10,7 +10,7 @@
используется.
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 2">
<prizm-accordion-item [title]="'Title number 2'">
<ng-template prizmAccordionContent>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<prizm-accordion>
<prizm-accordion-item title="Static_title_h3 - 16 Medium">
<prizm-accordion-item [title]="'Static_title_h3 - 16 Medium'">
<ng-template prizmAccordionContent>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
Expand All @@ -10,7 +10,7 @@
используется Lorem Ipsum.
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 2">
<prizm-accordion-item [title]="'Title number 2'">
<ng-template prizmAccordionTools>
<prizm-checkbox label="Checkbox label is here"></prizm-checkbox>
</ng-template>
Expand All @@ -25,7 +25,7 @@
- фатальная ошибка.
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 3">
<prizm-accordion-item [title]="'Title number 3'">
<ng-template prizmAccordionTools>
<prizm-checkbox label="Checkbox label is here but..."></prizm-checkbox>
</ng-template>
Expand All @@ -40,7 +40,7 @@
- фатальная ошибка.
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 4">
<prizm-accordion-item [title]="'Title number 4'">
<ng-template prizmAccordionContent>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<prizm-accordion [onlyOneExpanded]="true">
<prizm-accordion-item title="Static_title_h3 - 16 Medium">
<prizm-accordion-item [title]="'Static_title_h3 - 16 Medium'">
<ng-template prizmAccordionContent>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
Expand All @@ -10,7 +10,7 @@
используется Lorem Ipsum.
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 2">
<prizm-accordion-item [title]="'Title number 2'">
<ng-template prizmAccordionTools>
<prizm-checkbox label="Checkbox label is here"></prizm-checkbox>
</ng-template>
Expand All @@ -25,7 +25,7 @@
- фатальная ошибка.
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 3">
<prizm-accordion-item [title]="'Title number 3'">
<ng-template prizmAccordionTools>
<prizm-checkbox label="Checkbox label is here but..."></prizm-checkbox>
</ng-template>
Expand All @@ -40,7 +40,7 @@
- фатальная ошибка.
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 4">
<prizm-accordion-item [title]="'Title number 4'">
<ng-template prizmAccordionContent>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<prizm-accordion>
<prizm-accordion-item [disabled]="true" title="Static_title_h3 - 16 Medium">
<prizm-accordion-item [disabled]="true" [title]="'Static_title_h3 - 16 Medium'">
<ng-template prizmAccordionContent>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
Expand All @@ -10,7 +10,7 @@
используется Lorem Ipsum.
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 2">
<prizm-accordion-item [title]="'Title number 2'">
<ng-template prizmAccordionTools>
<prizm-checkbox label="Checkbox label is here"></prizm-checkbox>
</ng-template>
Expand All @@ -25,7 +25,7 @@
- фатальная ошибка.
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 3">
<prizm-accordion-item [title]="'Title number 3'">
<ng-template prizmAccordionTools>
<prizm-checkbox label="Checkbox label is here but..."></prizm-checkbox>
</ng-template>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<prizm-accordion>
<prizm-accordion-item class="custom" *ngFor="let item of items" [title]="title">
<prizm-accordion-item *ngFor="let item of items" [title]="title">
<ng-template #title>
<span [prizmHint]="item.hint"> {{ item.title }} </span>
<span class="custom" [prizmHint]="item.hint"> {{ item.title }} </span>
</ng-template>

<ng-template prizmAccordionContent>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@
}

.custom {
--prizm-accordion-item-hover-boxShadowColor: orange;
color: orange;
}
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export class AccordionCustomTitleComponent {
Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х
годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых
используется.`,
title: 'Title 1',
title: 'My custom title 1',
hint: 'It is 1st element',
},
{
Expand All @@ -28,7 +28,7 @@ export class AccordionCustomTitleComponent {
годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых
используется Lorem Ipsum. Не дочитали до конца - ошибка, дочитали и думали, что текст тот же, что и выше
- фатальная ошибка.`,
title: 'Title 2',
title: 'My Custom title 2',
hint: 'It is 2nd element',
},
];
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<prizm-accordion>
<prizm-accordion-item title="Title number 1">
<prizm-accordion-item [title]="'Title number 1'">
<ng-template prizmAccordionContent>
<prizm-accordion class="nested">
<prizm-accordion-item title="Static_title_h3 - 16 Medium">
<prizm-accordion-item [title]="'Static_title_h3 - 16 Medium'">
<ng-template prizmAccordionContent> nested content 1 </ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 2">
<prizm-accordion-item [title]="'Title number 2'">
<ng-template prizmAccordionContent> nested content 2 </ng-template>
</prizm-accordion-item>
</prizm-accordion>
</ng-template>
</prizm-accordion-item>
<prizm-accordion-item title="Title number 2">
<prizm-accordion-item [title]="'Title number 2'">
<ng-template prizmAccordionContent>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
<div class="btn-wrapper">
<button
class="accordion__button"
[class.accordion_expanded__button]="isExpanded"
[icon]="'chevrons-double-down'"
[disabled]="disabled"
prizmIconButton
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@
flex-direction: column;

cursor: pointer;
border-top: 1px solid var(--prizm-v3-background-stroke);
border-top: 1px solid var(--prizm-background-stroke);

&_focused:not(.accordion_disabled),
&:hover:not(.accordion_disabled) {
border-radius: 2px;
position: relative;
}

&_focused:not(.accordion_disabled) {
box-shadow: 0 0 0 2px var(--prizm-v3-background-stroke-focus);
box-shadow: 0 0 0 2px var(--prizm-background-stroke-focus);
position: relative;
}

&__header {
Expand All @@ -26,7 +26,7 @@
display: flex;
align-items: center;

background: var(--prizm-v3-background-fill-panel);
background: var(--prizm-background-fill-panel);

outline: none;
overflow: hidden;
Expand All @@ -38,15 +38,15 @@
font-size: 14px;
line-height: 20px;

color: var(--prizm-v3-text-icon-primary);
color: var(--prizm-text-icon-primary);

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.header-icon {
color: var(--prizm-v3-text-icon-primary);
color: var(--prizm-text-icon-primary);
margin-right: 8px;
}
}
Expand All @@ -60,23 +60,23 @@
opacity: 0;

overflow: hidden;
background: var(--prizm-v3-background-fill-panel);
background: var(--prizm-background-fill-primary);

transition: 400ms;
}

.btn-wrapper {
margin: auto 0px auto 12px;

border-left: 1px solid var(--prizm-v3-background-stroke);
border-left: 1px solid var(--prizm-background-stroke);

.accordion__button {
margin-left: 12px;
}
}

&_expanded {
.accordion__button {
.accordion_expanded__button {
transform: rotate(180deg);
}

Expand All @@ -96,7 +96,7 @@
& > .accordion__header .title,
& > .accordion__header,
& > .accordion__header .header-icon {
color: var(--prizm-v3-text-icon-disable);
color: var(--prizm-text-icon-disable);
pointer-events: none;
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
:host {
display: block;
}

.accordion {
display: flex;
flex-direction: column;

cursor: pointer;
border-top: 1px solid var(--prizm-v3-background-stroke);

&_focused:not(.accordion_disabled),
&:hover:not(.accordion_disabled) {
border-radius: 2px;
}

&_focused:not(.accordion_disabled) {
box-shadow: 0 0 0 2px var(--prizm-v3-background-stroke-focus);
position: relative;
}

&__header {
height: 47px;
padding: 0 16px;

display: flex;
align-items: center;

background: var(--prizm-v3-background-fill-panel);

outline: none;
overflow: hidden;

.title {
flex: 1;

font-weight: 600;
font-size: 14px;
line-height: 20px;

color: var(--prizm-v3-text-icon-primary);

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.header-icon {
color: var(--prizm-v3-text-icon-primary);
margin-right: 8px;
}
}

&__tools {
display: flex;
margin-left: 10px;
}

&__content {
opacity: 0;

overflow: hidden;
background: var(--prizm-v3-background-fill-primary);

transition: 400ms;
}

.btn-wrapper {
margin: auto 0px auto 12px;

border-left: 1px solid var(--prizm-v3-background-stroke);

.accordion__button {
margin-left: 12px;
}
}

&_expanded {
.accordion_expanded__button {
transform: rotate(180deg);
}

&:focus {
box-shadow: none;
}

& > .accordion__content {
padding: var(--prizm-accordion-content-padding, 16px);
opacity: 1;
}
}

&_disabled {
cursor: not-allowed;

& > .accordion__header .title,
& > .accordion__header,
& > .accordion__header .header-icon {
color: var(--prizm-v3-text-icon-disable);
pointer-events: none;
}
}
}
Loading

0 comments on commit 6cb4b78

Please sign in to comment.