[docs] Add "extend component sizes and variants" section (#34050)

mui · Sep 6, 2022 · 81b0ac9 · 81b0ac9
1 parent 2991f58
commit 81b0ac9
Show file tree

Hide file tree

Showing 21 changed files with 340 additions and 21 deletions.
diff --git a/docs/data/joy/components/aspect-ratio/VariantsRatio.js b/docs/data/joy/components/aspect-ratio/VariantsRatio.js
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Grid from '@mui/joy/Grid';
+import Typography from '@mui/joy/Typography';
+
+export default function VariantsRatio() {
+  return (
+    <Grid container spacing={2} sx={{ width: '100%' }}>
+      <Grid xs={6} md>
+        <AspectRatio variant="plain">
+          <Typography level="inherit" fontWeight="lg">
+            Plain
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid xs={6} md>
+        <AspectRatio variant="outlined">
+          <Typography level="inherit" fontWeight="lg">
+            Outlined
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid xs={6} md>
+        <AspectRatio variant="soft">
+          <Typography level="inherit" fontWeight="lg">
+            Soft
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid xs={6} md>
+        <AspectRatio variant="solid">
+          <Typography level="inherit" fontWeight="lg">
+            solid
+          </Typography>
+        </AspectRatio>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx b/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Grid from '@mui/joy/Grid';
+import Typography from '@mui/joy/Typography';
+
+export default function VariantsRatio() {
+  return (
+    <Grid container spacing={2} sx={{ width: '100%' }}>
+      <Grid xs={6} md>
+        <AspectRatio variant="plain">
+          <Typography level="inherit" fontWeight="lg">
+            Plain
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid xs={6} md>
+        <AspectRatio variant="outlined">
+          <Typography level="inherit" fontWeight="lg">
+            Outlined
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid xs={6} md>
+        <AspectRatio variant="soft">
+          <Typography level="inherit" fontWeight="lg">
+            Soft
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid xs={6} md>
+        <AspectRatio variant="solid">
+          <Typography level="inherit" fontWeight="lg">
+            solid
+          </Typography>
+        </AspectRatio>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
@@ -36,6 +36,16 @@ Make sure that the content you want to fit the aspect ratio is its first direct
 
 {{"demo": "BasicRatio.js"}}
 
+### Variants
+
+The aspect ratio component supports the four global variants: `soft` (default), `solid`, `outlined`, and `plain`.
+
+{{"demo": "VariantsRatio.js"}}
+
+:::success
+To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+:::
+
 ### Ratio
 
 Use the `ratio` prop to change the aspect ratio.

diff --git a/docs/data/joy/components/avatar/AvatarVariants.js b/docs/data/joy/components/avatar/AvatarVariants.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+
+export default function AvatarVariants() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+      <Avatar variant="soft" />
+      <Avatar variant="solid" />
+      <Avatar variant="outlined" />
+      <Avatar variant="plain" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/avatar/AvatarVariants.tsx b/docs/data/joy/components/avatar/AvatarVariants.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+
+export default function AvatarVariants() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+      <Avatar variant="soft" />
+      <Avatar variant="solid" />
+      <Avatar variant="outlined" />
+      <Avatar variant="plain" />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/avatar/AvatarVariants.tsx.preview b/docs/data/joy/components/avatar/AvatarVariants.tsx.preview
@@ -0,0 +1,4 @@
+<Avatar variant="soft" />
+<Avatar variant="solid" />
+<Avatar variant="outlined" />
+<Avatar variant="plain" />
diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md
@@ -34,6 +34,20 @@ The avatar components comes with three sizes out of the box: `sm`, `md` (the def
 
 {{"demo": "AvatarSizes.js"}}
 
+:::success
+To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
+### Variants
+
+The avatar component supports the four global variants: `soft` (default), `solid`, `outlined`, and `plain`.
+
+{{"demo": "AvatarVariants.js"}}
+
+:::success
+To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+:::
+
 ### Initials
 
 Use a string as children to display its initials on the avatar component.

diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md
@@ -15,6 +15,10 @@ The badge component is most frequently used to signal status (online, offline, b
 
 {{"demo": "BadgeUsage.js", "hideToolbar": true}}
 
+:::success
+To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component

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

diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
@@ -32,11 +32,15 @@ export default function MyApp() {
 
 ### Variants
 
-The button component supports the four global variants: `solid` (default), `soft`, `outlined` and `plain`.
-Choose one of them depending on the button's action importance.
+The button component supports the four global variants: `solid` (default), `soft`, `outlined`, and `plain`.
+Which variant you should choose depends on the relative importance of the button's action—see [Global variants—Hierarchy of importance](/joy-ui/main-features/global-variants/#hierarchy-of-importance) for details.
 
 {{"demo": "ButtonVariants.js"}}
 
+:::success
+To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+:::
+
 ### Colors
 
 Every palette included in the theme is available via the `color` prop.
@@ -50,6 +54,10 @@ The button components comes with three sizes out of the box: `sm`, `md` (the def
 
 {{"demo": "ButtonSizes.js"}}
 
+:::success
+To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
 ### Disabled
 
 Use the `disabled` prop to disable interaction and focus.

diff --git a/docs/data/joy/components/checkbox/checkbox.md b/docs/data/joy/components/checkbox/checkbox.md
@@ -16,6 +16,10 @@ For toggling between on and off or single option selection, consider using a swi
 
 {{"demo": "CheckboxUsage.js", "hideToolbar": true}}
 
+:::success
+To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
+:::
+
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component

diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md
@@ -16,6 +16,10 @@ The badge component is most frequently used to signal status (online, offline, b
 
 {{"demo": "ChipUsage.js", "hideToolbar": true}}
 
+:::success
+To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
+:::
+
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component

diff --git a/docs/data/joy/components/list/list.md b/docs/data/joy/components/list/list.md
@@ -52,6 +52,10 @@ Use the `size` prop to control font-size and general list density.
 
 {{"demo": "SizesList.js"}}
 
+:::success
+To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
 ### Decorator
 
 Use the `ListItemDecorator` component to add supporting icons or elements to the list item.

diff --git a/docs/data/joy/components/menu/menu.md b/docs/data/joy/components/menu/menu.md
@@ -47,14 +47,18 @@ Choosing an option should immediately, and ideally, commit the option and close
 
 {{"demo": "BasicMenu.js"}}
 
-### Size
+### Sizes
 
 The menu component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`.
 
 When specifying a size for the `Menu` component, menu items inside of it will inherit the value.
 
 {{"demo": "SizeMenu.js"}}
 
+:::success
+To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
 ### Selected
 
 Use the `selected` prop to signal whether a `MenuItem` is selected or not.

diff --git a/docs/data/joy/components/radio/radio.md b/docs/data/joy/components/radio/radio.md
@@ -17,6 +17,10 @@ For more in-depth about when to use each, visit [the NNg's documentation](https:
 
 {{"demo": "RadioUsage.js", "hideToolbar": true}}
 
+:::success
+To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
+:::
+
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component

diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
@@ -15,6 +15,10 @@ The `Select` component is used to trigger a popup that displays a list of `Optio
 
 {{"demo": "SelectUsage.js", "hideToolbar": true}}
 
+:::success
+To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
+:::
+
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component

diff --git a/docs/data/joy/components/slider/slider.md b/docs/data/joy/components/slider/slider.md
@@ -15,6 +15,10 @@ Sliders are ideal for interface controls that benefit from a visual representati
 
 {{"demo": "SliderUsage.js", "hideToolbar": true}}
 
+:::success
+To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component

diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md
@@ -17,6 +17,10 @@ should be made clear from the corresponding inline label.
 
 {{"demo": "SwitchUsage.js", "hideToolbar": true}}
 
+:::success
+To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component

diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md
@@ -52,16 +52,16 @@ To target the initially selected tab, specify the `value` prop to the `TabPanel`
 
 {{"demo": "TabsBasic.js"}}
 
-### Variant
+### Variants
 
 Both `TabList` and `Tab` accept [global variant](/joy-ui/main-features/global-variants/) values, so you can mix and match to get the desired result.
 
-:::info
-ℹ️ **Note:** the `TabPanel` component is the only one that doesn't support both global variant and color props.
-:::
-
 {{"demo": "TabsVariants.js"}}
 
+:::success
+To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+:::
+
 ### Disabled tab
 
 To disable a tab, use the `disabled` prop on the `Tab` component.

diff --git a/docs/data/joy/components/text-field/text-field.md b/docs/data/joy/components/text-field/text-field.md
@@ -32,7 +32,7 @@ export default function MyApp() {
 
 ### Variants
 
-The text field component supports the four global variants: solid (default), soft, outlined, and plain.
+The text field component supports the four global variants: `solid` (default), `soft`, `outlined`, and `plain`.
 
 {{"demo": "TextFieldVariants.js"}}