[base-ui][docs] Improve Next.js Link docs

My goal here is to fix the redirection that "https://nextjs.org/learn/basics/navigate-between-pages/link-component" is. You can find this in https://app.ahrefs.com/site-audit/3524616/91/data-explorer?columns=pageRating%2Curl%2Ctraffic%2ChttpCode%2CcontentType%2Cdepth%2Credirect%2CincomingAllLinks&filterId=b3b75b6257a370fcf9f1f73befb5deb5&issueId=c64d8847-d0f4-11e7-8ed1-001e67ed4656&sorting=-pageRating. Note that we are working to move out of Google Groups to a system that allows a lot more control. This will allow me to delegate the SEO crawl ownership. IMHO these are high priorities. I have always made everything come after. The automation is described in https://www.notion.so/mui-org/Scale-collaborative-inbox-in-Google-Groups-f6f3d7a8a6bd4c24be1fc8b13a8f33f6?pvs=4 the weekly ahrefs crawls for MUI Core will land on the replacement of [email protected] and assigned to whoever wants to own this duty. --- Notes on things that I can see while I was fixing the URL reference: 1. Updating the CSS and Tailwind CSS should be automated, I think it's a waste of time to manually maintain this. It sounds much faster to automate it. So I think that automate this is a LOT more important than adding more Tailwind CSS demos. For example, here, I fixed a border inconsistency issue. 2. We can't use :disabled. Developers might render a div, .Mui-disabled seems to be the solution. 3. I noticed 2. because the disable button was flashing. And it's not like it flashes because it's a SSR hydration. It consistently flashes on each new mount. I don't think this is possible for production, the DOM output needs to be correct from the first sync. I think we must change the API. 4. The duplication of the introduction demo is not great. I think that fixing this duplication is a LOT more important than improving the demos of the Base UI docs. The solution can be to rely on demo tabs. This will help to have higher quality demos. Right now, I think that it's completly demotivating for the community (e.g. how I felt when fixing this) to try to fix them. 5. There is a strange `useIsDarkMode` toggle in the Tailwind CSS demo. This one doesn't make sense to me. I don't see why we are not relying on the default configuration for dark mode, have it customized for the docs and configured for CodeSandbox/StackBlitz exports. 6. The code export for CodeSandbox/StackBlitz doesn't work with Tailwind CSS. 7. I find it weird to have buttonClasses.active. It doesn't seem to be superior to :active in any way. An API to remove to keep things simple? I noticed this while I added a scale(0.99) to match the box shadow removal depth effect. I find it so satisfiying 🤤, so good. 8. We still have a good number of `legacyBehavior` prop use for Next.js, even ones that leaks to developers public API. I think this should be a priority to fix, we are laggying behind.
mui · Nov 11, 2023 · 552a74c · 552a74c
1 parent 94b4c4b
commit 552a74c
Show file tree

Hide file tree

