diff --git a/apps/pigment-next-app/src/app/material-ui/react-modal/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-modal/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/material-ui/react-modal/page.tsx rename to apps/pigment-css-next-app/src/app/material-ui/react-modal/page.tsx diff --git a/apps/pigment-vite-app/src/pages/material-ui/react-modal.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-modal.tsx similarity index 100% rename from apps/pigment-vite-app/src/pages/material-ui/react-modal.tsx rename to apps/pigment-css-vite-app/src/pages/material-ui/react-modal.tsx diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml index 0df1319ac41672..ecd3a0782023dc 100644 --- a/apps/pnpm-lock.yaml +++ b/apps/pnpm-lock.yaml @@ -1374,13 +1374,13 @@ importers: version: file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/icons-material': specifier: file:../../packages/mui-icons-material/build - version: file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0) + version: file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0) '@mui/material': specifier: file:../../packages/mui-material/build version: file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/material-nextjs': specifier: file:../../packages/mui-material-nextjs/build - version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0) + version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.13)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0) '@mui/system': specifier: file:../../packages/mui-system/build version: file:../packages/mui-system/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) @@ -1432,7 +1432,7 @@ importers: version: file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/icons-material': specifier: file:../../packages/mui-icons-material/build - version: file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0) + version: file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0) '@mui/material': specifier: file:../../packages/mui-material/build version: file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) @@ -8991,7 +8991,7 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0): + file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0): resolution: {directory: ../packages/mui-icons-material/build, type: directory} id: file:../packages/mui-icons-material/build name: '@mui/icons-material' @@ -9010,7 +9010,7 @@ packages: react: 18.2.0 dev: false - file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0): + file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.13)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0): resolution: {directory: ../packages/mui-material-nextjs/build, type: directory} id: file:../packages/mui-material-nextjs/build name: '@mui/material-nextjs' diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md index 0bcf49c0652a79..9ffbd4d16ded6d 100644 --- a/docs/data/base/getting-started/quickstart/quickstart.md +++ b/docs/data/base/getting-started/quickstart/quickstart.md @@ -10,18 +10,24 @@ If you're using Next.js 13.4 or later, check out the [Next.js App Router guide]( `@mui/base` is completely standalone – run one of the following commands to add Base UI to your React project: +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash npm -npm install @mui/base +npm install @mui/base@next ``` ```bash yarn -yarn add @mui/base +yarn add @mui/base@next ``` ```bash pnpm -pnpm add @mui/base +pnpm add @mui/base@next ``` diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md index 92cf9f71fa4ad9..78b3d3e30a554c 100644 --- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md +++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md @@ -31,8 +31,14 @@ We'll use [`create-react-app` with TypeScript](https://create-react-app.dev/docs After you have created the project, follow the instructions given on the [Tailwind CSS installation page](https://tailwindcss.com/docs/guides/create-react-app) in order to configure `tailwind`. Next, install `@mui/base` in the project: +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash -npm install @mui/base +npm install @mui/base@next ``` ## Adding the player markup diff --git a/docs/data/joy/getting-started/installation/installation.md b/docs/data/joy/getting-started/installation/installation.md index 4f1b53ec6624cf..341b00918886b7 100644 --- a/docs/data/joy/getting-started/installation/installation.md +++ b/docs/data/joy/getting-started/installation/installation.md @@ -6,17 +6,23 @@ Run one of the following commands to add Joy UI to your project: +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash npm -npm install @mui/joy @emotion/react @emotion/styled +npm install @mui/joy@next @emotion/react @emotion/styled ``` ```bash yarn -yarn add @mui/joy @emotion/react @emotion/styled +yarn add @mui/joy@next @emotion/react @emotion/styled ``` ```bash pnpm -pnpm add @mui/joy @emotion/react @emotion/styled +pnpm add @mui/joy@next @emotion/react @emotion/styled ``` diff --git a/docs/data/joy/integrations/icon-libraries/icon-libraries.md b/docs/data/joy/integrations/icon-libraries/icon-libraries.md index b36c8dd5cf793a..bd0192f0351031 100644 --- a/docs/data/joy/integrations/icon-libraries/icon-libraries.md +++ b/docs/data/joy/integrations/icon-libraries/icon-libraries.md @@ -13,8 +13,12 @@ This section assumes that you've already installed Joy UI in your app—see [In #### yarn +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + ```bash -yarn add @mui/icons-material @mui/material +yarn add @mui/icons-material@next @mui/material@next ``` :::warning @@ -39,8 +43,14 @@ You can keep track of the progress in [this issue](https://github.com/mui/materi #### npm +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash -npm install @mui/icons-material @mui/material +npm install @mui/icons-material@next @mui/material@next ``` :::warning diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js index 6b7d09f473cf0e..a7d4251827ab8f 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js @@ -1,5 +1,5 @@ import * as React from 'react'; - +import { useTheme } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; import IconButton from '@mui/joy/IconButton'; @@ -7,6 +7,7 @@ import Typography from '@mui/joy/Typography'; import Sheet from '@mui/joy/Sheet'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded'; +import InvertColorsIcon from '@mui/icons-material/InvertColors'; /** * Design credit: https://flutter.dev/ @@ -14,71 +15,113 @@ import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded'; export default function ColorInversionMarketing() { const [color, setColor] = React.useState('primary'); + const [solid, setSolid] = React.useState(true); + const theme = useTheme(); + + const shade = (x) => theme.vars.palette[color][x]; + const color1 = solid ? shade(800) : shade(600); + const color2 = solid ? shade(600) : shade(200); + const color3 = shade(900); + const gradient1 = `${color1}, ${color2} 65%`; + const gradient2 = `${color1} 65%, ${color3}`; + const textColor = { color: solid ? shade(50) : shade(700) }; + + const buttonStyles = { + borderRadius: 99, + '&:hover': { + '& .MuiButton-endDecorator': { transform: 'translate(4px, 0px)' }, + }, + '& span': { transition: '0.15s' }, + }; + return ( - - Get started - +
+ + Get started + + Instant access to the power of the Joy UI library. *': { flexGrow: 1, fontWeight: 'lg' }, + gap: 1, }} > - + - - - + { - const colors = ['primary', 'neutral', 'danger', 'success', 'warning']; - - const nextColorIndex = colors.indexOf(color) + 1; - setColor(colors[nextColorIndex] ?? colors[0]); + bgcolor: 'transparent', + display: 'flex', + gap: 2, + '& button': { borderRadius: '50%' }, }} > - - + setSolid((state) => !state)}> + + + { + const colors = ['primary', 'neutral', 'danger', 'success', 'warning']; + + const nextColorIndex = colors.indexOf(color) + 1; + setColor(colors[nextColorIndex] ?? colors[0]); + }} + > + + + ); } diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx index 90e93c26a075d4..befa18c13e5612 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ColorPaletteProp } from '@mui/joy/styles'; +import { ColorPaletteProp, PaletteRange, useTheme } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; import IconButton from '@mui/joy/IconButton'; @@ -7,6 +7,7 @@ import Typography from '@mui/joy/Typography'; import Sheet from '@mui/joy/Sheet'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded'; +import InvertColorsIcon from '@mui/icons-material/InvertColors'; /** * Design credit: https://flutter.dev/ @@ -14,76 +15,118 @@ import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded'; export default function ColorInversionMarketing() { const [color, setColor] = React.useState('primary'); + const [solid, setSolid] = React.useState(true); + const theme = useTheme(); + + const shade = (x: keyof PaletteRange): string => theme.vars.palette[color][x]; + const color1 = solid ? shade(800) : shade(600); + const color2 = solid ? shade(600) : shade(200); + const color3 = shade(900); + const gradient1 = `${color1}, ${color2} 65%`; + const gradient2 = `${color1} 65%, ${color3}`; + const textColor = { color: solid ? shade(50) : shade(700) }; + + const buttonStyles = { + borderRadius: 99, + '&:hover': { + '& .MuiButton-endDecorator': { transform: 'translate(4px, 0px)' }, + }, + '& span': { transition: '0.15s' }, + }; + return ( - - Get started - +
+ + Get started + + Instant access to the power of the Joy UI library. *': { flexGrow: 1, fontWeight: 'lg' }, + gap: 1, }} > - + - - - + { - const colors: ColorPaletteProp[] = [ - 'primary', - 'neutral', - 'danger', - 'success', - 'warning', - ]; - const nextColorIndex = colors.indexOf(color) + 1; - setColor(colors[nextColorIndex] ?? colors[0]); + bgcolor: 'transparent', + display: 'flex', + gap: 2, + '& button': { borderRadius: '50%' }, }} > - - + setSolid((state) => !state)}> + + + { + const colors: ColorPaletteProp[] = [ + 'primary', + 'neutral', + 'danger', + 'success', + 'warning', + ]; + const nextColorIndex = colors.indexOf(color) + 1; + setColor(colors[nextColorIndex] ?? colors[0]); + }} + > + + + ); } diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js index 822606a78376a9..147f6e3b0735a7 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js @@ -10,7 +10,7 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; export default function ColorInversionMotivation() { const demo = ( - + {/* Left: The global variants are applied to children only */} - + {demo} One layer @@ -55,7 +54,7 @@ export default function ColorInversionMotivation() { {/* Right: The global variants are applied to both parent and children */} - + {React.cloneElement(demo, { variant: 'solid', color: 'primary', diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx index 352d801efdde4e..e6d5948ea2673f 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx @@ -10,7 +10,7 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; export default function ColorInversionMotivation() { const demo = ( - + {/* Left: The global variants are applied to children only */} - + {demo} One layer @@ -54,7 +53,7 @@ export default function ColorInversionMotivation() { {/* Right: The global variants are applied to both parent and children */} - + {React.cloneElement(demo, { variant: 'solid', color: 'primary', diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js index 7d8b603c3e2dc9..41c91f879e4c45 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js @@ -28,10 +28,10 @@ export default function ColorInversionPopup() { const [color, setColor] = React.useState('danger'); const [menuButton, setMenuButton] = React.useState(null); return ( - + + , + ); + const buttonGroup = container.firstChild; + expect(buttonGroup).to.have.class(classes.colorPrimary); + expect(buttonGroup).to.have.class(classes.horizontal); + }); + + it('should have colorSecondary class', () => { + const { container } = render( + + + , + ); + + const buttonGroup = container.firstChild; + expect(buttonGroup).to.have.class(classes.colorSecondary); + }); + it('should render an outlined button', () => { const { getByRole } = render( diff --git a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts index de0223228fa273..89f93aaf8d8ad3 100644 --- a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts +++ b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts @@ -18,43 +18,83 @@ export interface ButtonGroupClasses { firstButton: string; /** Styles applied to the root element if `fullWidth={true}`. */ fullWidth: string; + /** Styles applied to the root element if `orientation="horizontal"`. */ + horizontal: string; /** Styles applied to the root element if `orientation="vertical"`. */ vertical: string; /** Styles applied to the children. */ grouped: string; - /** Styles applied to the children if `orientation="horizontal"`. */ + /** Styles applied to the root element if `color="primary"` */ + colorPrimary: string; + /** Styles applied to the root element if `color="secondary"` */ + colorSecondary: string; + /** Styles applied to the children if `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedHorizontal: string; - /** Styles applied to the children if `orientation="vertical"`. */ + /** Styles applied to the children if `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedVertical: string; - /** Styles applied to the children if `variant="text"`. */ + /** Styles applied to the children if `variant="text"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedText: string; - /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. */ + /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextHorizontal: string; - /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. */ + /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextVertical: string; - /** Styles applied to the children if `variant="text"` and `color="primary"`. */ + /** Styles applied to the children if `variant="text"` and `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextPrimary: string; - /** Styles applied to the children if `variant="text"` and `color="secondary"`. */ + /** Styles applied to the children if `variant="text"` and `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextSecondary: string; - /** Styles applied to the children if `variant="outlined"`. */ + /** Styles applied to the children if `variant="outlined"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlined: string; - /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */ + /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedHorizontal: string; - /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. */ + /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedVertical: string; - /** Styles applied to the children if `variant="outlined"` and `color="primary"`. */ + /** Styles applied to the children if `variant="outlined"` and `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedPrimary: string; - /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. */ + /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedSecondary: string; - /** Styles applied to the children if `variant="contained"`. */ + /** Styles applied to the children if `variant="contained"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContained: string; - /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */ + /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedHorizontal: string; - /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. */ + /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedVertical: string; - /** Styles applied to the children if `variant="contained"` and `color="primary"`. */ + /** Styles applied to the children if `variant="contained"` and `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedPrimary: string; - /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */ + /** Styles applied to the children if `variant="contained"` and `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedSecondary: string; /** Styles applied to the last button in the button group. */ lastButton: string; @@ -77,7 +117,10 @@ const buttonGroupClasses: ButtonGroupClasses = generateUtilityClasses('MuiButton 'disabled', 'firstButton', 'fullWidth', + 'horizontal', 'vertical', + 'colorPrimary', + 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', diff --git a/packages/mui-styles/README.md b/packages/mui-styles/README.md index 93587d0f4a587a..944061cd8a83da 100644 --- a/packages/mui-styles/README.md +++ b/packages/mui-styles/README.md @@ -6,8 +6,10 @@ You can leverage our styling solution, even if you are not using our components. Install the package in your project directory with: + + ```bash -npm install @mui/styles +npm install @mui/styles@next ``` ## Documentation