diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index f593c252a3df1c..ae02ed72e32070 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/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], diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index 7bf385bf42e5d4..80781fd2724f25 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -247,7 +247,7 @@ export default function ApiPage(props) { `)} language="jsx" /> - +

{componentDescription ? (
diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx index ff98536fdb0917..5f5a076ea250dc 100644 --- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx +++ b/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]})`, diff --git a/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx b/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx index 753c0a5758c565..6c379397e6a41c 100644 --- a/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx +++ b/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; -}; - -// Catch props and forward to ToggleButton -const TooltipToggleButton = React.forwardRef( - ({ title, TooltipProps: tooltipProps, ...props }, ref) => { - return ( - - - - ); - }, -); - 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, - newDisplayOption: ApiDisplayOptions | null, - ) => { - if (newDisplayOption === null) { - return; - } + const [anchorEl, setAnchorEl] = React.useState(null); + const [open, setOpen] = React.useState(false); + + const handleMenuClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + setOpen(true); + }; + + const handleClose = () => { + setAnchorEl(null); + setOpen(false); + }; + + const handleMenuItemClick = (newDisplayOption: ApiDisplayOptions) => { setDisplayOption(newDisplayOption); + handleClose(); }; return ( - - - - - + +

- - - + handleMenuItemClick('table')} + selected={displayOption === 'table'} + data-ga-event-category="layout" + data-ga-event-action={sectionType} + data-ga-event-label="table" + > + + Table + + handleMenuItemClick('expanded')} + selected={displayOption === 'expanded'} + data-ga-event-category="layout" + data-ga-event-action={sectionType} + data-ga-event-label="expanded" + > + + Expanded list + + handleMenuItemClick('collapsed')} + selected={displayOption === 'collapsed'} + data-ga-event-category="layout" + data-ga-event-action={sectionType} + data-ga-event-label="collapsed" + > + + Collapsed list + + + ); } diff --git a/docs/src/modules/components/ComponentPageTabs.js b/docs/src/modules/components/ComponentPageTabs.js index 5e43b1a96a8ef6..8011cb52920376 100644 --- a/docs/src/modules/components/ComponentPageTabs.js +++ b/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) { }, }} > - + {headers.components?.length > 0 && ( - +

- +

{Object.keys(parameters).length > 0 ? (