Showing 32 changed files with 175 additions and 192 deletions.
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -87,7 +87,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     outline-offset: 2px;
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     & .bg {
       fill: var(--active-color);
       transition: fill 150ms ease-out;

diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -88,7 +88,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     outline-offset: 2px;
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     & .bg {
       fill: var(--active-color);
       transition: fill 150ms ease-out;

diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
@@ -7,8 +7,8 @@ export default function UnstyledButtonsIntroduction() {
   return (
     <React.Fragment>
       <Stack spacing={2} direction="row">
-        <Button className="CustomButton">Button</Button>
-        <Button className="CustomButton" disabled>
+        <Button className="IntroductionButton">Button</Button>
+        <Button className="IntroductionButton" disabled>
           Disabled
         </Button>
       </Stack>
@@ -54,7 +54,7 @@ function Styles() {
 
   return (
     <style>{`
-  .CustomButton {
+  .IntroductionButton {
     font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
@@ -70,25 +70,25 @@ function Styles() {
       isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
     }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
   }
-  .CustomButton:hover {
+  .IntroductionButton:hover {
     background-color: ${cyan[600]};
   }
-  .CustomButton:active {
+  .IntroductionButton:active {
     background-color: ${cyan[700]};
+    box-shadow: none;
+    transform: scale(0.99);
   }
-  .CustomButton:focus-visible {
+  .IntroductionButton:focus-visible {
     box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
     outline: none;
   }
-  .CustomButton:disabled {
+  .IntroductionButton.Mui-disabled {
     background-color: ${isDarkMode ? grey[700] : grey[200]};
     color: ${isDarkMode ? grey[200] : grey[700]};
     border: 0;
-    cursor: not-allowed;
+    cursor: default;
     box-shadow: none;
-  }
-  .CustomButton:disabled:hover {
-    background-color: ${isDarkMode ? grey[700] : grey[200]};
+    transform: scale(1);
   }
   `}</style>
   );

diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
@@ -7,8 +7,8 @@ export default function UnstyledButtonsIntroduction() {
   return (
     <React.Fragment>
       <Stack spacing={2} direction="row">
-        <Button className="CustomButton">Button</Button>
-        <Button className="CustomButton" disabled>
+        <Button className="IntroductionButton">Button</Button>
+        <Button className="IntroductionButton" disabled>
           Disabled
         </Button>
       </Stack>
@@ -54,7 +54,7 @@ function Styles() {
 
   return (
     <style>{`
-  .CustomButton {
+  .IntroductionButton {
     font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
@@ -70,25 +70,25 @@ function Styles() {
       isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
     }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
   }
-  .CustomButton:hover {
+  .IntroductionButton:hover {
     background-color: ${cyan[600]};
   }
-  .CustomButton:active {
+  .IntroductionButton:active {
     background-color: ${cyan[700]};
+    box-shadow: none;
+    transform: scale(0.99);
   }
-  .CustomButton:focus-visible {
+  .IntroductionButton:focus-visible {
     box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
     outline: none;
   }
-  .CustomButton:disabled {
+  .IntroductionButton.Mui-disabled {
     background-color: ${isDarkMode ? grey[700] : grey[200]};
     color: ${isDarkMode ? grey[200] : grey[700]};
     border: 0;
-    cursor: not-allowed;
+    cursor: default;
     box-shadow: none;
-  }
-  .CustomButton:disabled:hover {
-    background-color: ${isDarkMode ? grey[700] : grey[200]};
+    transform: scale(1);
   }
   `}</style>
   );

diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx.preview
@@ -1,7 +1,7 @@
 <React.Fragment>
   <Stack spacing={2} direction="row">
-    <Button className="CustomButton">Button</Button>
-    <Button className="CustomButton" disabled>
+    <Button className="IntroductionButton">Button</Button>
+    <Button className="IntroductionButton" disabled>
       Disabled
     </Button>
   </Stack>

diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
@@ -58,23 +58,21 @@ const Button = styled(BaseButton)(
   &:active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &:focus-visible {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.Mui-disabled {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
@@ -58,23 +58,21 @@ const Button = styled(BaseButton)(
   &:active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &:focus-visible {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.Mui-disabled {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    border: 0;
+    cursor: default;
     box-shadow: none;
-
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
@@ -30,7 +30,7 @@ const CustomButton = React.forwardRef((props, ref) => {
     <BaseButton
       ref={ref}
       className={clsx(
-        'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
+        'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none active:scale-[0.99] focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none',
         className,
       )}
       {...other}

diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
@@ -30,7 +30,7 @@ const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <BaseButton
         ref={ref}
         className={clsx(
-          'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
+          'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none active:scale-[0.99] focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none',
           className,
         )}
         {...other}

diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
@@ -6,9 +6,9 @@ import Stack from '@mui/material/Stack';
 export default function UnstyledButtonsDisabledFocus() {
   return (
     <Stack spacing={2}>
-      <Button disabled>focusableWhenDisabled = false</Button>
+      <Button disabled>{'focusableWhenDisabled = false'}</Button>
       <Button disabled focusableWhenDisabled>
-        focusableWhenDisabled = true
+        {'focusableWhenDisabled = true'}
       </Button>
     </Stack>
   );
@@ -57,9 +57,10 @@ const Button = styled(BaseButton)(
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -69,13 +70,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 0;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
@@ -6,9 +6,11 @@ import Stack from '@mui/material/Stack';
 export default function UnstyledButtonsDisabledFocus() {
   return (
     <Stack spacing={2}>
-      <Button disabled>focusableWhenDisabled = false</Button>
+      <Button disabled>
+        {'focusableWhenDisabled = false'}
+      </Button>
       <Button disabled focusableWhenDisabled>
-        focusableWhenDisabled = true
+        {'focusableWhenDisabled = true'}
       </Button>
     </Stack>
   );
@@ -57,9 +59,10 @@ const Button = styled(BaseButton)(
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -69,13 +72,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 0;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview
@@ -1,4 +1,6 @@
-<Button disabled>focusableWhenDisabled = false</Button>
+<Button disabled>
+  {'focusableWhenDisabled = false'}
+</Button>
 <Button disabled focusableWhenDisabled>
-  focusableWhenDisabled = true
+  {'focusableWhenDisabled = true'}
 </Button>
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
@@ -7,10 +7,10 @@ export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
       <Button slots={{ root: 'span' }} disabled>
-        focusableWhenDisabled = false
+        {'focusableWhenDisabled = false'}
       </Button>
       <Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
-        focusableWhenDisabled = true
+        {'focusableWhenDisabled = true'}
       </Button>
     </Stack>
   );
@@ -59,9 +59,10 @@ const Button = styled(BaseButton)(
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -71,13 +72,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 0;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -12,10 +12,10 @@ export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
       <Button slots={{ root: 'span' }} disabled>
-        focusableWhenDisabled = false
+        {'focusableWhenDisabled = false'}
       </Button>
       <Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
-        focusableWhenDisabled = true
+        {'focusableWhenDisabled = true'}
       </Button>
     </Stack>
   );
@@ -64,9 +64,10 @@ const Button = styled(BaseButton)(
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
   &.${buttonClasses.focusVisible} {
@@ -76,13 +77,11 @@ const Button = styled(BaseButton)(
 
   &.${buttonClasses.disabled} {
     background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    cursor: not-allowed;
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 0;
+    cursor: default;
     box-shadow: none;
-    &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    }
+    transform: scale(1);
   }
 `,
 ) as PolymorphicComponent<ButtonTypeMap>;