[Joy] Uplift introduction demos & make consistent with Base (mui#34316)

Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>
jesrodri · Dec 6, 2022 · 63643b4 · 63643b4
1 parent 1c6fae4
commit 63643b4
Show file tree

Hide file tree

Showing 78 changed files with 291 additions and 177 deletions.
diff --git a/docs/data/joy/components/alert/alert.md b/docs/data/joy/components/alert/alert.md
@@ -18,7 +18,7 @@ Alerts should not be confused with alert _dialogs_ ([ARIA](https://www.w3.org/WA
 Use the Joy UI [Modal](https://mui.com/joy-ui/react-modal/) if you need the behavior of a dialog.
 :::
 
-{{"demo": "AlertUsage.js", "hideToolbar": true}}
+{{"demo": "AlertUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

diff --git a/docs/data/joy/components/autocomplete/CustomTags.js b/docs/data/joy/components/autocomplete/CustomTags.js
@@ -9,7 +9,6 @@ export default function CustomTags() {
       id="tags-default"
       multiple
       placeholder="Favorites"
-      variant="soft"
       options={top100Films}
       getOptionLabel={(option) => option.title}
       defaultValue={[top100Films[13]]}

diff --git a/docs/data/joy/components/autocomplete/CustomTags.tsx b/docs/data/joy/components/autocomplete/CustomTags.tsx
@@ -9,7 +9,6 @@ export default function CustomTags() {
       id="tags-default"
       multiple
       placeholder="Favorites"
-      variant="soft"
       options={top100Films}
       getOptionLabel={(option) => option.title}
       defaultValue={[top100Films[13]]}

diff --git a/docs/data/joy/components/autocomplete/Playground.js b/docs/data/joy/components/autocomplete/Playground.js
@@ -27,12 +27,14 @@ export default function Playground() {
     <Box>
       <Box
         sx={{
-          pt: 2,
-          pb: 1,
-          bgcolor: 'background.surface',
+          mt: 3,
+          pt: 4,
           position: 'sticky',
           top: 'var(--MuiDocs-header-height)',
           zIndex: 2,
+          border: '1px solid rgba(62, 80, 96, 0.3)',
+          borderRadius: 'xs',
+          background: 'rgba(0,30,60, 0.95)',
         }}
       >
         <FormControl sx={{ width: 300, mx: 'auto' }}>
@@ -43,7 +45,7 @@ export default function Playground() {
             {...flags.reduce((prev, current) => ({ ...prev, [current]: true }), {})}
           />
         </FormControl>
-        <Divider sx={{ mt: 3, mb: 2 }} />
+        <Divider sx={{ mt: 4, mb: 2 }} />
         <Box sx={{ display: 'flex', alignItems: 'baseline' }}>
           <Typography
             id="flags-playground"
@@ -52,6 +54,7 @@ export default function Playground() {
               textTransform: 'uppercase',
               fontWeight: 'lg',
               letterSpacing: 'md',
+              px: 2,
             }}
           >
             Flags {flags.length ? `(${flags.length})` : ''}
@@ -68,6 +71,7 @@ export default function Playground() {
             </Link>
           )}
         </Box>
+        <Divider sx={{ my: 2 }} />
       </Box>
       <Box sx={{ minWidth: 0, flexBasis: 300, flexGrow: 1 }}>
         <List

diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md
@@ -12,7 +12,7 @@ githubLabel: 'component: avatar'
 
 The Avatar component can be used to display graphical information about a user in places such as menus, tables, and chats.
 
-{{"demo": "AvatarUsage.js", "hideToolbar": true}}
+{{"demo": "AvatarUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md
@@ -13,7 +13,7 @@ unstyled: /base/react-badge/
 
 The badge component is most frequently used to signal status (online, offline, busy, etc) and whether there's notifications or not.
 
-{{"demo": "BadgeUsage.js", "hideToolbar": true}}
+{{"demo": "BadgeUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).

diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
@@ -11,7 +11,7 @@ title: React Breadcrumbs component
 
 The `Breadcrumbs` shows where in the site hierarchy the user is.
 
-{{"demo": "BreadcrumbsUsage.js", "hideToolbar": true}}
+{{"demo": "BreadcrumbsUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).

diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
@@ -14,7 +14,7 @@ unstyled: /base/react-button/
 
 Buttons communicate actions that users can take.
 
-{{"demo": "ButtonUsage.js", "hideToolbar": true}}
+{{"demo": "ButtonUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

diff --git a/docs/data/joy/components/checkbox/CheckboxUsage.js b/docs/data/joy/components/checkbox/CheckboxUsage.js
@@ -10,13 +10,13 @@ export default function CheckboxUsage() {
         {
           propName: 'variant',
           knob: 'select',
-          defaultValue: 'outlined',
+          defaultValue: 'soft',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {
           propName: 'color',
           knob: 'color',
-          defaultValue: 'neutral',
+          defaultValue: 'primary',
         },
         {
           propName: 'size',

diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
@@ -11,18 +11,19 @@ export default function ExampleButtonCheckbox() {
   const [value, setValue] = React.useState([]);
   return (
     <List
-      variant="soft"
+      variant="outlined"
       aria-label="Screens"
       role="group"
       row
       sx={{
+        bgcolor: 'background.body',
         flexGrow: 0,
         '--List-gap': '8px',
         '--List-padding': '8px',
         '--List-radius': '8px',
       }}
     >
-      {['mobile', 'laptop', 'monitor'].map((item) => (
+      {['Mobile', 'Laptop', 'Monitor'].map((item) => (
         <ListItem key={item}>
           <ListItemDecorator
             sx={{
@@ -33,9 +34,9 @@ export default function ExampleButtonCheckbox() {
           >
             {
               {
-                mobile: <PhoneAndroidIcon />,
-                laptop: <LaptopIcon />,
-                monitor: <TvIcon />,
+                Mobile: <PhoneAndroidIcon />,
+                Laptop: <LaptopIcon />,
+                Monitor: <TvIcon />,
               }[item]
             }
           </ListItemDecorator>

diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
@@ -10,7 +10,10 @@ import Done from '@mui/icons-material/Done';
 export default function ExampleChoiceChipCheckbox() {
   const [value, setValue] = React.useState([]);
   return (
-    <Sheet variant="outlined" sx={{ width: 360, p: 2, borderRadius: 'sm' }}>
+    <Sheet
+      variant="outlined"
+      sx={{ width: 360, p: 2, borderRadius: 'sm', bgcolor: 'background.body' }}
+    >
       <Typography id="rank" level="body2" fontWeight="lg" sx={{ mb: 1.5 }}>
         Choose amenities
       </Typography>

diff --git a/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js b/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js
@@ -19,6 +19,7 @@ export default function ExampleFilterMemberCheckbox() {
       variant="outlined"
       sx={{
         p: 2,
+        bgcolor: 'background.body',
         borderRadius: 'sm',
         width: 360,
         maxWidth: '100%',

diff --git a/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js b/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js
@@ -14,7 +14,10 @@ export default function ExampleFilterStatusCheckbox() {
     wrongAddress: false,
   });
   return (
-    <Sheet variant="outlined" sx={{ p: 2, borderRadius: 'sm', width: 300 }}>
+    <Sheet
+      variant="outlined"
+      sx={{ p: 2, borderRadius: 'sm', width: 300, bgcolor: 'background.body' }}
+    >
       <Typography
         id="filter-status"
         sx={{

diff --git a/docs/data/joy/components/checkbox/OverlayCheckbox.js b/docs/data/joy/components/checkbox/OverlayCheckbox.js
@@ -14,10 +14,10 @@ export default function OverlayCheckbox() {
         '& > div': { p: 2, boxShadow: 'sm', borderRadius: 'xs', display: 'flex' },
       }}
     >
-      <Sheet variant="outlined">
+      <Sheet variant="outlined" sx={{ bgcolor: 'background.body' }}>
         <Checkbox overlay label="It works with any parent" />
       </Sheet>
-      <Sheet variant="outlined">
+      <Sheet variant="outlined" sx={{ bgcolor: 'background.body' }}>
         <Checkbox
           label="Focus outline covers the parent!"
           overlay

diff --git a/docs/data/joy/components/checkbox/checkbox.md b/docs/data/joy/components/checkbox/checkbox.md
@@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 The `Checkbox` component is the one to be used when you want to allow users to select multiple options.
 For toggling between on and off or single option selection, consider using a switch or radio button, respectively.
 
-{{"demo": "CheckboxUsage.js", "hideToolbar": true}}
+{{"demo": "CheckboxUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.

diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md
@@ -14,7 +14,7 @@ Chips are most frequently used in two main use cases: as pills of informative co
 
 The badge component is most frequently used to signal status (online, offline, busy, etc) and whether there's notifications or not.
 
-{{"demo": "ChipUsage.js", "hideToolbar": true}}
+{{"demo": "ChipUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.

diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -17,7 +17,7 @@ To actually have it represent how long an operation will take, use the [determin
 
 The animations of the components rely on CSS as much as possible to work even before the JavaScript is loaded.
 
-{{"demo": "CircularProgressUsage.js", "hideToolbar": true}}
+{{"demo": "CircularProgressUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

diff --git a/docs/data/joy/components/divider/DividerUsage.js b/docs/data/joy/components/divider/DividerUsage.js
@@ -22,7 +22,7 @@ export default function DividerUsages() {
         },
       ]}
       renderDemo={(props) => (
-        <Sheet>
+        <Sheet sx={{ my: 2, bgcolor: 'transparent' }}>
           <Sheet
             sx={{
               height: 12,
@@ -38,20 +38,20 @@ export default function DividerUsages() {
             sx={{ width: 300, pb: 3 }}
           >
             <Sheet
-              variant="soft"
               sx={{
                 height: props.orientation === 'vertical' ? 120 : 40,
                 flexGrow: 1,
                 borderRadius: 'xs',
+                bgcolor: 'background.level3',
               }}
             />
             <Divider {...props} />
             <Sheet
-              variant="soft"
               sx={{
                 height: props.orientation === 'vertical' ? 120 : 40,
                 flexGrow: 1,
                 borderRadius: 'xs',
+                bgcolor: 'background.level3',
               }}
             />
           </Stack>

diff --git a/docs/data/joy/components/divider/divider.md b/docs/data/joy/components/divider/divider.md
@@ -12,7 +12,7 @@ githubLabel: 'component: divider'
 
 Dividers separate content into clear groups.
 
-{{"demo": "DividerUsage.js", "hideToolbar": "true"}}
+{{"demo": "DividerUsage.js", "hideToolbar": "true", "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
@@ -50,7 +50,7 @@ Use the `Divider` to wrap elements that will be added to it.
 
 Use the `orientation` prop to render a vertical divider.
 
-{{"demo": "VerticalDividers.js", "bg": true}}
+{{"demo": "VerticalDividers.js"}}
 
 #### Vertical with text
 

diff --git a/docs/data/joy/components/linear-progress/linear-progress.md b/docs/data/joy/components/linear-progress/linear-progress.md
@@ -17,7 +17,7 @@ To actually have it represent how long an operation will take, use the [determin
 
 The animations of the components rely on CSS as much as possible to work even before the JavaScript is loaded.
 
-{{"demo": "LinearProgressUsage.js", "hideToolbar": true}}
+{{"demo": "LinearProgressUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

diff --git a/docs/data/joy/components/link/LinkCard.js b/docs/data/joy/components/link/LinkCard.js
@@ -10,7 +10,7 @@ export default function Links() {
   return (
     <Card
       sx={{
-        bgcolor: 'background.level1',
+        bgcolor: 'background.body',
         '&:hover, &:focus-within': {
           bgcolor: 'background.level2',
         },
@@ -32,7 +32,7 @@ export default function Links() {
               Joy UI
             </Link>
           </Typography>
-          <Typography level="body2">Spark joy components</Typography>
+          <Typography level="body2">Components that spark joy!</Typography>
         </div>
       </Box>
       <Typography level="body2" display="flex" alignItems="center" gap={0.5}>

diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md
@@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/link/
 The `Link` component represents the HTML `<a>` element.
 It accepts the same props as the [`Typography`](/joy-ui/react-typography/) component, as well as the system props.
 
-{{"demo": "LinkUsage.js", "hideToolbar": true}}
+{{"demo": "LinkUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

diff --git a/docs/data/joy/components/list/DividedList.js b/docs/data/joy/components/list/DividedList.js
@@ -25,8 +25,10 @@ export default function DividedList() {
           <List
             variant="outlined"
             sx={{
+              bgcolor: 'background.body',
               minWidth: 240,
               borderRadius: 'sm',
+              boxShadow: 'sm',
               '--List-decorator-size': '48px',
               '--List-item-paddingLeft': '1.5rem',
               '--List-item-paddingRight': '1rem',

diff --git a/docs/data/joy/components/list/HorizontalDividedList.js b/docs/data/joy/components/list/HorizontalDividedList.js
@@ -11,7 +11,9 @@ export default function HorizontalDividedList() {
       row
       variant="outlined"
       sx={{
+        bgcolor: 'background.body',
         borderRadius: 'sm',
+        boxShadow: 'sm',
         flexGrow: 0,
         mx: 'auto',
         '--List-decorator-size': '48px',

diff --git a/docs/data/joy/components/list/ListVariables.js b/docs/data/joy/components/list/ListVariables.js
@@ -30,7 +30,13 @@ export default function ListVariables() {
       ]}
       renderDemo={(sx) => (
         <List
-          sx={(theme) => ({ ...sx, width: 300, ...theme.variants.outlined.neutral })}
+          sx={(theme) => ({
+            ...sx,
+            width: 300,
+            ...theme.variants.outlined.neutral,
+            bgcolor: 'background.body',
+            borderRadius: 'sm',
+          })}
         >
           <ListItem>
             <ListItemButton>

diff --git a/docs/data/joy/components/list/NestedList.js b/docs/data/joy/components/list/NestedList.js
@@ -25,7 +25,9 @@ export default function NestedList() {
         size={small ? 'sm' : undefined}
         sx={{
           width: 200,
+          bgcolor: 'background.body',
           borderRadius: 'sm',
+          boxShadow: 'sm',
         }}
       >
         <ListItem nested>

diff --git a/docs/data/joy/components/list/SizesList.js b/docs/data/joy/components/list/SizesList.js
@@ -16,7 +16,7 @@ export default function SizesList() {
         justifyContent: 'center',
         gap: 6,
         flexWrap: 'wrap',
-        '& > *': { minWidth: 0, flexBasis: 120 },
+        '& > *': { minWidth: 0, flexBasis: 200 },
       }}
     >
       {['sm', 'md', 'lg'].map((size) => (
@@ -27,7 +27,12 @@ export default function SizesList() {
           <List
             size={size}
             variant="outlined"
-            sx={{ borderRadius: 'sm', maxWidth: 240 }}
+            sx={{
+              borderRadius: 'sm',
+              maxWidth: 300,
+              boxShadow: 'sm',
+              bgcolor: 'background.body',
+            }}
           >
             <ListItem>
               <ListItemButton>

diff --git a/docs/data/joy/components/list/StickyList.js b/docs/data/joy/components/list/StickyList.js
@@ -8,10 +8,12 @@ import Sheet from '@mui/joy/Sheet';
 export default function StickyList() {
   return (
     <Sheet
+      variant="outlined"
       sx={{
         width: 320,
         maxHeight: 300,
         overflow: 'auto',
+        borderRadius: 'sm',
       }}
     >
       <List>