fix: flush state for accordion component (#15993)

* fix: flush state for accordian component * fix: hover and focus states when flush is applied * fix: removed unnecessary comments * fix: smoothe transition effect and removed border on hover state * fix: blended borders on hover state * fix: inward shift for the flush state of accordian element * fix: some border styles * feat: refactor isFlush styles * chore: remove test story * chore: space --------- Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · May 21, 2024 · 19f1400 · 19f1400
1 parent 96214a9
commit 19f1400
Showing 1 changed file with 101 additions and 24 deletions.
diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
@@ -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;
     }
   }
 
+  .#{$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;
 
@@ -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;
@@ -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 {
@@ -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;
   }
 
@@ -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 {
@@ -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;
-}