diff --git a/docs/data/joy/components/alert/AlertUsage.js b/docs/data/joy/components/alert/AlertUsage.js index 4df19557f68e39..eb33a6de54663a 100644 --- a/docs/data/joy/components/alert/AlertUsage.js +++ b/docs/data/joy/components/alert/AlertUsage.js @@ -10,7 +10,7 @@ export default function AlertUsage() { { propName: 'variant', knob: 'radio', - defaultValue: 'outlined', + defaultValue: 'soft', options: ['plain', 'outlined', 'soft', 'solid'], }, { diff --git a/docs/data/joy/components/card/BasicCard.js b/docs/data/joy/components/card/BasicCard.js index a7ff812c6b4fbd..c4b3aee4a9f9fc 100644 --- a/docs/data/joy/components/card/BasicCard.js +++ b/docs/data/joy/components/card/BasicCard.js @@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined'; export default function BasicCard() { return ( - +
Yosemite National Park April 24 to May 02, 2021 diff --git a/docs/data/joy/components/card/BasicCard.tsx b/docs/data/joy/components/card/BasicCard.tsx index a7ff812c6b4fbd..c4b3aee4a9f9fc 100644 --- a/docs/data/joy/components/card/BasicCard.tsx +++ b/docs/data/joy/components/card/BasicCard.tsx @@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined'; export default function BasicCard() { return ( - +
Yosemite National Park April 24 to May 02, 2021 diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js index ba42e3bf0d369f..e1e51637bc1a42 100644 --- a/docs/data/joy/components/card/CardUsage.js +++ b/docs/data/joy/components/card/CardUsage.js @@ -14,7 +14,7 @@ export default function CardUsage() { { propName: 'variant', knob: 'radio', - defaultValue: 'plain', + defaultValue: 'outlined', options: ['plain', 'outlined', 'soft', 'solid'], }, { diff --git a/docs/data/joy/components/card/CardVariants.js b/docs/data/joy/components/card/CardVariants.js index 7c6ff6f75257bf..bcd703f82efde8 100644 --- a/docs/data/joy/components/card/CardVariants.js +++ b/docs/data/joy/components/card/CardVariants.js @@ -15,16 +15,16 @@ export default function CardVariants() { gap: 2, }} > - + - Plain card (default) + Plain card Description of the card. - Outlined card + Outlined card (default) Description of the card. diff --git a/docs/data/joy/components/card/CardVariants.tsx b/docs/data/joy/components/card/CardVariants.tsx index 7c6ff6f75257bf..bcd703f82efde8 100644 --- a/docs/data/joy/components/card/CardVariants.tsx +++ b/docs/data/joy/components/card/CardVariants.tsx @@ -15,16 +15,16 @@ export default function CardVariants() { gap: 2, }} > - + - Plain card (default) + Plain card Description of the card. - Outlined card + Outlined card (default) Description of the card. diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js index 2d0b1466e393a5..74469d2d3c7433 100644 --- a/docs/data/joy/components/card/DribbbleShot.js +++ b/docs/data/joy/components/card/DribbbleShot.js @@ -15,11 +15,11 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder'; export default function DribbbleShot() { return ( diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx index 2d0b1466e393a5..74469d2d3c7433 100644 --- a/docs/data/joy/components/card/DribbbleShot.tsx +++ b/docs/data/joy/components/card/DribbbleShot.tsx @@ -15,11 +15,11 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder'; export default function DribbbleShot() { return ( diff --git a/docs/data/joy/components/card/card.md b/docs/data/joy/components/card/card.md index dbeb0e268ce96f..babbc07ea25f8e 100644 --- a/docs/data/joy/components/card/card.md +++ b/docs/data/joy/components/card/card.md @@ -36,7 +36,7 @@ The demo below shows a typical Card that groups together Typography, Aspect Rati ### Variants -The Card component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain` (default), `outlined`, `soft`, and `solid`. +The Card component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain`, `outlined` (default), `soft`, and `solid`. {{"demo": "CardVariants.js"}} diff --git a/docs/pages/joy-ui/api/alert.json b/docs/pages/joy-ui/api/alert.json index 572c2b95d75574..95451d45c2f00a 100644 --- a/docs/pages/joy-ui/api/alert.json +++ b/docs/pages/joy-ui/api/alert.json @@ -48,7 +48,7 @@ "name": "union", "description": "'outlined'
| 'plain'
| 'soft'
| 'solid'
| string" }, - "default": "'outlined'", + "default": "'soft'", "additionalInfo": { "joy-variant": true } } }, diff --git a/docs/pages/joy-ui/api/card.json b/docs/pages/joy-ui/api/card.json index d7f69219f122e8..e9fb4bd31addfa 100644 --- a/docs/pages/joy-ui/api/card.json +++ b/docs/pages/joy-ui/api/card.json @@ -44,7 +44,7 @@ "name": "union", "description": "'outlined'
| 'plain'
| 'soft'
| 'solid'
| string" }, - "default": "'plain'", + "default": "'outlined'", "additionalInfo": { "joy-variant": true } } }, diff --git a/packages/mui-joy/src/Alert/Alert.test.tsx b/packages/mui-joy/src/Alert/Alert.test.tsx index 0ccb30dd20c302..8edc33de165dd9 100644 --- a/packages/mui-joy/src/Alert/Alert.test.tsx +++ b/packages/mui-joy/src/Alert/Alert.test.tsx @@ -32,10 +32,10 @@ describe('', () => { it('soft by default', () => { const { getByRole } = render(); - expect(getByRole('alert')).to.have.class(classes.variantOutlined); + expect(getByRole('alert')).to.have.class(classes.variantSoft); }); - (['plain', 'soft', 'solid'] as const).forEach((variant) => { + (['plain', 'outlined', 'solid'] as const).forEach((variant) => { it(`should render ${variant}`, () => { const { getByRole } = render(); diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx index e41e4f121e70da..ae19e140577ce0 100644 --- a/packages/mui-joy/src/Alert/Alert.tsx +++ b/packages/mui-joy/src/Alert/Alert.tsx @@ -74,7 +74,6 @@ const AlertRoot = styled('div', { alignItems: 'center', padding: `var(--Alert-padding)`, borderRadius: 'var(--Alert-radius)', - boxShadow: theme.vars.shadow.xs, ...theme.typography[`body-${({ sm: 'xs', md: 'sm', lg: 'md' } as const)[ownerState.size!]}`], fontWeight: theme.vars.fontWeight.md, ...theme.variants[ownerState.variant!]?.[ownerState.color!], @@ -128,7 +127,7 @@ const Alert = React.forwardRef(function Alert(inProps, ref) { color: colorProp = 'neutral', invertedColors = false, role = 'alert', - variant = 'outlined', + variant = 'soft', size = 'md', startDecorator, endDecorator, @@ -277,7 +276,7 @@ Alert.propTypes /* remove-proptypes */ = { ]), /** * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use. - * @default 'outlined' + * @default 'soft' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']), diff --git a/packages/mui-joy/src/Alert/AlertProps.ts b/packages/mui-joy/src/Alert/AlertProps.ts index b79749d972e662..8c1364e478f602 100644 --- a/packages/mui-joy/src/Alert/AlertProps.ts +++ b/packages/mui-joy/src/Alert/AlertProps.ts @@ -73,7 +73,7 @@ export interface AlertTypeMap

{ sx?: SxProps; /** * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use. - * @default 'outlined' + * @default 'soft' */ variant?: OverridableStringUnion; }; diff --git a/packages/mui-joy/src/Card/Card.test.tsx b/packages/mui-joy/src/Card/Card.test.tsx index a291aeaf112e93..ae773620f6869e 100644 --- a/packages/mui-joy/src/Card/Card.test.tsx +++ b/packages/mui-joy/src/Card/Card.test.tsx @@ -29,10 +29,10 @@ describe('', () => { describeJoyColorInversion(, { muiName: 'JoyCard', classes }); describe('prop: variant', () => { - it('plain by default', () => { + it('outlined by default', () => { const { getByTestId } = render(Hello World); - expect(getByTestId('root')).to.have.class(classes.variantPlain); + expect(getByTestId('root')).to.have.class(classes.variantOutlined); }); (['plain', 'outlined', 'soft', 'solid'] as const).forEach((variant) => { diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index c4caf13ebad36a..73607123bf9052 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -81,7 +81,6 @@ const CardRoot = styled('div', { }), padding: 'var(--Card-padding)', borderRadius: 'var(--Card-radius)', - boxShadow: theme.shadow.sm, backgroundColor: theme.vars.palette.background.surface, position: 'relative', display: 'flex', @@ -120,7 +119,7 @@ const Card = React.forwardRef(function Card(inProps, ref) { component = 'div', invertedColors = false, size = 'md', - variant = 'plain', + variant = 'outlined', children, orientation = 'vertical', slots = {}, @@ -259,7 +258,7 @@ Card.propTypes /* remove-proptypes */ = { ]), /** * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use. - * @default 'plain' + * @default 'outlined' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']), diff --git a/packages/mui-joy/src/Card/CardProps.ts b/packages/mui-joy/src/Card/CardProps.ts index 8c0c2dc9f3420c..1791beee9f6d7b 100644 --- a/packages/mui-joy/src/Card/CardProps.ts +++ b/packages/mui-joy/src/Card/CardProps.ts @@ -58,7 +58,7 @@ export interface CardTypeMap

{ sx?: SxProps; /** * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use. - * @default 'plain' + * @default 'outlined' */ variant?: OverridableStringUnion; } & CardSlotsAndSlotProps; diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx index df621f9d7f0817..43e8830d12d2e5 100644 --- a/packages/mui-joy/src/Input/Input.tsx +++ b/packages/mui-joy/src/Input/Input.tsx @@ -84,6 +84,9 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>( '--Button-radius': 'var(--Input-decoratorChildRadius)', '--IconButton-radius': 'var(--Input-decoratorChildRadius)', boxSizing: 'border-box', + ...(ownerState.variant !== 'plain' && { + boxShadow: theme.shadow.xs, + }), minWidth: 0, minHeight: 'var(--Input-minHeight)', ...(ownerState.fullWidth && { diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index e1c846e70c6e21..8870f2827c8813 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -125,6 +125,9 @@ const SelectRoot = styled('div', { '--Button-radius': 'var(--Select-decoratorChildRadius)', '--IconButton-radius': 'var(--Select-decoratorChildRadius)', boxSizing: 'border-box', + ...(ownerState.variant !== 'plain' && { + boxShadow: theme.shadow.xs, + }), minWidth: 0, minHeight: 'var(--Select-minHeight)', position: 'relative', diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx index 3a2332e160f697..13cacbdd15eb93 100644 --- a/packages/mui-joy/src/Textarea/Textarea.tsx +++ b/packages/mui-joy/src/Textarea/Textarea.tsx @@ -88,6 +88,9 @@ const TextareaRoot = styled('div', { '--Button-radius': 'var(--Textarea-decoratorChildRadius)', '--IconButton-radius': 'var(--Textarea-decoratorChildRadius)', boxSizing: 'border-box', + ...(ownerState.variant !== 'plain' && { + boxShadow: theme.shadow.xs, + }), minWidth: 0, minHeight: 'var(--Textarea-minHeight)', cursor: 'text',