diff --git a/.circleci/config.yml b/.circleci/config.yml index e95cb57aca352b..fbbeae9ee51a81 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -45,7 +45,7 @@ default-job: &default-job AWS_REGION_ARTIFACTS: eu-central-1 working_directory: /tmp/material-ui docker: - - image: cimg/node:18.19 + - image: cimg/node:18.20 default-context: &default-context context: @@ -215,6 +215,9 @@ jobs: #!/bin/bash VALE_STR_CLI_VERSION=3.3.0 + # set smart sudo + if [[ $EUID -eq 0 ]]; then export SUDO=""; else export SUDO="sudo"; fi + mkdir /tmp/vale-extract cd /tmp/vale-extract GZIPPED_OUTPUT="vale.tar.gz" diff --git a/.eslintrc.js b/.eslintrc.js index a75d1e007728ff..7f2b9b58f5c08a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,8 +1,8 @@ const path = require('path'); const { rules: baseStyleRules } = require('eslint-config-airbnb-base/rules/style'); -const forbidTopLevelMessage = [ - 'Prefer one level nested imports to avoid bundling everything in dev mode', +const OneLevelImportMessage = [ + 'Prefer one level nested imports to avoid bundling everything in dev mode or breaking CJS/ESM split.', 'See https://github.com/mui/material-ui/pull/24147 for the kind of win it can unlock.', ].join('\n'); // This only applies to packages published from this monorepo. @@ -65,7 +65,20 @@ module.exports = { 'no-restricted-imports': [ 'error', { - patterns: ['@mui/*/*/*'], + patterns: [ + { + group: [ + '@mui/*/*/*', + '@pigment-css/*/*/*', + '@base_ui/*/*/*', + // Allow any import depth with any internal packages + '!@mui/internal-*/**', + // TODO delete, @mui/docs should be @mui/internal-docs + '!@mui/docs/**', + ], + message: OneLevelImportMessage, + }, + ], }, ], 'no-continue': 'off', @@ -331,23 +344,6 @@ module.exports = { 'import/export': 'off', // Not sure why it doesn't work }, }, - { - files: ['*.tsx'], - excludedFiles: '*.spec.tsx', - rules: { - // WARNING: If updated, make sure these rules are merged with `no-restricted-imports` (#ts-source-files) - 'no-restricted-imports': [ - 'error', - { - patterns: [ - // Allow deeper imports for TypeScript types. TODO remove - '@mui/*/*/*/*', - ], - }, - ], - }, - }, - // Files used for generating TypeScript declaration files (#ts-source-files) { files: ['packages/*/src/**/*.tsx'], excludedFiles: '*.spec.tsx', @@ -429,11 +425,11 @@ module.exports = { paths: [ { name: '@mui/material', - message: forbidTopLevelMessage, + message: OneLevelImportMessage, }, { name: '@mui/lab', - message: forbidTopLevelMessage, + message: OneLevelImportMessage, }, ], }, diff --git a/CHANGELOG.md b/CHANGELOG.md index 906fc29283d096..65849f441603ae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,43 @@ # [Versions](https://mui.com/versions/) +## v6.0.0-alpha.5 + + + +_May 1, 2024_ + +A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨: + +### `@mui/material@6.0.0-alpha.5` + +- [FormControlLabel] Deprecate `componentsProps` (#41767) @sai6855 +- [PaginationItem] Deprecate components prop (#41777) @sai6855 +- [SvgIcon] Convert to support CSS extraction (#41779) @aarongarciah + +### `@mui/base@5.0.0-beta.43` + +- [TextareaAutosize] Fix resizing instability (#41638) @ZeeshanTamboli + +### Docs + +- Fix small SEO issues @oliviertassinari +- [material-ui] Fix minor spelling error in the "About the lab" page (#42073) @ryanhartwig +- [material-ui] Update Figma plugin name (#41967) @danilo-leal +- [material-ui][templates] Fix input props attributes in Landing Page template (#42013) @5-tom +- [system] Update typo on the sx prop page (#42035) @bricker + +### Core + +- [docs-infra] Clean up branding theme file and improve font-face readibility (#42023) @danilo-leal +- [docs-infra] Simplify docs demo (#42016) @oliviertassinari +- [website] Add content about the Sync plugin in the Material UI page (#40515) @danilo-leal +- [website] Sync career roles (#42058) @oliviertassinari +- [website] Add Nadja on the about page (#42021) @mnajdova +- [website] Fix code block design by changing the `MarkdownElement` import (#42022) @danilo-leal +- [wesbite] Remove duplicate MarkdownElement component (#42028) @danilo-leal + +All contributors of this release in alphabetical order: @5-tom, @aarongarciah, @bricker, @danilo-leal, @mnajdova, @oliviertassinari, @ryanhartwig, @sai6855, @ZeeshanTamboli + ## v6.0.0-alpha.4 diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index 7abeb88d47be57..b791a8dff8211c 100644 --- a/apps/pigment-css-vite-app/package.json +++ b/apps/pigment-css-vite-app/package.json @@ -33,7 +33,7 @@ "@vitejs/plugin-react": "^4.2.1", "postcss": "^8.4.38", "postcss-combine-media-query": "^1.0.1", - "vite": "5.2.8", + "vite": "5.2.10", "vite-plugin-pages": "^0.32.1" }, "nx": { diff --git a/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx index 81de28da9f9b23..9d05cf3a262d24 100644 --- a/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx +++ b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx @@ -10,7 +10,7 @@ import { import { isHostComponent, useSlotProps } from '@mui/base/utils'; import { styled } from '@pigment-css/react'; import { capitalize } from '@mui/material/utils'; -import SliderValueLabel from '@mui/material/Slider/SliderValueLabel'; +import { SliderValueLabel } from '@mui/material/Slider'; import { useSlider, valueToPercent } from '@mui/base/useSlider'; import { alpha, lighten, darken } from '@mui/system/colorManipulator'; import type { Theme } from '@mui/material/styles'; diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md index ec81b25bf8bdb1..27a444d18a48aa 100644 --- a/docs/data/base/components/autocomplete/autocomplete.md +++ b/docs/data/base/components/autocomplete/autocomplete.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

An autocomplete component is a text input enhanced by a panel of suggested options.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/badge/badge.md b/docs/data/base/components/badge/badge.md index e5c11fd7021bfd..5467bd9d364db6 100644 --- a/docs/data/base/components/badge/badge.md +++ b/docs/data/base/components/badge/badge.md @@ -10,7 +10,7 @@ githubLabel: 'component: badge'

The Badge component generates a small label that is attached to its child element.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md index 33482d138fa452..3d3ad1c1aa5e8f 100644 --- a/docs/data/base/components/button/button.md +++ b/docs/data/base/components/button/button.md @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/

Buttons let users take actions and make choices with a single tap.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/click-away-listener/click-away-listener.md b/docs/data/base/components/click-away-listener/click-away-listener.md index 7d67d0a2390dbe..4ee9cd3c97fd2e 100644 --- a/docs/data/base/components/click-away-listener/click-away-listener.md +++ b/docs/data/base/components/click-away-listener/click-away-listener.md @@ -9,7 +9,7 @@ githubLabel: 'component: ClickAwayListener'

The Click-Away Listener component detects when a click event happens outside of its child element.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/focus-trap/focus-trap.md b/docs/data/base/components/focus-trap/focus-trap.md index e04aa60f994042..bd13cb0d35bcb7 100644 --- a/docs/data/base/components/focus-trap/focus-trap.md +++ b/docs/data/base/components/focus-trap/focus-trap.md @@ -9,7 +9,7 @@ githubLabel: 'component: FocusTrap'

The Focus Trap component prevents the user's focus from escaping its children components.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/form-control/form-control.md b/docs/data/base/components/form-control/form-control.md index e60a78eeae01bd..0179ebdb4e1d54 100644 --- a/docs/data/base/components/form-control/form-control.md +++ b/docs/data/base/components/form-control/form-control.md @@ -10,7 +10,7 @@ githubLabel: 'component: FormControl'

The Form Control component is a utility that lets you associate a form input with auxiliary components, such as labels, error indicators, or helper text.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md index 829f2b3e7487d5..c5889e5340f340 100644 --- a/docs/data/base/components/input/input.md +++ b/docs/data/base/components/input/input.md @@ -10,7 +10,7 @@ githubLabel: 'component: input'

The Input component provides users with a field to enter and edit text.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md index dfc881cd2684dd..fe7892d6fc09a3 100644 --- a/docs/data/base/components/menu/menu.md +++ b/docs/data/base/components/menu/menu.md @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/

The Dropdown Menu components provide end users with a list of options on temporary surfaces.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/modal/modal.md b/docs/data/base/components/modal/modal.md index 320a90cef4ea63..d902ca920e1129 100644 --- a/docs/data/base/components/modal/modal.md +++ b/docs/data/base/components/modal/modal.md @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

The Modal component lets you create dialogs, popovers, lightboxes, and other elements that force the user to take action before continuing.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/no-ssr/no-ssr.md b/docs/data/base/components/no-ssr/no-ssr.md index 5bdc6fbf9fce0a..61c26b8d1629a7 100644 --- a/docs/data/base/components/no-ssr/no-ssr.md +++ b/docs/data/base/components/no-ssr/no-ssr.md @@ -8,7 +8,7 @@ components: NoSsr

The No-SSR component defers the rendering of children components from the server to the client.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md index ac0c977a23a795..a69f324e3e4db4 100644 --- a/docs/data/base/components/number-input/number-input.md +++ b/docs/data/base/components/number-input/number-input.md @@ -10,7 +10,7 @@ githubLabel: 'component: number input'

The Number Input component provides users with a field for integer values, and buttons to increment or decrement the value.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/popper/popper.md b/docs/data/base/components/popper/popper.md index fd37f255e6292a..082f0cb07edaeb 100644 --- a/docs/data/base/components/popper/popper.md +++ b/docs/data/base/components/popper/popper.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

The Popper component lets you create tooltips and popovers that display information about an element on the page.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/popup/popup.md b/docs/data/base/components/popup/popup.md index c144abc5d8468e..b48c0344a1afb5 100644 --- a/docs/data/base/components/popup/popup.md +++ b/docs/data/base/components/popup/popup.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

The Popup component is a utility that lets you display content in tooltips and popovers.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/portal/portal.md b/docs/data/base/components/portal/portal.md index 6e060cae6bc911..0a7c4675bfa08c 100644 --- a/docs/data/base/components/portal/portal.md +++ b/docs/data/base/components/portal/portal.md @@ -9,7 +9,7 @@ githubLabel: 'component: Portal'

The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md index 7b66ecc94cc074..67479247cfd053 100644 --- a/docs/data/base/components/select/select.md +++ b/docs/data/base/components/select/select.md @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-sel

The Select components let you create lists of options for users to choose from.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md index daf7b9263aa969..4bbfe6580be394 100644 --- a/docs/data/base/components/slider/slider.md +++ b/docs/data/base/components/slider/slider.md @@ -12,7 +12,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/

A slider is a UI element that lets users select a single value or a range of values along a bar.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/snackbar/snackbar.md b/docs/data/base/components/snackbar/snackbar.md index cc2648ec57394a..d10ea1fcb99068 100644 --- a/docs/data/base/components/snackbar/snackbar.md +++ b/docs/data/base/components/snackbar/snackbar.md @@ -10,7 +10,7 @@ githubLabel: 'component: snackbar'

The Snackbar component informs users that an action has been or will be performed by the app.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/switch/switch.md b/docs/data/base/components/switch/switch.md index 395dbbcd8a6e2f..d93177616509a9 100644 --- a/docs/data/base/components/switch/switch.md +++ b/docs/data/base/components/switch/switch.md @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/switch/

Switches are UI elements that let users choose between two states—most commonly on/off.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/table-pagination/table-pagination.md b/docs/data/base/components/table-pagination/table-pagination.md index 577b677687a432..7ce1e173c99419 100644 --- a/docs/data/base/components/table-pagination/table-pagination.md +++ b/docs/data/base/components/table-pagination/table-pagination.md @@ -9,7 +9,7 @@ githubLabel: 'component: TablePagination'

Table Pagination is an interface tool for splitting up large amounts of data to make it easier for users to navigate.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md index aaf0a1a86923b6..bb5bf1c80abf74 100644 --- a/docs/data/base/components/tabs/tabs.md +++ b/docs/data/base/components/tabs/tabs.md @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

Tabs are UI elements for organizing and navigating between groups of related content.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md index cc8f6e7908272d..3909eb87a6081a 100644 --- a/docs/data/base/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/base/components/textarea-autosize/textarea-autosize.md @@ -9,7 +9,7 @@ githubLabel: 'component: TextareaAutosize'

The Textarea Autosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} {{"component": "modules/components/ComponentPageTabs.js"}} diff --git a/docs/data/joy/components/alert/alert.md b/docs/data/joy/components/alert/alert.md index 1fbbebc46b645d..560f26be0d45f5 100644 --- a/docs/data/joy/components/alert/alert.md +++ b/docs/data/joy/components/alert/alert.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/

Alerts display brief messages for the user without interrupting their use of the app.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/autocomplete/autocomplete.md b/docs/data/joy/components/autocomplete/autocomplete.md index a9e17593ccc14e..cada9f732e9dfb 100644 --- a/docs/data/joy/components/autocomplete/autocomplete.md +++ b/docs/data/joy/components/autocomplete/autocomplete.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

The autocomplete is a text input enhanced by a panel of suggested options when users start typing.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md index ba9fc135dcf91e..89affd7f893952 100644 --- a/docs/data/joy/components/avatar/avatar.md +++ b/docs/data/joy/components/avatar/avatar.md @@ -9,7 +9,7 @@ githubLabel: 'component: avatar'

An avatar is a graphical representation of a user's identity.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md index da680daf92e860..e5ba349dfeaf25 100644 --- a/docs/data/joy/components/badge/badge.md +++ b/docs/data/joy/components/badge/badge.md @@ -10,7 +10,7 @@ unstyled: /base-ui/react-badge/

The Badge component generates a small label that is attached to its child element.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md index 3e55989f6f1428..2204160edbcd04 100644 --- a/docs/data/joy/components/box/box.md +++ b/docs/data/joy/components/box/box.md @@ -11,7 +11,7 @@ githubLabel: 'component: Box'

The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Introduction diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md index f1ed8756bd9cd8..84794e25894b40 100644 --- a/docs/data/joy/components/breadcrumbs/breadcrumbs.md +++ b/docs/data/joy/components/breadcrumbs/breadcrumbs.md @@ -9,7 +9,7 @@ githubLabel: 'component: breadcrumbs'

A breadcrumb trail is a navigational tool that helps users keep track of their location within an app.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/button-group/button-group.md b/docs/data/joy/components/button-group/button-group.md index 68e5e8ba128eab..7068e5f0c702fd 100644 --- a/docs/data/joy/components/button-group/button-group.md +++ b/docs/data/joy/components/button-group/button-group.md @@ -9,7 +9,7 @@ githubLabel: 'component: ButtonGroup'

The Button Group combines a set of related buttons.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md index 9e4f29a8145cce..b6bed946b9590a 100644 --- a/docs/data/joy/components/button/button.md +++ b/docs/data/joy/components/button/button.md @@ -11,7 +11,7 @@ unstyled: /base-ui/react-button/

Buttons let users take actions and make choices with a single tap.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/checkbox/checkbox.md b/docs/data/joy/components/checkbox/checkbox.md index b5635a89535cb0..4583812b0d8664 100644 --- a/docs/data/joy/components/checkbox/checkbox.md +++ b/docs/data/joy/components/checkbox/checkbox.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/

Checkboxes give users binary choices when presented with multiple options in a series.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md index 354cae971dac44..49f2700d60a6f7 100644 --- a/docs/data/joy/components/chip/chip.md +++ b/docs/data/joy/components/chip/chip.md @@ -9,7 +9,7 @@ githubLabel: 'component: chip'

Chip generates a compact element that can represent an input, attribute, or action.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md index e3013c9b620074..54438dee645a39 100644 --- a/docs/data/joy/components/circular-progress/circular-progress.md +++ b/docs/data/joy/components/circular-progress/circular-progress.md @@ -9,7 +9,7 @@ githubLabel: 'component: CircularProgress'

The Circular Progress component showcases the duration of a process or an indefinite wait period.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/css-baseline/css-baseline.md b/docs/data/joy/components/css-baseline/css-baseline.md index 5cee110d9f696d..9a2eca746350c7 100644 --- a/docs/data/joy/components/css-baseline/css-baseline.md +++ b/docs/data/joy/components/css-baseline/css-baseline.md @@ -8,7 +8,7 @@ githubLabel: 'component: CssBaseline'

Joy UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Global reset diff --git a/docs/data/joy/components/divider/divider.md b/docs/data/joy/components/divider/divider.md index ab444f20c44650..60917da7cbab5f 100644 --- a/docs/data/joy/components/divider/divider.md +++ b/docs/data/joy/components/divider/divider.md @@ -9,7 +9,7 @@ githubLabel: 'component: divider'

A divider is a thin line that groups content in lists and layouts.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md index ce79bb669f6ffa..27575fa6d3bca4 100644 --- a/docs/data/joy/components/input/input.md +++ b/docs/data/joy/components/input/input.md @@ -9,7 +9,7 @@ unstyled: /base-ui/react-input/

The Input component facilitates the entry of text data from the user.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/linear-progress/linear-progress.md b/docs/data/joy/components/linear-progress/linear-progress.md index d5fa84c4a70e36..c3f381602087a2 100644 --- a/docs/data/joy/components/linear-progress/linear-progress.md +++ b/docs/data/joy/components/linear-progress/linear-progress.md @@ -9,7 +9,7 @@ githubLabel: 'component: LinearProgress'

Linear Progress indicators, commonly known as loaders, express an unspecified wait time or display the length of a process.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md index c72566cec43026..3b4f8a91fda5ad 100644 --- a/docs/data/joy/components/link/link.md +++ b/docs/data/joy/components/link/link.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/link/

The Link component lets you customize anchor tags with theme colors and typography styles.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/modal/modal.md b/docs/data/joy/components/modal/modal.md index 9fe6a5c5621f37..ff5045d23f6792 100644 --- a/docs/data/joy/components/modal/modal.md +++ b/docs/data/joy/components/modal/modal.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/radio-button/radio-button.md b/docs/data/joy/components/radio-button/radio-button.md index 8cce03965dc20a..83d1d72e4e3177 100644 --- a/docs/data/joy/components/radio-button/radio-button.md +++ b/docs/data/joy/components/radio-button/radio-button.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radio/

Radio buttons enable the user to select one option from a set.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md index 3d88869106591a..ecfd4ace80361b 100644 --- a/docs/data/joy/components/select/select.md +++ b/docs/data/joy/components/select/select.md @@ -11,7 +11,7 @@ unstyled: /base-ui/react-select/

Select components are used for collecting user-provided information from a list of options.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md index 5aee7ff6591289..390e7b1b8616c1 100644 --- a/docs/data/joy/components/sheet/sheet.md +++ b/docs/data/joy/components/sheet/sheet.md @@ -8,7 +8,7 @@ components: Sheet

Sheet is a generic container that supports Joy UI's global variants.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/slider/slider.md b/docs/data/joy/components/slider/slider.md index b667754bda120d..795077148638bb 100644 --- a/docs/data/joy/components/slider/slider.md +++ b/docs/data/joy/components/slider/slider.md @@ -10,7 +10,7 @@ unstyled: /base-ui/react-slider/

Slider generates a background element that can be used for various purposes.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/snackbar/snackbar.md b/docs/data/joy/components/snackbar/snackbar.md index 7146bbff32b707..c945fa5695f2dd 100644 --- a/docs/data/joy/components/snackbar/snackbar.md +++ b/docs/data/joy/components/snackbar/snackbar.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/

The Snackbar, also commonly referred to as Toast, component informs users that an action has been or will be performed by the app.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/stack/stack.md b/docs/data/joy/components/stack/stack.md index a6143207d9ddc9..4e63883a90f3b9 100644 --- a/docs/data/joy/components/stack/stack.md +++ b/docs/data/joy/components/stack/stack.md @@ -9,7 +9,7 @@ githubLabel: 'component: Stack'

Stack is a container component for arranging elements vertically or horizontally.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md index b67463b390bd2f..be49a207cf053f 100644 --- a/docs/data/joy/components/switch/switch.md +++ b/docs/data/joy/components/switch/switch.md @@ -10,7 +10,7 @@ unstyled: /base-ui/react-switch/

Switches toggle the state of a single setting on or off.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/table/table.md b/docs/data/joy/components/table/table.md index dfe7cf218332be..51148cc5b13b05 100644 --- a/docs/data/joy/components/table/table.md +++ b/docs/data/joy/components/table/table.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/table/

Tables display sets of data organized in rows and columns.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md index 26395c96a11a63..a0370ad6719bde 100644 --- a/docs/data/joy/components/tabs/tabs.md +++ b/docs/data/joy/components/tabs/tabs.md @@ -11,7 +11,7 @@ unstyled: /base-ui/react-tabs/

Tabs make it easy to explore and switch between different views.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md index c1a29d13c9a6c1..40513178fa5524 100644 --- a/docs/data/joy/components/textarea/textarea.md +++ b/docs/data/joy/components/textarea/textarea.md @@ -10,7 +10,7 @@ unstyled: /base-ui/react-textarea-autosize/

Textarea component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Introduction diff --git a/docs/data/joy/components/tooltip/tooltip.md b/docs/data/joy/components/tooltip/tooltip.md index 4350e40a1523d3..958b6ce3ab25e4 100644 --- a/docs/data/joy/components/tooltip/tooltip.md +++ b/docs/data/joy/components/tooltip/tooltip.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

Tooltips display informative text when users hover over, focus on, or tap an element.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/about-the-lab/about-the-lab.md b/docs/data/material/components/about-the-lab/about-the-lab.md index 5119f8e01eb3f2..0b86d1f0c90305 100644 --- a/docs/data/material/components/about-the-lab/about-the-lab.md +++ b/docs/data/material/components/about-the-lab/about-the-lab.md @@ -8,7 +8,7 @@ As developers use and test the components and report issues, the maintainers lea For a component to be ready to move to the core, the following criteria are considered: -- It needs to be **used**. We uses Google Analytics in the documentation (among other metrics) to evaluate the usage of each component. A lab component with low usage either means that it isn't fully working yet, or that there is low demand for it. +- It needs to be **used**. We use Google Analytics in the documentation (among other metrics) to evaluate the usage of each component. A lab component with low usage either means that it isn't fully working yet, or that there is low demand for it. - It needs to match the **code quality** of the core components. It doesn't have to be perfect to be part of the core, but the component should be reliable enough that developers can depend on it. - Each component needs **type definitions**. It is not currently required that a lab component is typed, but it would need to be typed to move to the core. - Requires good **test coverage**. Some of the lab components don't currently have comprehensive tests. diff --git a/docs/data/material/components/accordion/accordion.md b/docs/data/material/components/accordion/accordion.md index 719a1a7ca78261..43a50d50aec4e0 100644 --- a/docs/data/material/components/accordion/accordion.md +++ b/docs/data/material/components/accordion/accordion.md @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

The Accordion component lets users show and hide sections of related content on a page.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/alert/alert.md b/docs/data/material/components/alert/alert.md index 1f1a903f2c78ba..185b7013b709e9 100644 --- a/docs/data/material/components/alert/alert.md +++ b/docs/data/material/components/alert/alert.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/

Alerts display brief messages for the user without interrupting their use of the app.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md index 10ea9272ec4390..c067e4ee03ac22 100644 --- a/docs/data/material/components/app-bar/app-bar.md +++ b/docs/data/material/components/app-bar/app-bar.md @@ -14,7 +14,7 @@ The top App bar provides content and actions related to the current screen. It's It can transform into a contextual action bar or be used as a navbar. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic App bar diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md index 3fe82cf70232db..a69f3a16ac3619 100644 --- a/docs/data/material/components/autocomplete/autocomplete.md +++ b/docs/data/material/components/autocomplete/autocomplete.md @@ -17,7 +17,7 @@ The widget is useful for setting the value of a single-line textbox in one of tw It's meant to be an improved version of the "react-select" and "downshift" packages. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Combo box diff --git a/docs/data/material/components/avatars/avatars.md b/docs/data/material/components/avatars/avatars.md index b67ee06436f943..78d661da7bcdfe 100644 --- a/docs/data/material/components/avatars/avatars.md +++ b/docs/data/material/components/avatars/avatars.md @@ -9,7 +9,7 @@ githubLabel: 'component: avatar'

Avatars are found throughout material design with uses in everything from tables to dialog menus.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Image avatars diff --git a/docs/data/material/components/backdrop/backdrop.md b/docs/data/material/components/backdrop/backdrop.md index 8255a55f20623b..480cbb2176b18e 100644 --- a/docs/data/material/components/backdrop/backdrop.md +++ b/docs/data/material/components/backdrop/backdrop.md @@ -12,7 +12,7 @@ githubLabel: 'component: backdrop' The Backdrop signals a state change within the application and can be used for creating loaders, dialogs, and more. In its simplest form, the Backdrop component will add a dimmed layer over your application. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Example diff --git a/docs/data/material/components/badges/badges.md b/docs/data/material/components/badges/badges.md index 143dd849cd3bea..afe2a11c2d73dc 100644 --- a/docs/data/material/components/badges/badges.md +++ b/docs/data/material/components/badges/badges.md @@ -10,7 +10,7 @@ unstyled: /base-ui/react-badge/

Badge generates a small badge to the top-right of its child(ren).

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic badge diff --git a/docs/data/material/components/bottom-navigation/bottom-navigation.md b/docs/data/material/components/bottom-navigation/bottom-navigation.md index ee1c9da6bfbb2a..29e8ff56dfe66e 100644 --- a/docs/data/material/components/bottom-navigation/bottom-navigation.md +++ b/docs/data/material/components/bottom-navigation/bottom-navigation.md @@ -12,7 +12,7 @@ materialDesign: https://m2.material.io/components/bottom-navigation Bottom navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Bottom navigation diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md index d7067da6199723..1c34e9399eb6fe 100644 --- a/docs/data/material/components/box/box.md +++ b/docs/data/material/components/box/box.md @@ -11,7 +11,7 @@ githubLabel: 'component: Box'

The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Introduction diff --git a/docs/data/material/components/breadcrumbs/breadcrumbs.md b/docs/data/material/components/breadcrumbs/breadcrumbs.md index f76696587d0bcb..7468c550e3eba1 100644 --- a/docs/data/material/components/breadcrumbs/breadcrumbs.md +++ b/docs/data/material/components/breadcrumbs/breadcrumbs.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

A breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic breadcrumbs diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md index a0645298d04bb6..c5a1732e01635c 100644 --- a/docs/data/material/components/button-group/button-group.md +++ b/docs/data/material/components/button-group/button-group.md @@ -9,7 +9,7 @@ githubLabel: 'component: ButtonGroup'

