diff --git a/.circleci/config.yml b/.circleci/config.yml index eadf09608b7f6e..82dee66c3f4fd6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -44,7 +44,7 @@ defaults: &defaults AWS_REGION_ARTIFACTS: eu-central-1 working_directory: /tmp/material-ui docker: - - image: cimg/node:14.20 + - image: cimg/node:14.21 # CircleCI has disabled the cache across forks for security reasons. # Following their official statement, it was a quick solution, they diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index e477d02eda1aa2..d8d30db10b860b 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2.1.13 + uses: github/codeql-action/init@d00e8c09a38ef8c1ca1091fc55ef490776d2de73 # v2.1.13 with: languages: typescript config-file: ./.github/codeql/codeql-config.yml @@ -30,4 +30,4 @@ jobs: # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs # queries: security-extended,security-and-quality - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2.1.13 + uses: github/codeql-action/analyze@d00e8c09a38ef8c1ca1091fc55ef490776d2de73 # v2.1.13 diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 15a52171bae294..e42ad015259f6a 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -43,6 +43,6 @@ jobs: # Upload the results to GitHub's code scanning dashboard. - name: Upload to code-scanning - uses: github/codeql-action/upload-sarif@9e288b03632e540432812c08ffaef313da7fb1d9 # v1.1.31 + uses: github/codeql-action/upload-sarif@73113785b9e3aa4b2c9c2e1c91463606e882665e # v1.1.33 with: sarif_file: results.sarif diff --git a/benchmark/package.json b/benchmark/package.json index c0e4d02d368c08..935d3651cbaac3 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -11,7 +11,7 @@ "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\"" }, "dependencies": { - "@chakra-ui/system": "^2.3.1", + "@chakra-ui/system": "^2.3.3", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mdx-js/react": "^2.1.5", @@ -29,8 +29,8 @@ "redux": "^4.2.0", "serve-handler": "^6.1.5", "styled-components": "^5.3.6", - "theme-ui": "^0.15.3", - "webpack": "^5.74.0", + "theme-ui": "^0.15.4", + "webpack": "^5.75.0", "webpack-cli": "^4.10.0" } } diff --git a/docs/data/joy/components/alert/AlertColors.js b/docs/data/joy/components/alert/AlertColors.js index 42d37cc6db85a7..1425c169eab282 100644 --- a/docs/data/joy/components/alert/AlertColors.js +++ b/docs/data/joy/components/alert/AlertColors.js @@ -1,11 +1,12 @@ +import * as React from 'react'; import Alert from '@mui/joy/Alert'; +import Stack from '@mui/joy/Stack'; import Box from '@mui/joy/Box'; import Radio from '@mui/joy/Radio'; import RadioGroup from '@mui/joy/RadioGroup'; import Sheet from '@mui/joy/Sheet'; import Typography from '@mui/joy/Typography'; -import * as React from 'react'; export default function AlertColors() { const [variant, setVariant] = React.useState('solid'); @@ -14,16 +15,11 @@ export default function AlertColors() { sx={{ display: 'flex', alignItems: 'center', - gap: 3, + justifyContent: 'center', + width: '100%', }} > - + Primary @@ -42,15 +38,8 @@ export default function AlertColors() { Warning - - + + ('solid'); @@ -14,16 +15,11 @@ export default function AlertColors() { sx={{ display: 'flex', alignItems: 'center', - gap: 3, + justifyContent: 'center', + width: '100%', }} > - + Primary @@ -42,15 +38,8 @@ export default function AlertColors() { Warning - - + + ; -} ``` -## Basics - The Alert component wraps around its content, and stretches to fill its enclosing container, as shown below: {{"demo": "AlertBasic.js"}} -## Anatomy - -The Alert component is composed of a single root `
` element with its `role` set to `alert`: - -```html - -``` - -### Overriding the root slot +## Customization -Use the `component` prop to override the root slot with a custom element. -For example, the following code snippet replaces the default `
` with a ``: +### Variants -```jsx -Alert content +The Alert component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft` (default), `outlined`, and `plain`. -// renders as: - - Alert content - -``` +{{"demo": "AlertVariants.js"}} -## Customization +:::success +To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). +Note that you lose the global variants when you add custom variants. +::: -### Variants +### Sizes -The Alert component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `soft` (default), `solid`, `outlined`, and `plain`. +The Alert component comes in three sizes: `sm`, `md` (default), and `lg`: -{{"demo": "AlertVariants.js"}} +{{"demo": "AlertSizes.js"}} ### Colors @@ -79,12 +58,6 @@ The demo below shows how the values for the `color` prop are affected by the glo {{"demo": "AlertColors.js"}} -### Sizes - -The Alert component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`: - -{{"demo": "AlertSizes.js"}} - ### Decorators Use the `startDecorator` and `endDecorator` props to append actions and icons to either side of the Alert: @@ -111,3 +84,13 @@ Here are some factors to consider to ensure that your Alert is accessible: - Alerts that occur too frequently can [inhibit the usability](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html) of your app. - Dynamically rendered alerts are announced by screen readers; alerts that are already present on the page when it loads are _not_ announced. - Color does not add meaning to the UI for users who require assistive technology. You must ensure that any information conveyed through color is also denoted in other ways, such as within the text of the alert itself, or with additional hidden text that's read by screen readers. + +## Anatomy + +The Alert component is composed of a single root `
` element with its `role` set to `alert`: + +```html + +``` diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md index bb6b4d694d8dbc..f92f7056a29639 100644 --- a/docs/data/joy/components/aspect-ratio/aspect-ratio.md +++ b/docs/data/joy/components/aspect-ratio/aspect-ratio.md @@ -18,76 +18,31 @@ As of Q4 2022, compatibility is at 90%. Source: [Can I use…](https://caniuse.com/?search=aspect-ratio) ::: -## Usage - -After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: +## Basics ```jsx import AspectRatio from '@mui/joy/AspectRatio'; - -export default function MyApp() { - return ; -} ``` -## Basics - The Aspect Ratio component wraps around the content that it resizes. The element to be resized must be the first direct child. The default ratio is `16/9`. {{"demo": "BasicRatio.js"}} -## Anatomy - -The Aspect Ratio component is composed of a root `
` with a content `
` nested inside; the child component is given a `data-first-child` attribute for styling purposes: - -```html -
-
- - This is how an Aspect Ratio component renders in the DOM. - -
-
-``` - -### Overriding the root slot - -Use the `component` prop to override the root slot with a custom element. -For example, the following code snippet replaces the default `
` with a `
`: - -```jsx - -``` - -### Overriding interior slots - -Use the `components` prop to override any interior slots in addition to the root: - - - -:::warning -If the root element is customized with both the `component` and `components` props, then `component` will take precedence. -::: - -Use the `componentsProps` prop to pass custom props to internal slots. -The following code snippet applies a CSS class called `my-content` to the content slot: - - - -:::warning -Note that `componentsProps` slot names are written in lowercase (root) while `components` slot names are capitalized (Root). -::: - ## Customization ### Variants -The Aspect Ratio component supports the four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft` (default), `outlined`, and `plain`. +The Aspect Ratio component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft` (default), `outlined`, and `plain`. {{"demo": "VariantsRatio.js"}} +:::success +To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). +Note that you lose the global variants when you add custom variants. +::: + ### Ratio Use the `ratio` prop to change the aspect ratio, following the pattern `height/width`. @@ -120,13 +75,13 @@ This is useful when the Aspect Ratio component wraps dynamic-width content, as s {{"demo": "MinMaxRatio.js"}} -### Usage inside a flex row +## Usage inside a flex row When the Aspect Ratio component is a child of a flexbox `row` container, use `flex-basis` to set the ideal width of the content: {{"demo": "FlexRowRatio.js"}} -### Usage with Next.js Image component +## Usage with Next.js Image The Aspect Ratio component can be used with a [Next.js Image](https://nextjs.org/docs/basic-features/image-optimization) component as a child. The Image should always include the `layout="fill"` property—otherwise it requires `height` and `width` values, which would defeat the purpose of the Aspect Ratio component. @@ -161,3 +116,17 @@ In designs like this, make sure to assign a `minWidth` value to prevent the Aspe This is a simple illustration of how to use Aspect Ratio with list components: {{"demo": "ListStackRatio.js"}} + +## Anatomy + +The Aspect Ratio component is composed of a root `
` with a content `
` nested inside; the child component is given a `data-first-child` attribute for styling purposes: + +```html +
+
+ + + +
+
+``` diff --git a/docs/data/joy/components/autocomplete/CustomTags.js b/docs/data/joy/components/autocomplete/CustomTags.js index 7e808ccc86ed50..1b83a19a03b900 100644 --- 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 index 7e808ccc86ed50..1b83a19a03b900 100644 --- 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 index 0420a8dbc8dd9f..2fc136eb690ba3 100644 --- a/docs/data/joy/components/autocomplete/Playground.js +++ b/docs/data/joy/components/autocomplete/Playground.js @@ -27,12 +27,14 @@ export default function Playground() { @@ -43,7 +45,7 @@ export default function Playground() { {...flags.reduce((prev, current) => ({ ...prev, [current]: true }), {})} /> - + Flags {flags.length ? `(${flags.length})` : ''} @@ -68,6 +71,7 @@ export default function Playground() { )} + - + diff --git a/docs/data/joy/components/avatar/AvatarVariants.tsx b/docs/data/joy/components/avatar/AvatarVariants.tsx index 1bc80bcf652dc7..6193bafcb947c9 100644 --- a/docs/data/joy/components/avatar/AvatarVariants.tsx +++ b/docs/data/joy/components/avatar/AvatarVariants.tsx @@ -5,8 +5,8 @@ import Box from '@mui/joy/Box'; export default function AvatarVariants() { return ( - + diff --git a/docs/data/joy/components/avatar/AvatarVariants.tsx.preview b/docs/data/joy/components/avatar/AvatarVariants.tsx.preview index fa5e66d9f5ae97..0570a58cf0989f 100644 --- a/docs/data/joy/components/avatar/AvatarVariants.tsx.preview +++ b/docs/data/joy/components/avatar/AvatarVariants.tsx.preview @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/docs/data/joy/components/avatar/BasicAvatar.js b/docs/data/joy/components/avatar/BasicAvatar.js new file mode 100644 index 00000000000000..e2ac407dfae025 --- /dev/null +++ b/docs/data/joy/components/avatar/BasicAvatar.js @@ -0,0 +1,6 @@ +import * as React from 'react'; +import Avatar from '@mui/joy/Avatar'; + +export default function BasicAvatar() { + return ; +} diff --git a/docs/data/joy/components/avatar/BasicAvatar.tsx.preview b/docs/data/joy/components/avatar/BasicAvatar.tsx.preview new file mode 100644 index 00000000000000..23517495fdf8ab --- /dev/null +++ b/docs/data/joy/components/avatar/BasicAvatar.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/joy/components/avatar/BasicAvatars.js b/docs/data/joy/components/avatar/BasicAvatars.js new file mode 100644 index 00000000000000..92ce23634a12de --- /dev/null +++ b/docs/data/joy/components/avatar/BasicAvatars.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Avatar from '@mui/joy/Avatar'; +import Box from '@mui/joy/Box'; + +export default function BasicAvatars() { + return ( + + + JG + + + ); +} diff --git a/docs/data/joy/components/avatar/BasicAvatars.tsx b/docs/data/joy/components/avatar/BasicAvatars.tsx new file mode 100644 index 00000000000000..92ce23634a12de --- /dev/null +++ b/docs/data/joy/components/avatar/BasicAvatars.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Avatar from '@mui/joy/Avatar'; +import Box from '@mui/joy/Box'; + +export default function BasicAvatars() { + return ( + + + JG + + + ); +} diff --git a/docs/data/joy/components/avatar/BasicAvatars.tsx.preview b/docs/data/joy/components/avatar/BasicAvatars.tsx.preview new file mode 100644 index 00000000000000..39b1405e527ec3 --- /dev/null +++ b/docs/data/joy/components/avatar/BasicAvatars.tsx.preview @@ -0,0 +1,3 @@ + +JG + \ No newline at end of file diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md index efb136b051115c..bef9d3aded874f 100644 --- a/docs/data/joy/components/avatar/avatar.md +++ b/docs/data/joy/components/avatar/avatar.md @@ -12,38 +12,20 @@ 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}} -## Component - -After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: +## Basics ```jsx import Avatar from '@mui/joy/Avatar'; - -export default function MyApp() { - return ; -} ``` -## Basics - By default, the Avatar component displays a generic Person Icon. -Wrap it around a string to display plain text, or use the `src` prop to display an image. - -## Anatomy +You can replace this icon with a text string or an image. -The Avatar component is composed of a root `
` that may wrap around an ``, an ``, or a string: - -```html -
- -
-``` - -## Customization +{{"demo": "BasicAvatars.js"}} ### Text Avatar @@ -59,7 +41,7 @@ Make sure to to write a meaningful description for the `alt` prop. {{"demo": "ImageAvatars.js"}} -### Image fallbacks +#### Image fallbacks If an error occurs while loading the Avatar's image, it will fall back to the following alternatives (in this order): @@ -69,19 +51,22 @@ If an error occurs while loading the Avatar's image, it will fall back to the fo {{"demo": "FallbackAvatars.js"}} +## Customization + ### Variants -The Avatar component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `soft` (default), `solid`, `outlined`, and `plain`. +The Avatar component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft` (default), `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). +To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). +Note that you lose the global variants when you add custom variants. ::: ### Sizes -The Avatar component comes in three sizes: `sm`, `md` (the default), and `lg`: +The Avatar component comes in three sizes: `sm`, `md` (default), and `lg`: {{"demo": "AvatarSizes.js"}} @@ -89,20 +74,14 @@ The Avatar component comes in three sizes: `sm`, `md` (the default), and `lg`: To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: -## Usage with the Badge - -Combine the Avatar component with the [Badge](/joy-ui/react-badge/) to visually communicate more complex information about a user's status: - -{{"demo": "BadgeAvatars.js"}} - -## Usage with the Avatar Group - -Use the Avatar Group component to group multiple Avatars together. +## Usage with Avatar Group ```jsx import AvatarGroup from '@mui/joy/AvatarGroup'; ``` +Use the Avatar Group component to group multiple Avatars together. + {{"demo": "GroupedAvatars.js"}} ### Quantity within a group @@ -141,9 +120,29 @@ This approach is preferable because it preserves the overlapping offset between {{"demo": "VerticalAvatarGroup.js"}} +## Usage with Badge + +```jsx +import Badge from '@mui/joy/Badge'; +``` + +Combine the Avatar component with the [Badge](/joy-ui/react-badge/) to visually communicate more complex information about a user's status: + +{{"demo": "BadgeAvatars.js"}} + ## CSS variable playground Play around with the CSS variables available to the Avatar component to see how the design changes. You can use these to customize the component with both the `sx` prop and the theme. {{"demo": "AvatarGroupVariables.js", "hideToolbar": true }} + +## Anatomy + +The Avatar component is composed of a root `
` that may wrap around an ``, an ``, or a string: + +```html +
+ +
+``` diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md index e5a7475593aef0..adebc8063ec43b 100644 --- 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 index dd36e2b08bc06b..e6948e47d9340f 100644 --- 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 index cb2a509bd5473a..e27ac18c864e9d 100644 --- 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 index 2bf7a268f8b256..b0606fcd9b2fb8 100644 --- 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 index 88b29dbe9935fc..3f292d57e17675 100644 --- 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 ( - {['mobile', 'laptop', 'monitor'].map((item) => ( + {['Mobile', 'Laptop', 'Monitor'].map((item) => ( { { - mobile: , - laptop: , - monitor: , + Mobile: , + Laptop: , + Monitor: , }[item] } diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js index c916604acba5d5..c199896884f320 100644 --- 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 ( - + Choose amenities diff --git a/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js b/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js index 8eb97877bc7302..01114edfde01cd 100644 --- 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 index bd6e8db8bab2a3..f80008ec27bc72 100644 --- 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 ( - + div': { p: 2, boxShadow: 'sm', borderRadius: 'xs', display: 'flex' }, }} > - + - + ( - + diff --git a/docs/data/joy/components/divider/divider.md b/docs/data/joy/components/divider/divider.md index 9aa5fd90e2e35f..dfd5a051079b84 100644 --- 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 index 28584de3d7d3b5..bc56dcb995e07e 100644 --- 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 index 650f7e31c3096f..3164e71b7deb66 100644 --- 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 ( - Spark joy components + Components that spark joy!
diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md index 432956fdf5065c..7766462c3414f0 100644 --- 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 `` 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 index 651c04358d1cff..9f6582db43eb6b 100644 --- a/docs/data/joy/components/list/DividedList.js +++ b/docs/data/joy/components/list/DividedList.js @@ -25,8 +25,10 @@ export default function DividedList() { ( ({ ...sx, width: 300, ...theme.variants.outlined.neutral })} + sx={(theme) => ({ + ...sx, + width: 300, + ...theme.variants.outlined.neutral, + bgcolor: 'background.body', + borderRadius: 'sm', + })} > diff --git a/docs/data/joy/components/list/NestedList.js b/docs/data/joy/components/list/NestedList.js index 5ebd12bd076f44..0efdde73c046dd 100644 --- 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', }} > diff --git a/docs/data/joy/components/list/SizesList.js b/docs/data/joy/components/list/SizesList.js index 662ed09eff77dd..42fb75d1158b60 100644 --- 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() { diff --git a/docs/data/joy/components/list/StickyList.js b/docs/data/joy/components/list/StickyList.js index 43d2e3f85ad174..bda4f5a122fdcf 100644 --- 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 ( diff --git a/docs/data/joy/components/list/list.md b/docs/data/joy/components/list/list.md index ca6460c7d68e10..306b76c03c6ecb 100644 --- a/docs/data/joy/components/list/list.md +++ b/docs/data/joy/components/list/list.md @@ -20,7 +20,7 @@ Joy UI provides four list-related components: - [`ListDivider`](#divider): A separator between list items. - [`ListSubheader`](#nested-list): A label for a nested list. -{{"demo": "ListUsage.js", "hideToolbar": true}} +{{"demo": "ListUsage.js", "hideToolbar": true, "bg": "gradient"}} ## Component diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.js b/docs/data/joy/components/menu/MenuIconSideNavExample.js index 668c85f269aea0..109f82b1df3065 100644 --- a/docs/data/joy/components/menu/MenuIconSideNavExample.js +++ b/docs/data/joy/components/menu/MenuIconSideNavExample.js @@ -126,7 +126,7 @@ export default function MenuIconSideNavExample() { }, 200); }; return ( - + {['Credit Card', 'Paypal', 'QR Code'].map((value, index) => ( diff --git a/docs/data/joy/components/radio/IconlessRadio.js b/docs/data/joy/components/radio/IconlessRadio.js index 9071be7e837884..9cc4b42b0e8c29 100644 --- a/docs/data/joy/components/radio/IconlessRadio.js +++ b/docs/data/joy/components/radio/IconlessRadio.js @@ -27,7 +27,15 @@ export default function IconlessRadio() { sx={{ gap: 1.5 }} > {['512GB', '1TB', '2TB'].map((value) => ( - + diff --git a/docs/data/joy/components/radio/RadioPositionEnd.js b/docs/data/joy/components/radio/RadioPositionEnd.js index c84a4c957b82bb..d0efa8187ee17b 100644 --- a/docs/data/joy/components/radio/RadioPositionEnd.js +++ b/docs/data/joy/components/radio/RadioPositionEnd.js @@ -20,8 +20,12 @@ export default function RadioPositionEnd() { '--List-decorator-size': '32px', }} > - {['Individual', 'Team', 'Interprise'].map((item, index) => ( - + {['Individual', 'Team', 'Enterprise'].map((item, index) => ( + {[, , ][index]} diff --git a/docs/data/joy/components/radio/RadioUsage.js b/docs/data/joy/components/radio/RadioUsage.js index 0d0c7540c2b720..7924106aa0b134 100644 --- a/docs/data/joy/components/radio/RadioUsage.js +++ b/docs/data/joy/components/radio/RadioUsage.js @@ -15,13 +15,13 @@ export default function RadioUsage() { { 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/radio/radio.md b/docs/data/joy/components/radio/radio.md index e10bb8943ef6a7..925df4bdbd5209 100644 --- a/docs/data/joy/components/radio/radio.md +++ b/docs/data/joy/components/radio/radio.md @@ -15,7 +15,7 @@ The `Radio` component is the one to be used when you want to allow users to sele To allow multiple selection, use the `Checkbox` instead. For more in-depth about when to use each, visit [the NNg's documentation](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/). -{{"demo": "RadioUsage.js", "hideToolbar": true}} +{{"demo": "RadioUsage.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. @@ -139,7 +139,7 @@ Visit the [WAI-ARIA documentation](https://www.w3.org/WAI/ARIA/apg/patterns/radi A clone of an [inspiration](https://dribbble.com/shots/11239824-Radio-button-groups) that demonstrate the composition of the components. -{{"demo": "ExampleTiers.js", "bg": true}} +{{"demo": "ExampleTiers.js"}} ### Alignment buttons diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md index 2a85dc3cf4cb14..56526c821e46eb 100644 --- a/docs/data/joy/components/select/select.md +++ b/docs/data/joy/components/select/select.md @@ -14,7 +14,7 @@ unstyled: /base/react-select/ The `Select` component is used to trigger a popup that displays a list of `Option` components. -{{"demo": "SelectUsage.js", "hideToolbar": true}} +{{"demo": "SelectUsage.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/sheet/SheetUsage.js b/docs/data/joy/components/sheet/SheetUsage.js index 70c796699aa0c9..7b69784fec98cd 100644 --- a/docs/data/joy/components/sheet/SheetUsage.js +++ b/docs/data/joy/components/sheet/SheetUsage.js @@ -27,6 +27,7 @@ export default function SheetUsage() { width: 250, height: 200, m: 1, + mb: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md index 42da506688129f..6490e0f528e50c 100644 --- a/docs/data/joy/components/sheet/sheet.md +++ b/docs/data/joy/components/sheet/sheet.md @@ -12,7 +12,7 @@ title: React Sheet component The `Sheet` container is a generic container. It's a sibling to the [`Box`](/system/react-box/) component, and equivalent to Material UI's [`Paper`](/material-ui/react-paper/), with the difference being that it supports Joy UI's global variants out of the box. -{{"demo": "SheetUsage.js", "hideToolbar": true}} +{{"demo": "SheetUsage.js", "hideToolbar": true, "bg": "gradient"}} {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} diff --git a/docs/data/joy/components/slider/SliderUsage.js b/docs/data/joy/components/slider/SliderUsage.js index 23f05690770409..0eed2b0ec7685c 100644 --- a/docs/data/joy/components/slider/SliderUsage.js +++ b/docs/data/joy/components/slider/SliderUsage.js @@ -51,8 +51,6 @@ export default function SliderUsage() { p: 2, lineHeight: 0, borderRadius: 'sm', - bgcolor: - props.variant === 'plain' ? 'background.level3' : 'background.surface', }} > diff --git a/docs/data/joy/components/slider/slider.md b/docs/data/joy/components/slider/slider.md index efb8f76bc5bcce..6ecbbe5f588214 100644 --- a/docs/data/joy/components/slider/slider.md +++ b/docs/data/joy/components/slider/slider.md @@ -13,7 +13,7 @@ unstyled: /base/react-slider/ Sliders are ideal for interface controls that benefit from a visual representation of adjustable content, such as volume or brightness settings, or for applying image filters such as gradients or saturation. -{{"demo": "SliderUsage.js", "hideToolbar": true}} +{{"demo": "SliderUsage.js", "hideToolbar": true, "bg": "gradient"}} :::success To learn how to add more variants or sizes to the component, check out [Themed components](/joy-ui/customization/themed-components/). diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md index 9ac70db50c0aad..169224fb8d0ea7 100644 --- a/docs/data/joy/components/switch/switch.md +++ b/docs/data/joy/components/switch/switch.md @@ -15,7 +15,7 @@ Switches are very commonly used for adjusting settings on mobile. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label. -{{"demo": "SwitchUsage.js", "hideToolbar": true}} +{{"demo": "SwitchUsage.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/tabs/TabDisabled.js b/docs/data/joy/components/tabs/TabDisabled.js index d1695e9dc28e40..c2c759e35ae056 100644 --- a/docs/data/joy/components/tabs/TabDisabled.js +++ b/docs/data/joy/components/tabs/TabDisabled.js @@ -5,7 +5,7 @@ import Tab from '@mui/joy/Tab'; export default function TabDisabled() { return ( - + First tab Second tab diff --git a/docs/data/joy/components/tabs/TabDisabled.tsx b/docs/data/joy/components/tabs/TabDisabled.tsx index d1695e9dc28e40..c2c759e35ae056 100644 --- a/docs/data/joy/components/tabs/TabDisabled.tsx +++ b/docs/data/joy/components/tabs/TabDisabled.tsx @@ -5,7 +5,7 @@ import Tab from '@mui/joy/Tab'; export default function TabDisabled() { return ( - + First tab Second tab diff --git a/docs/data/joy/components/tabs/TabDisabled.tsx.preview b/docs/data/joy/components/tabs/TabDisabled.tsx.preview index fb178b27ee297c..5c90d27f5570fe 100644 --- a/docs/data/joy/components/tabs/TabDisabled.tsx.preview +++ b/docs/data/joy/components/tabs/TabDisabled.tsx.preview @@ -1,4 +1,4 @@ - + First tab Second tab diff --git a/docs/data/joy/components/tabs/TabsBasic.js b/docs/data/joy/components/tabs/TabsBasic.js index 85a0ba2db744b7..7700d27fd85703 100644 --- a/docs/data/joy/components/tabs/TabsBasic.js +++ b/docs/data/joy/components/tabs/TabsBasic.js @@ -6,19 +6,19 @@ import TabPanel from '@mui/joy/TabPanel'; export default function TabsBasic() { return ( - + First tab Second tab Third tab - + First tab panel - + Second tab panel - + Third tab panel diff --git a/docs/data/joy/components/tabs/TabsBasic.tsx b/docs/data/joy/components/tabs/TabsBasic.tsx index 85a0ba2db744b7..7700d27fd85703 100644 --- a/docs/data/joy/components/tabs/TabsBasic.tsx +++ b/docs/data/joy/components/tabs/TabsBasic.tsx @@ -6,19 +6,19 @@ import TabPanel from '@mui/joy/TabPanel'; export default function TabsBasic() { return ( - + First tab Second tab Third tab - + First tab panel - + Second tab panel - + Third tab panel diff --git a/docs/data/joy/components/tabs/TabsBasic.tsx.preview b/docs/data/joy/components/tabs/TabsBasic.tsx.preview index 088ef73b86168b..35e69f3f6771f4 100644 --- a/docs/data/joy/components/tabs/TabsBasic.tsx.preview +++ b/docs/data/joy/components/tabs/TabsBasic.tsx.preview @@ -1,16 +1,16 @@ - + First tab Second tab Third tab - + First tab panel - + Second tab panel - + Third tab panel \ No newline at end of file diff --git a/docs/data/joy/components/tabs/TabsBottomNavExample.js b/docs/data/joy/components/tabs/TabsBottomNavExample.js index 96cea58e69afe7..449a87bf12f9ba 100644 --- a/docs/data/joy/components/tabs/TabsBottomNavExample.js +++ b/docs/data/joy/components/tabs/TabsBottomNavExample.js @@ -20,7 +20,7 @@ export default function TabsBottomNavExample() { p: 3, py: 5, borderRadius: 'sm', - bgcolor: `${colors[index]}.400`, + bgcolor: `${colors[index]}.600`, }} > setIndex(value)} sx={(theme) => ({ - borderBottomLeftRadius: '1rem', - borderBottomRightRadius: '1rem', + borderRadius: 'xl', maxWidth: 400, mx: 'auto', boxShadow: theme.shadow.sm, diff --git a/docs/data/joy/components/tabs/TabsBottomNavExample.tsx b/docs/data/joy/components/tabs/TabsBottomNavExample.tsx index 7b0a080e6a2253..ff4c8c5ad99968 100644 --- a/docs/data/joy/components/tabs/TabsBottomNavExample.tsx +++ b/docs/data/joy/components/tabs/TabsBottomNavExample.tsx @@ -20,7 +20,7 @@ export default function TabsBottomNavExample() { p: 3, py: 5, borderRadius: 'sm', - bgcolor: `${colors[index]}.400`, + bgcolor: `${colors[index]}.600`, }} > setIndex(value as number)} sx={(theme) => ({ - borderBottomLeftRadius: '1rem', - borderBottomRightRadius: '1rem', + borderRadius: 'xl', maxWidth: 400, mx: 'auto', boxShadow: theme.shadow.sm, diff --git a/docs/data/joy/components/tabs/TabsIcon.js b/docs/data/joy/components/tabs/TabsIcon.js index d0201996a043ac..66468d48e80194 100644 --- a/docs/data/joy/components/tabs/TabsIcon.js +++ b/docs/data/joy/components/tabs/TabsIcon.js @@ -8,7 +8,7 @@ import PersonPinIcon from '@mui/icons-material/PersonPin'; export default function TabsIcon() { return ( - + diff --git a/docs/data/joy/components/tabs/TabsIcon.tsx b/docs/data/joy/components/tabs/TabsIcon.tsx index d0201996a043ac..66468d48e80194 100644 --- a/docs/data/joy/components/tabs/TabsIcon.tsx +++ b/docs/data/joy/components/tabs/TabsIcon.tsx @@ -8,7 +8,7 @@ import PersonPinIcon from '@mui/icons-material/PersonPin'; export default function TabsIcon() { return ( - + diff --git a/docs/data/joy/components/tabs/TabsIcon.tsx.preview b/docs/data/joy/components/tabs/TabsIcon.tsx.preview index 5ee4abdd0e0f67..2ee615ae539293 100644 --- a/docs/data/joy/components/tabs/TabsIcon.tsx.preview +++ b/docs/data/joy/components/tabs/TabsIcon.tsx.preview @@ -1,4 +1,4 @@ - + diff --git a/docs/data/joy/components/tabs/TabsIconWithText.js b/docs/data/joy/components/tabs/TabsIconWithText.js index d797bf3cc799f9..1e10c2dcd06480 100644 --- a/docs/data/joy/components/tabs/TabsIconWithText.js +++ b/docs/data/joy/components/tabs/TabsIconWithText.js @@ -10,7 +10,11 @@ import PersonPinIcon from '@mui/icons-material/PersonPin'; export default function TabsIconWithText() { return (
- + @@ -32,7 +36,7 @@ export default function TabsIconWithText() { - + diff --git a/docs/data/joy/components/tabs/TabsIconWithText.tsx b/docs/data/joy/components/tabs/TabsIconWithText.tsx index d797bf3cc799f9..1e10c2dcd06480 100644 --- a/docs/data/joy/components/tabs/TabsIconWithText.tsx +++ b/docs/data/joy/components/tabs/TabsIconWithText.tsx @@ -10,7 +10,11 @@ import PersonPinIcon from '@mui/icons-material/PersonPin'; export default function TabsIconWithText() { return (
- + @@ -32,7 +36,7 @@ export default function TabsIconWithText() { - + diff --git a/docs/data/joy/components/tabs/TabsPageExample.js b/docs/data/joy/components/tabs/TabsPageExample.js index e7d6b1e7f8e4a4..88b9b0258a6b79 100644 --- a/docs/data/joy/components/tabs/TabsPageExample.js +++ b/docs/data/joy/components/tabs/TabsPageExample.js @@ -17,7 +17,6 @@ export default function TabsPageExample() { bgcolor: 'background.body', flexGrow: 1, m: -3, - p: 3, overflowX: 'hidden', borderRadius: 'md', }} @@ -26,11 +25,15 @@ export default function TabsPageExample() { aria-label="Pipeline" value={index} onChange={(event, value) => setIndex(value)} - sx={{ '--Tabs-gap': '0px', maxWidth: 400, mx: 'auto' }} + sx={{ '--Tabs-gap': '0px' }} > ({ - '--bg': theme.vars.palette.background.level1, + '--bg': theme.vars.palette.background.surface, background: 'var(--bg)', boxShadow: '0 0 0 100vmax var(--bg)', clipPath: 'inset(0 -100vmax)', - px: 1.5, + px: 4, py: 2, })} > - Deals + Deals panel - Library + Library panel } /> diff --git a/docs/data/joy/components/tabs/TabsPageExample.tsx b/docs/data/joy/components/tabs/TabsPageExample.tsx index c49cafc73b4c30..4b9dbb1d42b305 100644 --- a/docs/data/joy/components/tabs/TabsPageExample.tsx +++ b/docs/data/joy/components/tabs/TabsPageExample.tsx @@ -17,7 +17,6 @@ export default function TabsPageExample() { bgcolor: 'background.body', flexGrow: 1, m: -3, - p: 3, overflowX: 'hidden', borderRadius: 'md', }} @@ -26,11 +25,15 @@ export default function TabsPageExample() { aria-label="Pipeline" value={index} onChange={(event, value) => setIndex(value as number)} - sx={{ '--Tabs-gap': '0px', maxWidth: 400, mx: 'auto' }} + sx={{ '--Tabs-gap': '0px' }} > ({ - '--bg': theme.vars.palette.background.level1, + '--bg': theme.vars.palette.background.surface, background: 'var(--bg)', boxShadow: '0 0 0 100vmax var(--bg)', clipPath: 'inset(0 -100vmax)', - px: 1.5, + px: 4, py: 2, })} > - Deals + Deals panel - Library + Library panel } /> diff --git a/docs/data/joy/components/tabs/TabsPricingExample.js b/docs/data/joy/components/tabs/TabsPricingExample.js index c497338b232af9..9f4424223becac 100644 --- a/docs/data/joy/components/tabs/TabsPricingExample.js +++ b/docs/data/joy/components/tabs/TabsPricingExample.js @@ -11,11 +11,17 @@ export default function TabsPricingExample() { size="sm" aria-label="Pricing plan" defaultValue={0} - sx={{ width: 343, '--Tabs-gap': '0px' }} + sx={(theme) => ({ + width: 343, + '--Tabs-gap': '0px', + borderRadius: 'lg', + boxShadow: 'sm', + overflow: 'auto', + border: `1px solid ${theme.vars.palette.divider}`, + })} > ({ + sx={{ '--List-item-radius': '0px', borderRadius: 0, [`& .${tabClasses.root}`]: { @@ -35,21 +41,18 @@ export default function TabsPricingExample() { height: 2, bgcolor: 'primary.400', }, - '&:not(:first-of-type)': { - borderLeft: `1px solid ${theme.vars.palette.divider}`, - }, [`&.${tabClasses.focusVisible}`]: { outlineOffset: '-3px', }, }, - })} + }} > Community Pro Premium - - + + Get started with the industry-standard React UI library, MIT-licensed. @@ -59,8 +62,8 @@ export default function TabsPricingExample() { - - + + Best for professional developers building enterprise or data-rich applications. @@ -71,8 +74,8 @@ export default function TabsPricingExample() { - - + + The most advanced features for data-rich applications, as well as the highest priority for support. diff --git a/docs/data/joy/components/tabs/TabsPricingExample.tsx b/docs/data/joy/components/tabs/TabsPricingExample.tsx index c497338b232af9..9f4424223becac 100644 --- a/docs/data/joy/components/tabs/TabsPricingExample.tsx +++ b/docs/data/joy/components/tabs/TabsPricingExample.tsx @@ -11,11 +11,17 @@ export default function TabsPricingExample() { size="sm" aria-label="Pricing plan" defaultValue={0} - sx={{ width: 343, '--Tabs-gap': '0px' }} + sx={(theme) => ({ + width: 343, + '--Tabs-gap': '0px', + borderRadius: 'lg', + boxShadow: 'sm', + overflow: 'auto', + border: `1px solid ${theme.vars.palette.divider}`, + })} > ({ + sx={{ '--List-item-radius': '0px', borderRadius: 0, [`& .${tabClasses.root}`]: { @@ -35,21 +41,18 @@ export default function TabsPricingExample() { height: 2, bgcolor: 'primary.400', }, - '&:not(:first-of-type)': { - borderLeft: `1px solid ${theme.vars.palette.divider}`, - }, [`&.${tabClasses.focusVisible}`]: { outlineOffset: '-3px', }, }, - })} + }} > Community Pro Premium - - + + Get started with the industry-standard React UI library, MIT-licensed. @@ -59,8 +62,8 @@ export default function TabsPricingExample() { - - + + Best for professional developers building enterprise or data-rich applications. @@ -71,8 +74,8 @@ export default function TabsPricingExample() { - - + + The most advanced features for data-rich applications, as well as the highest priority for support. diff --git a/docs/data/joy/components/tabs/TabsUsage.js b/docs/data/joy/components/tabs/TabsUsage.js index 06801939040ee7..2a884518ad7c00 100644 --- a/docs/data/joy/components/tabs/TabsUsage.js +++ b/docs/data/joy/components/tabs/TabsUsage.js @@ -5,6 +5,7 @@ import TabList from '@mui/joy/TabList'; import Tab from '@mui/joy/Tab'; export default function TabsUsage() { + const [index, setIndex] = React.useState(0); return ( ( - + setIndex(value)} + sx={{ borderRadius: 'lg' }} + > - Tab A - Tab B - Tab C + + Tab A + + + Tab B + + + Tab C + )} diff --git a/docs/data/joy/components/tabs/TabsVariants.js b/docs/data/joy/components/tabs/TabsVariants.js index 0dcdd500c7e295..2ece9310e8b59e 100644 --- a/docs/data/joy/components/tabs/TabsVariants.js +++ b/docs/data/joy/components/tabs/TabsVariants.js @@ -12,6 +12,7 @@ export default function TabsVariants() { aria-label="Plain tabs" value={index} onChange={(event, value) => setIndex(value)} + sx={{ borderRadius: 'lg' }} > First tab @@ -24,6 +25,7 @@ export default function TabsVariants() { aria-label="Outlined tabs" value={index} onChange={(event, value) => setIndex(value)} + sx={{ borderRadius: 'lg' }} > setIndex(value)} + sx={{ borderRadius: 'lg' }} > setIndex(value as number)} + sx={{ borderRadius: 'lg' }} > First tab @@ -24,6 +25,7 @@ export default function TabsVariants() { aria-label="Outlined tabs" value={index} onChange={(event, value) => setIndex(value as number)} + sx={{ borderRadius: 'lg' }} > setIndex(value as number)} + sx={{ borderRadius: 'lg' }} > First tab Second tab Third tab - + First tab panel - + Second tab panel - + Third tab panel diff --git a/docs/data/joy/components/tabs/TabsVertical.tsx b/docs/data/joy/components/tabs/TabsVertical.tsx index 489c4b239b8a50..5382103bb9550e 100644 --- a/docs/data/joy/components/tabs/TabsVertical.tsx +++ b/docs/data/joy/components/tabs/TabsVertical.tsx @@ -10,20 +10,20 @@ export default function TabsVertical() { aria-label="Vertical tabs" orientation="vertical" defaultValue={0} - sx={{ minWidth: 300 }} + sx={{ minWidth: 300, borderRadius: 'lg' }} > First tab Second tab Third tab - + First tab panel - + Second tab panel - + Third tab panel diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md index e2b73beffd875e..0f7d82d3f09a8c 100644 --- a/docs/data/joy/components/tabs/tabs.md +++ b/docs/data/joy/components/tabs/tabs.md @@ -19,7 +19,7 @@ Joy UI provides four tabs-related components: - `Tab`: A button to toggle a selected tab. - `TabPanel`: A pane that displays on the screen when its value matches with the selected tab. -{{"demo": "TabsUsage.js", "hideToolbar": true}} +{{"demo": "TabsUsage.js", "hideToolbar": true, "bg": "gradient"}} {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} @@ -120,7 +120,7 @@ You can use those to customize the component on both the `sx` prop and the theme {{"demo": "TabsPricingExample.js"}} -### Page tabs +### Page tabs with chips {{"demo": "TabsPageExample.js"}} diff --git a/docs/data/joy/components/text-field/text-field.md b/docs/data/joy/components/text-field/text-field.md index 855766f604e789..5f7d8c11378b70 100644 --- a/docs/data/joy/components/text-field/text-field.md +++ b/docs/data/joy/components/text-field/text-field.md @@ -14,7 +14,7 @@ unstyled: /base/react-input/ Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. -{{"demo": "TextFieldUsage.js", "hideToolbar": true}} +{{"demo": "TextFieldUsage.js", "hideToolbar": true, "bg": "gradient"}} {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/joy/components/textarea/TextareaFormProps.js b/docs/data/joy/components/textarea/TextareaFormProps.js index f7e560df97e2e0..50e59e8291b7fe 100644 --- a/docs/data/joy/components/textarea/TextareaFormProps.js +++ b/docs/data/joy/components/textarea/TextareaFormProps.js @@ -21,7 +21,7 @@ export default function TextareaFormProps() { }} >