[base-ui][docs] Improve Next.js Link docs (#39838)

mui · Nov 21, 2023 · 3942945 · 3942945
1 parent b7fea89
commit 3942945
Show file tree

Hide file tree

Showing 40 changed files with 178 additions and 971 deletions.
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;
@@ -66,29 +66,29 @@ function Styles() {
     transition: all 150ms ease;
     cursor: pointer;
     border: 1px solid ${cyan[500]};
-    box-shadow: 0 2px 4px ${
-      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+    box-shadow: 0 2px 1px ${
+      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
     }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
   }
-  .CustomButton:hover {
+  .IntroductionButton:hover {
     background-color: ${cyan[600]};
   }
-  .CustomButton:active {
+  .IntroductionButton.Mui-active {
     background-color: ${cyan[700]};
+    box-shadow: none;
+    transform: scale(0.99);
   }
-  .CustomButton:focus-visible {
+  .IntroductionButton.Mui-focusVisible {
     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;
@@ -66,29 +66,29 @@ function Styles() {
     transition: all 150ms ease;
     cursor: pointer;
     border: 1px solid ${cyan[500]};
-    box-shadow: 0 2px 4px ${
-      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+    box-shadow: 0 2px 1px ${
+      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
     }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
   }
-  .CustomButton:hover {
+  .IntroductionButton:hover {
     background-color: ${cyan[600]};
   }
-  .CustomButton:active {
+  .IntroductionButton.Mui-active {
     background-color: ${cyan[700]};
+    box-shadow: none;
+    transform: scale(0.99);
   }
-  .CustomButton:focus-visible {
+  .IntroductionButton.Mui-focusVisible {
     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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
@@ -47,34 +47,32 @@ const Button = styled(BaseButton)(
   transition: all 150ms ease;
   cursor: pointer;
   border: 1px solid ${blue[500]};
-  box-shadow: 0 2px 4px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)'
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
   }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &:active {
+  &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
-  &:focus-visible {
+  &.${buttonClasses.focusVisible} {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.${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;
+    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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton } from '@mui/base/Button';
+import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
@@ -47,34 +47,32 @@ const Button = styled(BaseButton)(
   transition: all 150ms ease;
   cursor: pointer;
   border: 1px solid ${blue[500]};
-  box-shadow: 0 2px 4px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)'
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
   }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &:active {
+  &.${buttonClasses.active} {
     background-color: ${blue[700]};
     box-shadow: none;
+    transform: scale(0.99);
   }
 
-  &:focus-visible {
+  &.${buttonClasses.focusVisible} {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &:disabled {
+  &.${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;
+    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>
   );
@@ -60,6 +60,7 @@ const Button = styled(BaseButton)(
   &.${buttonClasses.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,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>
   );
@@ -60,6 +60,7 @@ const Button = styled(BaseButton)(
   &.${buttonClasses.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.preview b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview
@@ -1,4 +1,4 @@
-<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>
   );
@@ -62,6 +62,7 @@ const Button = styled(BaseButton)(
   &.${buttonClasses.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);
   }
 `,
 );