The ButtonGroup component can be used to group related buttons.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic button group diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index 247609d8aa46e9..e4be4419583610 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -19,7 +19,7 @@ Buttons communicate actions that users can take. They are typically placed throu - Cards - Toolbars -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic button diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index fa18974f8bd743..e6c0ccba1d699f 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -10,7 +10,7 @@ materialDesign: https://m2.material.io/components/cards

Cards contain content and actions about a single subject.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/checkboxes/checkboxes.md b/docs/data/material/components/checkboxes/checkboxes.md index c2ef0d2ec1984f..8af3d4f249d28e 100644 --- a/docs/data/material/components/checkboxes/checkboxes.md +++ b/docs/data/material/components/checkboxes/checkboxes.md @@ -17,7 +17,7 @@ If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic checkboxes diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md index 65063426ca27a8..3d44914c403a33 100644 --- a/docs/data/material/components/chips/chips.md +++ b/docs/data/material/components/chips/chips.md @@ -16,7 +16,7 @@ While included here as a standalone component, the most common use will be in some form of input, so some of the behavior demonstrated here is not shown in context. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic chip diff --git a/docs/data/material/components/container/container.md b/docs/data/material/components/container/container.md index 45efa92410cbd7..c585be2d5e869b 100644 --- a/docs/data/material/components/container/container.md +++ b/docs/data/material/components/container/container.md @@ -11,7 +11,7 @@ githubLabel: 'component: Container' While containers can be nested, most layouts do not require a nested container. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Fluid diff --git a/docs/data/material/components/css-baseline/css-baseline.md b/docs/data/material/components/css-baseline/css-baseline.md index 3b8a0705dab550..8842568bbd2d65 100644 --- a/docs/data/material/components/css-baseline/css-baseline.md +++ b/docs/data/material/components/css-baseline/css-baseline.md @@ -8,7 +8,7 @@ githubLabel: 'component: CssBaseline'

The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Global reset diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index 87a89ff8ed435a..c352355a2982a2 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -15,7 +15,7 @@ A Dialog is a type of [modal](/material-ui/react-modal/) window that appears in Dialogs are purposefully interruptive, so they should be used sparingly. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/dividers/dividers.md b/docs/data/material/components/dividers/dividers.md index f04e1470606b84..cc755df9900e29 100644 --- a/docs/data/material/components/dividers/dividers.md +++ b/docs/data/material/components/dividers/dividers.md @@ -10,7 +10,7 @@ materialDesign: https://m2.material.io/components/dividers

The Divider component provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md index 8bd8e8048dce8e..7199a9466051e9 100644 --- a/docs/data/material/components/drawers/drawers.md +++ b/docs/data/material/components/drawers/drawers.md @@ -14,7 +14,7 @@ A navigation drawer can either be permanently on-screen or controlled by a navig [Side sheets](https://m2.material.io/components/sheets-side) are supplementary surfaces primarily used on tablet and desktop. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Temporary drawer diff --git a/docs/data/material/components/floating-action-button/floating-action-button.md b/docs/data/material/components/floating-action-button/floating-action-button.md index 6e5c096186b17d..e22b11bf0a7649 100644 --- a/docs/data/material/components/floating-action-button/floating-action-button.md +++ b/docs/data/material/components/floating-action-button/floating-action-button.md @@ -16,7 +16,7 @@ FABs come in two types: regular, and extended. Only use a FAB if it is the most suitable way to present a screen's primary action. Only one component is recommended per screen to represent the most common action. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic FAB diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md index 420cdf26beff01..840c6fc2368108 100644 --- a/docs/data/material/components/grid/grid.md +++ b/docs/data/material/components/grid/grid.md @@ -13,7 +13,7 @@ materialDesign: https://m2.material.io/design/layout/understanding-layout.html The [grid](https://m2.material.io/design/layout/responsive-layout-grid.html) creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design's responsive UI is based on a 12-column grid layout. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} :::warning The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/x/react-data-grid/). diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md index 03fcf8ae305888..1c32d9346ace42 100644 --- a/docs/data/material/components/grid2/grid2.md +++ b/docs/data/material/components/grid2/grid2.md @@ -9,7 +9,7 @@ materialDesign: https://m2.material.io/design/layout/understanding-layout.html

The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} The `Grid` component works well for a layout with a known number of columns. The columns can be configured with multiple breakpoints to specify the column span of each child. diff --git a/docs/data/material/components/hidden/hidden.md b/docs/data/material/components/hidden/hidden.md index 51328ec067352a..d1e62eb96deac6 100644 --- a/docs/data/material/components/hidden/hidden.md +++ b/docs/data/material/components/hidden/hidden.md @@ -15,4 +15,4 @@ To learn more, see [the Hidden section](/material-ui/migration/v5-component-chan

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} diff --git a/docs/data/material/components/image-list/image-list.md b/docs/data/material/components/image-list/image-list.md index 73fbfd34081f8a..e69a39e7e02463 100644 --- a/docs/data/material/components/image-list/image-list.md +++ b/docs/data/material/components/image-list/image-list.md @@ -12,7 +12,7 @@ githubLabel: 'component: image list' Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Standard image list diff --git a/docs/data/material/components/links/links.md b/docs/data/material/components/links/links.md index ce38fcb86e07e6..1f342e8700eb92 100644 --- a/docs/data/material/components/links/links.md +++ b/docs/data/material/components/links/links.md @@ -9,7 +9,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/link/

The Link component allows you to easily customize anchor elements with your theme colors and typography styles.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic links diff --git a/docs/data/material/components/lists/lists.md b/docs/data/material/components/lists/lists.md index 0f9fd925005ecb..70b2a98889aca3 100644 --- a/docs/data/material/components/lists/lists.md +++ b/docs/data/material/components/lists/lists.md @@ -12,7 +12,7 @@ materialDesign: https://m2.material.io/components/lists Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/masonry/masonry.md b/docs/data/material/components/masonry/masonry.md index 333c439874680f..d1e9e831eb52e5 100644 --- a/docs/data/material/components/masonry/masonry.md +++ b/docs/data/material/components/masonry/masonry.md @@ -13,7 +13,7 @@ Masonry maintains a list of content blocks with a consistent width but different The contents are ordered by row. If a row is already filled with the specified number of columns, the next item starts another row, and it is added to the shortest column in order to optimize the use of space. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Basic masonry diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md index ae09f5b703ff71..12a8e683c8789e 100644 --- a/docs/data/material/components/material-icons/material-icons.md +++ b/docs/data/material/components/material-icons/material-icons.md @@ -10,7 +10,7 @@ githubLabel: 'package: icons'

2,100+ ready-to-use React Material Icons from the official website.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}}
[@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material) diff --git a/docs/data/material/components/material-icons/synonyms.js b/docs/data/material/components/material-icons/synonyms.js index d5bde34d740e76..5a09c5a3e05d06 100644 --- a/docs/data/material/components/material-icons/synonyms.js +++ b/docs/data/material/components/material-icons/synonyms.js @@ -834,6 +834,7 @@ const synonyms = { ElevenMp: 'camera digits font image letters megapixels numbers quality resolution symbol text type', Email: 'envelope letters message note post receive send write', + Emergency: 'asterisk clinic health hospital maps medical symbol', EmergencyRecording: 'alert attention camera caution danger filming hardware image important motion notification picture videography warning', EmergencyShare: 'alert attention caution danger important notification warning', diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md index 28b851d344b98b..259f1c68ead249 100644 --- a/docs/data/material/components/menus/menus.md +++ b/docs/data/material/components/menus/menus.md @@ -14,7 +14,7 @@ unstyled: /base-ui/react-menu/ A menu displays a list of choices on a temporary surface. It appears when the user interacts with a button, or other control. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic menu diff --git a/docs/data/material/components/modal/modal.md b/docs/data/material/components/modal/modal.md index d50cc10cb69af4..4a8d2f040e20e4 100644 --- a/docs/data/material/components/modal/modal.md +++ b/docs/data/material/components/modal/modal.md @@ -21,7 +21,7 @@ The `Modal` offers important features: and keeping it there until the modal is closed. - ♿️ Adds the appropriate ARIA roles automatically. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} :::info The term "modal" is sometimes used to mean "dialog", but this is a misnomer. diff --git a/docs/data/material/components/pagination/pagination.md b/docs/data/material/components/pagination/pagination.md index 561f7d4dc5c358..2d5005cadb0f28 100644 --- a/docs/data/material/components/pagination/pagination.md +++ b/docs/data/material/components/pagination/pagination.md @@ -9,7 +9,7 @@ githubLabel: 'component: pagination'

The Pagination component enables the user to select a specific page from a range of pages.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic pagination diff --git a/docs/data/material/components/paper/paper.md b/docs/data/material/components/paper/paper.md index 884d2ffea0f6f1..ffb71f3825ab99 100644 --- a/docs/data/material/components/paper/paper.md +++ b/docs/data/material/components/paper/paper.md @@ -10,7 +10,7 @@ materialDesign: https://m2.material.io/design/environment/elevation.html

The Paper component is a container for displaying content on an elevated surface.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/popover/popover.md b/docs/data/material/components/popover/popover.md index 673969876e2c34..5379cf0ecf4176 100644 --- a/docs/data/material/components/popover/popover.md +++ b/docs/data/material/components/popover/popover.md @@ -14,7 +14,7 @@ Things to know when using the `Popover` component: - The component is built on top of the [`Modal`](/material-ui/react-modal/) component. - The scroll and click away are blocked unlike with the [`Popper`](/material-ui/react-popper/) component. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Basic Popover diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md index f955d7f43a8330..bd10fa395b0115 100644 --- a/docs/data/material/components/popper/popper.md +++ b/docs/data/material/components/popper/popper.md @@ -22,7 +22,7 @@ Some important features of the `Popper` component: If you need this behavior, you can use [`ClickAwayListener`](/material-ui/react-click-away-listener/) - see the example in the [menu documentation section](/material-ui/react-menu/#menulist-composition). - The `anchorEl` is passed as the reference object to create a new `Popper.js` instance. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Basic popper diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md index 74893d02d8496a..963bbafed90f5d 100644 --- a/docs/data/material/components/progress/progress.md +++ b/docs/data/material/components/progress/progress.md @@ -17,7 +17,7 @@ Progress indicators inform users about the status of ongoing processes, such as The animations of the components rely on CSS as much as possible to work even before the JavaScript is loaded. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Circular diff --git a/docs/data/material/components/radio-buttons/radio-buttons.md b/docs/data/material/components/radio-buttons/radio-buttons.md index b73b440e9f5b36..28a60256665262 100644 --- a/docs/data/material/components/radio-buttons/radio-buttons.md +++ b/docs/data/material/components/radio-buttons/radio-buttons.md @@ -16,7 +16,7 @@ If available options can be collapsed, consider using a [Select component](/mate Radio buttons should have the most commonly used option selected by default. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Radio group diff --git a/docs/data/material/components/rating/rating.md b/docs/data/material/components/rating/rating.md index 4d39e67366971e..fb2e134f954d67 100644 --- a/docs/data/material/components/rating/rating.md +++ b/docs/data/material/components/rating/rating.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating

Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic rating diff --git a/docs/data/material/components/selects/selects.md b/docs/data/material/components/selects/selects.md index 634af8b9fe4021..10d6a7b198861b 100644 --- a/docs/data/material/components/selects/selects.md +++ b/docs/data/material/components/selects/selects.md @@ -12,7 +12,7 @@ unstyled: /base-ui/react-select/

Select components are used for collecting user provided information from a list of options.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic select diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md index da7cacad060fb6..3a16a710d11297 100644 --- a/docs/data/material/components/skeleton/skeleton.md +++ b/docs/data/material/components/skeleton/skeleton.md @@ -11,7 +11,7 @@ githubLabel: 'component: skeleton' The data for your components might not be immediately available. You can improve the perceived responsiveness of the page by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)). -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Usage diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index 3c902577906cd6..ea682f7c11f500 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -14,7 +14,7 @@ unstyled: /base-ui/react-slider/ Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Continuous sliders diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md index a8824998e95c23..f860e82866a5f8 100644 --- a/docs/data/material/components/snackbars/snackbars.md +++ b/docs/data/material/components/snackbars/snackbars.md @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/TR/wai-aria-1.1/#alert

Snackbars (also known as toasts) are used for brief notifications of processes that have been or will be performed.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/speed-dial/speed-dial.md b/docs/data/material/components/speed-dial/speed-dial.md index e6095ea490da30..8d9771c6c9911b 100644 --- a/docs/data/material/components/speed-dial/speed-dial.md +++ b/docs/data/material/components/speed-dial/speed-dial.md @@ -13,7 +13,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ If more than six actions are needed, something other than a FAB should be used to present them. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic speed dial diff --git a/docs/data/material/components/stack/stack.md b/docs/data/material/components/stack/stack.md index b50b3170526685..5948e3f2d64c14 100644 --- a/docs/data/material/components/stack/stack.md +++ b/docs/data/material/components/stack/stack.md @@ -17,7 +17,7 @@ The Stack component manages the layout of its immediate children along the verti Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical _and_ horizontal arrangement. ::: -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basics diff --git a/docs/data/material/components/steppers/steppers.md b/docs/data/material/components/steppers/steppers.md index 8b8181d6db1497..c026f1aec4b2f6 100644 --- a/docs/data/material/components/steppers/steppers.md +++ b/docs/data/material/components/steppers/steppers.md @@ -16,7 +16,7 @@ Steppers may display a transient feedback message after a step is saved. - **Types of Steps**: Editable, Non-editable, Mobile, Optional - **Types of Steppers**: Horizontal, Vertical, Linear, Non-linear -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} :::info This component is no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support it. diff --git a/docs/data/material/components/switches/switches.md b/docs/data/material/components/switches/switches.md index 81ba2f452d1077..ab7a8bf20c31b2 100644 --- a/docs/data/material/components/switches/switches.md +++ b/docs/data/material/components/switches/switches.md @@ -15,7 +15,7 @@ Switches are the preferred way to adjust 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. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic switches diff --git a/docs/data/material/components/table/table.md b/docs/data/material/components/table/table.md index e1d46204399ad9..2703eb5b5a14ab 100644 --- a/docs/data/material/components/table/table.md +++ b/docs/data/material/components/table/table.md @@ -17,7 +17,7 @@ Tables display information in a way that's easy to scan, so that users can look - Navigation - Tools to query and manipulate data -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic table diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md index 443e2daf8cda99..370b2450044f9c 100644 --- a/docs/data/material/components/tabs/tabs.md +++ b/docs/data/material/components/tabs/tabs.md @@ -14,7 +14,7 @@ unstyled: /base-ui/react-tabs/ Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Introduction diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index f9a954f8b6b225..190bd80ec72d12 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -13,7 +13,7 @@ unstyled: /base-ui/react-input/ Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic TextField diff --git a/docs/data/material/components/timeline/timeline.md b/docs/data/material/components/timeline/timeline.md index ef028c2634763a..63a7b5fa1d475d 100644 --- a/docs/data/material/components/timeline/timeline.md +++ b/docs/data/material/components/timeline/timeline.md @@ -14,7 +14,7 @@ packageName: '@mui/lab' This component is not documented in the [Material Design guidelines](https://m2.material.io/), but it is available in Material UI. ::: -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic timeline diff --git a/docs/data/material/components/toggle-button/toggle-button.md b/docs/data/material/components/toggle-button/toggle-button.md index 1ccc8105bfac1d..ec6b514cbff27a 100644 --- a/docs/data/material/components/toggle-button/toggle-button.md +++ b/docs/data/material/components/toggle-button/toggle-button.md @@ -14,7 +14,7 @@ To emphasize groups of related Toggle buttons, a group should share a common container. The `ToggleButtonGroup` controls the selected state of its child buttons when given its own `value` prop. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Exclusive selection diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md index 632a82cbc63039..4cedae5a300099 100644 --- a/docs/data/material/components/tooltips/tooltips.md +++ b/docs/data/material/components/tooltips/tooltips.md @@ -13,7 +13,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ When activated, Tooltips display a text label identifying an element, such as a description of its function. -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic tooltip diff --git a/docs/data/material/components/transfer-list/transfer-list.md b/docs/data/material/components/transfer-list/transfer-list.md index b987834672583f..9216e88dac20cc 100644 --- a/docs/data/material/components/transfer-list/transfer-list.md +++ b/docs/data/material/components/transfer-list/transfer-list.md @@ -9,7 +9,7 @@ githubLabel: 'component: transfer list'

A Transfer List (or "shuttle") enables the user to move one or more list items between lists.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Basic transfer list diff --git a/docs/data/material/components/transitions/transitions.md b/docs/data/material/components/transitions/transitions.md index e3dab44b386d9e..de2a39939edd7f 100644 --- a/docs/data/material/components/transitions/transitions.md +++ b/docs/data/material/components/transitions/transitions.md @@ -11,7 +11,7 @@ githubLabel: 'component: transitions' Material UI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Collapse diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md index ba451b59eda874..3812bd7a91a916 100644 --- a/docs/data/material/components/typography/typography.md +++ b/docs/data/material/components/typography/typography.md @@ -10,7 +10,7 @@ materialDesign: https://m2.material.io/design/typography/the-type-system.html

Use typography to present your design and content as clearly and efficiently as possible.

