tabs in the header design tweaks + a couple of things more

mui · mnajdova · Mar 31, 2023 · Jan 14, 2023 · Jan 16, 2023 · Jan 16, 2023
commit 8bd1a997013fb4a70b8037f578292e7dc4e3631a
diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
@@ -11,6 +11,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 
 <p class="description">Buttons let users take actions and make choices with a single tap.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
 ## Introduction
@@ -19,8 +21,6 @@ The Unstyled Button component replaces the native HTML `<button>` element, and o
 
 {{"demo": "UnstyledButtonIntroduction.tsx", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md
@@ -11,6 +11,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
 
 <p class="description">Tabs are UI elements for organizing and navigating between groups of related content.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
 ## Introduction
@@ -24,8 +26,6 @@ Tabs are implemented using a collection of related components:
 
 {{"demo": "UnstyledTabsIntroduction.tsx", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Components
 
 ### Usage

diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -608,10 +608,11 @@ export function getThemedComponents(): ThemeOptions {
             fontWeight: 500,
             ...(variant === 'outlined' &&
               color === 'default' && {
-                backgroundColor: 'transparent',
+                backgroundColor: alpha(theme.palette.grey[50], 0.5),
                 color: (theme.vars || theme).palette.grey[900],
                 borderColor: (theme.vars || theme).palette.grey[200],
                 '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.grey[100],
                   color: (theme.vars || theme).palette.grey[900],
                 },
                 ...theme.applyDarkStyles({
@@ -737,6 +738,30 @@ export function getThemedComponents(): ThemeOptions {
         defaultProps: {
           disableTouchRipple: true,
         },
+        styleOverrides: {
+          root: ({ theme }) => [
+            {
+              padding: theme.spacing(1),
+              marginBottom: theme.spacing(1),
+              marginRight: theme.spacing(1),
+              fontWeight: 600,
+              minHeight: 32,
+              minWidth: 0,
+              borderRadius: 12,
+              '&:hover': {
+                background: (theme.vars || theme).palette.grey[50],
+              },
+            },
+            theme.applyDarkStyles({
+              '&:hover': {
+                background: (theme.vars || theme).palette.primaryDark[700],
+              },
+              '&.Mui-selected': {
+                color: (theme.vars || theme).palette.primary[300],
+              },
+            }),
+          ],
+        },
       },
       MuiPaper: {
         styleOverrides: {
@@ -829,7 +854,7 @@ export function getThemedComponents(): ThemeOptions {
       MuiTooltip: {
         styleOverrides: {
           tooltip: {
-            padding: '5px 9px',
+            padding: '6px 12px',
           },
         },
       },

diff --git a/docs/src/modules/components/ComponentLinkHeader.js b/docs/src/modules/components/ComponentLinkHeader.js
@@ -6,7 +6,7 @@ import SketchIcon from 'docs/src/modules/components/SketchIcon';
 import FigmaIcon from 'docs/src/modules/components/FigmaIcon';
 import AdobeXDIcon from 'docs/src/modules/components/AdobeXDIcon';
 import BundleSizeIcon from 'docs/src/modules/components/BundleSizeIcon';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import ChatRounded from '@mui/icons-material/ChatRounded';
 import W3CIcon from 'docs/src/modules/components/W3CIcon';
 import MaterialDesignIcon from 'docs/src/modules/components/MaterialDesignIcon';
 import { styled } from '@mui/material/styles';
@@ -18,10 +18,7 @@ const Root = styled('ul')(({ theme }) => ({
   listStyle: 'none',
   display: 'flex',
   flexWrap: 'wrap',
-  marginBottom: theme.spacing(2),
-  '& li': {
-    margin: theme.spacing(0.5),
-  },
+  gap: 8,
   '& .MuiChip-root .MuiChip-iconSmall': {
     marginLeft: 4,
   },
@@ -58,7 +55,7 @@ export default function ComponentLinkHeader(props) {
             href={`${process.env.SOURCE_CODE_REPO}/labels/${encodeURIComponent(
               headers.githubLabel,
             )}`}
-            icon={<InfoOutlinedIcon />}
+            icon={<ChatRounded color="primary" />}
             data-ga-event-category="ComponentLinkHeader"
             data-ga-event-action="click"
             data-ga-event-label={t('githubLabel')}
@@ -67,44 +64,44 @@ export default function ComponentLinkHeader(props) {
           />
         </li>
       ) : null}
-      {headers.waiAria ? (
-        <li>
+      <li>
+        <Tooltip title={t('bundleSizeTooltip')}>
           <Chip
             clickable
             role={undefined}
             component="a"
             size="small"
             variant="outlined"
             rel="nofollow"
-            href={headers.waiAria}
-            icon={<W3CIcon />}
+            href={`https://bundlephobia.com/package/${packageName}@latest`}
+            icon={<BundleSizeIcon color="primary" />}
             data-ga-event-category="ComponentLinkHeader"
             data-ga-event-action="click"
-            data-ga-event-label="WAI-ARIA"
+            data-ga-event-label={t('bundleSize')}
             data-ga-event-split="0.1"
-            label="WAI-ARIA"
+            label={t('bundleSize')}
           />
-        </li>
-      ) : null}
-      <li>
-        <Tooltip title={t('bundleSizeTooltip')}>
+        </Tooltip>
+      </li>
+      {headers.waiAria ? (
+        <li>
           <Chip
             clickable
             role={undefined}
             component="a"
             size="small"
             variant="outlined"
             rel="nofollow"
-            href={`https://bundlephobia.com/package/${packageName}@latest`}
-            icon={<BundleSizeIcon />}
+            href={headers.waiAria}
+            icon={<W3CIcon color="primary" />}
             data-ga-event-category="ComponentLinkHeader"
             data-ga-event-action="click"
-            data-ga-event-label={t('bundleSize')}
+            data-ga-event-label="WAI-ARIA"
             data-ga-event-split="0.1"
-            label={t('bundleSize')}
+            label="WAI-ARIA"
           />
-        </Tooltip>
-      </li>
+        </li>
+      ) : null}
       {headers.materialDesign ? (
         <li>
           <Chip

diff --git a/docs/src/modules/components/ComponentPageTabs.js b/docs/src/modules/components/ComponentPageTabs.js
@@ -5,6 +5,7 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { alpha } from '@mui/material/styles';
 
 export default function ComponentPageTabs(props) {
   const {
@@ -21,11 +22,17 @@ export default function ComponentPageTabs(props) {
         onChange={(e, value) => setActiveTab(value)}
         sx={{
           position: 'sticky',
-          // to be positioned below the app bar
-          top: 65,
-          mx: -2,
-          backgroundColor: theme => theme.palette.mode === 'dark' ? 'rgba(10, 25, 41, 0.7)' : 'rgba(255,255,255,0.8)',
+          top: 65, // to be positioned below the app bar
+          pt: 1,
+          backgroundColor: (theme) =>
+            theme.palette.mode === 'dark'
+              ? alpha(theme.palette.primaryDark[900], 0.7)
+              : 'rgba(255,255,255,0.8)',
+          backdropFilter: 'blur(8px)',
+          borderBottom: 1,
+          borderColor: 'divider',
           zIndex: 1000,
+          mt: 3,
         }}
       >
         <Tab label="Demos" value="" />

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -69,7 +69,7 @@ const Root = styled('div')(
     '& .description': {
       ...lightTheme.typography.subtitle1,
       fontWeight: 400,
-      margin: '0 0 40px',
+      margin: '0 0 28px',
     },
     '& .component-tabs': {
       margin: '0 0 40px',