[joy-ui][design] Stray design tweaks to components (#38476)

Signed-off-by: Victor Zanivan Monteiro <[email protected]> Co-authored-by: Siriwat K <[email protected]>
mui · Aug 31, 2023 · 8d4728d · 8d4728d
1 parent 91b8d0d
commit 8d4728d
Show file tree

Hide file tree

Showing 20 changed files with 36 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',