add refinements based on Colm's feedback

mui · May 10, 2024 · 0a06ef2 · 0a06ef2
1 parent 566ae95
commit 0a06ef2
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 34 deletions.
diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -43,7 +43,7 @@ export default function BrandingThemeTest() {
             <Button variant="outlined" size="small" color="secondary">
               Outlined secondary
             </Button>
-            <Button variant="text" size="small" color="info">
+            <Button variant="text" size="small">
               This button
             </Button>
             <IconButton color="primary">

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -111,6 +111,7 @@ const StyledAppBar = styled(AppBar, {
         width: 'calc(100% - var(--MuiDocs-navDrawer-width))',
       },
     }),
+    justifyContent: 'center',
     boxShadow: 'none',
     backdropFilter: 'blur(8px)',
     borderBottom: '1px solid',
@@ -124,10 +125,6 @@ const StyledAppBar = styled(AppBar, {
   };
 });
 
-const GrowingDiv = styled('div')({
-  flex: '1 1 auto',
-});
-
 const NavIconButton = styled(IconButton, {
   shouldForwardProp: (prop) => prop !== 'disablePermanent',
 })(({ disablePermanent, theme }) => {
@@ -153,7 +150,7 @@ const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) =>
   };
 });
 
-export const HEIGHT = 59;
+export const HEIGHT = 57;
 
 export default function AppFrame(props) {
   const { children, disableDrawer = false, className, BannerComponent = AppFrameBanner } = props;
@@ -186,7 +183,7 @@ export default function AppFrame(props) {
             },
           }}
         />
-        <Stack direction="row" alignItems="center" sx={{ position: 'relative' }}>
+        <Stack direction="row" alignItems="center" sx={{ position: 'relative', width: '100%' }}>
           <NavIconButton
             edge="start"
             color="primary"
