[joy-ui][design] Stray design tweaks to components

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'],
         },
         {

docs/data/joy/components/card/BasicCard.js

@@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ width: 320 }}>
+    <Card sx={{ width: 320 }}>
       <div>
         <Typography level="title-lg">Yosemite National Park</Typography>
         <Typography level="body-sm">April 24 to May 02, 2021</Typography>

docs/data/joy/components/card/BasicCard.tsx

@@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ width: 320 }}>
+    <Card sx={{ width: 320 }}>
       <div>
         <Typography level="title-lg">Yosemite National Park</Typography>
         <Typography level="body-sm">April 24 to May 02, 2021</Typography>

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'],
         },
         {

docs/data/joy/components/card/CardVariants.js

@@ -15,16 +15,16 @@ export default function CardVariants() {
         gap: 2,
       }}
     >
-      <Card>
+      <Card variant="plain">
         <CardContent>
-          <Typography level="title-md">Plain card (default)</Typography>
+          <Typography level="title-md">Plain card</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>
 
       <Card variant="outlined">
         <CardContent>
-          <Typography level="title-md">Outlined card</Typography>
+          <Typography level="title-md">Outlined card (default)</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>

docs/data/joy/components/card/CardVariants.tsx

@@ -15,16 +15,16 @@ export default function CardVariants() {
         gap: 2,
       }}
     >
-      <Card>
+      <Card variant="plain">
         <CardContent>
-          <Typography level="title-md">Plain card (default)</Typography>
+          <Typography level="title-md">Plain card</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>
 
       <Card variant="outlined">
         <CardContent>
-          <Typography level="title-md">Outlined card</Typography>
+          <Typography level="title-md">Outlined card (default)</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>

docs/data/joy/components/card/DribbbleShot.js

@@ -15,6 +15,7 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder';
 export default function DribbbleShot() {
   return (
     <Card
+      variant="plain"
       sx={{
         width: 300,
         bgcolor: 'initial',

docs/data/joy/components/card/DribbbleShot.tsx

@@ -15,6 +15,7 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder';
 export default function DribbbleShot() {
   return (
     <Card
+      variant="plain"
       sx={{
         width: 300,
         bgcolor: 'initial',

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"}}
 

docs/pages/joy-ui/api/alert.json

@@ -48,7 +48,7 @@
         "name": "union",
         "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;string"
       },
-      "default": "'outlined'",
+      "default": "'soft'",
       "additionalInfo": { "joy-variant": true }
     }
   },

docs/pages/joy-ui/api/card.json

@@ -44,7 +44,7 @@
         "name": "union",
         "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;string"
       },
-      "default": "'plain'",
+      "default": "'outlined'",
       "additionalInfo": { "joy-variant": true }
     }
   },

packages/mui-joy/src/Alert/Alert.test.tsx

@@ -32,10 +32,10 @@ describe('<Alert />', () => {
     it('soft by default', () => {
       const { getByRole } = render(<Alert />);
 
-      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(<Alert variant={variant} />);
 

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']),

packages/mui-joy/src/Alert/AlertProps.ts

@@ -73,7 +73,7 @@ export interface AlertTypeMap<P = {}, D extends React.ElementType = 'div'> {
       sx?: SxProps;
       /**
        * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
-       * @default 'outlined'
+       * @default 'soft'
        */
       variant?: OverridableStringUnion<VariantProp, AlertPropsVariantOverrides>;
     };

packages/mui-joy/src/Card/Card.test.tsx

@@ -29,10 +29,10 @@ describe('<Card />', () => {
   describeJoyColorInversion(<Card />, { muiName: 'JoyCard', classes });
 
   describe('prop: variant', () => {
-    it('plain by default', () => {
+    it('outlined by default', () => {
       const { getByTestId } = render(<Card data-testid="root">Hello World</Card>);
 
-      expect(getByTestId('root')).to.have.class(classes.variantPlain);
+      expect(getByTestId('root')).to.have.class(classes.variantOutlined);
     });
 
     (['plain', 'outlined', 'soft', 'solid'] as const).forEach((variant) => {

packages/mui-joy/src/Card/Card.tsx

@@ -79,9 +79,11 @@ const CardRoot = styled('div', {
         '--Card-padding': '1.5rem',
         gap: '1rem 1.5rem',
       }),
+      ...(ownerState.variant === 'plain' && {
+        boxShadow: theme.shadow.xs,
+      }),
       padding: 'var(--Card-padding)',
       borderRadius: 'var(--Card-radius)',
-      boxShadow: theme.shadow.sm,
       backgroundColor: theme.vars.palette.background.surface,
       position: 'relative',
       display: 'flex',
@@ -120,7 +122,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 +261,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']),

packages/mui-joy/src/Card/CardProps.ts

@@ -58,7 +58,7 @@ export interface CardTypeMap<P = {}, D extends React.ElementType = 'div'> {
     sx?: SxProps;
     /**
      * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
-     * @default 'plain'
+     * @default 'outlined'
      */
     variant?: OverridableStringUnion<VariantProp, CardPropsVariantOverrides>;
   } & CardSlotsAndSlotProps;

packages/mui-joy/src/Input/Input.tsx

@@ -72,6 +72,18 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
           '--Input-decoratorChildHeight': 'min(2.375rem, var(--Input-minHeight))',
           '--Icon-fontSize': theme.vars.fontSize.xl2,
         }),
+        ...(ownerState.variant === 'plain' && {
+          boxShadow: 'none',
+        }),
+        ...(ownerState.variant === 'outlined' && {
+          boxShadow: theme.shadow.xs,
+        }),
+        ...(ownerState.variant === 'soft' && {
+          boxShadow: theme.shadow.xs,
+        }),
+        ...(ownerState.variant === 'solid' && {
+          boxShadow: theme.shadow.xs,
+        }),
         // variables for controlling child components
         '--Input-decoratorChildOffset':
           'min(calc(var(--Input-paddingInline) - (var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Input-decoratorChildHeight)) / 2), var(--Input-paddingInline))',

packages/mui-joy/src/Select/Select.tsx

@@ -125,6 +125,18 @@ const SelectRoot = styled('div', {
         '--Select-decoratorChildHeight': 'min(2.375rem, var(--Select-minHeight))',
         '--Icon-fontSize': theme.vars.fontSize.xl2,
       }),
+      ...(ownerState.variant === 'plain' && {
+        boxShadow: 'none',
+      }),
+      ...(ownerState.variant === 'outlined' && {
+        boxShadow: theme.shadow.xs,
+      }),
+      ...(ownerState.variant === 'soft' && {
+        boxShadow: theme.shadow.xs,
+      }),
+      ...(ownerState.variant === 'solid' && {
+        boxShadow: theme.shadow.xs,
+      }),
       // variables for controlling child components
       '--Select-decoratorChildOffset':
         'min(calc(var(--Select-paddingInline) - (var(--Select-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Select-decoratorChildHeight)) / 2), var(--Select-paddingInline))',

packages/mui-joy/src/Textarea/Textarea.tsx

@@ -78,6 +78,18 @@ const TextareaRoot = styled('div', {
         '--Textarea-decoratorChildHeight': 'min(2.375rem, var(--Textarea-minHeight))',
         '--Icon-fontSize': theme.vars.fontSize.xl2,
       }),
+      ...(ownerState.variant === 'plain' && {
+        boxShadow: 'none',
+      }),
+      ...(ownerState.variant === 'outlined' && {
+        boxShadow: theme.shadow.xs,
+      }),
+      ...(ownerState.variant === 'soft' && {
+        boxShadow: theme.shadow.xs,
+      }),
+      ...(ownerState.variant === 'solid' && {
+        boxShadow: theme.shadow.xs,
+      }),
       // variables for controlling child components
       '--_Textarea-paddingBlock':
         'max((var(--Textarea-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Textarea-decoratorChildHeight)) / 2, 0px)',