From d17e26ab30231576c7d82f5a76b6a111fcc5ec6e Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Sat, 15 Jun 2024 11:21:14 +0800
Subject: [PATCH] style(console): update tab item style in readme docs (#6013)

---
 .../src/mdx-components/Tabs/index.module.scss | 32 +++++++++++++++----
 .../console/src/mdx-components/Tabs/index.tsx |  7 +++-
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/console/src/mdx-components/Tabs/index.module.scss b/packages/console/src/mdx-components/Tabs/index.module.scss
index 294c202a0..1469b6116 100644
--- a/packages/console/src/mdx-components/Tabs/index.module.scss
+++ b/packages/console/src/mdx-components/Tabs/index.module.scss
@@ -4,28 +4,46 @@
   width: 100%;
   margin-top: _.unit(3);
 
-  ul {
+  // This 'tabItemList' class name is required or the styles below will be overridden by the default styles in mdx guide pages.
+  ul.tabItemList {
     border-bottom: 1px solid var(--color-divider);
     display: flex;
     margin: _.unit(1) 0;
     padding: 0;
 
     li {
+      position: relative;
       list-style: none;
-      margin-right: _.unit(6);
-      padding-bottom: _.unit(1);
-      font: var(--font-label-2);
-      color: var(--color-text-secondary);
       margin-block-end: unset;
       padding-inline-start: unset;
+      margin: 0 _.unit(6) _.unit(1) 0;
+      padding: _.unit(0.5) _.unit(1.5);
+      font: var(--font-label-2);
+      color: var(--color-text-secondary);
       cursor: pointer;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: var(--color-hover-variant);
+      }
     }
 
     li[aria-selected='true'] {
       color: var(--color-text-link);
-      border-bottom: 2px solid var(--color-text-link);
-      margin-bottom: -1px;
       outline: none;
+
+      // Selected underline
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        // Underline position = item's margin-bottom (_.unit(1)) + tab item list's border-bottom width (1px)
+        bottom: -5px;
+        left: 0;
+        right: 0;
+        border-top: 2px solid var(--color-text-link);
+        border-radius: 8px 8px 0 0;
+      }
     }
   }
 
diff --git a/packages/console/src/mdx-components/Tabs/index.tsx b/packages/console/src/mdx-components/Tabs/index.tsx
index 09188631a..442944447 100644
--- a/packages/console/src/mdx-components/Tabs/index.tsx
+++ b/packages/console/src/mdx-components/Tabs/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import type { Nullable } from '@silverhand/essentials';
+import classNames from 'classnames';
 import { useState, isValidElement, type ReactElement, cloneElement, useRef, Children } from 'react';
 
 import type { Props as TabItemProps } from '../TabItem';
@@ -72,7 +73,11 @@ function Tabs({ className, children }: Props): JSX.Element {
 
   return (
     <div className={styles.container}>
-      <ul role="tablist" aria-orientation="horizontal" className={className}>
+      <ul
+        role="tablist"
+        aria-orientation="horizontal"
+        className={classNames(styles.tabItemList, className)}
+      >
         {values.map(({ value, label }, index) => (
           <li
             key={value}