[Joy] Miscellaneous improvements (#35769)

mui · Jan 9, 2023 · bff4835 · bff4835
1 parent 612db95
commit bff4835
Show file tree

Hide file tree

Showing 15 changed files with 147 additions and 137 deletions.
diff --git a/docs/data/joy/components/aspect-ratio/BasicRatio.js b/docs/data/joy/components/aspect-ratio/BasicRatio.js
@@ -1,19 +1,13 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Sheet from '@mui/joy/Sheet';
 import Typography from '@mui/joy/Typography';
 
 export default function BasicRatio() {
   return (
-    <Sheet
-      variant="outlined"
-      sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
-    >
-      <AspectRatio>
-        <Typography level="h2" component="div">
-          16/9
-        </Typography>
-      </AspectRatio>
-    </Sheet>
+    <AspectRatio sx={{ width: 300 }}>
+      <Typography level="h2" component="div">
+        16/9
+      </Typography>
+    </AspectRatio>
   );
 }
diff --git a/docs/data/joy/components/aspect-ratio/BasicRatio.tsx b/docs/data/joy/components/aspect-ratio/BasicRatio.tsx
@@ -1,19 +1,13 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Sheet from '@mui/joy/Sheet';
 import Typography from '@mui/joy/Typography';
 
 export default function BasicRatio() {
   return (
-    <Sheet
-      variant="outlined"
-      sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
-    >
-      <AspectRatio>
-        <Typography level="h2" component="div">
-          16/9
-        </Typography>
-      </AspectRatio>
-    </Sheet>
+    <AspectRatio sx={{ width: 300 }}>
+      <Typography level="h2" component="div">
+        16/9
+      </Typography>
+    </AspectRatio>
   );
 }
diff --git a/docs/data/joy/components/aspect-ratio/BasicRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/BasicRatio.tsx.preview
@@ -1,10 +1,5 @@
-<Sheet
-  variant="outlined"
-  sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
->
-  <AspectRatio>
-    <Typography level="h2" component="div">
-      16/9
-    </Typography>
-  </AspectRatio>
-</Sheet>
+<AspectRatio sx={{ width: 300 }}>
+  <Typography level="h2" component="div">
+    16/9
+  </Typography>
+</AspectRatio>
diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.js b/docs/data/joy/components/aspect-ratio/CustomRatio.js
@@ -1,19 +1,21 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Sheet from '@mui/joy/Sheet';
 import Typography from '@mui/joy/Typography';
 
 export default function CustomRatio() {
   return (
-    <Sheet
+    <AspectRatio
       variant="outlined"
-      sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+      ratio="4/3"
+      sx={{
+        width: 300,
+        bgcolor: 'background.level2',
+        borderRadius: 'md',
+      }}
     >
-      <AspectRatio ratio="4/3">
-        <Typography level="h2" component="div">
-          4/3
-        </Typography>
-      </AspectRatio>
-    </Sheet>
+      <Typography level="h2" component="div">
+        4/3
+      </Typography>
+    </AspectRatio>
   );
 }
diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.tsx b/docs/data/joy/components/aspect-ratio/CustomRatio.tsx
@@ -1,19 +1,21 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Sheet from '@mui/joy/Sheet';
 import Typography from '@mui/joy/Typography';
 
 export default function CustomRatio() {
   return (
-    <Sheet
+    <AspectRatio
       variant="outlined"
-      sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+      ratio="4/3"
+      sx={{
+        width: 300,
+        bgcolor: 'background.level2',
+        borderRadius: 'md',
+      }}
     >
-      <AspectRatio ratio="4/3">
-        <Typography level="h2" component="div">
-          4/3
-        </Typography>
-      </AspectRatio>
-    </Sheet>
+      <Typography level="h2" component="div">
+        4/3
+      </Typography>
+    </AspectRatio>
   );
 }
diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview
@@ -1,10 +1,13 @@
-<Sheet
+<AspectRatio
   variant="outlined"
-  sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+  ratio="4/3"
+  sx={{
+    width: 300,
+    bgcolor: 'background.level2',
+    borderRadius: 'md',
+  }}
 >
-  <AspectRatio ratio="4/3">
-    <Typography level="h2" component="div">
-      4/3
-    </Typography>
-  </AspectRatio>
-</Sheet>
+  <Typography level="h2" component="div">
+    4/3
+  </Typography>
+</AspectRatio>
diff --git a/docs/data/joy/components/checkbox/CheckboxUsage.js b/docs/data/joy/components/checkbox/CheckboxUsage.js
@@ -10,13 +10,13 @@ export default function CheckboxUsage() {
         {
           propName: 'variant',
           knob: 'select',
-          defaultValue: 'soft',
+          defaultValue: 'outlined',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {
           propName: 'color',
           knob: 'color',
-          defaultValue: 'primary',
+          defaultValue: 'neutral',
         },
         {
           propName: 'size',

diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
@@ -46,7 +46,7 @@ export default function ExampleButtonCheckbox() {
             label={item}
             checked={value.includes(item)}
             color="neutral"
-            variant="plain"
+            variant={value.includes(item) ? 'outlined' : 'plain'}
             onChange={(event) => {
               if (event.target.checked) {
                 setValue((val) => [...val, item]);
@@ -57,11 +57,8 @@ export default function ExampleButtonCheckbox() {
             slotProps={{
               action: ({ checked }) => ({
                 sx: {
-                  bgcolor: checked ? 'background.surface' : 'transparent',
+                  bgcolor: checked ? 'background.level1' : 'transparent',
                   boxShadow: checked ? 'sm' : 'none',
-                  '&:hover': {
-                    bgcolor: checked ? 'background.surface' : 'transparent',
-                  },
                 },
               }),
             }}

diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -82,35 +82,41 @@ const CheckboxCheckbox = styled('span', {
   name: 'JoyCheckbox',
   slot: 'Checkbox',
   overridesResolver: (props, styles) => styles.checkbox,
-})<{ ownerState: CheckboxOwnerState }>(({ theme, ownerState }) => [
-  {
-    boxSizing: 'border-box',
-    borderRadius: theme.vars.radius.xs,
-    width: 'var(--Checkbox-size)',
-    height: 'var(--Checkbox-size)',
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexShrink: 0,
-    // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-    transition:
-      'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    ...(ownerState.disableIcon && {
-      display: 'contents',
-    }),
-  },
-  ...(!ownerState.disableIcon
-    ? [
-        theme.variants[ownerState.variant!]?.[ownerState.color!],
-        { '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
-        { '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
-        {
-          [`&.${checkboxClasses.disabled}`]:
-            theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
-        },
-      ]
-    : []),
-]);
+})<{ ownerState: CheckboxOwnerState }>(({ theme, ownerState }) => {
+  const variantStyle = theme.variants[`${ownerState.variant!}`]?.[ownerState.color!];
+  return [
+    {
+      boxSizing: 'border-box',
+      borderRadius: theme.vars.radius.xs,
+      width: 'var(--Checkbox-size)',
+      height: 'var(--Checkbox-size)',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 0,
+      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
+      transition:
+        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      ...(ownerState.disableIcon && {
+        display: 'contents',
+      }),
+    },
+    ...(!ownerState.disableIcon
+      ? [
+          {
+            ...variantStyle,
+            backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
+          },
+          { '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
+          { '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
+          {
+            [`&.${checkboxClasses.disabled}`]:
+              theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
+          },
+        ]
+      : []),
+  ];
+});
 
 const CheckboxAction = styled('span', {
   name: 'JoyCheckbox',
@@ -122,10 +128,10 @@ const CheckboxAction = styled('span', {
       ownerState.overlay ? 'var(--internal-action-radius, inherit)' : 'inherit'
     })`,
     position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
+    top: 'calc(-1 * var(--variant-borderWidth, 0px))', // clickable on the border and focus outline does not move when checked/unchecked
+    left: 'calc(-1 * var(--variant-borderWidth, 0px))',
+    bottom: 'calc(-1 * var(--variant-borderWidth, 0px))',
+    right: 'calc(-1 * var(--variant-borderWidth, 0px))',
     zIndex: 1, // The action element usually cover the area of nearest positioned parent
     // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
     transition:

diff --git a/packages/mui-joy/src/Link/Link.spec.tsx b/packages/mui-joy/src/Link/Link.spec.tsx
@@ -20,6 +20,7 @@ import { expectType } from '@mui/types';
 <Link color="neutral" />;
 
 <Link textColor="neutral.500" />;
+<Link textColor="#fff" />; // should support plain string
 
 // `level`
 <Link level="h2" />;

diff --git a/packages/mui-joy/src/Link/LinkProps.ts b/packages/mui-joy/src/Link/LinkProps.ts
@@ -7,6 +7,7 @@ import {
   ApplyColorInversion,
   TypographySystem,
   VariantProp,
+  TextColor,
 } from '../styles/types';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
@@ -61,7 +62,7 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
       /**
        * The system color.
        */
-      textColor?: SystemProps['color'];
+      textColor?: TextColor;
       /**
        * Element placed before the children.
        */

diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
@@ -102,36 +102,42 @@ const RadioRadio = styled('span', {
   name: 'JoyRadio',
   slot: 'Radio',
   overridesResolver: (props, styles) => styles.radio,
-})<{ ownerState: RadioOwnerState }>(({ ownerState, theme }) => [
-  {
-    margin: 0,
-    boxSizing: 'border-box',
-    width: 'var(--Radio-size)',
-    height: 'var(--Radio-size)',
-    borderRadius: 'var(--Radio-size)',
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexShrink: 0,
-    // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-    transition:
-      'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    ...(ownerState.disableIcon && {
-      display: 'contents',
-    }),
-  },
-  ...(!ownerState.disableIcon
-    ? [
-        theme.variants[ownerState.variant!]?.[ownerState.color!],
-        { '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
-        { '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
-        {
-          [`&.${radioClasses.disabled}`]:
-            theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
-        },
-      ]
-    : []),
-]);
+})<{ ownerState: RadioOwnerState }>(({ ownerState, theme }) => {
+  const variantStyle = theme.variants[`${ownerState.variant!}`]?.[ownerState.color!];
+  return [
+    {
+      margin: 0,
+      boxSizing: 'border-box',
+      width: 'var(--Radio-size)',
+      height: 'var(--Radio-size)',
+      borderRadius: 'var(--Radio-size)',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 0,
+      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
+      transition:
+        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      ...(ownerState.disableIcon && {
+        display: 'contents',
+      }),
+    },
+    ...(!ownerState.disableIcon
+      ? [
+          {
+            ...variantStyle,
+            backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
+          },
+          { '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
+          { '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
+          {
+            [`&.${radioClasses.disabled}`]:
+              theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
+          },
+        ]
+      : []),
+  ];
+});
 
 const RadioAction = styled('span', {
   name: 'JoyRadio',
@@ -144,10 +150,10 @@ const RadioAction = styled('span', {
       // Automatic radius adjustment when composing with ListItem or Sheet
       ownerState.overlay ? 'var(--internal-action-radius, inherit)' : 'inherit'
     })`,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+    top: 'calc(-1 * var(--variant-borderWidth, 0px))', // clickable on the border and focus outline does not move when checked/unchecked
+    left: 'calc(-1 * var(--variant-borderWidth, 0px))',
+    bottom: 'calc(-1 * var(--variant-borderWidth, 0px))',
+    right: 'calc(-1 * var(--variant-borderWidth, 0px))',
     zIndex: 1, // The action element usually cover the area of nearest positioned parent
     // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
     transition:

diff --git a/packages/mui-joy/src/Typography/Typography.spec.tsx b/packages/mui-joy/src/Typography/Typography.spec.tsx
@@ -26,6 +26,7 @@ function Link(props: JSX.IntrinsicElements['a']) {
 <Typography color="warning" />;
 
 <Typography textColor="neutral.500" />;
+<Typography textColor="#fff" />; // should support plain string
 
 <Typography
   slots={{