[docs-infra] Adjust the tabs and layout selection design (mui#41084)

docs/src/modules/brandingTheme.ts

@@ -505,7 +505,7 @@ export function getThemedComponents(): ThemeOptions {
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
                 boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0.5px inset, ${alpha(
                   theme.palette.grey[100],
-                  0.8,
+                  0.5,
                 )} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[50],
@@ -514,10 +514,7 @@ export function getThemedComponents(): ThemeOptions {
                   color: (theme.vars || theme).palette.primaryDark[100],
                   borderColor: alpha(theme.palette.primaryDark[600], 0.5),
                   backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
-                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${alpha(
-                    theme.palette.primaryDark[900],
-                    0.5,
-                  )} 0 -3px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`,
+                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${alpha(theme.palette.primaryDark[900], 0.5)} 0 -2px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`,
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                   },
@@ -790,6 +787,9 @@ export function getThemedComponents(): ThemeOptions {
                 '&:hover, &:focus': {
                   backgroundColor: (theme.vars || theme).palette.grey[50],
                 },
+                '&:focus-visible': {
+                  outline: 'none',
+                },
                 '&.Mui-selected': {
                   fontWeight: 500,
                   color: (theme.vars || theme).palette.primary[600],

docs/src/modules/components/ApiPage.js

@@ -247,7 +247,7 @@ export default function ApiPage(props) {
 `)}
           language="jsx"
         />
-        <span dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
+        <p dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
         {componentDescription ? (
           <React.Fragment>
             <br />

docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx

@@ -56,8 +56,8 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
       p: { marginBottom: theme.spacing(1.5) },
     },
     '& .MuiApi-item-note': {
-      fontSize: 11,
-      marginLeft: 6,
+      fontSize: 12,
+      marginLeft: 2,
       letterSpacing: '1px',
       textTransform: 'uppercase',
       color: `var(--muidocs-palette-success-800, ${lightTheme.palette.success[800]})`,

docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import ToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton';
-import CalendarViewDayRoundedIcon from '@mui/icons-material/CalendarViewDayRounded';
-import TableChartRoundedIcon from '@mui/icons-material/TableChartRounded';
-import ReorderRoundedIcon from '@mui/icons-material/ReorderRounded';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import CheckIcon from '@mui/icons-material/Check';
+import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 
 export type ApiDisplayOptions = 'collapsed' | 'expanded' | 'table';
@@ -71,26 +71,6 @@ export function useApiPageOption(
   return [option, updateOption];
 }
 
-// Fix Toggle buton highlight (taken from https://github.com/mui/material-ui/issues/18091)
-type TooltipToggleButtonProps = ToggleButtonProps & {
-  /**
-   * The title passed to the Tooltip
-   */
-  title: string;
-  TooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
-};
-
-// Catch props and forward to ToggleButton
-const TooltipToggleButton = React.forwardRef<HTMLButtonElement, TooltipToggleButtonProps>(
-  ({ title, TooltipProps: tooltipProps, ...props }, ref) => {
-    return (
-      <Tooltip {...tooltipProps} title={title}>
-        <ToggleButton ref={ref} {...props} />
-      </Tooltip>
-    );
-  },
-);
-
 interface ToggleDisplayOptionProps {
   displayOption: ApiDisplayOptions;
   setDisplayOption: (newValue: ApiDisplayOptions) => void;
@@ -103,72 +83,90 @@ interface ToggleDisplayOptionProps {
 export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
   const { displayOption, setDisplayOption, sectionType } = props;
 
-  const handleAlignment = (
-    event: React.MouseEvent<HTMLElement>,
-    newDisplayOption: ApiDisplayOptions | null,
-  ) => {
-    if (newDisplayOption === null) {
-      return;
-    }
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+  const [open, setOpen] = React.useState(false);
+
+  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+  };
+
+  const handleMenuItemClick = (newDisplayOption: ApiDisplayOptions) => {
     setDisplayOption(newDisplayOption);
+    handleClose();
   };
 
   return (
-    <ToggleButtonGroup
-      size="small"
-      value={displayOption}
-      exclusive
-      onChange={handleAlignment}
-      aria-label="API display option"
-      sx={{
-        '& .MuiSvgIcon-root': {
-          height: '18px',
-          width: '18px',
-        },
-        '&.MuiToggleButtonGroup-root .MuiToggleButton-root': {
-          padding: '4px 6px',
-          borderRadius: '6px',
-          '&.MuiToggleButtonGroup-grouped:not(:last-of-type)': {
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-          },
-          '&.MuiToggleButtonGroup-grouped:not(:first-of-type)': {
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-          },
-        },
-      }}
-    >
-      <TooltipToggleButton
-        value="collapsed"
-        aria-label="colapsed list"
-        title="Collapse list view"
-        data-ga-event-category="layout"
-        data-ga-event-action={sectionType}
-        data-ga-event-label="collapsed"
-      >
-        <ReorderRoundedIcon size="small" />
-      </TooltipToggleButton>
-      <TooltipToggleButton
-        value="expanded"
-        aria-label="expanded list"
-        title="Expand list view"
-        data-ga-event-category="layout"
-        data-ga-event-action={sectionType}
-        data-ga-event-label="expanded"
+    <React.Fragment>
+      <Button
+        size="small"
+        variant="outlined"
+        color="secondary"
+        id="view-switching-button"
+        aria-controls={open ? 'view-switching-button' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleMenuClick}
+        endIcon={<ArrowDropDownRoundedIcon />}
+        sx={{ height: '1.875rem', p: '6px 4px 6px 8px', textTransform: 'capitalize' }}
       >
-        <CalendarViewDayRoundedIcon />
-      </TooltipToggleButton>
-      <TooltipToggleButton
-        value="table"
-        aria-label="table"
-        title="Table view"
-        data-ga-event-category="layout"
-        data-ga-event-action={sectionType}
-        data-ga-event-label="table"
+        <Box component="span" sx={{ fontWeight: 'medium', mr: 0.5 }}>
+          View:
+        </Box>
+        {displayOption}
+      </Button>
+      <Menu
+        id="view-options-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        sx={{ mt: 1, '.MuiMenuItem-root': { pl: 1 } }}
       >
-        <TableChartRoundedIcon />
-      </TooltipToggleButton>
-    </ToggleButtonGroup>
+        <MenuItem
+          value="table"
+          onClick={() => handleMenuItemClick('table')}
+          selected={displayOption === 'table'}
+          data-ga-event-category="layout"
+          data-ga-event-action={sectionType}
+          data-ga-event-label="table"
+        >
+          <CheckIcon
+            sx={{ fontSize: '0.85rem', mr: 1, opacity: displayOption === 'table' ? 1 : 0 }}
+          />
+          Table
+        </MenuItem>
+        <MenuItem
+          value="expanded"
+          onClick={() => handleMenuItemClick('expanded')}
+          selected={displayOption === 'expanded'}
+          data-ga-event-category="layout"
+          data-ga-event-action={sectionType}
+          data-ga-event-label="expanded"
+        >
+          <CheckIcon
+            sx={{ fontSize: '0.85rem', mr: 1, opacity: displayOption === 'expanded' ? 1 : 0 }}
+          />
+          Expanded list
+        </MenuItem>
+        <MenuItem
+          value="collapsed"
+          onClick={() => handleMenuItemClick('collapsed')}
+          selected={displayOption === 'collapsed'}
+          data-ga-event-category="layout"
+          data-ga-event-action={sectionType}
+          data-ga-event-label="collapsed"
+        >
+          <CheckIcon
+            sx={{ fontSize: '0.85rem', mr: 1, opacity: displayOption === 'collapsed' ? 1 : 0 }}
+          />
+          Collapsed list
+        </MenuItem>
+      </Menu>
+    </React.Fragment>
   );
 }

docs/src/modules/components/ComponentPageTabs.js

@@ -5,24 +5,27 @@ import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import Tab, { tabClasses } from '@mui/material/Tab';
-import { useTranslate } from '@mui/docs/i18n';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 import { Link } from '@mui/docs/Link';
 
 export const HEIGHT = 50;
 
 const StyledTab = styled(Tab)(({ theme }) => ({
-  padding: theme.spacing(1),
-  marginBottom: theme.spacing(1),
-  marginRight: theme.spacing(1),
-  fontWeight: 600,
-  minHeight: 32,
+  padding: theme.spacing(0.5),
+  border: '1px solid',
+  borderColor: 'transparent',
+  fontWeight: theme.typography.fontWeightSemiBold,
+  minHeight: 30,
   minWidth: 0,
-  borderRadius: '12px',
+  borderRadius: '8px',
   '&:hover': {
     background: (theme.vars || theme).palette.grey[50],
+    borderColor: (theme.vars || theme).palette.divider,
+    color: (theme.vars || theme).palette.text.primary,
   },
   ...theme.applyDarkStyles({
     '&:hover': {
+      borderColor: (theme.vars || theme).palette.divider,
       background: (theme.vars || theme).palette.primaryDark[700],
     },
     '&.Mui-selected': {
@@ -54,21 +57,16 @@ export default function ComponentPageTabs(props) {
         sx={{
           position: 'sticky',
           top: 65, // to be positioned below the app bar
-          mt: 1,
-          pt: 1,
-          mx: {
-            xs: -2,
-            sm: 0,
-          },
-          px: {
-            xs: 2,
-            sm: 0,
-          },
-          backgroundColor: (theme) =>
-            theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : 'rgba(255,255,255)',
+          mt: 2,
+          mx: -1,
+          backgroundColor: 'background.default',
           borderBottom: 1,
           borderColor: 'divider',
           zIndex: 1000,
+          [`& .${tabsClasses.flexContainer}`]: {
+            p: 1,
+            gap: 1,
+          },
           [`& .${tabsClasses.indicator}`]: {
             transition: 'none',
           },
@@ -82,20 +80,11 @@ export default function ComponentPageTabs(props) {
           },
         }}
       >
-        <StyledTab
-          component={Link}
-          shallow
-          scroll
-          href={demosHref}
-          label={t('api-docs.demos')}
-          value=""
-        />
+        <StyledTab component={Link} href={demosHref} label={t('api-docs.demos')} value="" />
         {headers.components?.length > 0 && (
           <StyledTab
             className="skip-algolia-crawler" // For more details, see https://github.com/mui/material-ui/pull/37539.
             component={Link}
-            shallow
-            scroll
             href={componentsHref}
             label={t('api-docs.componentsApi')}
             value="components-api"
@@ -105,8 +94,6 @@ export default function ComponentPageTabs(props) {
           <StyledTab
             className="skip-algolia-crawler" // For more details, see https://github.com/mui/material-ui/pull/37539.
             component={Link}
-            shallow
-            scroll
             href={hooksHref}
             label={t('api-docs.hooksApi')}
             value="hooks-api"

docs/src/modules/components/ComponentsApiContent.js

@@ -148,7 +148,7 @@ export default function ComponentsApiContent(props) {
           <Heading hash={componentNameKebabCase} text={`${componentName} API`} />
           <Heading text="import" hash={`${componentNameKebabCase}-import`} level="h3" />
           <HighlightedCode code={importInstructions} language="jsx" />
-          <span dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
+          <p dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
           <PropertiesSection
             properties={componentProps}
             propertiesDescriptions={propDescriptions}

docs/src/modules/components/HooksApiContent.js

@@ -72,7 +72,7 @@ export default function HooksApiContent(props) {
           <Heading hash={hookNameKebabCase} text={`${hookName} API`} />
           <Heading text="import" hash={`${hookNameKebabCase}-import`} level="h3" />
           <HighlightedCode code={importInstructions} language="jsx" />
-          <span dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
+          <p dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
           {Object.keys(parameters).length > 0 ? (
             <PropertiesSection
               properties={parameters}

packages/mui-docs/src/translations/translations.json

@@ -15,7 +15,7 @@
     "defaultComponent": "Default component",
     "defaultValue": "Default value",
     "defaultHTMLTag": "Default HTML tag",
-    "demos": "Component demos",
+    "demos": "Demos",
     "deprecated": "Deprecated",
     "description": "Description",
     "globalClass": "Global class",