feat(tabs): added hover and active styles (carbon-design-system#16523)

* feat(tabs): added hover and active styles * feat(tabs): revert test style * feat(tabs): active tab style order fix * feat(tabs): issue fix :last tab is being partially hidden * feat(tabs): issue fix :last tab is being partially hidden * feat(tabs): added to contributors list * feat(tabs): rebase --------- Co-authored-by: Soumya Raju <[email protected]> Co-authored-by: Alison Joseph <[email protected]>
annawen1 · Oct 11, 2024 · cf0a241 · cf0a241
1 parent fa1548e
commit cf0a241
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1589,7 +1589,7 @@
       ]
     },
     {
-     "login": "AliAldobyan",
+      "login": "AliAldobyan",
       "name": "Ali Al Dobyan",
       "avatar_url": "https://avatars.githubusercontent.com/u/17975825?v=4",
       "profile": "https://github.com/AliAldobyan",
@@ -1643,6 +1643,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "soumyaraju",
+      "name": "Soumya Raju",
+      "avatar_url": "https://avatars.githubusercontent.com/u/41182657?v=4",
+      "profile": "https://github.com/soumyaraju",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/README.md b/README.md
@@ -308,6 +308,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <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/Neues"><img src="https://avatars.githubusercontent.com/u/9409245?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Noah Sgorbati</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Neues" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=Neues" 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>
+    <td align="center"><a href="https://github.com/soumyaraju"><img src="https://avatars.githubusercontent.com/u/41182657?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Soumya Raju</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=soumyaraju" title="Code">💻</a></td>
   </tr>
 </table>
 

diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
@@ -137,6 +137,14 @@
       &:focus {
         @include focus-outline('outline');
       }
+
+      &:hover {
+        background-color: $background-hover;
+      }
+
+      &:active {
+        background-color: $background-active;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--hidden {
@@ -147,15 +155,28 @@
       margin: 0;
       background-color: $layer-accent;
       inline-size: $spacing-09;
+
+      &:hover {
+        background-color: $layer-accent-hover;
+      }
+
+      &:active {
+        background-color: $layer-accent-active;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button svg {
       z-index: 2;
       fill: $icon-primary;
+
+      &:active,
+      &:hover {
+        fill: $icon-primary;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--next {
-      position: absolute;
+      position: relative;
       inset-block: 0 0;
       inset-inline-end: 0;
     }
@@ -187,7 +208,7 @@
     }
 
     .#{$prefix}--tab--overflow-nav-button--previous {
-      position: absolute;
+      position: relative;
       z-index: 1;
       inset-block: 0 0;
       inset-inline-start: 0;