-{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Roboto font diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md index caeb6337bfbec5..1c794a18146268 100644 --- a/docs/data/material/components/use-media-query/use-media-query.md +++ b/docs/data/material/components/use-media-query/use-media-query.md @@ -14,7 +14,7 @@ Some of the key features: - 🚀 It's performant, it observes the document to detect when its media queries change, instead of polling the values periodically. - 🤖 It supports server-side rendering. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Basic media query diff --git a/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md b/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md index 29c826b8048401..c4dcddab439ebb 100644 --- a/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md +++ b/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md @@ -297,4 +297,4 @@ export default function MyApp({ Component, pageProps }) { ## Feedback and bug reports -Use [the dedicated Material UI Sync feedback board](https://mui-connect.canny.io/feedback) to share feedback, report bugs, or drop feature requests. +Use [the dedicated Material UI Sync feedback board](https://material-ui-sync.canny.io/) to share feedback, report bugs, or drop feature requests. diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js index 300aba317f8cf6..e9588f9f73d94a 100644 --- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js +++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js @@ -205,7 +205,7 @@ export default function getCheckoutTheme(mode) { '& .MuiAlert-icon': { color: orange[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: `${alpha(orange[900], 0.5)}`, border: `1px solid ${alpha(orange[800], 0.5)}`, }), @@ -230,156 +230,202 @@ export default function getCheckoutTheme(mode) { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', + { + props: { + size: 'medium', }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', + }, + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(brand[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ transition: 'all 100ms ease', backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -421,7 +467,7 @@ export default function getCheckoutTheme(mode) { backgroundColor: brand[600], }, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: alpha(gray[700], 0.5), boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), @@ -441,7 +487,7 @@ export default function getCheckoutTheme(mode) { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -457,27 +503,39 @@ export default function getCheckoutTheme(mode) { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -518,7 +576,7 @@ export default function getCheckoutTheme(mode) { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -532,7 +590,7 @@ export default function getCheckoutTheme(mode) { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -562,14 +620,7 @@ export default function getCheckoutTheme(mode) { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -594,14 +645,28 @@ export default function getCheckoutTheme(mode) { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -626,15 +691,6 @@ export default function getCheckoutTheme(mode) { }, }, MuiStepIcon: { - variants: [ - { - props: { completed: true }, - style: () => ({ - width: 12, - height: 12, - }), - }, - ], styleOverrides: { root: ({ theme }) => ({ color: 'transparent', @@ -653,7 +709,7 @@ export default function getCheckoutTheme(mode) { border: 'none', color: theme.palette.success.main, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { border: `1px solid ${gray[700]}`, '&.Mui-active': { border: 'none', @@ -664,6 +720,15 @@ export default function getCheckoutTheme(mode) { color: theme.palette.success.light, }, }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], }), }, }, @@ -672,7 +737,7 @@ export default function getCheckoutTheme(mode) { label: ({ theme }) => ({ '&.Mui-completed': { opacity: 0.6, - ...(theme.palette.mode === 'dark' && { opacity: 0.5 }), + ...theme.applyStyles('dark', { opacity: 0.5 }), }, }), }, @@ -685,7 +750,7 @@ export default function getCheckoutTheme(mode) { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -701,7 +766,7 @@ export default function getCheckoutTheme(mode) { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx index 89ddbb5ec4c39d..4063e8ab0a66c9 100644 --- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx +++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx @@ -223,7 +223,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { '& .MuiAlert-icon': { color: orange[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: `${alpha(orange[900], 0.5)}`, border: `1px solid ${alpha(orange[800], 0.5)}`, }), @@ -248,156 +248,202 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', + { + props: { + size: 'medium', }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', + }, + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(brand[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ transition: 'all 100ms ease', backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -439,7 +485,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { backgroundColor: brand[600], }, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: alpha(gray[700], 0.5), boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), @@ -459,7 +505,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -475,27 +521,39 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -536,7 +594,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -550,7 +608,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -580,14 +638,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -612,14 +663,28 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -644,15 +709,6 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { }, }, MuiStepIcon: { - variants: [ - { - props: { completed: true }, - style: () => ({ - width: 12, - height: 12, - }), - }, - ], styleOverrides: { root: ({ theme }) => ({ color: 'transparent', @@ -671,7 +727,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { border: 'none', color: theme.palette.success.main, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { border: `1px solid ${gray[700]}`, '&.Mui-active': { border: 'none', @@ -682,6 +738,15 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { color: theme.palette.success.light, }, }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], }), }, }, @@ -690,7 +755,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { label: ({ theme }) => ({ '&.Mui-completed': { opacity: 0.6, - ...(theme.palette.mode === 'dark' && { opacity: 0.5 }), + ...theme.applyStyles('dark', { opacity: 0.5 }), }, }), }, @@ -703,7 +768,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -719,7 +784,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js index 8ae6d57199e6fc..ee5fe72b1a3def 100644 --- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js +++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js @@ -225,7 +225,7 @@ export default function getLPTheme(mode) { borderBottomLeftRadius: 10, borderBottomRightRadius: 10, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: gray[900], borderColor: gray[800], }), @@ -239,7 +239,7 @@ export default function getLPTheme(mode) { borderRadius: 8, '&:hover': { backgroundColor: gray[100] }, '&:focus-visible': { backgroundColor: 'transparent' }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '&:hover': { backgroundColor: gray[800] }, }), }), @@ -268,156 +268,195 @@ export default function getLPTheme(mode) { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + { + props: { + size: 'medium', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', + }, + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(gray[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ transition: 'all 100ms ease', backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -443,7 +482,7 @@ export default function getLPTheme(mode) { '& .MuiChip-icon': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(brand[500], 0.2)}`, backgroundColor: `${alpha(brand[900], 0.5)}`, '&:hover': { @@ -467,7 +506,7 @@ export default function getLPTheme(mode) { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -483,27 +522,39 @@ export default function getLPTheme(mode) { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -544,7 +595,7 @@ export default function getLPTheme(mode) { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -559,7 +610,7 @@ export default function getLPTheme(mode) { fontSize: '0.875rem', fontWeight: 500, borderRadius: theme.shape.borderRadius, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[200], }), }), @@ -573,7 +624,7 @@ export default function getLPTheme(mode) { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -603,14 +654,7 @@ export default function getLPTheme(mode) { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -635,14 +679,28 @@ export default function getLPTheme(mode) { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -684,7 +742,7 @@ export default function getLPTheme(mode) { height: 16, margin: 2, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { width: 36, height: 24, padding: 0, @@ -727,7 +785,7 @@ export default function getLPTheme(mode) { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -743,7 +801,7 @@ export default function getLPTheme(mode) { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx index c513c17f63b408..9aede559b0d583 100644 --- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx +++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx @@ -244,7 +244,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { borderBottomLeftRadius: 10, borderBottomRightRadius: 10, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: gray[900], borderColor: gray[800], }), @@ -258,7 +258,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { borderRadius: 8, '&:hover': { backgroundColor: gray[100] }, '&:focus-visible': { backgroundColor: 'transparent' }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '&:hover': { backgroundColor: gray[800] }, }), }), @@ -287,156 +287,195 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + { + props: { + size: 'medium', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', + }, + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(gray[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ transition: 'all 100ms ease', backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -462,7 +501,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { '& .MuiChip-icon': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(brand[500], 0.2)}`, backgroundColor: `${alpha(brand[900], 0.5)}`, '&:hover': { @@ -486,7 +525,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -502,27 +541,39 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -563,7 +614,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -578,7 +629,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { fontSize: '0.875rem', fontWeight: 500, borderRadius: theme.shape.borderRadius, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[200], }), }), @@ -592,7 +643,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -622,14 +673,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -654,14 +698,28 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -703,7 +761,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { height: 16, margin: 2, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { width: 36, height: 24, padding: 0, @@ -746,7 +804,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -762,7 +820,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js index e39de16cbf5e55..406f3df6e4fe32 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js +++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js @@ -213,156 +213,195 @@ export default function getSignInSideTheme(mode) { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + { + props: { + size: 'medium', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(brand[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ transition: 'all 100ms ease', backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -404,7 +443,7 @@ export default function getSignInSideTheme(mode) { backgroundColor: brand[600], }, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: alpha(gray[700], 0.5), boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), @@ -435,7 +474,7 @@ export default function getSignInSideTheme(mode) { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -451,27 +490,39 @@ export default function getSignInSideTheme(mode) { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -512,7 +563,7 @@ export default function getSignInSideTheme(mode) { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -526,7 +577,7 @@ export default function getSignInSideTheme(mode) { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -556,14 +607,7 @@ export default function getSignInSideTheme(mode) { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -588,14 +632,28 @@ export default function getSignInSideTheme(mode) { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -617,7 +675,7 @@ export default function getSignInSideTheme(mode) { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -633,7 +691,7 @@ export default function getSignInSideTheme(mode) { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx index 20e9329142a520..1fddb2216b0ddc 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx @@ -231,156 +231,195 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + { + props: { + size: 'medium', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(brand[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ transition: 'all 100ms ease', backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -422,7 +461,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { backgroundColor: brand[600], }, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: alpha(gray[700], 0.5), boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), @@ -453,7 +492,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -469,27 +508,39 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -530,7 +581,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -544,7 +595,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -574,14 +625,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -606,14 +650,28 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -635,7 +693,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -651,7 +709,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js index 224b3d9596dd45..e0a4984d4885d5 100644 --- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js +++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js @@ -213,155 +213,194 @@ export default function getSignInTheme(mode) { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + { + props: { + size: 'medium', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(brand[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.1)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.2)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -403,7 +442,7 @@ export default function getSignInTheme(mode) { backgroundColor: brand[600], }, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: alpha(gray[700], 0.5), boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), @@ -434,7 +473,7 @@ export default function getSignInTheme(mode) { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -450,27 +489,39 @@ export default function getSignInTheme(mode) { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -511,7 +562,7 @@ export default function getSignInTheme(mode) { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -525,7 +576,7 @@ export default function getSignInTheme(mode) { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -555,14 +606,7 @@ export default function getSignInTheme(mode) { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -587,14 +631,28 @@ export default function getSignInTheme(mode) { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -616,7 +674,7 @@ export default function getSignInTheme(mode) { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -632,7 +690,7 @@ export default function getSignInTheme(mode) { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx index 4c655afff4d56c..75952ee86f3428 100644 --- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx +++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx @@ -231,155 +231,194 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + { + props: { + size: 'medium', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(brand[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.1)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.2)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -421,7 +460,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { backgroundColor: brand[600], }, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: alpha(gray[700], 0.5), boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), @@ -452,7 +491,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -468,27 +507,39 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -529,7 +580,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -543,7 +594,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -573,14 +624,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -605,14 +649,28 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -634,7 +692,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -650,7 +708,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js index e066b0a2d08458..515951fceaa92d 100644 --- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js +++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js @@ -213,156 +213,195 @@ export default function getSignUpTheme(mode) { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + { + props: { + size: 'medium', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(brand[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ transition: 'all 100ms ease', backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -404,7 +443,7 @@ export default function getSignUpTheme(mode) { backgroundColor: brand[600], }, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: alpha(gray[700], 0.5), boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), @@ -435,7 +474,7 @@ export default function getSignUpTheme(mode) { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -451,27 +490,39 @@ export default function getSignUpTheme(mode) { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -512,7 +563,7 @@ export default function getSignUpTheme(mode) { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -526,7 +577,7 @@ export default function getSignUpTheme(mode) { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -556,14 +607,7 @@ export default function getSignUpTheme(mode) { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -588,14 +632,28 @@ export default function getSignUpTheme(mode) { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -617,7 +675,7 @@ export default function getSignUpTheme(mode) { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -633,7 +691,7 @@ export default function getSignUpTheme(mode) { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx index 19490022c87ad3..49d69b56765951 100644 --- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx +++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx @@ -231,156 +231,195 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { }, MuiButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ boxShadow: 'none', borderRadius: theme.shape.borderRadius, textTransform: 'none', - ...(ownerState.size === 'small' && { - height: '2rem', // 32px - padding: '0 0.5rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', // 40px - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', + variants: [ + { + props: { + size: 'small', }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', }, - }), - ...(ownerState.variant === 'outlined' && { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', + { + props: { + size: 'medium', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), + style: { + height: '2.5rem', // 40px }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), + }, + { + props: { + color: 'primary', + variant: 'contained', }, - }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'outlined' && { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', + }, + { + props: { + variant: 'outlined', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'info' && { - color: gray[200], + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(gray[700], 0.3), + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + ...theme.applyStyles('dark', { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), boxShadow: 'none', }, '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', }, - }), - ...(ownerState.variant === 'text' && - ownerState.color === 'primary' && { - color: brand[200], + ...theme.applyStyles('dark', { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + }, + }, + { + props: { + color: 'primary', + variant: 'text', + }, + style: { + color: brand[700], '&:hover': { - backgroundColor: alpha(brand[700], 0.3), + backgroundColor: alpha(brand[300], 0.3), }, - }), - }), + ...theme.applyStyles('dark', { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }, + }, + { + props: { + color: 'info', + variant: 'text', + }, + style: { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + ...theme.applyStyles('dark', { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + }, + }, + ], }), }, }, MuiCard: { styleOverrides: { - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ transition: 'all 100ms ease', backgroundColor: gray[50], borderRadius: theme.shape.borderRadius, border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + ...theme.applyStyles('dark', { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }, + }, + ], }), }, }, @@ -422,7 +461,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { backgroundColor: brand[600], }, }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: alpha(gray[700], 0.5), boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), @@ -453,7 +492,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: ({ theme }) => ({ borderColor: `${alpha(gray[200], 0.8)}`, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { borderColor: `${alpha(gray[700], 0.4)}`, }), }), @@ -469,27 +508,39 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { }, MuiIconButton: { styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '2rem', - width: '2rem', - }), - ...(ownerState.size === 'medium' && { - height: '2.5rem', - width: '2.5rem', - }), + root: ({ theme }) => ({ color: brand[500], '&:hover': { backgroundColor: alpha(brand[300], 0.3), borderColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], '&:hover': { backgroundColor: alpha(brand[600], 0.3), borderColor: brand[700], }, }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2rem', + width: '2rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + width: '2.5rem', + }, + }, + ], }), }, }, @@ -530,7 +581,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '4px', borderRadius: '2px', }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: brand[200], }), }), @@ -544,7 +595,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ + root: ({ theme }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, maxHeight: '4px', @@ -574,14 +625,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { outlineOffset: '2px', borderColor: brand[400], }, - ...(ownerState.color === 'error' && { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - }), - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, maxHeight: '6px', @@ -606,14 +650,28 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { outline: `3px solid ${alpha(brand[500], 0.5)}`, outlineOffset: '2px', }, - ...(ownerState.color === 'error' && { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), }), + variants: [ + { + props: { + color: 'error', + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }, + }, + ], }), }, }, @@ -635,7 +693,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { '& .Mui-selected': { color: brand[500], }, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { '& .Mui-selected': { color: 'hsl(0, 0%, 100%)', }, @@ -651,7 +709,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { textTransform: 'none', borderRadius: theme.shape.borderRadius, fontWeight: 500, - ...(theme.palette.mode === 'dark' && { + ...theme.applyStyles('dark', { color: gray[400], '&.Mui-selected': { color: brand[300] }, }), diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 40e3b9d2f1ac53..43ac60f957e2e2 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -943,6 +943,17 @@ Here's how to migrate: }, ``` +### components + +The PaginationItems's `components` was deprecated in favor of `slots`: + +```diff + +``` + ## Slider Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-props) below to migrate the code as described in the following sections: diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md index 7b77c2ddbf098e..62cfb6891c5adb 100644 --- a/docs/data/system/components/box/box.md +++ b/docs/data/system/components/box/box.md @@ -11,7 +11,7 @@ githubLabel: 'component: Box'

The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Introduction diff --git a/docs/data/system/components/container/container.md b/docs/data/system/components/container/container.md index 2dc88f7900efa3..20fada82728701 100644 --- a/docs/data/system/components/container/container.md +++ b/docs/data/system/components/container/container.md @@ -11,7 +11,7 @@ githubLabel: 'component: Container' While containers can be nested, most layouts do not require a nested container. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Fluid diff --git a/docs/data/system/components/grid/grid.md b/docs/data/system/components/grid/grid.md index 611e9fa91736be..b4819213ab5287 100644 --- a/docs/data/system/components/grid/grid.md +++ b/docs/data/system/components/grid/grid.md @@ -8,7 +8,7 @@ githubLabel: 'component: Grid'

The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} The `Grid` component works well for a layout with known columns. The columns can be configured in multiple breakpoints which you have to specify the column span of each child. diff --git a/docs/data/system/components/stack/stack.md b/docs/data/system/components/stack/stack.md index 66851d0c80af6b..44104653a496c6 100644 --- a/docs/data/system/components/stack/stack.md +++ b/docs/data/system/components/stack/stack.md @@ -17,7 +17,7 @@ The Stack component manages the layout of its immediate children along the verti Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical _and_ horizontal arrangement. ::: -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} ## Basics diff --git a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md index 17b147787e83b6..febdd81139b518 100644 --- a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md +++ b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md @@ -1,6 +1,6 @@ # The sx prop -

The sx prop is a shortcut for defining custom styles that has access to the theme.

+

The sx prop is a shortcut for defining custom styles that have access to the theme.

The `sx` prop lets you work with a superset of CSS that packages all of the style functions exposed in `@mui/system`. You can specify any valid CSS using this prop, as well as many _theme-aware_ properties that are unique to MUI System. diff --git a/docs/package.json b/docs/package.json index 7e4f35352c99fd..ee69bb478f12c1 100644 --- a/docs/package.json +++ b/docs/package.json @@ -44,10 +44,10 @@ "@mui/types": "workspace:^", "@mui/utils": "workspace:^", "@mui/x-charts": "6.19.8", - "@mui/x-data-grid": "7.3.0", - "@mui/x-data-grid-generator": "7.3.0", - "@mui/x-data-grid-premium": "7.3.0", - "@mui/x-data-grid-pro": "7.3.0", + "@mui/x-data-grid": "7.3.1", + "@mui/x-data-grid-generator": "7.3.1", + "@mui/x-data-grid-premium": "7.3.1", + "@mui/x-data-grid-pro": "7.3.1", "@mui/x-date-pickers": "6.19.9", "@mui/x-date-pickers-pro": "6.19.9", "@mui/x-license-pro": "6.10.2", diff --git a/docs/pages/blog/introducing-sync-plugin.md b/docs/pages/blog/introducing-sync-plugin.md index 796de24344c49a..bc6d8c6e519cc6 100644 --- a/docs/pages/blog/introducing-sync-plugin.md +++ b/docs/pages/blog/introducing-sync-plugin.md @@ -7,9 +7,9 @@ tags: ['Material UI', 'Product'] manualCard: true --- -Over the last few years we've seen designers increasingly seeking out ways to participate more directly and collaborate more effectively in the development process. +Over the last few years, we've seen designers increasingly seeking out ways to participate more directly and collaborate more effectively in the development process. The [Material UI Design Kit for Figma](/store/items/figma-react/) was our first attempt to meet those needs by providing designers with one-to-one mockups of Material UI components for implementing custom design systems. -But it doesn't go far enough on its own to bridge the gap between design and code—the developer still need to write the designer's custom styles from scratch. +But it doesn't go far enough on its own to bridge the gap between design and code—the developer still needs to write the designer's custom styles from scratch. That got us thinking: What if designers could generate production-ready code directly from their design software to hand off to developers working with a Material UI codebase? @@ -45,7 +45,7 @@ This is one of the most exciting features because it enables designers to use th :::warning While in beta, not all components are supported yet. We'll expand component coverage progressively in the coming months. -For now you can experiment with the Button, Switch, and Typography. +For now, you can experiment with the Button, Switch, and Typography. ::: ## Quick Storybook preview @@ -62,7 +62,7 @@ Get the beta version of Material UI Sync now, available for free in the [Figma There's still a lot to do, and we're looking forward to hearing from all of you [who requested this plugin years ago](https://github.com/mui/mui-design-kits/issues/10). -- Check out documentation for [the Sync plugin](/material-ui/design-resources/material-ui-sync/) and [the Material UI Design Kit](/material-ui/design-resources/material-ui-for-figma/). +- Check out the documentation for [the Sync plugin](/material-ui/design-resources/material-ui-sync/) and [the Material UI Design Kit](/material-ui/design-resources/material-ui-for-figma/). - If you've got any feedback, we'd love to [hear from you](https://material-ui-sync.canny.io/). Happy designing! 👨‍🎨 diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx index 64eecfde906434..c8259e97bfb5e2 100644 --- a/docs/pages/design-kits.tsx +++ b/docs/pages/design-kits.tsx @@ -7,8 +7,8 @@ import DesignKitHero from 'docs/src/components/productDesignKit/DesignKitHero'; import DesignKitValues from 'docs/src/components/productDesignKit/DesignKitValues'; import DesignKitDemo from 'docs/src/components/productDesignKit/DesignKitDemo'; import DesignKitFAQ from 'docs/src/components/productDesignKit/DesignKitFAQ'; -import Testimonials from 'docs/src/components/home/Testimonials'; -import HeroEnd from 'docs/src/components/home/HeroEnd'; +import SyncFeatures from 'docs/src/components/productDesignKit/SyncFeatures'; +import MaterialEnd from 'docs/src/components/productMaterial/MaterialEnd'; import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; import References, { DESIGNKITS_CUSTOMERS } from 'docs/src/components/home/References'; import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner'; @@ -31,11 +31,11 @@ export default function DesignKits() { - + - + - + diff --git a/docs/pages/experiments/docs/custom-components.md b/docs/pages/experiments/docs/custom-components.md index 18548cb1b10dda..69b8d873fa0a34 100644 --- a/docs/pages/experiments/docs/custom-components.md +++ b/docs/pages/experiments/docs/custom-components.md @@ -4,7 +4,7 @@ ## Header chips -{{"component": "modules/components/ComponentLinkHeader.js"}} +{{"component": "@mui/docs/ComponentLinkHeader"}} ## Feature list diff --git a/docs/pages/material-ui/api/chip.json b/docs/pages/material-ui/api/chip.json index 1d3b02d127913a..1854ff2494185f 100644 --- a/docs/pages/material-ui/api/chip.json +++ b/docs/pages/material-ui/api/chip.json @@ -97,6 +97,12 @@ "isGlobal": false, "isDeprecated": true }, + { + "key": "colorDefault", + "className": "MuiChip-colorDefault", + "description": "Styles applied to the root element if `color=\"default\"`.", + "isGlobal": false + }, { "key": "colorError", "className": "MuiChip-colorError", diff --git a/docs/pages/material-ui/api/pagination-item.json b/docs/pages/material-ui/api/pagination-item.json index 68f0269d48d3bb..cbdec459121eab 100644 --- a/docs/pages/material-ui/api/pagination-item.json +++ b/docs/pages/material-ui/api/pagination-item.json @@ -14,7 +14,9 @@ "name": "shape", "description": "{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slots prop instead. This prop will be removed in v7. How to migrate." }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "page": { "type": { "name": "node" } }, @@ -30,6 +32,13 @@ }, "default": "'medium'" }, + "slotProps": { + "type": { + "name": "shape", + "description": "{ first?: func
| object, last?: func
| object, next?: func
| object, previous?: func
| object }" + }, + "default": "{}" + }, "slots": { "type": { "name": "shape", @@ -64,6 +73,12 @@ "import PaginationItem from '@mui/material/PaginationItem';", "import { PaginationItem } from '@mui/material';" ], + "slots": [ + { "name": "first", "description": "", "class": null }, + { "name": "last", "description": "", "class": null }, + { "name": "next", "description": "", "class": null }, + { "name": "previous", "description": "", "class": null } + ], "classes": [ { "key": "colorPrimary", diff --git a/docs/public/static/blog/introducing-sync-plugin/card.png b/docs/public/static/blog/introducing-sync-plugin/card.png index 0b8a1d0ef4d9a0..8875501c3310d2 100644 Binary files a/docs/public/static/blog/introducing-sync-plugin/card.png and b/docs/public/static/blog/introducing-sync-plugin/card.png differ diff --git a/docs/public/static/branding/design-kits/material-sync-dark.png b/docs/public/static/branding/design-kits/material-sync-dark.png new file mode 100644 index 00000000000000..3cba4740f68b10 Binary files /dev/null and b/docs/public/static/branding/design-kits/material-sync-dark.png differ diff --git a/docs/public/static/branding/design-kits/material-sync-light.png b/docs/public/static/branding/design-kits/material-sync-light.png new file mode 100644 index 00000000000000..e0ee6491a87ccc Binary files /dev/null and b/docs/public/static/branding/design-kits/material-sync-light.png differ diff --git a/docs/public/static/branding/design-kits/sync-base1-dark.png b/docs/public/static/branding/design-kits/sync-base1-dark.png new file mode 100644 index 00000000000000..1e7b15b95aa7eb Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-base1-dark.png differ diff --git a/docs/public/static/branding/design-kits/sync-base1-light.png b/docs/public/static/branding/design-kits/sync-base1-light.png new file mode 100644 index 00000000000000..be25591a7324e2 Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-base1-light.png differ diff --git a/docs/public/static/branding/design-kits/sync-base2-dark.png b/docs/public/static/branding/design-kits/sync-base2-dark.png new file mode 100644 index 00000000000000..a4bbfea480d9ce Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-base2-dark.png differ diff --git a/docs/public/static/branding/design-kits/sync-base2-light.png b/docs/public/static/branding/design-kits/sync-base2-light.png new file mode 100644 index 00000000000000..d2e905a4a86c0e Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-base2-light.png differ diff --git a/docs/public/static/branding/design-kits/sync-shot1-dark.png b/docs/public/static/branding/design-kits/sync-shot1-dark.png new file mode 100644 index 00000000000000..674ae8ff69d79e Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-shot1-dark.png differ diff --git a/docs/public/static/branding/design-kits/sync-shot1-light.png b/docs/public/static/branding/design-kits/sync-shot1-light.png new file mode 100644 index 00000000000000..78dca9bffa2f72 Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-shot1-light.png differ diff --git a/docs/public/static/branding/design-kits/sync-shot3-dark.png b/docs/public/static/branding/design-kits/sync-shot3-dark.png new file mode 100644 index 00000000000000..12dcb9abb6c2c7 Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-shot3-dark.png differ diff --git a/docs/public/static/branding/design-kits/sync-shot3-light.png b/docs/public/static/branding/design-kits/sync-shot3-light.png new file mode 100644 index 00000000000000..67d09a4a001969 Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-shot3-light.png differ diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx index 4385f5573a84ba..7d391225a73e31 100644 --- a/docs/src/components/action/Item.tsx +++ b/docs/src/components/action/Item.tsx @@ -91,7 +91,9 @@ export default function Item({ p: 2, pr: smallerIconDistance ? 3 : 2, display: 'flex', - alignItems: 'center', + flexDirection: { xs: 'column', sm: 'row' }, + alignItems: { xs: 'start', sm: 'center' }, + gap: { xs: 2, sm: 0.5 }, ...props.sx, }} > diff --git a/docs/src/components/action/NpmCopyButton.tsx b/docs/src/components/action/NpmCopyButton.tsx index de9efd9e45a99b..f773a49352c3ae 100644 --- a/docs/src/components/action/NpmCopyButton.tsx +++ b/docs/src/components/action/NpmCopyButton.tsx @@ -13,6 +13,7 @@ const Button = styled('button')(({ theme }) => ({ marginTop: 16, cursor: 'copy', padding: 0, + position: 'relative', display: 'inline-flex', alignItems: 'flex-start', justifyContent: 'center', @@ -43,8 +44,8 @@ const Button = styled('button')(({ theme }) => ({ }, '& svg': { display: 'inline-block', - position: 'relative', - right: 3, + position: 'absolute', + right: -24, top: 1, opacity: 0, transition: theme.transitions.create('opacity', { diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index 5d53a9b03d7100..a2c3f3fadff065 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -69,9 +69,9 @@ const Navigation = styled('nav')(({ theme }) => [ const PRODUCT_IDS = [ 'product-core', 'product-advanced', + 'product-toolpad', 'product-templates', 'product-design', - 'product-toolpad', ]; type ProductSubMenuProps = { @@ -282,29 +282,29 @@ export default function HeaderNavBar() {
  • } - name="Templates" - description="Fully built, out-of-the-box, templates for your application." + href={ROUTES.productToolpad} + icon={} + name="Toolpad" + chip={} + description="Low-code admin builder." />
  • } - name="Design kits" - description="Our components available in your favorite design tool." + href={ROUTES.productTemplates} + icon={} + name="Templates" + description="Fully built, out-of-the-box, templates for your application." />
  • } - name="Toolpad" - chip={} - description="Low-code admin builder." + href={ROUTES.productDesignKits} + icon={} + name="Design Kits" + description="Material UI components in your favorite design tool." />
    • diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index b48ed4d0a64b44..e625a7443e7fa6 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -71,8 +71,8 @@ const PRODUCTS = [ href: ROUTES.productTemplates, }, { - name: 'Design kits', - description: 'Our components available in your favorite design tool.', + name: 'Design Kits', + description: 'Material UI components in your favorite design tool.', href: ROUTES.productDesignKits, }, { diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx index 2591dda6a9be02..691f9aefc3e043 100644 --- a/docs/src/components/home/CompaniesGrid.tsx +++ b/docs/src/components/home/CompaniesGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage'; export const CORE_CUSTOMERS: Array = [ @@ -189,7 +189,6 @@ export default function CompaniesGrid({ data }: { data: Array }) {data.map((imgProps) => ( ({ objectFit: 'cover', transitionProperty: 'all', transitionDuration: '150ms', - boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)', + boxShadow: '0 4px 20px rgba(61, 71, 82, 0.2)', ...theme.applyDarkStyles({ borderColor: (theme.vars || theme).palette.grey[800], - boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.6)', + boxShadow: '0 4px 20px rgba(0, 0, 0, 0.6)', }), })); @@ -40,23 +40,26 @@ const Anchor = styled('a')(({ theme }) => [ { display: 'inline-block', position: 'relative', - transitionProperty: 'all', - transitionDuration: '150ms', + transition: 'all 120ms ease', borderRadius: '50%', border: '1px solid', borderColor: (theme.vars || theme).palette.grey[200], - boxShadow: `0px 2px 12px ${alpha(theme.palette.primary[200], 0.3)}`, + boxShadow: `0 2px 12px ${alpha(theme.palette.primary[200], 0.3)}`, + backgroundColor: '#FFF', '&:hover, &:focus': { borderColor: (theme.vars || theme).palette.primary[300], - boxShadow: `0px 4px 20px ${alpha(theme.palette.primary[400], 0.3)}`, + boxShadow: `0 4px 20px ${alpha(theme.palette.primary[400], 0.3)}`, + backgroundColor: (theme.vars || theme).palette.primary[50], }, } as const, theme.applyDarkStyles({ - borderColor: (theme.vars || theme).palette.primary[900], - boxShadow: `0px 2px 12px ${alpha(theme.palette.primaryDark[800], 0.5)}`, + backgroundColor: alpha(theme.palette.primaryDark[900], 0.8), + borderColor: (theme.vars || theme).palette.primaryDark[600], + boxShadow: `0 2px 12px ${alpha(theme.palette.primaryDark[800], 0.5)}`, '&:hover, &:focus': { + backgroundColor: alpha(theme.palette.primary[900], 0.8), borderColor: (theme.vars || theme).palette.primary[700], - boxShadow: `0 2px 20px 0 ${alpha(theme.palette.primary[800], 0.5)}`, + boxShadow: `0 2px 16px 0 ${alpha(theme.palette.primary[800], 0.5)}`, }, }), ]); @@ -94,18 +97,12 @@ const DesignToolLogo = React.forwardRef< ({ - display: 'flex', - backgroundColor: '#FFF', - p: 2, - borderRadius: '50%', - ...theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primary[900], 0.5), - }), - }), + sx={{ + display: 'flex', + p: 2, + borderRadius: '50%', ...(Array.isArray(props.sx) ? props.sx : [props.sx]), - ]} + }} > ({ - filter: 'drop-shadow(-8px 4px 20px rgba(61, 71, 82, 0.2))', transition: '0.4s', display: 'block', height: 'auto', - borderRadius: '10px', + borderRadius: 6, + border: '1px solid', + borderColor: theme.palette.divider, + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.grey[500], 0.5)})`, ...theme.applyDarkStyles({ - filter: 'drop-shadow(-8px 4px 20px rgba(0, 0, 0, 0.4))', + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.common.black, 0.2)})`, + borderColor: theme.palette.primaryDark[600], }), })); -export default function TemplateDemo() { +interface MaterialFigmaComponentsProps { + fadeIn?: boolean; +} + +export function MaterialFigmaComponents({ fadeIn }: MaterialFigmaComponentsProps) { + return ( + + + theme.applyDarkStyles({ + '&:hover': { + '& img': { + filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))', + }, + }, + }), + ]} + > + Material UI Button component variations in the Figma Design Kit. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/Button-dark.jpeg)`, + }) + } + /> + Material UI Alert component variations in the Figma Design Kit. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/Alert-dark.jpeg)`, + }) + } + /> + Material UI Slider component variations in the Figma Design Kit. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/Slider-dark.jpeg)`, + }) + } + /> + + + ); +} + +export function MaterialDesignKitInfo() { + return ( + + + + Available in: + + img': { width: 20, height: 20 } }}> + Figma logo. + Sketch logo. + Adobe XD logo. + + + + We frequently update them to stay up-to-date with the latest release. + + + + + + + ); +} + +export default function DesignKitsDemo() { const [demo, setDemo] = React.useState(DEMOS[0]); const icons = { [DEMOS[0]]: , @@ -41,15 +200,15 @@ export default function TemplateDemo() { return (
    - + - Upgrade your design workflow + Enhance your design workflow } - description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date release." + description="The Design Kits contain many of the Material UI components with states, variations, colors, typography, and icons." /> {DEMOS.map((name) => ( @@ -67,102 +226,19 @@ export default function TemplateDemo() { /> - + - - - theme.applyDarkStyles({ - '&:hover': { - '& img': { - filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))', - }, - }, - }), - ]} - > - - theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Button-dark.jpeg)`, - }) - } - /> - - theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Alert-dark.jpeg)`, - }) - } - /> - - theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Slider-dark.jpeg)`, - }) - } - /> - - + ({ @@ -179,8 +255,8 @@ export default function TemplateDemo() { ({ @@ -196,47 +272,7 @@ export default function TemplateDemo() { /> - - - - Available for: - - img': { width: 26, height: 26 } }}> - - - - - - - + diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx index 5e4f052cc9a4c3..25ab7e0e454d5f 100644 --- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx +++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Button from '@mui/material/Button'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import Paper from '@mui/material/Paper'; @@ -31,18 +30,27 @@ const faqData = [ The number of licenses purchased must correspond to the maximum number of editors working concurrently in a 24 hour period. An editor is somebody contributing changes to the designed - screens that use the UI kits. No licenses are required for viewing the designs. + screens that use the Design Kits. No licenses are required for viewing the designs. ), }, { - summary: 'The UI kit got an update. How do I get it?', + summary: 'The Design Kit got an update. How do I get it?', detail: ( We'll send you an email when a new release is available. You can access the item on the{' '} download page - of your store account. You can find a detailed description of the changes under the - "Changelog" tab on this page. + of your store account and find a detailed description of the changes under + the"Changelog" tab on this page. + + ), + }, + { + summary: 'Is the Material UI Sync plugin paid?', + detail: ( + + No. We're still in alpha mode and rolling out more features progressively, as per your + feedback. We might introduce paid tiers in the future, though. ), }, @@ -64,7 +72,7 @@ const faqData = [ detail: ( We aim to keep feature parity between the Figma, Sketch, and Adobe XD kits where possible. - We have a 50% off coupon for past customers who want to switch between two design tools. + We have a 50% off coupon for past customers who want to switch between them. ), }, @@ -77,7 +85,7 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({ borderRadius: theme.shape.borderRadius, }, '&:hover': { - boxShadow: '1px 1px 20px 0 rgb(90 105 120 / 20%)', + boxShadow: '1px 1px 8px 0 rgb(90 105 120 / 20%)', }, '&:not(:last-of-type)': { marginBottom: theme.spacing(2), @@ -142,12 +150,12 @@ export default function DesignKitFAQ() { Frequently asked questions - + {renderItem(0)} {renderItem(1)} {renderItem(2)} - + {renderItem(3)} {renderItem(4)} - - - Got any questions unanswered or need more help? - - - + + Got any questions unanswered or need more help? + + From community help to premium business support, we're here to help. + } right={ @@ -69,9 +63,10 @@ export default function TemplateHero() { width: '100%', height: '100%', zIndex: 1, - background: `linear-gradient(90deg, ${ - (theme.vars || theme).palette.primaryDark[900] - } 1%, ${alpha(theme.palette.primaryDark[900], 0.5)})`, + background: `linear-gradient(90deg, ${alpha( + theme.palette.primaryDark[900], + 0.8, + )} 1%, ${alpha(theme.palette.primaryDark[900], 0.1)})`, opacity: 0, ...theme.applyDarkStyles({ opacity: 1, diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx index 72bca07d667fdf..489f8105933d8d 100644 --- a/docs/src/components/productDesignKit/DesignKitValues.tsx +++ b/docs/src/components/productDesignKit/DesignKitValues.tsx @@ -3,10 +3,11 @@ import Typography from '@mui/material/Typography'; import Grid from '@mui/material/Unstable_Grid2'; import Palette from '@mui/icons-material/Palette'; import LibraryBooks from '@mui/icons-material/LibraryBooks'; +import { InfoCard } from '@mui/docs/InfoCard'; import CodeRounded from '@mui/icons-material/CodeRounded'; import GradientText from 'docs/src/components/typography/GradientText'; import Section from 'docs/src/layouts/Section'; -import { InfoCard } from '@mui/docs/InfoCard'; +import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; const content = [ { @@ -25,21 +26,23 @@ const content = [ icon: , title: 'For developers', description: - 'Effortlessly communicate with designers using the same language around the MUI Core components props and variants.', + 'Effortlessly communicate with designers using the same language around the Material UI components props and variants.', }, ]; -function DesignKitValues() { +export default function DesignKitValues() { return ( -
    - - Collaboration - - - Be more efficient designing and developing with the same - library - - +
    + + Be more efficient designing and developing with the same + library + + } + /> + {content.map(({ icon, title, description }) => ( @@ -49,5 +52,3 @@ function DesignKitValues() {
    ); } - -export default DesignKitValues; diff --git a/docs/src/components/productDesignKit/SyncFeatures.tsx b/docs/src/components/productDesignKit/SyncFeatures.tsx new file mode 100644 index 00000000000000..d2973f10529665 --- /dev/null +++ b/docs/src/components/productDesignKit/SyncFeatures.tsx @@ -0,0 +1,395 @@ +import * as React from 'react'; +import { styled, alpha } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Unstable_Grid2'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Fade from '@mui/material/Fade'; +import FormatShapesRoundedIcon from '@mui/icons-material/FormatShapesRounded'; +import SvgStorybook from 'docs/src/icons/SvgStorybook'; +import ImagesearchRollerRoundedIcon from '@mui/icons-material/ImagesearchRollerRounded'; +import Section from 'docs/src/layouts/Section'; +import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; +import GradientText from 'docs/src/components/typography/GradientText'; +import Item, { Group } from 'docs/src/components/action/Item'; +import Highlighter from 'docs/src/components/action/Highlighter'; +import Frame from 'docs/src/components/action/Frame'; +import { Link } from '@mui/docs/Link'; + +const Image = styled('img')(({ theme }) => ({ + transition: '0.4s', + display: 'block', + height: 'auto', + borderRadius: 6, + border: '1px solid', + borderColor: theme.palette.divider, + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.grey[500], 0.5)})`, + ...theme.applyDarkStyles({ + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.common.black, 0.2)})`, + borderColor: theme.palette.primaryDark[600], + }), +})); + +export default function ConnectFeatures() { + const [index, setIndex] = React.useState(0); + function getSelectedProps(i: number) { + return { + selected: index === i, + sx: { '& svg': { opacity: index === i ? 1 : 0.5 } }, + }; + } + return ( +
    + + + + The way developers and designers ship faster + + } + description="The Sync plugin is perfect for designing and developing using the Material UI React library and Design Kit." + /> + + setIndex(0)}> + } + title="Theme customization" + description="Generate theme code with custom colors, typography styles, shadows, spacing values, and border-radius." + /> + + setIndex(1)}> + } + title="Component customization" + description="Fully customize a component's design across multiple states and then generate the corresponding theme code." + /> + + setIndex(2)}> + } + title="Preview your changes on Storybook" + description="Quickly visualize all the changes you run through Sync on a built-in Storybook preview instance." + /> + + + + + + + + {index === 0 && ( + + ({ + width: '100%', + height: '100%', + '& img': { + position: 'absolute', + '&:nth-of-type(1)': { + visibility: { xs: 'hidden', sm: 'visible' }, + width: { xs: 240, sm: 600 }, + top: 100, + left: '50%', + transform: 'translate(-40%)', + }, + '&:nth-of-type(2)': { + width: { xs: 240, sm: 560 }, + top: { xs: 100, sm: 40 }, + left: { xs: '60%', sm: '40%' }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1) translate(0%)', + }, + }, + }, + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + top: { xs: 100, sm: 60 }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1.1) translate(-15%)', + }, + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.grey[600], + 0.5, + )})`, + }, + }, + }, + }, + ...theme.applyDarkStyles({ + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.8, + )})`, + }, + }, + filter: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.2, + )})`, + }, + }, + }), + })} + > + The Material UI Design Kit for Figma. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-base1-dark.png)`, + }) + } + /> + The Material UI Sync plugin displaying theme code. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-shot1-dark.png)`, + }) + } + /> + + + )} + {index === 1 && ( + + ({ + width: '100%', + height: '100%', + '& img': { + position: 'absolute', + '&:nth-of-type(1)': { + visibility: { xs: 'hidden', sm: 'visible' }, + width: { xs: 240, sm: 600 }, + top: 100, + left: '50%', + transform: 'translate(-40%)', + }, + '&:nth-of-type(2)': { + width: { xs: 240, sm: 560 }, + top: { xs: 100, sm: 40 }, + left: { xs: '60%', sm: '50%' }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'none', + }, + }, + }, + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + top: { xs: 100, sm: 60 }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1.1) translate(-30%)', + }, + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.grey[600], + 0.5, + )})`, + }, + }, + }, + }, + ...theme.applyDarkStyles({ + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.8, + )})`, + }, + }, + filter: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.2, + )})`, + }, + }, + }), + })} + > + The Material UI Design Kit for Figma. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-base2-dark.png)`, + }) + } + /> + The Material UI Sync plugin displaying theme code. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/material-sync-dark.png)`, + }) + } + /> + + + )} + {index === 2 && ( + + ({ + width: '100%', + height: '100%', + '& img': { + position: 'absolute', + '&:nth-of-type(1)': { + visibility: { xs: 'hidden', sm: 'visible' }, + width: { xs: 240, sm: 600 }, + top: 100, + left: '50%', + transform: 'translate(-40%)', + }, + '&:nth-of-type(2)': { + width: { xs: 240, sm: 560 }, + top: { xs: 100, sm: 40 }, + left: { xs: '60%', sm: '40%' }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'none', + }, + }, + }, + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + top: { xs: 100, sm: 60 }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1.1) translate(-25%)', + }, + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.grey[600], + 0.5, + )})`, + }, + }, + }, + }, + ...theme.applyDarkStyles({ + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.8, + )})`, + }, + }, + filter: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.2, + )})`, + }, + }, + }), + })} + > + The Material UI Design Kit for Figma. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-base2-dark.png)`, + }) + } + /> + The Material UI Sync plugin displaying theme code. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-shot3-dark.png)`, + }) + } + /> + + + )} + + + + + Get the beta version of Material UI Sync now! + + + There's still a lot to do, and we're looking forward to hearing from all + of you. + + + + + + + + + +
    + ); +} diff --git a/docs/src/components/productMaterial/MaterialDesignKits.tsx b/docs/src/components/productMaterial/MaterialDesignKits.tsx index ef65d052dee64a..20cb16e9d070cf 100644 --- a/docs/src/components/productMaterial/MaterialDesignKits.tsx +++ b/docs/src/components/productMaterial/MaterialDesignKits.tsx @@ -1,244 +1,204 @@ import * as React from 'react'; -import { styled } from '@mui/material/styles'; +import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Fade from '@mui/material/Fade'; import Typography from '@mui/material/Typography'; -import LaunchRounded from '@mui/icons-material/LaunchRounded'; -import TextFieldsRounded from '@mui/icons-material/TextFieldsRounded'; -import WidgetsRounded from '@mui/icons-material/WidgetsRounded'; -import ToggleOnRounded from '@mui/icons-material/ToggleOnRounded'; +import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded'; +import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; import GradientText from 'docs/src/components/typography/GradientText'; import Item, { Group } from 'docs/src/components/action/Item'; import Highlighter from 'docs/src/components/action/Highlighter'; -import More from 'docs/src/components/action/More'; import Frame from 'docs/src/components/action/Frame'; +import { + MaterialDesignKitInfo, + MaterialFigmaComponents, +} from 'docs/src/components/productDesignKit/DesignKitDemo'; import { Link } from '@mui/docs/Link'; -const DEMOS = ['Components', 'Branding', 'Iconography']; - const Image = styled('img')(({ theme }) => ({ - filter: 'drop-shadow(-2px 4px 4px rgba(61, 71, 82, 0.1))', transition: '0.4s', display: 'block', height: 'auto', - borderRadius: '10px', + borderRadius: 6, + border: '1px solid', + borderColor: theme.palette.divider, + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.grey[500], 0.5)})`, ...theme.applyDarkStyles({ - filter: 'drop-shadow(-2px 4px 4px rgba(0, 0, 0, 0.3))', + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.common.black, 0.2)})`, + borderColor: theme.palette.primaryDark[600], }), })); -export default function MaterialDesignKits() { - const [demo, setDemo] = React.useState(DEMOS[0]); - const icons = { - [DEMOS[0]]: , - [DEMOS[1]]: , - [DEMOS[2]]: , - }; +interface MaterialDesignKitsProps { + gradient?: boolean; +} + +export default function MaterialDesignKits({ gradient }: MaterialDesignKitsProps) { + const [customized, setCustomized] = React.useState(true); + return ( -
    +
    - - - - Enhance your design workflow - - } - description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date release." - /> - - - {DEMOS.map((name) => ( - setDemo(name)}> - - - ))} - + + + Enhance your design workflow + + } + description="Reach out for the Figma Design Kit and the Sync plugin to bridge the gap between development and design when using Material UI." + /> + + setCustomized(true)}> + } + title="Design Kit" + description="Get many Material UI components with states, variations, colors, typography, and icons on your preferred design tool." + /> + + setCustomized(false)}> + } + title="Sync plugin" + description="Quickly generate a Material UI theme file with token and component customizations done on Figma." + /> + - + - + + ({ + display: !customized ? 'auto' : 'none', + width: '100%', + height: '100%', + '& img': { + position: 'absolute', + '&:nth-of-type(1)': { + visibility: { xs: 'hidden', sm: 'visible' }, + width: { xs: 240, sm: 600 }, + top: 100, left: '50%', - width: { xs: 240, sm: 300 }, - '&:nth-of-type(1)': { - top: 120, - transform: 'translate(-70%)', + transform: 'translate(-40%)', + }, + '&:nth-of-type(2)': { + width: { xs: 240, sm: 560 }, + top: { xs: 100, sm: 40 }, + left: { xs: '60%', sm: '60%' }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'none', }, + }, + }, + '&:hover': { + '& img': { '&:nth-of-type(2)': { - top: 80, - transform: 'translate(-50%)', - }, - '&:nth-of-type(3)': { - top: 40, - transform: 'translate(-30%)', + top: { xs: 100, sm: 60 }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1.1) translate(-30%)', + }, + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.grey[600], + 0.5, + )})`, + }, }, }, + }, + ...theme.applyDarkStyles({ '&:hover': { '& img': { - filter: 'drop-shadow(-16px 12px 20px rgba(61, 71, 82, 0.2))', - '&:nth-of-type(1)': { - top: 0, - transform: 'scale(0.8) translate(-108%) rotateY(30deg)', - }, '&:nth-of-type(2)': { - top: 40, - transform: 'scale(0.8) translate(-54%) rotateY(30deg)', - }, - '&:nth-of-type(3)': { - top: 40, - transform: 'scale(0.8) translate(-0%) rotateY(30deg)', + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.8, + )})`, + }, }, + filter: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.2, + )})`, }, }, - }, - (theme) => - theme.applyDarkStyles({ - '&:hover': { - '& img': { - filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))', - }, - }, - }), - ]} + }), + })} > theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Button-dark.jpeg)`, + content: `url(/static/branding/design-kits/sync-base2-dark.png)`, }) } /> theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Alert-dark.jpeg)`, - }) - } - /> - - theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Slider-dark.jpeg)`, + content: `url(/static/branding/design-kits/material-sync-dark.png)`, }) } /> - - ({ - width: { sm: 400 }, - position: 'absolute', - left: '50%', - top: '50%', - transform: 'translate(-50%, -50%)', - ...theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Colors-dark.jpeg)`, - }), - })} - /> - - - ({ - width: { sm: 500 }, - position: 'absolute', - left: '50%', - top: 60, - transform: 'translate(-40%)', - ...theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Icons-dark.jpeg)`, - }), - })} - /> - - - - - Available for: + {customized ? ( + + ) : ( + + + Get the beta version of Material UI Sync now! + + + There's still a lot to do, and we're looking forward to hearing from all + of you. - img': { width: 26, height: 26 } }}> - - - + + + - - - + + )} diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx index be40de0a8cfb73..e3308a4e06a972 100644 --- a/docs/src/components/productMaterial/MaterialEnd.tsx +++ b/docs/src/components/productMaterial/MaterialEnd.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; +import Box from '@mui/material/Box'; import Grid from '@mui/material/Unstable_Grid2'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; @@ -14,9 +15,14 @@ import GradientText from 'docs/src/components/typography/GradientText'; import { Link } from '@mui/docs/Link'; import ROUTES from 'docs/src/route'; -export default function MaterialEnd() { +interface MaterialEndProps { + noFaq?: boolean; +} + +export default function MaterialEnd({ noFaq }: MaterialEndProps) { return (
    - - + {noFaq ? ( + @@ -49,44 +56,70 @@ export default function MaterialEnd() { secondaryUrl={ROUTES.freeTemplates} altInstallation="npm install @mui/material @emotion/react @emotion/styled" /> - - - li': { alignItems: 'flex-start' } }}> - - } /> -
    - - Material UI vs. Base UI - - - Material UI implements Google's Material Design whereas Base UI features many - of the same components, but without the Material Design implementation. - -
    -     - - } /> -
    - - Does it support Material Design 3? - - - The adoption of Material Design 3 is tentatively planned for Material UI v7. See - the{' '} - - the release schedule - {' '} - and follow{' '} - - this GitHub issue - {' '} - for future updates. + + ) : ( + + + + Join our global community -
    -     -     + } + description={ + + Material UI wouldn't be possible without our global community of + contributors. Join us today to get help when you need it, and lend a hand when you + can. + + } + /> + +     + + li': { alignItems: 'flex-start' } }}> + + } /> +
    + + Material UI vs. Base UI + + + Material UI implements Google's Material Design whereas Base UI features + many of the same components, but without the Material Design implementation. + +
    +     + + } /> +
    + + Does it support Material Design 3? + + + The adoption of Material Design 3 is tentatively planned for Material UI v7. See + the{' '} + + the release schedule + {' '} + and follow{' '} + + this GitHub issue + {' '} + for future updates. + +
    +     +     +     - + )}
    ); } diff --git a/docs/src/icons/SvgStorybook.tsx b/docs/src/icons/SvgStorybook.tsx new file mode 100644 index 00000000000000..543a081c1686c6 --- /dev/null +++ b/docs/src/icons/SvgStorybook.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import RootSvg, { RootSvgProps } from 'docs/src/icons/RootSvg'; + +export default function SvgStorybook(props: RootSvgProps) { + return ( + + + + ); +} diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index c0894f21ec8e3f..1ae5ba22cff1ff 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -85,12 +85,6 @@ export default function AppFooter(props: AppFooterProps) { Toolpad - - Templates - - - Design kits - @@ -100,7 +94,7 @@ export default function AppFooter(props: AppFooterProps) { Material Icons - Free templates + Templates Components @@ -108,8 +102,8 @@ export default function AppFooter(props: AppFooterProps) { Customization - - Theming + + Design Kits diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index fa0f790cd911ee..7d2e491b1d2a73 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -54,11 +54,11 @@ function Heading(props) { {getTranslatedHeader(t, hash)} -
    + -
    +     ); diff --git a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx index 63588a4ff1f28a..5ed13933711f03 100644 --- a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx +++ b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx @@ -100,11 +100,11 @@ export default function ClassesSection(props: ClassesSectionProps) { tabIndex={-1} > {t(title)} -
    + -
    + {t(title)} -
    + -
    + {t(title)} -
    + -
    + - {headers.githubLabel ? ( -
  • - } - data-ga-event-category="ComponentLinkHeader" - data-ga-event-action="click" - data-ga-event-label={t('githubLabel')} - data-ga-event-split="0.1" - label={t('githubLabel')} - /> -
    • - ) : null} -
  • - - } - data-ga-event-category="ComponentLinkHeader" - data-ga-event-action="click" - data-ga-event-label={t('bundleSize')} - data-ga-event-split="0.1" - label={t('bundleSize')} - /> - -
    • - {headers.waiAria ? ( -
  • - } - data-ga-event-category="ComponentLinkHeader" - data-ga-event-action="click" - data-ga-event-label="WAI-ARIA" - data-ga-event-split="0.1" - label="WAI-ARIA" - /> -
    • - ) : null} - {headers.materialDesign ? ( -
  • - } - data-ga-event-category="ComponentLinkHeader" - data-ga-event-action="click" - data-ga-event-label="Material Design" - data-ga-event-split="0.1" - label="Material Design" - /> -
    • - ) : null} - {design !== false ? ( - -
  • - } - data-ga-event-category="ComponentLinkHeader" - data-ga-event-action="click" - data-ga-event-label="Figma" - data-ga-event-split="0.1" - label="Figma" - /> -
    • - {packageName !== '@mui/joy' ? ( -
  • - } - data-ga-event-category="ComponentLinkHeader" - data-ga-event-action="click" - data-ga-event-label="Adobe XD" - data-ga-event-split="0.1" - label="Adobe" - /> -
    • - ) : null} - {packageName !== '@mui/joy' ? ( -
  • - } - data-ga-event-category="ComponentLinkHeader" - data-ga-event-action="click" - data-ga-event-label="Sketch" - data-ga-event-split="0.1" - label="Sketch" - /> -
    • - ) : null} -     - ) : null} - - ); -} - -ComponentLinkHeader.propTypes = { - design: PropTypes.bool, - markdown: PropTypes.shape({ - headers: PropTypes.object.isRequired, - }).isRequired, -}; +export default ComponentLinkHeader; diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js index 39249a9877b5ad..a31b90d44a99fe 100644 --- a/docs/src/modules/components/ComponentsApiContent.js +++ b/docs/src/modules/components/ComponentsApiContent.js @@ -35,11 +35,11 @@ function Heading(props) { {getTranslatedHeader(t, hash, text)} -
    + -
    +     ); diff --git a/docs/src/modules/components/HooksApiContent.js b/docs/src/modules/components/HooksApiContent.js index 3805ccc24fc2ef..54f14253876081 100644 --- a/docs/src/modules/components/HooksApiContent.js +++ b/docs/src/modules/components/HooksApiContent.js @@ -29,11 +29,11 @@ function Heading(props) { {getTranslatedHeader(t, hash, text)} -
    + -
    +     ); diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.tsx b/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.tsx index e27855541ec2ec..bb4231a7725f94 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.tsx +++ b/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.tsx @@ -6,7 +6,7 @@ import Slide from '@mui/material/Slide'; import CloseIcon from '@mui/icons-material/Close'; import InfoIcon from '@mui/icons-material/Info'; import IconButton from '@mui/material/IconButton'; -import { TransitionProps } from '@mui/material/transitions/transition'; +import { TransitionProps } from '@mui/material/transitions'; const styles = ({ theme }: { theme: Theme }) => ({ diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json index fddc50bdb23a05..719f2b5e502068 100644 --- a/docs/translations/api-docs/chip/chip.json +++ b/docs/translations/api-docs/chip/chip.json @@ -79,6 +79,11 @@ "conditions": "onClick and color=\"secondary\" is defined or clickable={true}", "deprecationInfo": "Combine the .MuiChip-clickable and .MuiChip-colorSecondary classes instead. How to migrate" }, + "colorDefault": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"default\"" + }, "colorError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/pagination-item/pagination-item.json b/docs/translations/api-docs/pagination-item/pagination-item.json index de26e46725f5d8..1dd3b9dbcba2f4 100644 --- a/docs/translations/api-docs/pagination-item/pagination-item.json +++ b/docs/translations/api-docs/pagination-item/pagination-item.json @@ -16,9 +16,8 @@ "selected": { "description": "If true the pagination item is selected." }, "shape": { "description": "The shape of the pagination item." }, "size": { "description": "The size of the component." }, - "slots": { - "description": "The components used for each slot inside.
    This prop is an alias for the components prop, which will be deprecated in the future." - }, + "slotProps": { "description": "The props used for each slot inside." }, + "slots": { "description": "The components used for each slot inside." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, @@ -122,5 +121,6 @@ "conditions": "variant=\"text\" and color=\"secondary\"", "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead. How to migrate." } - } + }, + "slotDescriptions": { "first": "", "last": "", "next": "", "previous": "" } } diff --git a/package.json b/package.json index acec619ecb9b02..31f1876ba23581 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mui/monorepo", - "version": "6.0.0-alpha.4", + "version": "6.0.0-alpha.5", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", @@ -80,7 +80,7 @@ }, "dependencies": { "@googleapis/sheets": "^5.0.5", - "@slack/bolt": "^3.17.1", + "@slack/bolt": "^3.18.0", "@netlify/functions": "^2.6.0", "execa": "^8.0.1", "google-auth-library": "^9.9.0" @@ -175,12 +175,12 @@ "process": "^0.11.10", "raw-loader": "4.0.2", "rimraf": "^5.0.5", - "serve": "^14.2.1", + "serve": "^14.2.3", "stylelint": "^15.11.0", "stylelint-config-standard": "^34.0.0", "stylelint-processor-styled-components": "^1.10.0", "terser-webpack-plugin": "^5.3.10", - "tsx": "^4.7.2", + "tsx": "^4.7.3", "typescript": "^5.4.5", "webpack": "^5.91.0", "webpack-bundle-analyzer": "^4.10.2", diff --git a/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts b/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts index fc5fc499e42cff..e8933b54b1f190 100644 --- a/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts +++ b/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts @@ -9,7 +9,7 @@ export async function generateBaseUIApiPages() { await Promise.all( findPagesMarkdown().map(async (markdown) => { const markdownContent = fs.readFileSync(markdown.filename, 'utf8'); - const markdownHeaders = getHeaders(markdownContent) as any; + const markdownHeaders = getHeaders(markdownContent); const pathnameTokens = markdown.pathname.split('/'); const productName = pathnameTokens[1]; const componentName = pathnameTokens[3]; diff --git a/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts b/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts index b3d8ba5c182530..3bd8a8271d17d2 100644 --- a/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts +++ b/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts @@ -24,12 +24,12 @@ export function getBaseUiDemos(name: string, filename?: string) { }) .map((markdown) => { const markdownContent = fs.readFileSync(markdown.filename, 'utf8'); - const markdownHeaders = getHeaders(markdownContent) as any; + const markdownHeaders = getHeaders(markdownContent); return { ...markdown, markdownContent, - components: markdownHeaders.components as string[], + components: markdownHeaders.components, }; }); diff --git a/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts b/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts index 6e93feb97b55eb..83de2d69f6176f 100644 --- a/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts +++ b/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts @@ -68,12 +68,12 @@ export function getJoyUiComponentInfo(filename: string): ComponentInfo { getDemos: () => { const allMarkdowns = findPagesMarkdown().map((markdown) => { const markdownContent = fs.readFileSync(markdown.filename, 'utf8'); - const markdownHeaders = getHeaders(markdownContent) as any; + const markdownHeaders = getHeaders(markdownContent); return { ...markdown, markdownContent, - components: markdownHeaders.components as string[], + components: markdownHeaders.components, }; }); return allMarkdowns diff --git a/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts b/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts index be080b01e268a9..3090b60d23053a 100644 --- a/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts +++ b/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts @@ -51,12 +51,12 @@ export function getMaterialUiComponentInfo(filename: string): ComponentInfo { getDemos: () => { const allMarkdowns = findPagesMarkdown().map((markdown) => { const markdownContent = fs.readFileSync(markdown.filename, 'utf8'); - const markdownHeaders = getHeaders(markdownContent) as any; + const markdownHeaders = getHeaders(markdownContent); return { ...markdown, markdownContent, - components: markdownHeaders.components as string[], + components: markdownHeaders.components, }; }); return allMarkdowns diff --git a/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts b/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts index 7ae097a4ffc2eb..4d8b8a580c8424 100644 --- a/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts +++ b/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts @@ -65,12 +65,12 @@ export function getSystemComponentInfo(filename: string): ComponentInfo { }) .map((markdown) => { const markdownContent = fs.readFileSync(markdown.filename, 'utf8'); - const markdownHeaders = getHeaders(markdownContent) as any; + const markdownHeaders = getHeaders(markdownContent); return { ...markdown, markdownContent, - components: markdownHeaders.components as string[], + components: markdownHeaders.components, }; }); return allMarkdowns diff --git a/packages/feedback/package.json b/packages/feedback/package.json index d49b514bc00b29..90a16f422848c3 100644 --- a/packages/feedback/package.json +++ b/packages/feedback/package.json @@ -25,6 +25,6 @@ "claudia": "^5.14.1" }, "optionalDependencies": { - "aws-sdk": "^2.1603.0" + "aws-sdk": "^2.1609.0" } } diff --git a/packages/markdown/index.d.ts b/packages/markdown/index.d.ts index a5f9e850f5fe43..dc73e31e7a0d53 100644 --- a/packages/markdown/index.d.ts +++ b/packages/markdown/index.d.ts @@ -12,7 +12,24 @@ export function createRender(context: { ignoreLanguagePages: (path: string) => boolean; }): (markdown: string) => string; -export function getHeaders(markdown: string): Record; +export interface MarkdownHeaders { + packageName?: string; + productId: string; + githubLabel?: string; + waiAria?: string; + materialDesign?: string; + components: string[]; + hooks?: string[]; + slug?: string; + title?: string; + description?: string; + image?: string; + tags?: string[]; + authors?: string[]; + date?: string; +} + +export function getHeaders(markdown: string): MarkdownHeaders; export function getTitle(markdown: string): string; diff --git a/packages/markdown/loader.js b/packages/markdown/loader.js index e9bacef953147d..f6ebfec5290245 100644 --- a/packages/markdown/loader.js +++ b/packages/markdown/loader.js @@ -19,7 +19,7 @@ function upperCaseFirst(string) { * @example moduleIDToJSIdentifier('../Box-new.js') === '$$$BoxNewJs' */ function moduleIDToJSIdentifier(moduleID) { - const delimiter = /(\.|-|\/|:)/; + const delimiter = /(@|\.|-|\/|:)/; return moduleID .split(delimiter) .filter((part) => !delimiter.test(part)) @@ -485,7 +485,9 @@ module.exports = async function demoLoader() { ); componentNames.forEach((componentName) => { - const moduleID = path.join(this.rootContext, 'src', componentName).replace(/\\/g, '/'); + const moduleID = componentName.startsWith('@mui/docs/') + ? componentName + : path.join(this.rootContext, 'src', componentName).replace(/\\/g, '/'); components[moduleID] = componentName; componentModuleIDs.add(moduleID); diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index 00a20879f5f958..874f48b1241582 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -364,7 +364,7 @@ function createRender(context) { } return [ - `${headingHtml}
    `, + `${headingHtml}`, ``, diff --git a/packages/markdown/parseMarkdown.test.js b/packages/markdown/parseMarkdown.test.js index 63ce3631d831ee..c168296bb9841c 100644 --- a/packages/markdown/parseMarkdown.test.js +++ b/packages/markdown/parseMarkdown.test.js @@ -295,9 +295,9 @@ authors: ).to.equal( [ `

    Accordion

    `, - `

    Basic features 🧪

    `, - `

    Using slots and slotProps

    `, - `

    Specific example

    `, + `

    Basic features 🧪

    `, + `

    Using slots and slotProps

    `, + `

    Specific example

    `, ].join(''), ); diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 64b62b1d9cf31f..95c7be4f0a94cc 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -1,6 +1,6 @@ { "name": "@mui/base", - "version": "5.0.0-beta.42", + "version": "5.0.0-beta.43", "private": false, "author": "MUI Team", "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.", diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 46c86981bd51b8..604a054a6e8ac0 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -945,6 +945,28 @@ CSS transforms: npx @mui/codemod@next deprecations/pagination-item-classes ``` +#### `pagination-item-props` + +```diff + +``` + +```diff + MuiPaginationItem: { + defaultProps: { +- components: { first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons } ++ slots: { first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons } + }, + }, +``` + +```bash +npx @mui/codemod@next deprecations/pagination-item-props +``` + #### `slider-props` ```diff @@ -1077,8 +1099,74 @@ npx @mui/codemod@next deprecations/step-connector-classes ### v6.0.0 +#### `theme-v6` + +```bash +npx @mui/codemod@next v6.0.0/theme-v6 +``` + +Update the theme creation from `@mui/system@v5` to be compatible with `@pigment-css/react`. + +- replace palette mode conditional with `theme.applyStyles()` +- replace `ownerState` with `variants` +- move theme variants to the root slot + +```diff + createTheme({ + components: { + MuiButton: { +- variants: [ +- { +- props: { color: 'primary' }, +- style: { +- color: 'red', +- }, +- }, +- ], + styleOverrides: { +- root: ({ theme, ownerState }) => ({ ++ root: ({ theme }) => ({ + ...ownerState.variant === 'contained' && { + backgroundColor: alpha(theme.palette.primary.main, 0.8), + ...theme.palette.mode === 'dark' && { + backgroundColor: alpha(theme.palette.primary.light, 0.9), + } + }, ++ variants: [ ++ { ++ prop: { variant: 'contained' }, ++ style: { ++ backgroundColor: alpha(theme.palette.primary.main, 0.8), ++ }, ++ }, ++ { ++ prop: { variant: 'contained' }, ++ style: { ++ ...theme.applyStyles('dark', { ++ backgroundColor: alpha(theme.palette.primary.light, 0.9), ++ }) ++ }, ++ }, ++ { ++ prop: { color: 'primary' }, ++ style: { ++ color: 'red', ++ }, ++ }, ++ ], + }) + } + } + } + }) +``` + #### `styled-v6` +```bash +npx @mui/codemod@next v6.0.0/styled-v6 +``` + Updates the usage of `styled` from `@mui/system@v5` to be compatible with `@pigment-css/react`. This codemod transforms the styles based on props to `variants` by looking for `styled` calls: diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index b5740c4902102b..c092fc37e951a9 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "6.0.0-alpha.4", + "version": "6.0.0-alpha.5", "bin": "./codemod.js", "private": false, "author": "MUI Team", diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/index.js b/packages/mui-codemod/src/deprecations/pagination-item-props/index.js new file mode 100644 index 00000000000000..7999d2c6792651 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/index.js @@ -0,0 +1 @@ +export { default } from './pagination-item-props'; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.js b/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.js new file mode 100644 index 00000000000000..252aabc0e816e5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.js @@ -0,0 +1,15 @@ +import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + replaceComponentsWithSlots(j, { root, componentName: 'PaginationItem' }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.test.js b/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.test.js new file mode 100644 index 00000000000000..4d7cd4fe412d44 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './pagination-item-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('pagination-item-props', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('[theme] pagination-item-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false } }, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/theme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/actual.js new file mode 100644 index 00000000000000..08076e26561737 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/actual.js @@ -0,0 +1,12 @@ +import PaginationItem from '@mui/material/PaginationItem'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/expected.js new file mode 100644 index 00000000000000..c5b0e3adaf46ed --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/expected.js @@ -0,0 +1,10 @@ +import PaginationItem from '@mui/material/PaginationItem'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..dd9d86c3f0143f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/theme.actual.js @@ -0,0 +1,27 @@ +fn({ + MuiPaginationItem: { + defaultProps: { + components: { + first: componentFirst, + last: componentLast, + next: componentNext, + previous: componentPrevious, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + defaultProps: { + components: { + first: componentFirst, + last: componentLast, + }, + slots: { + next: slotNext, + previous: slotPrevious, + }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..b98b57f7bf9c72 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/theme.expected.js @@ -0,0 +1,25 @@ +fn({ + MuiPaginationItem: { + defaultProps: { + slots: { + first: componentFirst, + last: componentLast, + next: componentNext, + previous: componentPrevious + } + }, + }, +}); + +fn({ + MuiPaginationItem: { + defaultProps: { + slots: { + first: componentFirst, + last: componentLast, + next: slotNext, + previous: slotPrevious + } + }, + }, +}); diff --git a/packages/mui-codemod/src/util/getReturnExpression.js b/packages/mui-codemod/src/util/getReturnExpression.js new file mode 100644 index 00000000000000..b14830121fa4f5 --- /dev/null +++ b/packages/mui-codemod/src/util/getReturnExpression.js @@ -0,0 +1,14 @@ +/** + * @param {import('ast-types').namedTypes.ArrowFunctionExpression | import('ast-types').namedTypes.FunctionExpression} node + */ +export default function getReturnExpression(node) { + let body = node.body; + if (body === 'BlockStatement') { + body = body.body; + } + + if (Array.isArray(body)) { + return body.find((statement) => statement.type === 'ReturnStatement')?.argument; + } + return body; +} diff --git a/packages/mui-codemod/src/util/migrateToVariants.js b/packages/mui-codemod/src/util/migrateToVariants.js new file mode 100644 index 00000000000000..c8508c67b2f2d9 --- /dev/null +++ b/packages/mui-codemod/src/util/migrateToVariants.js @@ -0,0 +1,581 @@ +const MAX_DEPTH = 20; +/** + * + * @param {import('jscodeshift').API['j']} j + * @param {any[]} styles + */ +export default function migrateToVariants(j, styles) { + function createBuildStyle(key, upperBuildStyle, applyStylesMode) { + if (applyStylesMode) { + upperBuildStyle = (styleExpression) => + j.objectExpression([ + j.spreadElement( + j.callExpression( + j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), + [j.stringLiteral(applyStylesMode), styleExpression], + ), + ), + ]); + } + return function buildStyle(styleExpression) { + if (key) { + if (key.type === 'Identifier' || key.type === 'StringLiteral') { + return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)])); + } + if (key.type === 'TemplateLiteral' || key.type === 'CallExpression') { + return upperBuildStyle( + j.objectExpression([ + { + ...j.objectProperty(key, styleExpression), + computed: true, + }, + ]), + ); + } + } + return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression; + }; + } + + /** + * + * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node + */ + function getIdentifierKey(node) { + if (node.type === 'MemberExpression') { + return node.property; + } + return node; + } + + /** + * + * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node + */ + function getObjectKey(node) { + let tempNode = { ...node }; + while (tempNode.type === 'UnaryExpression') { + tempNode = tempNode.argument; + } + while (tempNode.type === 'MemberExpression') { + tempNode = tempNode.object; + } + return tempNode; + } + + /** + * + * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression + * @param {import('ast-types').namedTypes.BinaryExpression} addtional + */ + function objectToArrowFunction(objectExpression, addtional) { + const paramKeys = new Set(); + let left; + objectExpression.properties.forEach((prop, index) => { + paramKeys.add(prop.key.name); + const result = j.binaryExpression('===', prop.key, prop.value); + if (index === 0) { + left = result; + } else { + left = j.logicalExpression('&&', left, result); + } + }); + if (addtional) { + paramKeys.add(getObjectKey(addtional.left).name); + } + return buildArrowFunctionAST( + paramKeys, + addtional ? j.logicalExpression('&&', left, addtional) : left, + ); + } + + /** + * + * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node + */ + function inverseBinaryExpression(node) { + if (node.type === 'Identifier' || node.type === 'MemberExpression') { + return j.unaryExpression('!', node); + } + if (node.operator === '===') { + return { ...node, operator: '!==' }; + } + if (node.operator === '!==') { + return { ...node, operator: '===' }; + } + if (node.operator === '!') { + if (node.argument?.operator === '!') { + return node.argument; + } + return j.unaryExpression('!', node); + } + return node; + } + + /** + * + * @param {import('ast-types').namedTypes.ObjectExpression} node + */ + function removeProperty(parentNode, child) { + if (parentNode) { + if (parentNode.type === 'ObjectExpression') { + parentNode.properties = parentNode.properties.filter( + (prop) => prop !== child && prop.value !== child, + ); + } + } + } + + function buildObjectAST(jsObject) { + const result = j.objectExpression([]); + Object.entries(jsObject).forEach(([key, value]) => { + result.properties.push(j.objectProperty(j.identifier(key), value)); + }); + return result; + } + + function buildArrowFunctionAST(params, body) { + return j.arrowFunctionExpression( + [ + j.objectPattern( + [...params].map((k) => ({ + ...j.objectProperty(j.identifier(k), j.identifier(k)), + shorthand: true, + })), + ), + ], + body, + ); + } + + /** + * + * @param {{ properties: any[] }} node + * @param {Record} modeStyles + */ + function appendPaletteModeStyles(node, modeStyles) { + Object.entries(modeStyles).forEach(([mode, objectStyles]) => { + node.properties.push( + j.spreadElement( + j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [ + j.stringLiteral(mode), + Array.isArray(objectStyles) ? j.objectExpression(objectStyles) : objectStyles, + ]), + ), + ); + }); + } + + /** + * + * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node + */ + function buildProps(node) { + const properties = []; + const variables = new Set(); + let isAllEqual = true; + let tempNode = { ...node }; + function assignProperties(_node) { + if (_node.type === 'BinaryExpression') { + variables.add(getObjectKey(_node.left).name); + if (_node.operator === '===') { + properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right)); + } else { + isAllEqual = false; + } + } + if (_node.type === 'MemberExpression' || _node.type === 'Identifier') { + isAllEqual = false; + variables.add(getObjectKey(_node).name); + } + if (_node.type === 'UnaryExpression') { + isAllEqual = false; + if (_node.argument.type === 'UnaryExpression') { + // handle `!!variable` + variables.add(getObjectKey(_node.argument.argument).name); + } else { + // handle `!variable` + variables.add(getObjectKey(_node.argument).name); + } + } + } + let counter = 0; + if (tempNode.type !== 'LogicalExpression') { + assignProperties(tempNode); + } else { + while (tempNode.type === 'LogicalExpression' && counter < MAX_DEPTH) { + counter += 1; + if (tempNode.operator !== '&&') { + isAllEqual = false; + } + + assignProperties(tempNode.right); + if (tempNode.left.type !== 'LogicalExpression') { + assignProperties(tempNode.left); + break; + } + + tempNode = { ...tempNode.left }; + } + } + + if (!isAllEqual) { + return buildArrowFunctionAST(variables, node); + } + return j.objectExpression(properties); + } + + function mergeProps(parentProps, currentProps) { + if (parentProps.type === 'ObjectExpression' && currentProps.type === 'ObjectExpression') { + return j.objectExpression([...parentProps.properties, ...currentProps.properties]); + } + const parentArrow = + parentProps.type === 'ObjectExpression' ? objectToArrowFunction(parentProps) : parentProps; + const currentArrow = + currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps; + const variables = new Set(); + [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach((param) => { + variables.add(param.key.name); + }); + return buildArrowFunctionAST( + variables, + j.logicalExpression('&&', parentArrow.body, currentArrow.body), + ); + } + + function isThemePaletteMode(node) { + return ( + node.type === 'MemberExpression' && + node.object.type === 'MemberExpression' && + node.object.object.name === 'theme' && + node.object.property.name === 'palette' && + node.property.name === 'mode' + ); + } + + // 2. Find logical spread expressions to convert to variants + styles.forEach((style) => { + const parameters = new Set(); + style.params.forEach((param) => { + if (param.type === 'ObjectPattern') { + param.properties.forEach((prop) => { + parameters.add(prop.key.name); + }); + } + }); + const variants = []; + + if (style.body.type === 'LogicalExpression') { + if ( + style.params[0] && + style.params[0].type === 'ObjectPattern' && + style.params[0].properties.some((prop) => prop.key.name !== 'theme') + ) { + // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar + style.body = j.objectExpression([ + j.objectProperty( + j.identifier('variants'), + j.arrayExpression([ + j.objectExpression([ + j.objectProperty(j.identifier('props'), buildProps(style.body.left)), + j.objectProperty(j.identifier('style'), style.body.right), + ]), + ]), + ), + ]); + } + } else if (style.body.type === 'ConditionalExpression') { + // skip ConditionalExpression + } else { + let objectExpression = style.body; + let counter = 0; + while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) { + counter += 1; + if (objectExpression.type === 'BlockStatement') { + objectExpression = objectExpression.body.find( + (item) => item.type === 'ReturnStatement', + ).argument; + } + } + + recurseObjectExpression({ node: objectExpression, buildStyle: createBuildStyle() }); + + if (variants.length) { + objectExpression.properties.push( + j.objectProperty( + j.identifier('variants'), + j.arrayExpression( + variants.filter((variant) => { + const props = variant.properties.find((prop) => prop.key.name === 'props'); + const styleVal = variant.properties.find((prop) => prop.key.name === 'style'); + return ( + props && + styleVal && + (!styleVal.value.properties || styleVal.value.properties.length > 0) && + (props.value.type === 'ArrowFunctionExpression' || + props.value.properties.length > 0) + ); + }), + ), + ), + ); + } + } + + function recurseObjectExpression(data) { + if (data.node.type === 'ObjectExpression') { + const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'` + data.node.properties.forEach((prop) => { + if (prop.type === 'ObjectProperty') { + recurseObjectExpression({ + ...data, + node: prop.value, + parentNode: data.node, + key: prop.key, + buildStyle: createBuildStyle(prop.key, data.buildStyle), + replaceValue: (newValue) => { + prop.value = newValue; + }, + modeStyles, + }); + } else { + recurseObjectExpression({ + ...data, + node: prop, + parentNode: data.node, + buildStyle: createBuildStyle(prop.key, data.buildStyle), + }); + } + }); + appendPaletteModeStyles(data.node, modeStyles); + } + if (data.node.type === 'SpreadElement') { + if (data.node.argument.type === 'LogicalExpression') { + const paramName = + data.node.argument.left.type === 'BinaryExpression' + ? getObjectKey(data.node.argument.left.left)?.name + : getObjectKey(data.node.argument.left)?.name; + if (paramName === 'theme' && data.node.argument.left.right.type === 'StringLiteral') { + if (data.node.argument.right.type === 'ObjectExpression') { + const mode = data.node.argument.left.right.value; + data.node.argument.right.properties.forEach((prop) => { + if (prop.type === 'ObjectProperty') { + recurseObjectExpression({ + ...data, + node: prop.value, + parentNode: data.node.argument.right, + key: prop.key, + buildStyle: createBuildStyle(prop.key, data.buildStyle, mode), + replaceValue: (newValue) => { + prop.value = newValue; + }, + }); + } else { + recurseObjectExpression({ + ...data, + node: prop, + parentNode: data.node.argument.right, + buildStyle: createBuildStyle(prop.key, data.buildStyle, mode), + }); + } + }); + appendPaletteModeStyles(data.parentNode, { + [mode]: data.node.argument.right, + }); + } + removeProperty(data.parentNode, data.node); + return; + } + if (paramName && !parameters.has(paramName)) { + return; + } + + const scopeProps = buildProps(data.node.argument.left); + const variant = { + props: data.props ? mergeProps(data.props, scopeProps) : scopeProps, + style: data.node.argument.right, + }; + + const lastLength = variants.push({}); // preserve the order of the recursive calls + + const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'` + if (variant.style.type === 'ObjectExpression') { + variant.style.properties.forEach((prop) => { + if (prop.type === 'ObjectProperty') { + recurseObjectExpression({ + ...data, + node: prop.value, + parentNode: variant.style, + props: variant.props, + key: prop.key, + buildStyle: createBuildStyle(prop.key, data.buildStyle), + replaceValue: (newValue) => { + prop.value = newValue; + }, + modeStyles, + }); + } else { + recurseObjectExpression({ + ...data, + node: prop, + parentNode: variant.style, + props: variant.props, + buildStyle: createBuildStyle(prop.key, data.buildStyle), + }); + } + }); + } + appendPaletteModeStyles(variant.style, modeStyles); + variant.style = data.buildStyle(variant.style); + variants[lastLength - 1] = buildObjectAST(variant); + removeProperty(data.parentNode, data.node); + } + if (data.node.argument.type === 'ConditionalExpression') { + recurseObjectExpression({ + ...data, + node: data.node.argument, + parentNode: data.node, + }); + removeProperty(data.parentNode, data.node); + } + } + if (data.node.type === 'ConditionalExpression') { + if ( + data.node.test.type === 'BinaryExpression' || + data.node.test.type === 'UnaryExpression' || + data.node.test.type === 'Identifier' || + data.node.test.type === 'MemberExpression' + ) { + let leftName = getObjectKey(data.node.test)?.name; + if (data.node.test.left) { + leftName = getObjectKey(data.node.test.left)?.name; + } + if (data.node.test.argument) { + leftName = getObjectKey(data.node.test.argument)?.name; + } + if (parameters.has(leftName) && leftName !== 'theme') { + let props = buildProps(data.node.test); + if (data.props) { + props = mergeProps(data.props, props); + } + const styleVal = data.buildStyle(data.node.consequent); + const variant = { + props, + style: styleVal, + }; + variants.push(buildObjectAST(variant)); + + // create another variant with inverted condition + let props2 = buildProps(inverseBinaryExpression(data.node.test)); + if (data.props) { + props2 = mergeProps(data.props, props2); + } + const styleVal2 = data.buildStyle(data.node.alternate); + const variant2 = { + props: props2, + style: styleVal2, + }; + variants.push(buildObjectAST(variant2)); + if (data.parentNode?.type === 'ObjectExpression') { + removeProperty(data.parentNode, data.node); + } + } + if ( + leftName === 'theme' && + data.parentNode?.type === 'ObjectExpression' && + data.node.test?.type === 'BinaryExpression' && + isThemePaletteMode(data.node.test.left) + ) { + if ( + data.node.consequent.type !== 'ObjectExpression' && + data.node.alternate.type !== 'ObjectExpression' + ) { + if (data.modeStyles) { + if (!data.modeStyles[data.node.test.right.value]) { + data.modeStyles[data.node.test.right.value] = []; + } + data.modeStyles[data.node.test.right.value].push( + j.objectProperty(data.key, data.node.consequent), + ); + } + data.replaceValue?.(data.node.alternate); + } + } + } + } + if (data.node.type === 'TemplateLiteral') { + if (data.parentNode?.type === 'ObjectExpression') { + const modeStyles = {}; + data.node.expressions.forEach((expression, index) => { + recurseObjectExpression({ + ...data, + node: expression, + parentNode: data.parentNode, + buildStyle: createBuildStyle(data.key, data.buildStyle), + replaceValue: (newValue) => { + data.node.expressions[index] = newValue; + }, + modeStyles, + }); + }); + if (data.modeStyles) { + Object.entries(modeStyles).forEach(([mode, objectStyles]) => { + const clonedNode = { + ...data.node, + expressions: data.node.expressions.map((expression) => ({ ...expression })), + }; + clonedNode.expressions = objectStyles.map((item) => item.value); + + if (!data.modeStyles[mode]) { + data.modeStyles[mode] = []; + } + data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode)); + }); + } + } + } + if ( + data.key && + data.key.type === 'Identifier' && + data.node.type === 'MemberExpression' && + data.node.object.type === 'ObjectExpression' && + parameters.has(getObjectKey(data.node.property).name) + ) { + data.node.object.properties.forEach((prop) => { + variants.push( + buildObjectAST({ + props: j.objectExpression([ + j.objectProperty( + getIdentifierKey(data.node.property), + j.stringLiteral(prop.key.name), + ), + ]), + style: data.buildStyle(prop.value), + }), + ); + }); + removeProperty(data.parentNode, data.node); + } + } + + style.params.forEach((param) => { + if (param.type === 'ObjectPattern') { + param.properties = param.properties.filter((prop) => prop.key.name === 'theme'); + } + }); + + if (style.body.type === 'ObjectExpression') { + // Remove empty `...theme.applyStyles('...', {})` + style.body.properties = style.body.properties.filter((prop) => { + if ( + prop.argument?.callee?.object?.name === 'theme' && + typeof prop.argument?.arguments[0]?.value === 'string' && + !prop.argument?.arguments?.[1]?.properties?.length + ) { + return false; + } + return true; + }); + } + }); +} diff --git a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js index eeef1e63699534..269e75f07407df 100644 --- a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js +++ b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js @@ -1,4 +1,4 @@ -const MAX_DEPTH = 20; +import migrateToVariants from '../../util/migrateToVariants'; /** * @param {import('jscodeshift').FileInfo} file @@ -9,243 +9,6 @@ export default function styledV6(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - function createBuildStyle(key, upperBuildStyle) { - return function buildStyle(styleExpression) { - if (key) { - if (key.type === 'Identifier' || key.type === 'StringLiteral') { - return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)])); - } - if (key.type === 'TemplateLiteral') { - return upperBuildStyle( - j.objectExpression([ - { - ...j.objectProperty(key, styleExpression), - computed: true, - }, - ]), - ); - } - } - return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression; - }; - } - - /** - * - * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node - */ - function getIdentifierKey(node) { - if (node.type === 'MemberExpression') { - return node.property; - } - return node; - } - - /** - * - * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node - */ - function getObjectKey(node) { - let tempNode = { ...node }; - while (tempNode.type === 'UnaryExpression') { - tempNode = tempNode.argument; - } - while (tempNode.type === 'MemberExpression') { - tempNode = tempNode.object; - } - return tempNode; - } - - /** - * - * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression - * @param {import('ast-types').namedTypes.BinaryExpression} addtional - */ - function objectToArrowFunction(objectExpression, addtional) { - const paramKeys = new Set(); - let left; - objectExpression.properties.forEach((prop, index) => { - paramKeys.add(prop.key.name); - const result = j.binaryExpression('===', prop.key, prop.value); - if (index === 0) { - left = result; - } else { - left = j.logicalExpression('&&', left, result); - } - }); - if (addtional) { - paramKeys.add(getObjectKey(addtional.left).name); - } - return buildArrowFunctionAST( - paramKeys, - addtional ? j.logicalExpression('&&', left, addtional) : left, - ); - } - - /** - * - * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression} node - */ - function inverseBinaryExpression(node) { - if (node.type === 'Identifier') { - return j.unaryExpression('!', node); - } - if (node.operator === '===') { - return { ...node, operator: '!==' }; - } - if (node.operator === '!==') { - return { ...node, operator: '===' }; - } - if (node.operator === '!') { - if (node.argument?.operator === '!') { - return node.argument; - } - return j.unaryExpression('!', node); - } - return node; - } - - /** - * - * @param {import('ast-types').namedTypes.ObjectExpression} node - */ - function removeProperty(parentNode, child) { - if (parentNode) { - if (parentNode.type === 'ObjectExpression') { - parentNode.properties = parentNode.properties.filter( - (prop) => prop !== child && prop.value !== child, - ); - } - } - } - - function buildObjectAST(jsObject) { - const result = j.objectExpression([]); - Object.entries(jsObject).forEach(([key, value]) => { - result.properties.push(j.objectProperty(j.identifier(key), value)); - }); - return result; - } - - function buildArrowFunctionAST(params, body) { - return j.arrowFunctionExpression( - [ - j.objectPattern( - [...params].map((k) => ({ - ...j.objectProperty(j.identifier(k), j.identifier(k)), - shorthand: true, - })), - ), - ], - body, - ); - } - - /** - * - * @param {{ properties: any[] }} node - * @param {Record} modeStyles - */ - function appendPaletteModeStyles(node, modeStyles) { - Object.entries(modeStyles).forEach(([mode, objectStyles]) => { - node.properties.push( - j.spreadElement( - j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [ - j.stringLiteral(mode), - j.objectExpression(objectStyles), - ]), - ), - ); - }); - } - - /** - * - * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node - */ - function buildProps(node) { - const properties = []; - const variables = new Set(); - let isAllEqual = true; - let tempNode = { ...node }; - function assignProperties(_node) { - if (_node.type === 'BinaryExpression') { - variables.add(getObjectKey(_node.left).name); - if (_node.operator === '===') { - properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right)); - } else { - isAllEqual = false; - } - } - if (_node.type === 'MemberExpression' || _node.type === 'Identifier') { - isAllEqual = false; - variables.add(getObjectKey(_node).name); - } - if (_node.type === 'UnaryExpression') { - isAllEqual = false; - if (_node.argument.type === 'UnaryExpression') { - // handle `!!variable` - variables.add(getObjectKey(_node.argument.argument).name); - } else { - // handle `!variable` - variables.add(getObjectKey(_node.argument).name); - } - } - } - let counter = 0; - if (tempNode.type !== 'LogicalExpression') { - assignProperties(tempNode); - } else { - while (tempNode.type === 'LogicalExpression' && counter < MAX_DEPTH) { - counter += 1; - if (tempNode.operator !== '&&') { - isAllEqual = false; - } - - assignProperties(tempNode.right); - if (tempNode.left.type !== 'LogicalExpression') { - assignProperties(tempNode.left); - break; - } - - tempNode = { ...tempNode.left }; - } - } - - if (!isAllEqual) { - return buildArrowFunctionAST(variables, node); - } - return j.objectExpression(properties); - } - - function mergeProps(parentProps, currentProps) { - if (parentProps.type === 'ObjectExpression' && currentProps.type === 'ObjectExpression') { - return j.objectExpression([...parentProps.properties, ...currentProps.properties]); - } - const parentArrow = - parentProps.type === 'ObjectExpression' ? objectToArrowFunction(parentProps) : parentProps; - const currentArrow = - currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps; - const variables = new Set(); - [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach((param) => { - variables.add(param.key.name); - }); - return buildArrowFunctionAST( - variables, - j.logicalExpression('&&', parentArrow.body, currentArrow.body), - ); - } - - function isThemePaletteMode(node) { - return ( - node.type === 'MemberExpression' && - node.object.type === 'MemberExpression' && - node.object.object.name === 'theme' && - node.object.property.name === 'palette' && - node.property.name === 'mode' - ); - } - let shouldTransform = false; root.find(j.CallExpression).forEach((path) => { @@ -285,280 +48,7 @@ export default function styledV6(file, api, options) { shouldTransform = true; } - // 2. Find logical spread expressions to convert to variants - styles.forEach((style) => { - const parameters = new Set(); - style.params.forEach((param) => { - if (param.type === 'ObjectPattern') { - param.properties.forEach((prop) => { - parameters.add(prop.key.name); - }); - } - }); - const variants = []; - - if (style.body.type === 'LogicalExpression') { - if ( - style.params[0] && - style.params[0].type === 'ObjectPattern' && - style.params[0].properties.some((prop) => prop.key.name !== 'theme') - ) { - // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar - style.body = j.objectExpression([ - j.objectProperty( - j.identifier('variants'), - j.arrayExpression([ - j.objectExpression([ - j.objectProperty(j.identifier('props'), buildProps(style.body.left)), - j.objectProperty(j.identifier('style'), style.body.right), - ]), - ]), - ), - ]); - } - } else if (style.body.type === 'ConditionalExpression') { - // skip ConditionalExpression - } else { - let objectExpression = style.body; - let counter = 0; - while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) { - counter += 1; - if (objectExpression.type === 'BlockStatement') { - objectExpression = objectExpression.body.find( - (item) => item.type === 'ReturnStatement', - ).argument; - } - } - - recurseObjectExpression({ node: objectExpression, buildStyle: createBuildStyle() }); - - if (variants.length) { - objectExpression.properties.push( - j.objectProperty( - j.identifier('variants'), - j.arrayExpression( - variants.filter((variant) => { - const props = variant.properties.find((prop) => prop.key.name === 'props'); - const styleVal = variant.properties.find((prop) => prop.key.name === 'style'); - return ( - props && - styleVal && - styleVal.value.properties.length > 0 && - (props.value.type === 'ArrowFunctionExpression' || - props.value.properties.length > 0) - ); - }), - ), - ), - ); - } - } - - function recurseObjectExpression(data) { - if (data.node.type === 'ObjectExpression') { - const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'` - data.node.properties.forEach((prop) => { - if (prop.type === 'ObjectProperty') { - recurseObjectExpression({ - ...data, - node: prop.value, - parentNode: data.node, - key: prop.key, - buildStyle: createBuildStyle(prop.key, data.buildStyle), - replaceValue: (newValue) => { - prop.value = newValue; - }, - modeStyles, - }); - } else { - recurseObjectExpression({ - ...data, - node: prop, - parentNode: data.node, - buildStyle: createBuildStyle(prop.key, data.buildStyle), - }); - } - }); - appendPaletteModeStyles(data.node, modeStyles); - } - if (data.node.type === 'SpreadElement') { - if (data.node.argument.type === 'LogicalExpression') { - const paramName = getObjectKey(data.node.argument.left)?.name; - if (paramName && !parameters.has(paramName)) { - return; - } - - const scopeProps = buildProps(data.node.argument.left); - const variant = { - props: data.props ? mergeProps(data.props, scopeProps) : scopeProps, - style: data.node.argument.right, - }; - - const lastLength = variants.push({}); // preserve the order of the recursive calls - - const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'` - variant.style.properties.forEach((prop) => { - if (prop.type === 'ObjectProperty') { - recurseObjectExpression({ - ...data, - node: prop.value, - parentNode: variant.style, - props: variant.props, - key: prop.key, - buildStyle: createBuildStyle(prop.key, data.buildStyle), - replaceValue: (newValue) => { - prop.value = newValue; - }, - modeStyles, - }); - } else { - recurseObjectExpression({ - ...data, - node: prop, - parentNode: variant.style, - props: variant.props, - buildStyle: createBuildStyle(prop.key, data.buildStyle), - }); - } - }); - appendPaletteModeStyles(variant.style, modeStyles); - variant.style = data.buildStyle(variant.style); - variants[lastLength - 1] = buildObjectAST(variant); - removeProperty(data.parentNode, data.node); - } - if (data.node.argument.type === 'ConditionalExpression') { - recurseObjectExpression({ - ...data, - node: data.node.argument, - parentNode: data.node, - }); - removeProperty(data.parentNode, data.node); - } - } - if (data.node.type === 'ConditionalExpression') { - if ( - data.node.test.type === 'BinaryExpression' || - data.node.test.type === 'UnaryExpression' || - data.node.test.type === 'Identifier' - ) { - let leftName = getObjectKey(data.node.test)?.name; - if (data.node.test.left) { - leftName = getObjectKey(data.node.test.left)?.name; - } - if (data.node.test.argument) { - leftName = getObjectKey(data.node.test.argument)?.name; - } - if (parameters.has(leftName) && leftName !== 'theme') { - let props = buildProps(data.node.test); - if (data.props) { - props = mergeProps(data.props, props); - } - const styleVal = data.buildStyle(data.node.consequent); - const variant = { - props, - style: styleVal, - }; - variants.push(buildObjectAST(variant)); - - // create another variant with inverted condition - let props2 = buildProps(inverseBinaryExpression(data.node.test)); - if (data.props) { - props2 = mergeProps(data.props, props2); - } - const styleVal2 = data.buildStyle(data.node.alternate); - const variant2 = { - props: props2, - style: styleVal2, - }; - variants.push(buildObjectAST(variant2)); - if (data.parentNode?.type === 'ObjectExpression') { - removeProperty(data.parentNode, data.node); - } - } - if ( - leftName === 'theme' && - data.parentNode?.type === 'ObjectExpression' && - data.node.test?.type === 'BinaryExpression' && - isThemePaletteMode(data.node.test.left) - ) { - if ( - data.node.consequent.type !== 'ObjectExpression' && - data.node.alternate.type !== 'ObjectExpression' - ) { - if (data.modeStyles) { - if (!data.modeStyles[data.node.test.right.value]) { - data.modeStyles[data.node.test.right.value] = []; - } - data.modeStyles[data.node.test.right.value].push( - j.objectProperty(data.key, data.node.consequent), - ); - } - data.replaceValue?.(data.node.alternate); - } - } - } - } - if (data.node.type === 'TemplateLiteral') { - if (data.parentNode?.type === 'ObjectExpression') { - const modeStyles = {}; - data.node.expressions.forEach((expression, index) => { - recurseObjectExpression({ - ...data, - node: expression, - parentNode: data.parentNode, - buildStyle: createBuildStyle(data.key, data.buildStyle), - replaceValue: (newValue) => { - data.node.expressions[index] = newValue; - }, - modeStyles, - }); - }); - if (data.modeStyles) { - Object.entries(modeStyles).forEach(([mode, objectStyles]) => { - const clonedNode = { - ...data.node, - expressions: data.node.expressions.map((expression) => ({ ...expression })), - }; - clonedNode.expressions = objectStyles.map((item) => item.value); - - if (!data.modeStyles[mode]) { - data.modeStyles[mode] = []; - } - data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode)); - }); - } - } - } - if ( - data.key && - data.key.type === 'Identifier' && - data.node.type === 'MemberExpression' && - data.node.object.type === 'ObjectExpression' && - parameters.has(getObjectKey(data.node.property).name) - ) { - data.node.object.properties.forEach((prop) => { - variants.push( - buildObjectAST({ - props: j.objectExpression([ - j.objectProperty( - getIdentifierKey(data.node.property), - j.stringLiteral(prop.key.name), - ), - ]), - style: data.buildStyle(prop.value), - }), - ); - }); - removeProperty(data.parentNode, data.node); - } - } - - style.params.forEach((param) => { - if (param.type === 'ObjectPattern') { - param.properties = param.properties.filter((prop) => prop.key.name === 'theme'); - } - }); - }); + migrateToVariants(j, styles); // Replace arrow function with object expression if the arg properties is empty args.forEach((arg, index) => { diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js index c697bd74b69d85..284ff75cbd4d8b 100644 --- a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js +++ b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js @@ -123,3 +123,30 @@ const StyledAppContainer = styled(AppContainer, { }, }; }); + +const DialogContentRoot = styled('div', { + name: 'MuiDialogContent', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [styles.root, ownerState.dividers && styles.dividers]; + }, +})(({ theme, ownerState }) => ({ + flex: '1 1 auto', + // Add iOS momentum scrolling for iOS < 13.0 + WebkitOverflowScrolling: 'touch', + overflowY: 'auto', + padding: '20px 24px', + ...(ownerState.dividers + ? { + padding: '16px 24px', + borderTop: `1px solid ${(theme.vars || theme).palette.divider}`, + borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`, + } + : { + [`.${dialogTitleClasses.root} + &`]: { + paddingTop: 0, + }, + }), +})); diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js index 462436559d07e9..94648e44467afd 100644 --- a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js +++ b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js @@ -230,3 +230,44 @@ const StyledAppContainer = styled(AppContainer, { }] }; }); + +const DialogContentRoot = styled('div', { + name: 'MuiDialogContent', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [styles.root, ownerState.dividers && styles.dividers]; + }, +})(({ + theme +}) => ({ + flex: '1 1 auto', + // Add iOS momentum scrolling for iOS < 13.0 + WebkitOverflowScrolling: 'touch', + overflowY: 'auto', + padding: '20px 24px', + variants: [{ + props: ( + { + ownerState + } + ) => ownerState.dividers, + style: { + padding: '16px 24px', + borderTop: `1px solid ${(theme.vars || theme).palette.divider}`, + borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`, + } + }, { + props: ( + { + ownerState + } + ) => !ownerState.dividers, + style: { + [`.${dialogTitleClasses.root} + &`]: { + paddingTop: 0, + }, + } + }] +})); diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/index.js b/packages/mui-codemod/src/v6.0.0/theme-v6/index.js new file mode 100644 index 00000000000000..109bf88c72774c --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/theme-v6/index.js @@ -0,0 +1 @@ +export { default } from './theme-v6'; diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.actual.js b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.actual.js new file mode 100644 index 00000000000000..05d986c8e991e3 --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.actual.js @@ -0,0 +1,513 @@ +export default function getCheckoutTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...(theme.palette.mode === 'dark' && { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: { + boxSizing: 'border-box', + transition: 'all 100ms ease', + '&:focus-visible': { + outline: `3px solid ${alpha(brand[400], 0.5)}`, + outlineOffset: '2px', + }, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + ...(ownerState.size === 'small' && { + height: '2rem', // 32px + padding: '0 0.5rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', // 40px + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, + '&:hover': { + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + }), + ...(theme.palette.mode === 'dark' && { + ...(ownerState.variant === 'outlined' && { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), + }), + }), + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + }), + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + border: `1px solid ${alpha(gray[700], 0.3)}`, + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(gray[800], 0.5)})`, + }), + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: , + checkedIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...(theme.palette.mode === 'dark' && { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...(theme.palette.mode === 'dark' && { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[700], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: '100%', + opacity: 1, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + }), + }), + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, + root: ({ theme, ownerState }) => ({ + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + fontSize: '1rem', + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + ...(ownerState.color === 'error' && { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + }), + ...(theme.palette.mode === 'dark' && { + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + fontSize: '1rem', + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + ...(ownerState.color === 'error' && { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }), + }), + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + variants: [ + { + props: { completed: true }, + style: () => ({ + width: 12, + height: 12, + }), + }, + ], + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...(theme.palette.mode === 'dark' && { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...(theme.palette.mode === 'dark' && { opacity: 0.5 }), + }, + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...(theme.palette.mode === 'dark' && { + '& .Mui-selected': { + color: 'hsl(0, 0%, 100%)', + }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: theme.shape.borderRadius, + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, + }, + }; +} diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.expected.js b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.expected.js new file mode 100644 index 00000000000000..72d8d0a1d226bd --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.expected.js @@ -0,0 +1,603 @@ +export default function getCheckoutTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles("dark", { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: { + boxSizing: 'border-box', + transition: 'all 100ms ease', + '&:focus-visible': { + outline: `3px solid ${alpha(brand[400], 0.5)}`, + outlineOffset: '2px', + }, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: ({ + theme + }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [{ + props: { + size: 'small' + }, + style: { + height: '2rem', // 32px + padding: '0 0.5rem', + } + }, { + props: { + size: 'medium' + }, + style: { + height: '2.5rem', // 40px + } + }, { + props: { + color: 'primary', + variant: 'contained' + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, + }, + } + }, { + props: { + variant: 'outlined' + }, + style: { + color: brand[700], + backgroundColor: alpha(brand[300], 0.1), + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, + '&:hover': { + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[300], 0.3), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', + }, + } + }, { + props: { + color: 'secondary', + variant: 'outlined' + }, + style: { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + borderColor: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + } + }, { + props: { + color: 'primary', + variant: 'text' + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + } + }, { + props: { + color: 'info', + variant: 'text' + }, + style: { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + } + }, { + props: { + variant: 'outlined' + }, + style: { + ...theme.applyStyles("dark", { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }) + } + }, { + props: { + color: 'info', + variant: 'text' + }, + style: { + ...theme.applyStyles("dark", { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }) + } + }, { + props: { + color: 'secondary', + variant: 'outlined' + }, + style: { + ...theme.applyStyles("dark", { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }) + } + }, { + props: { + color: 'primary', + variant: 'text' + }, + style: { + ...theme.applyStyles("dark", { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }) + } + }] + }), + }, + }, + MuiCard: { + styleOverrides: { + root: ({ + theme + }) => ({ + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + ...theme.applyStyles("dark", { + backgroundColor: alpha(gray[800], 0.6), + border: `1px solid ${alpha(gray[700], 0.3)}` + }), + variants: [{ + props: { + variant: 'outlined' + }, + style: { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, + } + }, { + props: { + variant: 'outlined' + }, + style: { + ...theme.applyStyles("dark", { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(gray[800], 0.5)})`, + }) + } + }] + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: , + checkedIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles("dark", { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...theme.applyStyles("dark", { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ + theme + }) => ({ + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + ...theme.applyStyles("dark", { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + variants: [{ + props: { + size: 'small' + }, + style: { + height: '2rem', + width: '2rem', + } + }, { + props: { + size: 'medium' + }, + style: { + height: '2.5rem', + width: '2.5rem', + } + }] + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[700], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: '100%', + opacity: 1, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + ...theme.applyStyles("dark", { + color: brand[200], + }), + }), + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, + root: ({ + theme + }) => ({ + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + fontSize: '1rem', + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + ...theme.applyStyles("dark", { + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + fontSize: '1rem', + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + } + }), + variants: [{ + props: { + color: 'error' + }, + style: { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + } + }, { + props: { + color: 'error' + }, + style: { + ...theme.applyStyles("dark", { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }) + } + }] + }), + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles("dark", { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: ({ + width: 12, + height: 12 + }), + }, + ] + }), + } + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles("dark", { opacity: 0.5 }), + }, + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...theme.applyStyles("dark", { + '& .Mui-selected': { + color: 'hsl(0, 0%, 100%)', + }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: theme.shape.borderRadius, + fontWeight: 500, + ...theme.applyStyles("dark", { + color: gray[400], + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, + }, + }; +} diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.actual.js b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.actual.js new file mode 100644 index 00000000000000..bdd99e5b12c3d4 --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.actual.js @@ -0,0 +1,56 @@ +export default function getCheckoutTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + MuiStepIcon: { + variants: [ + { + props: { completed: true }, + style: () => ({ + width: 12, + height: 12, + }), + }, + ], + styleOverrides: { + root: ({ theme, ownerState }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...(ownerState.size === 'large' && { + width: 20, + height: 20, + }), + ...(theme.palette.mode === 'dark' && { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + ...(ownerState.variant === 'shadow' && { + boxShadow: theme.shadows[2], + }), + }), + }), + }, + }, + }, + }; +} diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.expected.js b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.expected.js new file mode 100644 index 00000000000000..8f5660247befd8 --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.expected.js @@ -0,0 +1,66 @@ +export default function getCheckoutTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + MuiStepIcon: { + styleOverrides: { + root: ({ + theme + }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles("dark", { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + } + }), + variants: [{ + props: { + size: 'large' + }, + style: { + width: 20, + height: 20, + } + }, { + props: { + variant: 'shadow' + }, + style: { + ...theme.applyStyles("dark", { + boxShadow: theme.shadows[2], + }) + } + }, { + props: { completed: true }, + style: ({ + width: 12, + height: 12 + }), + }] + }), + } + }, + }, + }; +} diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js new file mode 100644 index 00000000000000..00b08bad9afdd9 --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js @@ -0,0 +1,106 @@ +import getReturnExpression from '../../util/getReturnExpression'; +import migrateToVariants from '../../util/migrateToVariants'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function styledV6(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + let shouldTransform = false; + + root.find(j.ArrowFunctionExpression).forEach((path) => { + const styles = []; + let args = []; + + if (path.parent.parent.parent.get('key', 'name').value === 'styleOverrides') { + args = [path.node]; + } + + // 1. collecting styles that should be tranformed + args.forEach((arg) => { + if ( + arg.type === 'ArrowFunctionExpression' && + arg.params[0] && + arg.params[0].type === 'ObjectPattern' + ) { + styles.push(arg); + } + }); + + if (!shouldTransform && styles.length > 0) { + shouldTransform = true; + } + + migrateToVariants(j, styles); + + if (path.parent.get('key', 'name').value === 'root') { + const componentTheme = path.parent.parent.parent.parent.get('properties'); + if (componentTheme.node.type === 'ObjectExpression') { + componentTheme.node.properties.forEach((prop) => { + if (prop.key.name === 'variants') { + prop.value.elements = prop.value.elements.map((element) => { + const styleIndex = element.properties.findIndex( + (styleProp) => + styleProp.type === 'ObjectProperty' && styleProp.key.name === 'style', + ); + if ( + styleIndex !== -1 && + element.properties[styleIndex].value.type !== 'ObjectExpression' + ) { + element.properties[styleIndex].value = getReturnExpression( + element.properties[styleIndex].value, + ); + } + return element; + }); + const stylesNode = getReturnExpression(path.node); + const variantsNode = stylesNode?.properties.find( + (styleProp) => + styleProp.type === 'ObjectProperty' && styleProp.key.name === 'variants', + ); + if (variantsNode) { + variantsNode.value.elements.push(...prop.value.elements); + } else { + stylesNode.properties.push(j.property('init', j.identifier('variants'), prop.value)); + } + } + }); + componentTheme.node.properties = componentTheme.node.properties.filter( + (prop) => prop.key.name !== 'variants', + ); + } + } + }); + + const transformed = root.toSource(printOptions); + + if (shouldTransform) { + // recast adds extra newlines that we don't want, https://github.com/facebook/jscodeshift/issues/249 + // need to remove them manually + const lines = []; + let isInStyled = false; + let spaceMatch; + transformed.split('\n').forEach((line) => { + if (!isInStyled) { + lines.push(line); + } else if (line !== '') { + if (spaceMatch && line.match(/^\s+/)?.[0] === spaceMatch?.[0]) { + isInStyled = false; + spaceMatch = null; + } + lines.push(line); + } + if (line.includes('styleOverrides')) { + isInStyled = true; + spaceMatch = line.match(/^\s+/); + } + }); + return lines.join('\n'); + } + + return transformed; +} diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js new file mode 100644 index 00000000000000..57ecbada5bfcde --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js @@ -0,0 +1,61 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './theme-v6'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('v6.0.0 - theme-v6', () => { + describe('styleOverrides', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/basicTheme.actual.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/basicTheme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/basicTheme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/basicTheme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('theme variants to root slot', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/themeVariants.actual.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/themeVariants.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/themeVariants.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/themeVariants.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index 8d869ff2bdde6f..4463a508ba8623 100644 --- a/packages/mui-core-downloads-tracker/package.json +++ b/packages/mui-core-downloads-tracker/package.json @@ -1,6 +1,6 @@ { "name": "@mui/core-downloads-tracker", - "version": "6.0.0-alpha.4", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "Internal package to track number of downloads of our design system libraries", diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 74dba3338c9e10..5542fa3f0211b3 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "6.0.0-alpha.4", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", diff --git a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx new file mode 100644 index 00000000000000..50e1a7f705af88 --- /dev/null +++ b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx @@ -0,0 +1,199 @@ +import * as React from 'react'; +import Chip from '@mui/material/Chip'; +import Tooltip from '@mui/material/Tooltip'; +import ChatRounded from '@mui/icons-material/ChatRounded'; +import { styled } from '@mui/material/styles'; +import { MarkdownHeaders } from '@mui/internal-markdown'; +import SketchIcon from '../svgIcons/SketchIcon'; +import FigmaIcon from '../svgIcons/FigmaIcon'; +import AdobeXDIcon from '../svgIcons/AdobeXDIcon'; +import BundleSizeIcon from '../svgIcons/BundleSizeIcon'; +import W3CIcon from '../svgIcons/W3CIcon'; +import MaterialDesignIcon from '../svgIcons/MaterialDesignIcon'; +import { useTranslate } from '../i18n'; + +const Root = styled('ul')({ + margin: 0, + padding: 0, + listStyle: 'none', + display: 'flex', + flexWrap: 'wrap', + gap: 8, + '& .MuiChip-root': { + height: 26, + padding: '0 8px', + gap: 6, + '& .MuiChip-label': { padding: 0 }, + '& .MuiChip-iconSmall': { + margin: 0, + fontSize: 14, + }, + }, +}); + +const defaultPackageNames: Record = { + 'material-ui': '@mui/material', + 'joy-ui': '@mui/joy', + 'base-ui': '@mui/base', + system: '@mui/system', +}; + +export interface ComponentLinkHeaderProps { + design?: boolean; + markdown: { + headers: MarkdownHeaders; + }; +} + +export function ComponentLinkHeader(props: ComponentLinkHeaderProps) { + const { + markdown: { headers }, + design, + } = props; + const t = useTranslate(); + + const packageName = + headers.packageName ?? defaultPackageNames[headers.productId] ?? '@mui/material'; + + return ( + + {headers.githubLabel ? ( +
  • + } + data-ga-event-category="ComponentLinkHeader" + data-ga-event-action="click" + data-ga-event-label={t('githubLabel')} + data-ga-event-split="0.1" + label={t('githubLabel')} + /> +
    • + ) : null} +
  • + + } + data-ga-event-category="ComponentLinkHeader" + data-ga-event-action="click" + data-ga-event-label={t('bundleSize')} + data-ga-event-split="0.1" + label={t('bundleSize')} + /> + +
    • + {headers.waiAria ? ( +
  • + } + data-ga-event-category="ComponentLinkHeader" + data-ga-event-action="click" + data-ga-event-label="WAI-ARIA" + data-ga-event-split="0.1" + label="WAI-ARIA" + /> +
    • + ) : null} + {headers.materialDesign ? ( +
  • + } + data-ga-event-category="ComponentLinkHeader" + data-ga-event-action="click" + data-ga-event-label="Material Design" + data-ga-event-split="0.1" + label="Material Design" + /> +
    • + ) : null} + {design === false ? null : ( + +
  • + } + data-ga-event-category="ComponentLinkHeader" + data-ga-event-action="click" + data-ga-event-label="Figma" + data-ga-event-split="0.1" + label="Figma" + /> +
    • + {packageName === '@mui/joy' ? null : ( + +
  • + } + data-ga-event-category="ComponentLinkHeader" + data-ga-event-action="click" + data-ga-event-label="Adobe XD" + data-ga-event-split="0.1" + label="Adobe" + /> +
    • +
  • + } + data-ga-event-category="ComponentLinkHeader" + data-ga-event-action="click" + data-ga-event-label="Sketch" + data-ga-event-split="0.1" + label="Sketch" + /> +
    • +     + )} +     + )} +     + ); +} diff --git a/packages/mui-docs/src/ComponentLinkHeader/index.ts b/packages/mui-docs/src/ComponentLinkHeader/index.ts new file mode 100644 index 00000000000000..755708982255a7 --- /dev/null +++ b/packages/mui-docs/src/ComponentLinkHeader/index.ts @@ -0,0 +1,2 @@ +export * from './ComponentLinkHeader'; +export { ComponentLinkHeader as default } from './ComponentLinkHeader'; diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index 44115a7d31989f..dec1d21b4986a0 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -485,7 +485,7 @@ export function getThemedComponents(): ThemeOptions { '&:hover > span': { transform: 'translateX(2px)' }, }), ...(ownerState.size === 'small' && { - padding: theme.spacing('6px', 1), + padding: theme.spacing('6px', 1.5), fontFamily: theme.typography.fontFamily, fontSize: defaultTheme.typography.pxToRem(13), fontWeight: theme.typography.fontWeightSemiBold, diff --git a/packages/mui-docs/src/svgIcons/AdobeXDIcon.tsx b/packages/mui-docs/src/svgIcons/AdobeXDIcon.tsx new file mode 100644 index 00000000000000..ca3634838b2ee9 --- /dev/null +++ b/packages/mui-docs/src/svgIcons/AdobeXDIcon.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { createSvgIcon } from '@mui/material/utils'; + +export default createSvgIcon( + + + + , + 'AdobeXD', +); diff --git a/packages/mui-docs/src/svgIcons/BundleSizeIcon.tsx b/packages/mui-docs/src/svgIcons/BundleSizeIcon.tsx new file mode 100644 index 00000000000000..0c2e0efd8ba386 --- /dev/null +++ b/packages/mui-docs/src/svgIcons/BundleSizeIcon.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { createSvgIcon } from '@mui/material/utils'; + +export default createSvgIcon( + + + + , + 'BundleSize', +); diff --git a/packages/mui-docs/src/svgIcons/FigmaIcon.tsx b/packages/mui-docs/src/svgIcons/FigmaIcon.tsx new file mode 100644 index 00000000000000..18985ed1a229bc --- /dev/null +++ b/packages/mui-docs/src/svgIcons/FigmaIcon.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { createSvgIcon } from '@mui/material/utils'; + +export default createSvgIcon( + + + + + + + , + 'Figma', +); diff --git a/packages/mui-docs/src/svgIcons/FileDownload.js b/packages/mui-docs/src/svgIcons/FileDownload.tsx similarity index 66% rename from packages/mui-docs/src/svgIcons/FileDownload.js rename to packages/mui-docs/src/svgIcons/FileDownload.tsx index fbe9edfa97d5a4..5a1ebe48608a1d 100644 --- a/packages/mui-docs/src/svgIcons/FileDownload.js +++ b/packages/mui-docs/src/svgIcons/FileDownload.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import SvgIcon from '@mui/material/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; -function FileDownload(props) { +function FileDownload(props: SvgIconProps) { return ( diff --git a/packages/mui-docs/src/svgIcons/JavaScript.js b/packages/mui-docs/src/svgIcons/JavaScript.tsx similarity index 88% rename from packages/mui-docs/src/svgIcons/JavaScript.js rename to packages/mui-docs/src/svgIcons/JavaScript.tsx index daf6303eb5dd20..9c6932d639e3e9 100644 --- a/packages/mui-docs/src/svgIcons/JavaScript.js +++ b/packages/mui-docs/src/svgIcons/JavaScript.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import SvgIcon from '@mui/material/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; -function JavaScript(props) { +function JavaScript(props: SvgIconProps) { return ( diff --git a/packages/mui-docs/src/svgIcons/MaterialDesignIcon.tsx b/packages/mui-docs/src/svgIcons/MaterialDesignIcon.tsx new file mode 100644 index 00000000000000..172f0d9095e8f2 --- /dev/null +++ b/packages/mui-docs/src/svgIcons/MaterialDesignIcon.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { createSvgIcon } from '@mui/material/utils'; + +export default createSvgIcon( + + + + + , + 'MaterialDesign', +); diff --git a/packages/mui-docs/src/svgIcons/SketchIcon.tsx b/packages/mui-docs/src/svgIcons/SketchIcon.tsx new file mode 100644 index 00000000000000..838886e6d3b131 --- /dev/null +++ b/packages/mui-docs/src/svgIcons/SketchIcon.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { createSvgIcon } from '@mui/material/utils'; + +export default createSvgIcon( + + + + + + + + + + , + 'Sketch', +); diff --git a/packages/mui-docs/src/svgIcons/TypeScript.js b/packages/mui-docs/src/svgIcons/TypeScript.tsx similarity index 87% rename from packages/mui-docs/src/svgIcons/TypeScript.js rename to packages/mui-docs/src/svgIcons/TypeScript.tsx index ea493a35f4188b..2b42263ff26421 100644 --- a/packages/mui-docs/src/svgIcons/TypeScript.js +++ b/packages/mui-docs/src/svgIcons/TypeScript.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import SvgIcon from '@mui/material/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; -function TypeScript(props) { +function TypeScript(props: SvgIconProps) { return ( diff --git a/packages/mui-docs/src/svgIcons/W3CIcon.tsx b/packages/mui-docs/src/svgIcons/W3CIcon.tsx new file mode 100644 index 00000000000000..f651d72c75bbd1 --- /dev/null +++ b/packages/mui-docs/src/svgIcons/W3CIcon.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { createSvgIcon } from '@mui/material/utils'; + +export default createSvgIcon( + + + + + + , + 'W3C', +); diff --git a/packages/mui-icons-material/lib/Emergency.js b/packages/mui-icons-material/lib/Emergency.js new file mode 100644 index 00000000000000..da4f21b6d8e5b7 --- /dev/null +++ b/packages/mui-icons-material/lib/Emergency.js @@ -0,0 +1,13 @@ +"use strict"; +"use client"; + +var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; +var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon")); +var _jsxRuntime = require("react/jsx-runtime"); +var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", { + d: "m20.79 9.23-2-3.46L14 8.54V3h-4v5.54L5.21 5.77l-2 3.46L8 12l-4.79 2.77 2 3.46L10 15.46V21h4v-5.54l4.79 2.77 2-3.46L16 12z" +}), 'Emergency'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/EmergencyOutlined.js b/packages/mui-icons-material/lib/EmergencyOutlined.js new file mode 100644 index 00000000000000..1ea22167f6f5c5 --- /dev/null +++ b/packages/mui-icons-material/lib/EmergencyOutlined.js @@ -0,0 +1,13 @@ +"use strict"; +"use client"; + +var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; +var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon")); +var _jsxRuntime = require("react/jsx-runtime"); +var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", { + d: "M21.29 13.9 18 12l3.29-1.9c.48-.28.64-.89.37-1.37l-2-3.46c-.28-.48-.89-.64-1.37-.37L15 6.8V3c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v3.8L5.71 4.9c-.48-.27-1.09-.11-1.37.37l-2 3.46c-.28.48-.11 1.09.37 1.37L6 12l-3.29 1.9c-.48.28-.64.89-.37 1.37l2 3.46c.28.48.89.64 1.37.37L9 17.2V21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-3.8l3.29 1.9c.48.28 1.09.11 1.37-.37l2-3.46c.28-.48.11-1.09-.37-1.37m-2.86 2.97-4.68-2.7c-.33-.2-.75.04-.75.43V20h-2v-5.4c0-.38-.42-.63-.75-.43l-4.68 2.7-1-1.73 4.68-2.7c.33-.19.33-.67 0-.87l-4.68-2.7 1-1.73 4.68 2.7c.33.19.75-.05.75-.44V4h2v5.4c0 .38.42.63.75.43l4.68-2.7 1 1.73-4.68 2.7c-.33.19-.33.67 0 .87l4.68 2.7z" +}), 'EmergencyOutlined'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/EmergencyRounded.js b/packages/mui-icons-material/lib/EmergencyRounded.js new file mode 100644 index 00000000000000..fb3c5472fedc31 --- /dev/null +++ b/packages/mui-icons-material/lib/EmergencyRounded.js @@ -0,0 +1,13 @@ +"use strict"; +"use client"; + +var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; +var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon")); +var _jsxRuntime = require("react/jsx-runtime"); +var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", { + d: "m20.29 8.37-1-1.73c-.28-.48-.89-.64-1.37-.37L14 8.54V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v4.54L6.07 6.27c-.48-.28-1.09-.11-1.36.36l-1 1.73c-.28.48-.12 1.1.36 1.37L8 12l-3.93 2.27c-.48.28-.64.89-.37 1.37l1 1.73c.28.48.89.64 1.37.37L10 15.46V20c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-4.54l3.93 2.27c.48.28 1.09.11 1.37-.37l1-1.73c.28-.48.11-1.09-.37-1.37L16 12l3.93-2.27c.48-.27.64-.89.36-1.36" +}), 'EmergencyRounded'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/EmergencySharp.js b/packages/mui-icons-material/lib/EmergencySharp.js new file mode 100644 index 00000000000000..4e0b0730c2176a --- /dev/null +++ b/packages/mui-icons-material/lib/EmergencySharp.js @@ -0,0 +1,13 @@ +"use strict"; +"use client"; + +var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; +var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon")); +var _jsxRuntime = require("react/jsx-runtime"); +var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", { + d: "m20.79 9.23-2-3.46L14 8.54V3h-4v5.54L5.21 5.77l-2 3.46L8 12l-4.79 2.77 2 3.46L10 15.46V21h4v-5.54l4.79 2.77 2-3.46L16 12z" +}), 'EmergencySharp'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/EmergencyTwoTone.js b/packages/mui-icons-material/lib/EmergencyTwoTone.js new file mode 100644 index 00000000000000..b19154f90fb227 --- /dev/null +++ b/packages/mui-icons-material/lib/EmergencyTwoTone.js @@ -0,0 +1,16 @@ +"use strict"; +"use client"; + +var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; +var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon")); +var _jsxRuntime = require("react/jsx-runtime"); +var _default = exports.default = (0, _createSvgIcon.default)([/*#__PURE__*/(0, _jsxRuntime.jsx)("path", { + d: "m18.43 16.87-4.68-2.7c-.33-.2-.75.04-.75.43V20h-2v-5.4c0-.38-.42-.63-.75-.43l-4.68 2.7-1-1.73 4.68-2.7c.33-.19.33-.67 0-.87l-4.68-2.7 1-1.73 4.68 2.7c.33.19.75-.05.75-.44V4h2v5.4c0 .38.42.63.75.43l4.68-2.7 1 1.73-4.68 2.7c-.33.19-.33.67 0 .87l4.68 2.7z", + opacity: ".3" +}, "0"), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", { + d: "M21.29 13.9 18 12l3.29-1.9c.48-.28.64-.89.37-1.37l-2-3.46c-.28-.48-.89-.64-1.37-.37L15 6.8V3c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v3.8L5.71 4.9c-.48-.27-1.09-.11-1.37.37l-2 3.46c-.28.48-.11 1.09.37 1.37L6 12l-3.29 1.9c-.48.28-.64.89-.37 1.37l2 3.46c.28.48.89.64 1.37.37L9 17.2V21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-3.8l3.29 1.9c.48.28 1.09.11 1.37-.37l2-3.46c.28-.48.11-1.09-.37-1.37m-2.86 2.97-4.68-2.7c-.33-.2-.75.04-.75.43V20h-2v-5.4c0-.38-.42-.63-.75-.43l-4.68 2.7-1-1.73 4.68-2.7c.33-.19.33-.67 0-.87l-4.68-2.7 1-1.73 4.68 2.7c.33.19.75-.05.75-.44V4h2v5.4c0 .38.42.63.75.43l4.68-2.7 1 1.73-4.68 2.7c-.33.19-.33.67 0 .87l4.68 2.7z" +}, "1")], 'EmergencyTwoTone'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/InsertChartOutlined.js b/packages/mui-icons-material/lib/InsertChartOutlined.js index 4f1a4d1599a63e..ea38cae8ce213d 100644 --- a/packages/mui-icons-material/lib/InsertChartOutlined.js +++ b/packages/mui-icons-material/lib/InsertChartOutlined.js @@ -9,5 +9,5 @@ exports.default = void 0; var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon")); var _jsxRuntime = require("react/jsx-runtime"); var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", { - d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z" + d: "M9 17H7v-7h2zm4 0h-2V7h2zm4 0h-2v-4h2zm2.5 2.1h-15V5h15zm0-16.1h-15c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2" }), 'InsertChartOutlined'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/esm/Emergency.js b/packages/mui-icons-material/lib/esm/Emergency.js new file mode 100644 index 00000000000000..e3a4e7eaecc31c --- /dev/null +++ b/packages/mui-icons-material/lib/esm/Emergency.js @@ -0,0 +1,7 @@ +"use client"; + +import createSvgIcon from './utils/createSvgIcon'; +import { jsx as _jsx } from "react/jsx-runtime"; +export default createSvgIcon( /*#__PURE__*/_jsx("path", { + d: "m20.79 9.23-2-3.46L14 8.54V3h-4v5.54L5.21 5.77l-2 3.46L8 12l-4.79 2.77 2 3.46L10 15.46V21h4v-5.54l4.79 2.77 2-3.46L16 12z" +}), 'Emergency'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/esm/EmergencyOutlined.js b/packages/mui-icons-material/lib/esm/EmergencyOutlined.js new file mode 100644 index 00000000000000..9362507acb788b --- /dev/null +++ b/packages/mui-icons-material/lib/esm/EmergencyOutlined.js @@ -0,0 +1,7 @@ +"use client"; + +import createSvgIcon from './utils/createSvgIcon'; +import { jsx as _jsx } from "react/jsx-runtime"; +export default createSvgIcon( /*#__PURE__*/_jsx("path", { + d: "M21.29 13.9 18 12l3.29-1.9c.48-.28.64-.89.37-1.37l-2-3.46c-.28-.48-.89-.64-1.37-.37L15 6.8V3c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v3.8L5.71 4.9c-.48-.27-1.09-.11-1.37.37l-2 3.46c-.28.48-.11 1.09.37 1.37L6 12l-3.29 1.9c-.48.28-.64.89-.37 1.37l2 3.46c.28.48.89.64 1.37.37L9 17.2V21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-3.8l3.29 1.9c.48.28 1.09.11 1.37-.37l2-3.46c.28-.48.11-1.09-.37-1.37m-2.86 2.97-4.68-2.7c-.33-.2-.75.04-.75.43V20h-2v-5.4c0-.38-.42-.63-.75-.43l-4.68 2.7-1-1.73 4.68-2.7c.33-.19.33-.67 0-.87l-4.68-2.7 1-1.73 4.68 2.7c.33.19.75-.05.75-.44V4h2v5.4c0 .38.42.63.75.43l4.68-2.7 1 1.73-4.68 2.7c-.33.19-.33.67 0 .87l4.68 2.7z" +}), 'EmergencyOutlined'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/esm/EmergencyRounded.js b/packages/mui-icons-material/lib/esm/EmergencyRounded.js new file mode 100644 index 00000000000000..1dea529ee204e9 --- /dev/null +++ b/packages/mui-icons-material/lib/esm/EmergencyRounded.js @@ -0,0 +1,7 @@ +"use client"; + +import createSvgIcon from './utils/createSvgIcon'; +import { jsx as _jsx } from "react/jsx-runtime"; +export default createSvgIcon( /*#__PURE__*/_jsx("path", { + d: "m20.29 8.37-1-1.73c-.28-.48-.89-.64-1.37-.37L14 8.54V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v4.54L6.07 6.27c-.48-.28-1.09-.11-1.36.36l-1 1.73c-.28.48-.12 1.1.36 1.37L8 12l-3.93 2.27c-.48.28-.64.89-.37 1.37l1 1.73c.28.48.89.64 1.37.37L10 15.46V20c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-4.54l3.93 2.27c.48.28 1.09.11 1.37-.37l1-1.73c.28-.48.11-1.09-.37-1.37L16 12l3.93-2.27c.48-.27.64-.89.36-1.36" +}), 'EmergencyRounded'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/esm/EmergencySharp.js b/packages/mui-icons-material/lib/esm/EmergencySharp.js new file mode 100644 index 00000000000000..b78ce48a9eb38a --- /dev/null +++ b/packages/mui-icons-material/lib/esm/EmergencySharp.js @@ -0,0 +1,7 @@ +"use client"; + +import createSvgIcon from './utils/createSvgIcon'; +import { jsx as _jsx } from "react/jsx-runtime"; +export default createSvgIcon( /*#__PURE__*/_jsx("path", { + d: "m20.79 9.23-2-3.46L14 8.54V3h-4v5.54L5.21 5.77l-2 3.46L8 12l-4.79 2.77 2 3.46L10 15.46V21h4v-5.54l4.79 2.77 2-3.46L16 12z" +}), 'EmergencySharp'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/esm/EmergencyTwoTone.js b/packages/mui-icons-material/lib/esm/EmergencyTwoTone.js new file mode 100644 index 00000000000000..f9fc959b587ac8 --- /dev/null +++ b/packages/mui-icons-material/lib/esm/EmergencyTwoTone.js @@ -0,0 +1,10 @@ +"use client"; + +import createSvgIcon from './utils/createSvgIcon'; +import { jsx as _jsx } from "react/jsx-runtime"; +export default createSvgIcon([/*#__PURE__*/_jsx("path", { + d: "m18.43 16.87-4.68-2.7c-.33-.2-.75.04-.75.43V20h-2v-5.4c0-.38-.42-.63-.75-.43l-4.68 2.7-1-1.73 4.68-2.7c.33-.19.33-.67 0-.87l-4.68-2.7 1-1.73 4.68 2.7c.33.19.75-.05.75-.44V4h2v5.4c0 .38.42.63.75.43l4.68-2.7 1 1.73-4.68 2.7c-.33.19-.33.67 0 .87l4.68 2.7z", + opacity: ".3" +}, "0"), /*#__PURE__*/_jsx("path", { + d: "M21.29 13.9 18 12l3.29-1.9c.48-.28.64-.89.37-1.37l-2-3.46c-.28-.48-.89-.64-1.37-.37L15 6.8V3c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v3.8L5.71 4.9c-.48-.27-1.09-.11-1.37.37l-2 3.46c-.28.48-.11 1.09.37 1.37L6 12l-3.29 1.9c-.48.28-.64.89-.37 1.37l2 3.46c.28.48.89.64 1.37.37L9 17.2V21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-3.8l3.29 1.9c.48.28 1.09.11 1.37-.37l2-3.46c.28-.48.11-1.09-.37-1.37m-2.86 2.97-4.68-2.7c-.33-.2-.75.04-.75.43V20h-2v-5.4c0-.38-.42-.63-.75-.43l-4.68 2.7-1-1.73 4.68-2.7c.33-.19.33-.67 0-.87l-4.68-2.7 1-1.73 4.68 2.7c.33.19.75-.05.75-.44V4h2v5.4c0 .38.42.63.75.43l4.68-2.7 1 1.73-4.68 2.7c-.33.19-.33.67 0 .87l4.68 2.7z" +}, "1")], 'EmergencyTwoTone'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/esm/InsertChartOutlined.js b/packages/mui-icons-material/lib/esm/InsertChartOutlined.js index d18886f1ca4d04..7ca3e573995785 100644 --- a/packages/mui-icons-material/lib/esm/InsertChartOutlined.js +++ b/packages/mui-icons-material/lib/esm/InsertChartOutlined.js @@ -3,5 +3,5 @@ import createSvgIcon from './utils/createSvgIcon'; import { jsx as _jsx } from "react/jsx-runtime"; export default createSvgIcon( /*#__PURE__*/_jsx("path", { - d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z" + d: "M9 17H7v-7h2zm4 0h-2V7h2zm4 0h-2v-4h2zm2.5 2.1h-15V5h15zm0-16.1h-15c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2" }), 'InsertChartOutlined'); \ No newline at end of file diff --git a/packages/mui-icons-material/lib/esm/index.js b/packages/mui-icons-material/lib/esm/index.js index 4e69b27d18f7b0..89328f8f89dc0e 100644 --- a/packages/mui-icons-material/lib/esm/index.js +++ b/packages/mui-icons-material/lib/esm/index.js @@ -3029,16 +3029,21 @@ export { default as EmailOutlined } from './EmailOutlined'; export { default as EmailRounded } from './EmailRounded'; export { default as EmailSharp } from './EmailSharp'; export { default as EmailTwoTone } from './EmailTwoTone'; +export { default as Emergency } from './Emergency'; +export { default as EmergencyOutlined } from './EmergencyOutlined'; export { default as EmergencyRecording } from './EmergencyRecording'; export { default as EmergencyRecordingOutlined } from './EmergencyRecordingOutlined'; export { default as EmergencyRecordingRounded } from './EmergencyRecordingRounded'; export { default as EmergencyRecordingSharp } from './EmergencyRecordingSharp'; export { default as EmergencyRecordingTwoTone } from './EmergencyRecordingTwoTone'; +export { default as EmergencyRounded } from './EmergencyRounded'; export { default as EmergencyShare } from './EmergencyShare'; export { default as EmergencyShareOutlined } from './EmergencyShareOutlined'; export { default as EmergencyShareRounded } from './EmergencyShareRounded'; export { default as EmergencyShareSharp } from './EmergencyShareSharp'; export { default as EmergencyShareTwoTone } from './EmergencyShareTwoTone'; +export { default as EmergencySharp } from './EmergencySharp'; +export { default as EmergencyTwoTone } from './EmergencyTwoTone'; export { default as EmojiEmotions } from './EmojiEmotions'; export { default as EmojiEmotionsOutlined } from './EmojiEmotionsOutlined'; export { default as EmojiEmotionsRounded } from './EmojiEmotionsRounded'; diff --git a/packages/mui-icons-material/lib/index.js b/packages/mui-icons-material/lib/index.js index c48d41b31ebcd9..203641add74fac 100644 --- a/packages/mui-icons-material/lib/index.js +++ b/packages/mui-icons-material/lib/index.js @@ -18190,6 +18190,18 @@ Object.defineProperty(exports, "EmailTwoTone", { return _EmailTwoTone.default; } }); +Object.defineProperty(exports, "Emergency", { + enumerable: true, + get: function () { + return _Emergency.default; + } +}); +Object.defineProperty(exports, "EmergencyOutlined", { + enumerable: true, + get: function () { + return _EmergencyOutlined.default; + } +}); Object.defineProperty(exports, "EmergencyRecording", { enumerable: true, get: function () { @@ -18220,6 +18232,12 @@ Object.defineProperty(exports, "EmergencyRecordingTwoTone", { return _EmergencyRecordingTwoTone.default; } }); +Object.defineProperty(exports, "EmergencyRounded", { + enumerable: true, + get: function () { + return _EmergencyRounded.default; + } +}); Object.defineProperty(exports, "EmergencyShare", { enumerable: true, get: function () { @@ -18250,6 +18268,18 @@ Object.defineProperty(exports, "EmergencyShareTwoTone", { return _EmergencyShareTwoTone.default; } }); +Object.defineProperty(exports, "EmergencySharp", { + enumerable: true, + get: function () { + return _EmergencySharp.default; + } +}); +Object.defineProperty(exports, "EmergencyTwoTone", { + enumerable: true, + get: function () { + return _EmergencyTwoTone.default; + } +}); Object.defineProperty(exports, "EmojiEmotions", { enumerable: true, get: function () { @@ -66701,16 +66731,21 @@ var _EmailOutlined = _interopRequireDefault(require("./EmailOutlined")); var _EmailRounded = _interopRequireDefault(require("./EmailRounded")); var _EmailSharp = _interopRequireDefault(require("./EmailSharp")); var _EmailTwoTone = _interopRequireDefault(require("./EmailTwoTone")); +var _Emergency = _interopRequireDefault(require("./Emergency")); +var _EmergencyOutlined = _interopRequireDefault(require("./EmergencyOutlined")); var _EmergencyRecording = _interopRequireDefault(require("./EmergencyRecording")); var _EmergencyRecordingOutlined = _interopRequireDefault(require("./EmergencyRecordingOutlined")); var _EmergencyRecordingRounded = _interopRequireDefault(require("./EmergencyRecordingRounded")); var _EmergencyRecordingSharp = _interopRequireDefault(require("./EmergencyRecordingSharp")); var _EmergencyRecordingTwoTone = _interopRequireDefault(require("./EmergencyRecordingTwoTone")); +var _EmergencyRounded = _interopRequireDefault(require("./EmergencyRounded")); var _EmergencyShare = _interopRequireDefault(require("./EmergencyShare")); var _EmergencyShareOutlined = _interopRequireDefault(require("./EmergencyShareOutlined")); var _EmergencyShareRounded = _interopRequireDefault(require("./EmergencyShareRounded")); var _EmergencyShareSharp = _interopRequireDefault(require("./EmergencyShareSharp")); var _EmergencyShareTwoTone = _interopRequireDefault(require("./EmergencyShareTwoTone")); +var _EmergencySharp = _interopRequireDefault(require("./EmergencySharp")); +var _EmergencyTwoTone = _interopRequireDefault(require("./EmergencyTwoTone")); var _EmojiEmotions = _interopRequireDefault(require("./EmojiEmotions")); var _EmojiEmotionsOutlined = _interopRequireDefault(require("./EmojiEmotionsOutlined")); var _EmojiEmotionsRounded = _interopRequireDefault(require("./EmojiEmotionsRounded")); diff --git a/packages/mui-icons-material/material-icons/emergency_24px.svg b/packages/mui-icons-material/material-icons/emergency_24px.svg new file mode 100644 index 00000000000000..ddb6e605d1b7a4 --- /dev/null +++ b/packages/mui-icons-material/material-icons/emergency_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mui-icons-material/material-icons/emergency_outlined_24px.svg b/packages/mui-icons-material/material-icons/emergency_outlined_24px.svg new file mode 100644 index 00000000000000..e325e5d96a5358 --- /dev/null +++ b/packages/mui-icons-material/material-icons/emergency_outlined_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mui-icons-material/material-icons/emergency_rounded_24px.svg b/packages/mui-icons-material/material-icons/emergency_rounded_24px.svg new file mode 100644 index 00000000000000..1c4f2ec08694ed --- /dev/null +++ b/packages/mui-icons-material/material-icons/emergency_rounded_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mui-icons-material/material-icons/emergency_sharp_24px.svg b/packages/mui-icons-material/material-icons/emergency_sharp_24px.svg new file mode 100644 index 00000000000000..ddb6e605d1b7a4 --- /dev/null +++ b/packages/mui-icons-material/material-icons/emergency_sharp_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mui-icons-material/material-icons/emergency_two_tone_24px.svg b/packages/mui-icons-material/material-icons/emergency_two_tone_24px.svg new file mode 100644 index 00000000000000..5c140bf4424cdc --- /dev/null +++ b/packages/mui-icons-material/material-icons/emergency_two_tone_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mui-icons-material/material-icons/insert_chart_outlined_24px.svg b/packages/mui-icons-material/material-icons/insert_chart_outlined_24px.svg index 4cda1b26b71f80..f32c44fc67bc50 100644 --- a/packages/mui-icons-material/material-icons/insert_chart_outlined_24px.svg +++ b/packages/mui-icons-material/material-icons/insert_chart_outlined_24px.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 5cced2472a1a8e..55a4784a5afed3 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/icons-material", - "version": "6.0.0-alpha.4", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "Material Design icons distributed as SVG React components.", diff --git a/packages/mui-icons-material/scripts/download.mjs b/packages/mui-icons-material/scripts/download.mjs index 43f4244d6db771..c3005be7f57008 100644 --- a/packages/mui-icons-material/scripts/download.mjs +++ b/packages/mui-icons-material/scripts/download.mjs @@ -24,7 +24,6 @@ const ignoredIconNames = new Set([ 'data_exploration', 'disabled_visible', 'drive_file_move_rtl', - 'emergency', 'exposure_neg_1', // Google product 'exposure_neg_2', // Google product 'exposure_plus_1', // Google product diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index be3073cd4261b4..332936a0db35bb 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -1,6 +1,6 @@ { "name": "@mui/joy", - "version": "5.0.0-beta.37", + "version": "5.0.0-beta.38", "private": false, "author": "MUI Team", "description": "Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box.", diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 67f1602acc7cf9..942eaab0b90a70 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "6.0.0-alpha.4", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index c63f0c93cb8409..8723dd29c5c230 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material", - "version": "6.0.0-alpha.4", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.", diff --git a/packages/mui-material/src/Chip/Chip.test.js b/packages/mui-material/src/Chip/Chip.test.js index 9cf98ce15f5986..6af617103ddb7d 100644 --- a/packages/mui-material/src/Chip/Chip.test.js +++ b/packages/mui-material/src/Chip/Chip.test.js @@ -54,6 +54,7 @@ describe('', () => { expect(label).to.have.text('My text Chip'); expect(chip).to.have.class(classes.root); + expect(chip).to.have.class(classes.colorDefault); expect(chip).not.to.have.class(classes.colorPrimary); expect(chip).not.to.have.class(classes.colorSecondary); expect(chip).not.to.have.class(classes.clickable); diff --git a/packages/mui-material/src/Chip/chipClasses.ts b/packages/mui-material/src/Chip/chipClasses.ts index 48efe3fbe3cea6..881ffd4ab22a61 100644 --- a/packages/mui-material/src/Chip/chipClasses.ts +++ b/packages/mui-material/src/Chip/chipClasses.ts @@ -8,6 +8,8 @@ export interface ChipClasses { sizeSmall: string; /** Styles applied to the root element if `size="medium"`. */ sizeMedium: string; + /** Styles applied to the root element if `color="default"`. */ + colorDefault: string; /** Styles applied to the root element if `color="error"`. */ colorError: string; /** Styles applied to the root element if `color="info"`. */ @@ -156,6 +158,7 @@ const chipClasses: ChipClasses = generateUtilityClasses('MuiChip', [ 'root', 'sizeSmall', 'sizeMedium', + 'colorDefault', 'colorError', 'colorInfo', 'colorPrimary', diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts index bdd780c88ad731..82b7a76f823db9 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts +++ b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts @@ -5,6 +5,7 @@ import { OverridableComponent, OverrideProps } from '@mui/material/OverridableCo import { Theme } from '../styles'; import { UsePaginationItem } from '../usePagination/usePagination'; import { PaginationItemClasses } from './paginationItemClasses'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface PaginationItemPropsVariantOverrides {} @@ -12,7 +13,30 @@ export interface PaginationItemPropsSizeOverrides {} export interface PaginationItemPropsColorOverrides {} -export interface PaginationItemOwnProps { +export interface PaginationItemSlots { + first?: React.ElementType; + last?: React.ElementType; + next?: React.ElementType; + previous?: React.ElementType; +} + +export type PaginationItemSlotsAndSlotProps = CreateSlotsAndSlotProps< + PaginationItemSlots, + { + first: SlotProps>, {}, PaginationItemOwnerState>; + last: SlotProps>, {}, PaginationItemOwnerState>; + next: SlotProps>, {}, PaginationItemOwnerState>; + previous: SlotProps< + React.ElementType>, + {}, + PaginationItemOwnerState + >; + } +>; + +export interface PaginationItemOwnerState extends PaginationItemProps {} + +export interface PaginationItemOwnProps extends PaginationItemSlotsAndSlotProps { /** * Override or extend the styles applied to the component. */ @@ -34,6 +58,7 @@ export interface PaginationItemOwnProps { * It's recommended to use the `slots` prop instead. * * @default {} + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ components?: { first?: React.ElementType; @@ -65,19 +90,6 @@ export interface PaginationItemOwnProps { * @default 'medium' */ size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `components` prop, which will be deprecated in the future. - * - * @default {} - */ - slots?: { - first?: React.ElementType; - last?: React.ElementType; - next?: React.ElementType; - previous?: React.ElementType; - }; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index 0b65f22c60f365..9193a26e421608 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -12,6 +12,7 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage'; import LastPageIcon from '../internal/svg-icons/LastPage'; import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; +import useSlot from '../utils/useSlot'; import { styled, createUseThemeProps } from '../zero-styled'; const useThemeProps = createUseThemeProps('MuiPaginationItem'); @@ -313,6 +314,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) { shape = 'circular', size = 'medium', slots = {}, + slotProps = {}, type = 'page', variant = 'text', ...other @@ -332,21 +334,62 @@ const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) { const isRtl = useRtl(); const classes = useUtilityClasses(ownerState); - const normalizedIcons = isRtl + const externalForwardedProps = { + slots: { + previous: slots.previous ?? components.previous, + next: slots.next ?? components.next, + first: slots.first ?? components.first, + last: slots.last ?? components.last, + }, + slotProps, + }; + + const [PreviousSlot, previousSlotProps] = useSlot('previous', { + elementType: NavigateBeforeIcon, + externalForwardedProps, + ownerState, + }); + + const [NextSlot, nextSlotProps] = useSlot('next', { + elementType: NavigateNextIcon, + externalForwardedProps, + ownerState, + }); + + const [FirstSlot, firstSlotProps] = useSlot('first', { + elementType: FirstPageIcon, + externalForwardedProps, + ownerState, + }); + + const [LastSlot, lastSlotProps] = useSlot('last', { + elementType: LastPageIcon, + externalForwardedProps, + ownerState, + }); + + const rtlAwareType = isRtl ? { - previous: slots.next || components.next || NavigateNextIcon, - next: slots.previous || components.previous || NavigateBeforeIcon, - last: slots.first || components.first || FirstPageIcon, - first: slots.last || components.last || LastPageIcon, - } - : { - previous: slots.previous || components.previous || NavigateBeforeIcon, - next: slots.next || components.next || NavigateNextIcon, - first: slots.first || components.first || FirstPageIcon, - last: slots.last || components.last || LastPageIcon, - }; + previous: 'next', + next: 'previous', + first: 'last', + last: 'first', + }[type] + : type; - const Icon = normalizedIcons[type]; + const IconSlot = { + previous: PreviousSlot, + next: NextSlot, + first: FirstSlot, + last: LastSlot, + }[rtlAwareType]; + + const iconSlotProps = { + previous: previousSlotProps, + next: nextSlotProps, + first: firstSlotProps, + last: lastSlotProps, + }[rtlAwareType]; return type === 'start-ellipsis' || type === 'end-ellipsis' ? ( {type === 'page' && page} - {Icon ? ( - + {IconSlot ? ( + ) : null} ); @@ -412,6 +455,7 @@ PaginationItem.propTypes /* remove-proptypes */ = { * It's recommended to use the `slots` prop instead. * * @default {} + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ components: PropTypes.shape({ first: PropTypes.elementType, @@ -446,11 +490,18 @@ PaginationItem.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string, ]), + /** + * The props used for each slot inside. + * @default {} + */ + slotProps: PropTypes.shape({ + first: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + last: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + next: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + previous: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), /** * The components used for each slot inside. - * - * This prop is an alias for the `components` prop, which will be deprecated in the future. - * * @default {} */ slots: PropTypes.shape({ diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.test.js b/packages/mui-material/src/PaginationItem/PaginationItem.test.js index b0788d7d386f29..f0785d8df1fe90 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.test.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.test.js @@ -1,7 +1,12 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from '@mui-internal/test-utils'; +import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'; +import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import PaginationItem, { paginationItemClasses as classes } from '@mui/material/PaginationItem'; +import RtlProvider from '@mui/system/RtlProvider'; import describeConformance from '../../test/describeConformance'; describe('', () => { @@ -114,4 +119,170 @@ describe('', () => { expect(getByRole('button')).to.have.class(classes.previousNext); }); + + // describeConformance in it's current form is not able to test slots prop when slots are rendered conditionally. Hence below tests are added in this file. + describe('prop: slots, slotProps, components', () => { + function CustomPreviousIcon(props) { + return ; + } + + function CustomNextIcon(props) { + return ; + } + + function CustomFirstIcon(props) { + return ; + } + + function CustomLastIcon(props) { + return ; + } + + it('icons passed in slots prop should override defualt icons', () => { + const slots = { + previous: CustomPreviousIcon, + next: CustomNextIcon, + first: CustomFirstIcon, + last: CustomLastIcon, + }; + + ['first', 'previous', 'next', 'last'].forEach((slot) => { + const { getByTestId } = render(); + + expect(getByTestId(`custom-${slot}`)).not.to.equal(null); + }); + }); + + it('slotProps should be applied to icons passed in slots prop', () => { + const slots = { + previous: CustomPreviousIcon, + next: CustomNextIcon, + first: CustomFirstIcon, + last: CustomLastIcon, + }; + + const slotProps = { + previous: { 'data-testid': 'slot-previous' }, + next: { 'data-testid': 'slot-next' }, + first: { 'data-testid': 'slot-first' }, + last: { 'data-testid': 'slot-last' }, + }; + + ['first', 'previous', 'next', 'last'].forEach((slot) => { + const { getByTestId } = render( + , + ); + + expect(getByTestId(`slot-${slot}`)).not.to.equal(null); + }); + }); + + it('icons passed in slots should overide icons passed in components prop ', () => { + const slots = { + previous: CustomPreviousIcon, + next: CustomNextIcon, + first: CustomFirstIcon, + last: CustomLastIcon, + }; + + const slotProps = { + previous: { 'data-testid': 'slot-previous' }, + next: { 'data-testid': 'slot-next' }, + first: { 'data-testid': 'slot-first' }, + last: { 'data-testid': 'slot-last' }, + }; + + const components = { + previous: CustomPreviousIcon, + next: CustomNextIcon, + first: CustomFirstIcon, + last: CustomLastIcon, + }; + + ['first', 'previous', 'next', 'last'].forEach((slot) => { + const { getByTestId, queryByTestId } = render( + , + ); + + expect(getByTestId(`slot-${slot}`)).not.to.equal(null); + expect(queryByTestId(`custom-${slot}`)).to.equal(null); + }); + }); + + it('should apply slotProps to icons passed in slots prop', () => { + const slotProps = { + previous: { 'data-testid': 'component-previous' }, + next: { 'data-testid': 'component-next' }, + first: { 'data-testid': 'component-first' }, + last: { 'data-testid': 'component-last' }, + }; + + const components = { + previous: CustomPreviousIcon, + next: CustomNextIcon, + first: CustomFirstIcon, + last: CustomLastIcon, + }; + + ['first', 'previous', 'next', 'last'].forEach((slot) => { + const { getByTestId, queryByTestId } = render( + , + ); + + expect(getByTestId(`component-${slot}`)).not.to.equal(null); + expect(queryByTestId(`custom-${slot}`)).to.equal(null); + }); + }); + + it('slotProps should override internal props', () => { + const slotProps = { + previous: { 'data-testid': 'component-previous' }, + next: { 'data-testid': 'component-next' }, + first: { 'data-testid': 'component-first' }, + last: { 'data-testid': 'component-last' }, + }; + + ['first', 'previous', 'next', 'last'].forEach((slot) => { + const { getByTestId } = render( + , + ); + + expect(getByTestId(`component-${slot}`)).not.to.equal(null); + }); + }); + + it('should take RtlProvider into account when provided and apply slotProps to slots accordingly', () => { + const slots = { + previous: CustomPreviousIcon, + next: CustomNextIcon, + first: CustomFirstIcon, + last: CustomLastIcon, + }; + + const slotProps = { + previous: { 'data-testid': 'slot-previous' }, + next: { 'data-testid': 'slot-next' }, + first: { 'data-testid': 'slot-first' }, + last: { 'data-testid': 'slot-last' }, + }; + + const { queryByTestId } = render( + + + + , + ); + + expect(queryByTestId('slot-next')).not.to.equal(null); + expect(queryByTestId('slot-previous')).to.equal(null); + expect(queryByTestId('slot-last')).not.to.equal(null); + expect(queryByTestId('slot-first')).to.equal(null); + }); + }); }); diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index ab7616a2ba265f..8c09b224107485 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -1,6 +1,6 @@ { "name": "@mui/private-theming", - "version": "6.0.0-alpha.3", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.", diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 7e60575f1981b1..13146f5c5d5824 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine-sc", - "version": "6.0.0-alpha.21", + "version": "6.0.0-alpha.22", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for styled-components.", diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 85e787413babca..d88b0a3b5042c7 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine", - "version": "6.0.0-alpha.3", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for emotion.", diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index 51a6fe0dfde27c..e383b46ffb119d 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styles", - "version": "6.0.0-alpha.4", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 06993d1fe0b48e..c2503342b72824 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "6.0.0-alpha.4", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 22387f464f18c5..8c9b90c4d6041a 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/utils", - "version": "6.0.0-alpha.3", + "version": "6.0.0-alpha.5", "private": false, "author": "MUI Team", "description": "Utility functions for React components.", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index afe4625bd74d3a..1c502d29fe8454 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,8 +38,8 @@ importers: specifier: ^2.6.0 version: 2.6.0 '@slack/bolt': - specifier: ^3.17.1 - version: 3.17.1 + specifier: ^3.18.0 + version: 3.18.0 execa: specifier: ^8.0.1 version: 8.0.1 @@ -315,8 +315,8 @@ importers: specifier: ^5.0.5 version: 5.0.5 serve: - specifier: ^14.2.1 - version: 14.2.1 + specifier: ^14.2.3 + version: 14.2.3 stylelint: specifier: ^15.11.0 version: 15.11.0 @@ -330,8 +330,8 @@ importers: specifier: ^5.3.10 version: 5.3.10(webpack@5.91.0) tsx: - specifier: ^4.7.2 - version: 4.7.2 + specifier: ^4.7.3 + version: 4.7.3 typescript: specifier: ^5.4.5 version: 5.4.5 @@ -468,7 +468,7 @@ importers: version: 7.24.1(@babel/core@7.24.4) '@pigment-css/vite-plugin': specifier: ^0.0.9 - version: 0.0.9(@types/react@18.2.55)(react@18.2.0)(vite@5.2.8) + version: 0.0.9(@types/react@18.2.55)(react@18.2.0)(vite@5.2.10) '@types/react': specifier: 18.2.55 version: 18.2.55 @@ -477,7 +477,7 @@ importers: version: 18.3.0 '@vitejs/plugin-react': specifier: ^4.2.1 - version: 4.2.1(vite@5.2.8) + version: 4.2.1(vite@5.2.10) postcss: specifier: ^8.4.38 version: 8.4.38 @@ -485,11 +485,11 @@ importers: specifier: ^1.0.1 version: 1.0.1 vite: - specifier: 5.2.8 - version: 5.2.8(@types/node@18.19.31) + specifier: 5.2.10 + version: 5.2.10(@types/node@18.19.31) vite-plugin-pages: specifier: ^0.32.1 - version: 0.32.1(vite@5.2.8) + version: 0.32.1(vite@5.2.10) benchmark: dependencies: @@ -650,17 +650,17 @@ importers: specifier: 6.19.8 version: 6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid': - specifier: 7.3.0 - version: 7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.3.1 + version: 7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-generator': - specifier: 7.3.0 - version: 7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.3.1 + version: 7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-premium': - specifier: 7.3.0 - version: 7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.3.1 + version: 7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-pro': - specifier: 7.3.0 - version: 7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.3.1 + version: 7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-date-pickers': specifier: 6.19.9 version: 6.19.9(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0) @@ -1157,8 +1157,8 @@ importers: version: 9.0.1 optionalDependencies: aws-sdk: - specifier: ^2.1603.0 - version: 2.1603.0 + specifier: ^2.1609.0 + version: 2.1609.0 devDependencies: claudia: specifier: ^5.14.1 @@ -5768,8 +5768,8 @@ packages: - '@types/react' dev: false - /@mui/x-data-grid-generator@7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-VhFd4/XhWBC4dUHmMSvCl2JgqDu7PuyMh9rXjEJi6+TX6NHAqMEoOiWV0Uq2TDWBCrl+gAYXpUtTq32rzRVd7A==} + /@mui/x-data-grid-generator@7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-hws8ZCSbIdoCk7S0qlA6ALALwDAzHmHA/7AmNEb7diDoQtbUjXsziLrXOIqyvNkDy/0Iydb42XoShkny5c7h3w==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/icons-material': ^5.4.1 @@ -5780,7 +5780,7 @@ packages: '@mui/base': 5.0.0-beta.40(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/icons-material': link:packages/mui-icons-material/build '@mui/material': link:packages/mui-material/build - '@mui/x-data-grid-premium': 7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-data-grid-premium': 7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) chance: 1.1.11 clsx: 2.1.1 lru-cache: 7.18.3 @@ -5792,8 +5792,8 @@ packages: - react-dom dev: false - /@mui/x-data-grid-premium@7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-kHn3/rRFOZ26H4e2C60yK6a4Ieu5yq1D6mB+PKTvvDi/Mu/EZqc/Yg2+V14oWhabrQYBsrTN7CbCikG6uGa96w==} + /@mui/x-data-grid-premium@7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-cOYUUKFOU9doZtwulo2NElHDnUvf6YO2jd+3/WiZYjr+wKZsoqS9Q0Uoz2WwuThYGzvDSa67xmb1EfLBJrmAkw==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/material': ^5.15.14 @@ -5804,8 +5804,8 @@ packages: '@mui/material': link:packages/mui-material/build '@mui/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0) '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) - '@mui/x-data-grid': 7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-data-grid-pro': 7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-data-grid': 7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-data-grid-pro': 7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-license': 7.2.0(@types/react@18.2.55)(react@18.2.0) '@types/format-util': 1.0.4 clsx: 2.1.1 @@ -5820,8 +5820,8 @@ packages: - '@types/react' dev: false - /@mui/x-data-grid-pro@7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-PWYqSu+vGZfUDVRvj7N8hz/8tFav8qnlvHiTYbq8+hvS3tNHDMBbgsMXva8YEzi0svRg9FV333gaqtEYRyE/0Q==} + /@mui/x-data-grid-pro@7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-e1irmF6OyRN3Bg3HDeJ4OTc4vk61TencI1xDwcI30qArlvNM4rDAsT0e+UVvKJakGioZcoVoYv2HBld5HAy/Nw==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/material': ^5.15.14 @@ -5832,7 +5832,7 @@ packages: '@mui/material': link:packages/mui-material/build '@mui/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0) '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) - '@mui/x-data-grid': 7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-data-grid': 7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-license': 7.2.0(@types/react@18.2.55)(react@18.2.0) '@types/format-util': 1.0.4 clsx: 2.1.1 @@ -5846,8 +5846,8 @@ packages: - '@types/react' dev: false - /@mui/x-data-grid@7.3.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-IIDS6Yvxe+1eRj65q8cgnJg5yF2aIJYuHrY00W/UaFyjxwj3xSzqg3bdEfbjE2gHGS7lEJJbXSenPNGybzW99A==} + /@mui/x-data-grid@7.3.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Z+KlDnk2oZ5uthP4q7koRkD7D3vZ0aiqX+51EmnzUXQljjeQ57GbLm/VHcY+XEg7vvtMsGpycLXFdwwjqINk0A==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/material': ^5.15.14 @@ -6850,7 +6850,7 @@ packages: - supports-color dev: true - /@pigment-css/vite-plugin@0.0.9(@types/react@18.2.55)(react@18.2.0)(vite@5.2.8): + /@pigment-css/vite-plugin@0.0.9(@types/react@18.2.55)(react@18.2.0)(vite@5.2.10): resolution: {integrity: sha512-GMyzdj7dIngj+XFShn7FpqVmu6rZcI0q6tpMUvO669Bl7mB9ZSZZDV7c4GWVXoQs3xXSEFnta3ntAC0Xkjwq6g==} peerDependencies: vite: ^4.0.0 || ^5.0.0 @@ -6861,7 +6861,7 @@ packages: '@wyw-in-js/shared': 0.5.1 '@wyw-in-js/transform': 0.5.1 babel-plugin-define-var: 0.1.0 - vite: 5.2.8(@types/node@18.19.31) + vite: 5.2.10(@types/node@18.19.31) transitivePeerDependencies: - '@types/react' - react @@ -7633,8 +7633,8 @@ packages: /@sinonjs/text-encoding@0.7.2: resolution: {integrity: sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==} - /@slack/bolt@3.17.1: - resolution: {integrity: sha512-N+4WxpkM59RXi7BL3IXUtENnn9cF7TOBn7ttaHpgvlnjUaro+yQyY60arXTlP4ytVDFJ1w0mSdfftcM17h+i2w==} + /@slack/bolt@3.18.0: + resolution: {integrity: sha512-A7bDi5kY50fS6/nsmURkQdO3iMxD8aX/rA+m1UXEM2ue2z4KijeQtx2sOZ4YkJQ/h7BsgTQM0CYh3qqmo+m5sQ==} engines: {node: '>=12.13.0', npm: '>=6.12.0'} dependencies: '@slack/logger': 4.0.0 @@ -8602,7 +8602,7 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitejs/plugin-react@4.2.1(vite@5.2.8): + /@vitejs/plugin-react@4.2.1(vite@5.2.10): resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -8613,7 +8613,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.4) '@types/babel__core': 7.20.5 react-refresh: 0.14.0 - vite: 5.2.8(@types/node@18.19.31) + vite: 5.2.10(@types/node@18.19.31) transitivePeerDependencies: - supports-color dev: true @@ -8802,8 +8802,8 @@ packages: tslib: 2.6.2 dev: true - /@zeit/schemas@2.29.0: - resolution: {integrity: sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==} + /@zeit/schemas@2.36.0: + resolution: {integrity: sha512-7kjMwcChYEzMKjeex9ZFXkt1AyNov9R5HZtjBKVsmVpw7pa7ZtlCGvCBC2vnnXctaYN+aRI61HjIqeetZW5ROg==} dev: true /@zkochan/js-yaml@0.0.6: @@ -8941,7 +8941,7 @@ packages: react: 18.2.0 react-is: 16.13.1 - /ajv-formats@2.1.1(ajv@8.11.0): + /ajv-formats@2.1.1(ajv@8.12.0): resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} peerDependencies: ajv: ^8.0.0 @@ -8949,7 +8949,7 @@ packages: ajv: optional: true dependencies: - ajv: 8.11.0 + ajv: 8.12.0 dev: true /ajv-keywords@3.5.2(ajv@6.12.6): @@ -8959,12 +8959,12 @@ packages: dependencies: ajv: 6.12.6 - /ajv-keywords@5.1.0(ajv@8.11.0): + /ajv-keywords@5.1.0(ajv@8.12.0): resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==} peerDependencies: ajv: ^8.8.2 dependencies: - ajv: 8.11.0 + ajv: 8.12.0 fast-deep-equal: 3.1.3 dev: true @@ -8976,8 +8976,8 @@ packages: json-schema-traverse: 0.4.1 uri-js: 4.4.1 - /ajv@8.11.0: - resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==} + /ajv@8.12.0: + resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==} dependencies: fast-deep-equal: 3.1.3 json-schema-traverse: 1.0.0 @@ -9448,8 +9448,8 @@ packages: dependencies: possible-typed-array-names: 1.0.0 - /aws-sdk@2.1603.0: - resolution: {integrity: sha512-AB54LyTODyiTKdtUzE0LzhnPbumYH3KhDstje8i4KfeBSGCeszTgq89YfOVpSy5twfu9WpsJ2cHOxlrlXn9cpg==} + /aws-sdk@2.1609.0: + resolution: {integrity: sha512-l5RiTld8f0AtxgSN2hXkuM/PPD04UHm4yfnJR6NpuQ+VSCl9RQfdNFUlnnVrJPd2hcoq/qz/gQiBVPjFqGAZwQ==} engines: {node: '>= 10.0.0'} requiresBuild: true dependencies: @@ -10238,7 +10238,7 @@ packages: hasBin: true dependencies: archiver: 3.1.1 - aws-sdk: 2.1603.0 + aws-sdk: 2.1609.0 fs-extra: 6.0.1 glob: 7.2.3 gunzip-maybe: 1.4.2 @@ -19415,9 +19415,9 @@ packages: engines: {node: '>= 12.13.0'} dependencies: '@types/json-schema': 7.0.12 - ajv: 8.11.0 - ajv-formats: 2.1.1(ajv@8.11.0) - ajv-keywords: 5.1.0(ajv@8.11.0) + ajv: 8.12.0 + ajv-formats: 2.1.1(ajv@8.12.0) + ajv-keywords: 5.1.0(ajv@8.12.0) dev: true /search-insights@2.13.0: @@ -19519,13 +19519,13 @@ packages: transitivePeerDependencies: - supports-color - /serve@14.2.1: - resolution: {integrity: sha512-48er5fzHh7GCShLnNyPBRPEjs2I6QBozeGr02gaacROiyS/8ARADlj595j39iZXAqBbJHH/ivJJyPRWY9sQWZA==} + /serve@14.2.3: + resolution: {integrity: sha512-VqUFMC7K3LDGeGnJM9h56D3XGKb6KGgOw0cVNtA26yYXHCcpxf3xwCTUaQoWlVS7i8Jdh3GjQkOB23qsXyjoyQ==} engines: {node: '>= 14'} hasBin: true dependencies: - '@zeit/schemas': 2.29.0 - ajv: 8.11.0 + '@zeit/schemas': 2.36.0 + ajv: 8.12.0 arg: 5.0.2 boxen: 7.0.0 chalk: 5.0.1 @@ -20405,7 +20405,7 @@ packages: resolution: {integrity: sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==} engines: {node: '>=10.0.0'} dependencies: - ajv: 8.11.0 + ajv: 8.12.0 lodash.truncate: 4.4.2 slice-ansi: 4.0.0 string-width: 4.2.3 @@ -20759,8 +20759,8 @@ packages: engines: {node: '>=0.6.x'} dev: false - /tsx@4.7.2: - resolution: {integrity: sha512-BCNd4kz6fz12fyrgCTEdZHGJ9fWTGeUzXmQysh0RVocDY3h4frk05ZNCXSy4kIenF7y/QnrdiVpTsyNRn6vlAw==} + /tsx@4.7.3: + resolution: {integrity: sha512-+fQnMqIp/jxZEXLcj6WzYy9FhcS5/Dfk8y4AtzJ6ejKcKqmfTF8Gso/jtrzDggCF2zTU20gJa6n8XqPYwDAUYQ==} engines: {node: '>=18.0.0'} hasBin: true dependencies: @@ -21226,7 +21226,7 @@ packages: vfile-message: 2.0.4 dev: false - /vite-plugin-pages@0.32.1(vite@5.2.8): + /vite-plugin-pages@0.32.1(vite@5.2.10): resolution: {integrity: sha512-4oPlIbb+J+zpJGfT2xI/27xqY+qTkRc3MBgWKfbW6IWM3CTcSyybuL9kRMCFRdBHfmgkF28qDs7fqVf/HjH1Xw==} peerDependencies: '@vue/compiler-sfc': ^2.7.0 || ^3.0.0 @@ -21243,14 +21243,14 @@ packages: json5: 2.2.3 local-pkg: 0.5.0 picocolors: 1.0.0 - vite: 5.2.8(@types/node@18.19.31) + vite: 5.2.10(@types/node@18.19.31) yaml: 2.4.1 transitivePeerDependencies: - supports-color dev: true - /vite@5.2.8(@types/node@18.19.31): - resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==} + /vite@5.2.10(@types/node@18.19.31): + resolution: {integrity: sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: