feat(tabs): take out fade from scroll button (#16522)

* feat(tabs): take out fade from scroll button * feat(tabs): fix background color for contained tab arrow * feat(tabs): fix transparent left arrow button * feat(tabs): change border of disabled tab * feat(tabs): add to all contibuters list * feat(tabs): change size to 2px * feat(tabs): change size to 2px for all states * feat(tabs): add fade to line tabs * feat(readme): change alignment * feat(tabs): add fade to default tabs --------- Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Oct 4, 2024 · b79ee0f · b79ee0f
1 parent 033427b
commit b79ee0f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1624,6 +1624,15 @@
         "code",
         "doc"
       ]
+    },
+    {
+      "login": "divya-281",
+      "name": "Divya G",
+      "avatar_url": "https://avatars.githubusercontent.com/u/72991264?v=4",
+      "profile": "https://github.com/divya-281",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/README.md b/README.md
@@ -305,6 +305,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/NabeelAyubee"><img src="https://avatars.githubusercontent.com/u/64087875?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Md Nabeel Ayubee</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=NabeelAyubee" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/pamrulla"><img src="https://avatars.githubusercontent.com/u/4942741?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Patan Amrulla Khan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=pamrulla" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=pamrulla" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/divya-281"><img src="https://avatars.githubusercontent.com/u/72991264?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Divya G</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=divya-281" title="Code">💻</a></td>
   </tr>
 </table>
 

diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
@@ -163,49 +163,43 @@
     .#{$prefix}--tab--overflow-nav-button--next::before {
       position: absolute;
       z-index: 1;
-      background: linear-gradient(
-        to right,
-        rgba(255, 255, 255, 0),
-        $background
-      );
       block-size: 100%;
       content: '';
       inline-size: $spacing-03;
       inset-inline-start: -$spacing-03;
     }
 
-    &.#{$prefix}--tabs--contained
+    &:not(.#{$prefix}--tabs--contained) {
       .#{$prefix}--tab--overflow-nav-button--next::before {
-      background-image: linear-gradient(
-        to right,
-        rgba(255, 255, 255, 0),
-        $layer-accent
-      );
+        background: linear-gradient(
+          to right,
+          rgba(255, 255, 255, 0),
+          $background
+        );
+      }
+      .#{$prefix}--tab--overflow-nav-button--previous::before {
+        background: linear-gradient(
+          to left,
+          rgba(255, 255, 255, 0),
+          $background
+        );
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--previous {
       position: absolute;
+      z-index: 1;
       inset-block: 0 0;
       inset-inline-start: 0;
     }
 
     .#{$prefix}--tab--overflow-nav-button--previous::before {
       position: absolute;
       z-index: 1;
-      background: $background;
       block-size: 100%;
       content: '';
-      inline-size: $spacing-08;
-      inset-inline-end: 0;
-    }
-
-    &.#{$prefix}--tabs--contained
-      .#{$prefix}--tab--overflow-nav-button--previous::before {
-      background: linear-gradient(
-        to left,
-        rgba(255, 255, 255, 0),
-        $layer-accent
-      );
+      inline-size: $spacing-03;
+      inset-inline-end: -$spacing-03;
     }
 
     .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left {
@@ -624,13 +618,13 @@
 
     .#{$prefix}--tabs__nav-item--disabled {
       background-color: transparent;
-      border-block-end: $tab-underline-disabled;
+      border-block-end: 2px solid $border-subtle;
       color: $tab-text-disabled;
       outline: none;
     }
 
     .#{$prefix}--tabs__nav-item--disabled:hover {
-      border-block-end: $tab-underline-disabled;
+      border-block-end: 2px solid $border-subtle;
       color: $tab-text-disabled;
       cursor: not-allowed;
     }
@@ -652,7 +646,7 @@
 
     .#{$prefix}--tabs__nav-item--disabled:focus,
     .#{$prefix}--tabs__nav-item--disabled:active {
-      border-block-end: $tab-underline-disabled;
+      border-block-end: 2px solid $border-subtle;
       outline: none;
       pointer-events: none;
     }