Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: flush state for accordion component #15993

Merged
merged 13 commits into from
May 21, 2024
Merged

fix: flush state for accordion component #15993

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
917e3e4
fix: flush state for accordian component
riddhybansal Mar 18, 2024
72439c5
fix: hover and focus states when flush is applied
riddhybansal Mar 21, 2024
3bc67a1
fix: removed unnecessary comments
riddhybansal Mar 21, 2024
0600a39
fix: smoothe transition effect and removed border on hover state
riddhybansal Mar 26, 2024
a6452e4
fix: blended borders on hover state
riddhybansal Mar 26, 2024
a46feb8
fix: inward shift for the flush state of accordian element
riddhybansal Apr 22, 2024
c68014b
fix: some border styles
riddhybansal Apr 24, 2024
3827adc
Merge branch 'main' into Accordion_with_flush_alignment_does_not_meet…
riddhybansal Apr 24, 2024
37b8331
Merge branch 'main' into Accordion_with_flush_alignment_does_not_meet…
alisonjoseph May 13, 2024
6e4c81c
feat: refactor isFlush styles
alisonjoseph May 13, 2024
b7e93ce
chore: remove test story
alisonjoseph May 15, 2024
f5d02d7
chore: space
alisonjoseph May 15, 2024
7240091
Merge branch 'main' into Accordion_with_flush_alignment_does_not_meet…
riddhybansal May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 101 additions & 24 deletions packages/styles/scss/components/accordion/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,27 @@ $content-padding: 0 0 0 $spacing-05 !default;
display: list-item;
overflow: visible;
border-block-start: 1px solid $border-subtle;
transition: border-color motion(standard, productive) $duration-fast-02;

&:last-child {
border-block-end: 1px solid $border-subtle;
}
}

alisonjoseph marked this conversation as resolved.
Show resolved Hide resolved
.#{$prefix}--accordion__item:not(.#{$prefix}--accordion__item--active) {
// Blend border on hover
&:hover,
// Blend top border of the next component on hover
&:hover + .#{$prefix}--accordion__item {
border-block-start-color: $layer-hover;
}

// Blend bottom border of last item on hover
&:last-child:hover {
border-block-end-color: $layer-hover;
}
}

.#{$prefix}--accordion__heading {
@include button-reset.reset;

Expand All @@ -83,11 +98,15 @@ $content-padding: 0 0 0 $spacing-05 !default;

&:hover {
background-color: $layer-hover;
outline: none;
}

&:focus {
box-shadow: /* Border top */ 0 -1px 0 0 $focus, inset 0 1px 0 0 $focus,
/* Border right */ inset 2px 0 0 0 $focus,
position: relative;
z-index: 2;
box-shadow:
/* Border top */ 0 -1px 0 0 $focus,
inset 0 1px 0 0 $focus, /* Border right */ inset 2px 0 0 0 $focus,
/* Border bottom */ 0 1px 0 0 $focus, inset 0 -1px 0 0 $focus,
/* Border left */ inset -2px 0 0 0 $focus;
outline: none;
Expand Down Expand Up @@ -213,6 +232,79 @@ $content-padding: 0 0 0 $spacing-05 !default;
}
}

// flush
.#{$prefix}--accordion--flush .#{$prefix}--accordion__item {
position: relative;
border-color: transparent;

&:last-child,
&:hover,
&:last-child:hover,
&:hover + .#{$prefix}--accordion__item {
border-color: transparent;
}

&::before,
&::after {
position: absolute;
display: block;
block-size: 1px;
content: '';
inline-size: calc(100% - $spacing-05 - $spacing-05);
margin-inline-start: $spacing-05;
transition: background motion(standard, productive) $duration-fast-02;

@media screen and (prefers-reduced-motion: reduce) {
transition: none;
}
}

&::before {
background: $border-subtle;
inset-block-start: -1px;
}

&:last-child::after {
background: $border-subtle;
inset-block-end: -1px;
}
}

.#{$prefix}--accordion--flush .#{$prefix}--accordion__heading:hover {
position: relative;
z-index: 1;

// blend top/bottom border into heading hover state
&::before,
&::after {
position: absolute;
display: block;
background: $layer-hover;
block-size: 1px;
content: '';
inline-size: 100%;
inset-inline-start: 0;
transition: background motion(standard, productive) $duration-fast-02;

@media screen and (prefers-reduced-motion: reduce) {
transition: none;
}
}

&::before {
inset-block-start: -1px;
}

&::after {
inset-block-end: -1px;
}

&:focus::after,
&:focus::before {
background: none;
}
}

// Skeleton state
.#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading,
.#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button {
Expand All @@ -234,7 +326,9 @@ $content-padding: 0 0 0 $spacing-05 !default;
}

.#{$prefix}--accordion.#{$prefix}--skeleton
.#{$prefix}--accordion__heading:hover::before {
.#{$prefix}--accordion__heading:hover::before,
.#{$prefix}--accordion.#{$prefix}--skeleton
.#{$prefix}--accordion__heading:hover {
background-color: transparent;
}

Expand All @@ -255,6 +349,10 @@ $content-padding: 0 0 0 $spacing-05 !default;
margin-block-end: 0;
}

.#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__title {
margin-inline-start: $spacing-05;
}

// Windows HCM fix
.#{$prefix}--accordion__arrow,
.#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow {
Expand Down Expand Up @@ -284,24 +382,3 @@ $content-padding: 0 0 0 $spacing-05 !default;
opacity: 0;
visibility: hidden;
}

// flush
.#{$prefix}--accordion--flush .#{$prefix}--accordion__title {
margin-inline-start: 0;
}

.#{$prefix}--accordion--flush .#{$prefix}--accordion__arrow {
margin-inline-end: 0;
}

.#{$prefix}--accordion--flush .#{$prefix}--accordion__content {
padding-inline-start: 0;
}

.#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
.#{$prefix}--accordion__heading:hover::before,
.#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
.#{$prefix}--accordion__heading:focus::before {
inline-size: calc(100% + 32px);
inset-inline-start: -1rem;
}
Loading