@@ -207,8 +204,7 @@ export default function AppFrame(props) {
               <SvgMuiLogomark width={30} />
             </Box>
           </NextLink>
-          <GrowingDiv />
-          <Stack direction="row" spacing={1} useFlexGap>
+          <Stack direction="row" spacing={1} useFlexGap sx={{ ml: 'auto' }}>
             <BannerComponent />
             <DeferredAppSearch />
             <Tooltip title={t('appFrame.github')} enterDelay={300}>

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
@@ -45,7 +45,8 @@ function transitionTheme(theme) {
 const savedScrollTop = {};
 
 const customButtonStyles = (theme) => ({
-  px: 1,
+  pl: 1,
+  pr: '6px',
   height: 26,
   fontSize: theme.typography.pxToRem(13),
   fontWeight: theme.typography.fontWeightMedium,
@@ -75,7 +76,6 @@ function ProductDrawerButton(props) {
   return (
     <React.Fragment>
       <Button
-        color="primary"
         size="small"
         id="mui-product-selector"
         aria-haspopup="true"
@@ -331,7 +331,8 @@ export default function AppNavDrawer(props) {
       return (
         <React.Fragment>
           <Button
-            color="primary"
+            variant="text"
+            color="secondary"
             size="small"
             id="mui-version-selector"
             onClick={(event) => {
@@ -355,7 +356,7 @@ export default function AppNavDrawer(props) {
             {versions.map((item) => {
               if (item.text === 'View all versions') {
                 return [
-                  <Divider key="divider" />,
+                  <Divider key="divider" sx={{ mx: -1 }} />,
                   <MenuItem key="all-versions" component="a" href={item.href} onClick={onClose}>
                     {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */}
                     {`View all versions`}

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
@@ -32,10 +32,11 @@ const SearchButton = styled('button')(({ theme }) => [
   {
     minHeight: 32,
     minWidth: 32,
+    margin: 0,
+    paddingLeft: theme.spacing(1),
     display: 'flex',
     alignItems: 'center',
-    margin: 0,
-    paddingLeft: theme.spacing(0.6),
+    gap: '6px',
     [theme.breakpoints.only('xs')]: {
       backgroundColor: 'transparent',
       padding: 0,
@@ -56,7 +57,7 @@ const SearchButton = styled('button')(({ theme }) => [
     transitionDuration: '150ms',
     boxShadow: `hsl(200, 0%, 100%) 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
     '&:hover': {
-      background: (theme.vars || theme).palette.grey[100],
+      background: alpha(theme.palette.grey[100], 0.5),
       borderColor: (theme.vars || theme).palette.grey[300],
     },
     '&:focus-visible': {
@@ -76,12 +77,14 @@ const SearchButton = styled('button')(({ theme }) => [
 ]);
 
 const SearchLabel = styled('span')(({ theme }) => ({
-  marginLeft: theme.spacing(1),
   marginRight: 'auto',
+  marginBottom: '1px', // optical alignment
+  color: (theme.vars || theme).palette.text.tertiary,
 }));
 
-const Shortcut = styled('div')(({ theme }) => {
+const Shortcut = styled('kbd')(({ theme }) => {
   return {
+    all: 'unset',
     fontSize: theme.typography.pxToRem(12),
     fontWeight: 'bold',
     lineHeight: '19px',
@@ -426,15 +429,7 @@ export default function AppSearch(props) {
         aria-labelledby="app-search-label"
         {...props}
       >
-        <SearchIcon
-          fontSize="small"
-          sx={(theme) => ({
-            color: 'primary.500',
-            ...theme.applyDarkStyles({
-              color: 'primary.300',
-            }),
-          })}
-        />
+        <SearchIcon color="primary" sx={{ fontSize: '1.125rem' }} />
         <SearchLabel id="app-search-label">{t('searchButton')}</SearchLabel>
         <Shortcut aria-hidden="true">
           {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}

diff --git a/docs/src/modules/components/ComponentPageTabs.js b/docs/src/modules/components/ComponentPageTabs.js
@@ -56,7 +56,7 @@ export default function ComponentPageTabs(props) {
         value={activeTab}
         sx={{
           position: 'sticky',
-          top: 59, // to be positioned below the app bar
+          top: 57, // to be positioned below the app bar
           mt: 2,
           mx: { xs: -2, sm: -1 },
           backgroundColor: 'background.default',

diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -559,12 +559,31 @@ export function getThemedComponents(): ThemeOptions {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 },
               }),
-            ...(ownerState.variant === 'text' && {
-              color: (theme.vars || theme).palette.primary[600],
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300],
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'secondary' && {
+                color: (theme.vars || theme).palette.text.secondary,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.grey[50],
+                },
+                '&:active': {
+                  backgroundColor: (theme.vars || theme).palette.grey[200],
+                },
+                ...theme.applyDarkStyles({
+                  '&:hover': {
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                  },
+                  '&:active': {
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                  },
+                }),
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: (theme.vars || theme).palette.primary[600],
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primary[300],
+                }),
               }),
-            }),
           }),
         },
         variants: [
@@ -775,15 +794,18 @@ export function getThemedComponents(): ThemeOptions {
         styleOverrides: {
           paper: ({ theme }) => [
             {
+              padding: '6px',
               minWidth: 160,
               color: (theme.vars || theme).palette.text.secondary,
               backgroundImage: 'none',
               border: '1px solid',
               backgroundColor: (theme.vars || theme).palette.background.paper,
               borderColor: (theme.vars || theme).palette.grey[200],
               '& .MuiMenuItem-root': {
+                padding: '6px 12px',
+                borderRadius: '6px',
                 fontSize: theme.typography.pxToRem(14),
-                fontWeight: 500,
+                fontWeight: theme.typography.fontWeightMedium,
                 '&:hover, &:focus': {
                   backgroundColor: (theme.vars || theme).palette.grey[100],
                   color: (theme.vars || theme).palette.text.primary,