feat(content-switcher): adds fade up animation (#10148)

* feat(content-switcher): adds fade up animation * fix(content-switcher): styles only applied when not disabled * feat(content-switcher): added styles to packages/styles * fix(content-switcher): removed carbon prefix on motion mixin Co-authored-by: Josefina Mancilla <[email protected]> * Update packages/components/src/components/content-switcher/_content-switcher.scss * feat(content-switcher): changed after and disabled selectors Co-authored-by: Josefina Mancilla <[email protected]>
carbon-design-system · Feb 3, 2022 · 3068b42 · 3068b42
1 parent b9ea6a3
commit 3068b42
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/packages/components/src/components/content-switcher/_content-switcher.scss b/packages/components/src/components/content-switcher/_content-switcher.scss
@@ -51,15 +51,37 @@
     color: $text-secondary;
     text-align: left;
     text-decoration: none;
-    transition: all $duration--fast-01 motion(standard, productive);
+    transition: all $duration--moderate-01 motion(standard, productive);
     white-space: nowrap;
 
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $layer-selected-inverse;
+      content: '';
+      transform: scaleY(0);
+      transform-origin: bottom;
+      transition: all $duration--moderate-01 motion(standard, productive);
+    }
+
+    &:disabled::after {
+      display: none;
+    }
+
     &:focus {
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
     }
 
+    &:focus::after {
+      clip-path: inset(3px 3px 3px 3px);
+    }
+
     &:hover {
       color: $text-primary;
       cursor: pointer;
@@ -156,6 +178,7 @@
   }
 
   .#{$prefix}--content-switcher__label {
+    z-index: 1;
     overflow: hidden;
     max-width: 100%;
     text-overflow: ellipsis;
@@ -172,6 +195,10 @@
     background-color: $layer-selected-inverse;
     color: $text-inverse;
 
+    &::after {
+      transform: scaleY(1);
+    }
+
     &:disabled {
       background-color: $layer-selected-disabled;
       color: $text-disabled;

diff --git a/packages/styles/scss/components/content-switcher/_content-switcher.scss b/packages/styles/scss/components/content-switcher/_content-switcher.scss
@@ -52,15 +52,37 @@
     color: $text-secondary;
     text-align: left;
     text-decoration: none;
-    transition: all $duration-fast-01 motion(standard, productive);
+    transition: all $duration-moderate-01 motion(standard, productive);
     white-space: nowrap;
 
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $layer-selected-inverse;
+      content: '';
+      transform: scaleY(0);
+      transform-origin: bottom;
+      transition: all $duration-moderate-01 motion(standard, productive);
+    }
+
+    &:disabled::after {
+      display: none;
+    }
+
     &:focus {
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
     }
 
+    &:focus::after {
+      clip-path: inset(3px 3px 3px 3px);
+    }
+
     &:hover {
       color: $text-primary;
       cursor: pointer;
@@ -157,6 +179,7 @@
   }
 
   .#{$prefix}--content-switcher__label {
+    z-index: 1;
     overflow: hidden;
     max-width: 100%;
     text-overflow: ellipsis;
@@ -177,6 +200,10 @@
       background-color: $layer-selected-disabled;
       color: $text-disabled;
     }
+
+    &::after {
+      transform: scaleY(1);
+    }
   }
 
   .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected