From 8ea20fa80e328e3cfdc0df07b461302defb2f35c Mon Sep 17 00:00:00 2001
From: Victor Zanivan Monteiro <victorzanivan@gmail.com>
Date: Thu, 31 Aug 2023 07:18:04 -0300
Subject: [PATCH] [joy-ui][design]  Stray design tweaks to components (#38476)

Signed-off-by: Victor Zanivan Monteiro <victorzanivan@gmail.com>
Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
---
 docs/data/joy/components/alert/AlertUsage.js   | 2 +-
 docs/data/joy/components/card/BasicCard.js     | 2 +-
 docs/data/joy/components/card/BasicCard.tsx    | 2 +-
 docs/data/joy/components/card/CardUsage.js     | 2 +-
 docs/data/joy/components/card/CardVariants.js  | 6 +++---
 docs/data/joy/components/card/CardVariants.tsx | 6 +++---
 docs/data/joy/components/card/DribbbleShot.js  | 4 ++--
 docs/data/joy/components/card/DribbbleShot.tsx | 4 ++--
 docs/data/joy/components/card/card.md          | 2 +-
 docs/pages/joy-ui/api/alert.json               | 2 +-
 docs/pages/joy-ui/api/card.json                | 2 +-
 packages/mui-joy/src/Alert/Alert.test.tsx      | 4 ++--
 packages/mui-joy/src/Alert/Alert.tsx           | 5 ++---
 packages/mui-joy/src/Alert/AlertProps.ts       | 2 +-
 packages/mui-joy/src/Card/Card.test.tsx        | 4 ++--
 packages/mui-joy/src/Card/Card.tsx             | 5 ++---
 packages/mui-joy/src/Card/CardProps.ts         | 2 +-
 packages/mui-joy/src/Input/Input.tsx           | 3 +++
 packages/mui-joy/src/Select/Select.tsx         | 3 +++
 packages/mui-joy/src/Textarea/Textarea.tsx     | 3 +++
 20 files changed, 36 insertions(+), 29 deletions(-)

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 (
-    <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>
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 (
-    <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>
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,
       }}
     >
-      <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>
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,
       }}
     >
-      <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>
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 (
     <Card
+      variant="plain"
       sx={{
         width: 300,
         bgcolor: 'initial',
-        boxShadow: 'none',
-        '--Card-padding': '0px',
+        p: 0,
       }}
     >
       <Box sx={{ position: 'relative' }}>
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 (
     <Card
+      variant="plain"
       sx={{
         width: 300,
         bgcolor: 'initial',
-        boxShadow: 'none',
-        '--Card-padding': '0px',
+        p: 0,
       }}
     >
       <Box sx={{ position: 'relative' }}>
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'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;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'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;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('<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} />);
 
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<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>;
     };
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('<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) => {
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<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;
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',