[joy-ui] Reduce height of some variants (#38527)

Co-authored-by: siriwatknp <[email protected]>
mui · Sep 7, 2023 · 7f81475 · 7f81475
1 parent 23724d1
commit 7f81475
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 83 deletions.
diff --git a/docs/data/joy/components/button/ButtonUsage.js b/docs/data/joy/components/button/ButtonUsage.js
@@ -36,7 +36,9 @@ export default function ButtonUsage() {
       ]}
       renderDemo={(props) => (
         <Box sx={{ display: 'flex', gap: 2 }}>
-          <Button {...props}>Hello world</Button>
+          <Button startDecorator={<FavoriteBorder />} {...props}>
+            Hello world
+          </Button>
           <IconButton {...props}>
             <FavoriteBorder />
           </IconButton>

diff --git a/docs/data/joy/components/button/IconButtonVariables.js b/docs/data/joy/components/button/IconButtonVariables.js
@@ -15,7 +15,7 @@ export default function IconButtonVariables() {
       data={[
         {
           var: '--IconButton-size',
-          defaultValue: '40px',
+          defaultValue: '36px',
         },
       ]}
       renderDemo={(sx) => (

diff --git a/docs/data/joy/main-features/automatic-adjustment/InputVariables.js b/docs/data/joy/main-features/automatic-adjustment/InputVariables.js
@@ -8,7 +8,7 @@ import FormLabel from '@mui/joy/FormLabel';
 
 export default function InputVariables() {
   const [radius, setRadius] = React.useState(16);
-  const [childHeight, setChildHeight] = React.useState(32);
+  const [childHeight, setChildHeight] = React.useState(28);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
       <Input
@@ -36,7 +36,7 @@ export default function InputVariables() {
           />
         </FormControl>
         <FormControl>
-          <FormLabel>--Input-childHeight</FormLabel>
+          <FormLabel>--Input-decoratorChildHeight</FormLabel>
           <Input
             size="sm"
             type="number"

diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -23,7 +23,7 @@ import { VariantColorProvider, getChildVariantAndColor } from '../styles/variant
 // slot components
 import { StyledIconButton } from '../IconButton/IconButton';
 // default render components
-import Chip, { chipClasses } from '../Chip';
+import Chip from '../Chip';
 import ChipDelete from '../ChipDelete';
 import {
   StyledInputRoot,
@@ -106,7 +106,12 @@ const AutocompleteRoot = styled(StyledInputRoot as unknown as 'div', {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: OwnerState }>(({ ownerState }) => ({
-  '--Autocomplete-wrapperGap': '3px',
+  ...(ownerState.size === 'sm' && {
+    '--Autocomplete-wrapperGap': '3px',
+  }),
+  ...(ownerState.size === 'md' && {
+    '--Autocomplete-wrapperGap': '3px',
+  }),
   ...(ownerState.size === 'lg' && {
     '--Autocomplete-wrapperGap': '4px',
   }),
@@ -136,24 +141,15 @@ const AutocompleteWrapper = styled('div', {
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
+  gap: 'var(--Autocomplete-wrapperGap)',
   [`&.${autocompleteClasses.multiple}`]: {
-    paddingBlockEnd: 'min(var(--_Input-paddingBlock), var(--Autocomplete-wrapperGap))',
-    // TODO: use [CSS :has](https://caniuse.com/?search=%3Ahas) later
-    ...(ownerState.startDecorator &&
-      Array.isArray(ownerState.value) &&
-      (ownerState.value as Array<unknown>).length > 0 && {
-        marginBlockStart: 'min(var(--_Input-paddingBlock) - var(--Autocomplete-wrapperGap), 0px)',
-        marginInlineStart: 'calc(-1 * var(--Autocomplete-wrapperGap))',
-        [`& .${autocompleteClasses.input}`]: {
-          marginInlineStart: 'max(var(--Autocomplete-wrapperGap), var(--Input-gap))',
-        },
-      }),
-  },
-  [`& .${chipClasses.root}`]: {
-    // TODO: use flexbox `gap` later.
-    minWidth: 0,
-    marginInlineStart: 'var(--Autocomplete-wrapperGap)',
-    marginBlockStart: 'var(--Autocomplete-wrapperGap)',
+    paddingBlock: 'var(--Autocomplete-wrapperGap)',
+    ...(!ownerState.startDecorator && {
+      paddingInlineStart: 'var(--Autocomplete-wrapperGap)',
+    }),
+    ...(!ownerState.endDecorator && {
+      paddingInlineEnd: 'var(--Autocomplete-wrapperGap)',
+    }),
   },
 }));
 
@@ -165,10 +161,7 @@ const AutocompleteInput = styled(StyledInputHtml as unknown as 'input', {
   minWidth: 30,
   minHeight: 'var(--Chip-minHeight)',
   ...(ownerState.multiple && {
-    marginBlockStart: 'var(--Autocomplete-wrapperGap)',
-    ...(!ownerState.startDecorator && {
-      marginInlineStart: 'var(--Input-paddingInline)',
-    }),
+    marginInlineStart: 'calc(var(--Autocomplete-wrapperGap) * 2.5)',
   }),
 }));
 

diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
@@ -113,10 +113,10 @@ export const getButtonStyles = ({
       }),
       ...(ownerState.size === 'md' && {
         '--Icon-fontSize': theme.vars.fontSize.xl,
-        '--CircularProgress-size': '24px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
-        '--CircularProgress-thickness': '3px',
+        '--CircularProgress-size': '20px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
+        '--CircularProgress-thickness': '2px',
         '--Button-gap': '0.5rem',
-        minHeight: 'var(--Button-minHeight, 2.5rem)', // use min-height instead of height to make the button resilient to its content
+        minHeight: 'var(--Button-minHeight, 2.25rem)', // use min-height instead of height to make the button resilient to its content
         fontSize: theme.vars.fontSize.sm,
         paddingBlock: '0.25rem', // the padding-block act as a minimum spacing between content and root element
         paddingInline: '1rem',
@@ -126,7 +126,7 @@ export const getButtonStyles = ({
         '--CircularProgress-size': '28px', // must be `px` unit, otherwise the CircularProgress is broken in Safari
         '--CircularProgress-thickness': '4px',
         '--Button-gap': '0.75rem',
-        minHeight: 'var(--Button-minHeight, 3rem)',
+        minHeight: 'var(--Button-minHeight, 2.75rem)',
         fontSize: theme.vars.fontSize.md,
         paddingBlock: '0.375rem',
         paddingInline: '1.5rem',

diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
@@ -59,27 +59,29 @@ const ChipRoot = styled('div', {
       '--Icon-color': 'currentColor',
       '--unstable_actionRadius': 'var(--_Chip-radius)', // to be used with Radio or Checkbox
       ...(ownerState.size === 'sm' && {
-        '--Chip-paddingInline': '0.5rem',
+        '--Chip-paddingInline': '0.375rem',
         '--Chip-decoratorChildHeight':
-          'calc(min(1.125rem, var(--_Chip-minHeight)) - 2 * var(--variant-borderWidth, 0px))',
+          'calc(var(--_Chip-minHeight) - 2 * var(--variant-borderWidth))',
         '--Icon-fontSize': theme.vars.fontSize.sm,
-        '--_Chip-minHeight': 'var(--Chip-minHeight, 1.5rem)',
-        gap: '0.25rem',
+        '--_Chip-minHeight': 'var(--Chip-minHeight, 1.25rem)', // 20px
+        gap: '3px',
       }),
       ...(ownerState.size === 'md' && {
+        '--Chip-paddingInline': '0.5rem',
+        '--Chip-decoratorChildHeight':
+          'calc(var(--_Chip-minHeight) - 0.25rem - 2 * var(--variant-borderWidth))',
+        '--Icon-fontSize': theme.vars.fontSize.md,
+        '--_Chip-minHeight': 'var(--Chip-minHeight, 1.5rem)', // 26px
+        gap: '0.25rem',
+      }),
+      ...(ownerState.size === 'lg' && {
         '--Chip-paddingInline': '0.75rem',
-        '--Chip-decoratorChildHeight': 'min(1.375rem, var(--_Chip-minHeight))',
+        '--Chip-decoratorChildHeight':
+          'calc(var(--_Chip-minHeight) - 0.375rem - 2 * var(--variant-borderWidth))',
         '--Icon-fontSize': theme.vars.fontSize.lg,
-        '--_Chip-minHeight': 'var(--Chip-minHeight, 2rem)',
+        '--_Chip-minHeight': 'var(--Chip-minHeight, 1.75rem)', // 28px
         gap: '0.375rem',
       }),
-      ...(ownerState.size === 'lg' && {
-        '--Chip-paddingInline': '1rem',
-        '--Chip-decoratorChildHeight': 'min(1.75rem, var(--_Chip-minHeight))',
-        '--Icon-fontSize': theme.vars.fontSize.xl,
-        '--_Chip-minHeight': 'var(--Chip-minHeight, 2.5rem)',
-        gap: '0.5rem',
-      }),
       '--_Chip-radius': 'var(--Chip-radius, 1.5rem)',
       '--_Chip-paddingBlock':
         'max((var(--_Chip-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Chip-decoratorChildHeight)) / 2, 0px)',
@@ -181,7 +183,8 @@ const ChipStartDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.startDecorator,
 })<{ ownerState: ChipOwnerState }>({
   '--Avatar-marginInlineStart': 'calc(var(--Chip-decoratorChildOffset) * -1)',
-  '--IconButton-margin': '0 0 0 calc(var(--Chip-decoratorChildOffset) * -1)',
+  '--IconButton-margin':
+    '0 calc(-1 * var(--Chip-paddingInline) / 3) 0 calc(var(--Chip-decoratorChildOffset) * -1)',
   '--Icon-margin': '0 0 0 calc(var(--Chip-paddingInline) / -4)',
   display: 'inherit',
   // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio
@@ -195,7 +198,8 @@ const ChipEndDecorator = styled('span', {
   slot: 'EndDecorator',
   overridesResolver: (props, styles) => styles.endDecorator,
 })<{ ownerState: ChipOwnerState }>({
-  '--IconButton-margin': '0 calc(var(--Chip-decoratorChildOffset) * -1) 0 0',
+  '--IconButton-margin':
+    '0 calc(var(--Chip-decoratorChildOffset) * -1) 0 calc(-1 * var(--Chip-paddingInline) / 3)',
   '--Icon-margin': '0 calc(var(--Chip-paddingInline) / -4) 0 0',
   display: 'inherit',
   // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio

diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
@@ -35,14 +35,18 @@ const ChipDeleteRoot = styled(StyledIconButton as unknown as 'button', {
   name: 'JoyChipDelete',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: ChipDeleteOwnerState }>({
+})<{ ownerState: ChipDeleteOwnerState }>(({ theme }) => ({
   '--IconButton-size': 'var(--Chip-deleteSize, 2rem)',
   '--Icon-fontSize': 'calc(var(--IconButton-size, 2rem) / 1.3)',
+  minWidth: 'var(--IconButton-size, 2rem)', // use min-width instead of height to make the button resilient to its content
+  minHeight: 'var(--IconButton-size, 2rem)', // use min-height instead of height to make the button resilient to its content
+  fontSize: theme.vars.fontSize.sm,
+  paddingInline: '2px', // add a gap, in case the content is long, e.g. multiple icons
   pointerEvents: 'visible', // force the ChipDelete to be hoverable because the decorator can have pointerEvents 'none'
   borderRadius: 'var(--Chip-deleteRadius, 50%)',
   zIndex: 1, // overflow above sibling button or anchor
   padding: 0, // reset user agent stylesheet
-});
+}));
 
 /**
  *
@@ -77,6 +81,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
   const { variant = variantProp, color: inheritedColor = colorProp } = useVariantColor(
     inProps.variant,
     inProps.color,
+    true,
   );
   const { getColor } = useColorInversion(variant);
   const color = getColor(inProps.color, inheritedColor);

diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -43,7 +43,7 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt
           ? 'currentColor'
           : theme.vars.palette.text.icon,
       ...(ownerState.instanceSize && {
-        '--IconButton-size': { sm: '2rem', md: '2.5rem', lg: '3rem' }[ownerState.instanceSize],
+        '--IconButton-size': { sm: '2rem', md: '2.25rem', lg: '2.75rem' }[ownerState.instanceSize],
       }),
       ...(ownerState.size === 'sm' && {
         '--Icon-fontSize': 'calc(var(--IconButton-size, 2rem) / 1.6)', // 1.25rem by default
@@ -55,20 +55,20 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt
         paddingInline: '2px', // add a gap, in case the content is long, e.g. multiple icons
       }),
       ...(ownerState.size === 'md' && {
-        '--Icon-fontSize': 'calc(var(--IconButton-size, 2.5rem) / 1.667)', // 1.5rem by default
-        '--CircularProgress-size': '24px',
-        '--CircularProgress-thickness': '3px',
-        minWidth: 'var(--IconButton-size, 2.5rem)',
-        minHeight: 'var(--IconButton-size, 2.5rem)',
+        '--Icon-fontSize': 'calc(var(--IconButton-size, 2.25rem) / 1.5)', // 1.5rem by default
+        '--CircularProgress-size': '20px',
+        '--CircularProgress-thickness': '2px',
+        minWidth: 'var(--IconButton-size, 2.25rem)',
+        minHeight: 'var(--IconButton-size, 2.25rem)',
         fontSize: theme.vars.fontSize.md,
         paddingInline: '0.25rem',
       }),
       ...(ownerState.size === 'lg' && {
-        '--Icon-fontSize': 'calc(var(--IconButton-size, 3rem) / 1.714)', // 1.75rem by default
+        '--Icon-fontSize': 'calc(var(--IconButton-size, 2.75rem) / 1.571)', // 1.75rem by default
         '--CircularProgress-size': '28px',
         '--CircularProgress-thickness': '4px',
-        minWidth: 'var(--IconButton-size, 3rem)',
-        minHeight: 'var(--IconButton-size, 3rem)',
+        minWidth: 'var(--IconButton-size, 2.75rem)',
+        minHeight: 'var(--IconButton-size, 2.75rem)',
         fontSize: theme.vars.fontSize.lg,
         paddingInline: '0.375rem',
       }),

diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
@@ -60,16 +60,16 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
           '--Icon-fontSize': theme.vars.fontSize.xl,
         }),
         ...(ownerState.size === 'md' && {
-          '--Input-minHeight': '2.5rem',
+          '--Input-minHeight': '2.25rem',
           '--Input-paddingInline': '0.75rem',
-          '--Input-decoratorChildHeight': 'min(2rem, var(--Input-minHeight))',
+          '--Input-decoratorChildHeight': 'min(1.75rem, var(--Input-minHeight))',
           '--Icon-fontSize': theme.vars.fontSize.xl2,
         }),
         ...(ownerState.size === 'lg' && {
-          '--Input-minHeight': '3rem',
+          '--Input-minHeight': '2.75rem',
           '--Input-paddingInline': '1rem',
           '--Input-gap': '0.75rem',
-          '--Input-decoratorChildHeight': 'min(2.375rem, var(--Input-minHeight))',
+          '--Input-decoratorChildHeight': 'min(2.25rem, var(--Input-minHeight))',
           '--Icon-fontSize': theme.vars.fontSize.xl2,
         }),
         // variables for controlling child components

diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
@@ -45,7 +45,7 @@ export const StyledList = styled('ul')<{ ownerState: ListOwnerState }>(({ theme,
       return {
         '--ListDivider-gap': '0.25rem',
         '--ListItem-minHeight': '2rem',
-        '--ListItem-paddingY': '0.25rem',
+        '--ListItem-paddingY': '3px',
         '--ListItem-paddingX': '0.5rem',
         '--ListItemDecorator-size': ownerState.orientation === 'horizontal' ? '1.5rem' : '2rem',
         '--Icon-fontSize': theme.vars.fontSize.lg,
@@ -54,8 +54,8 @@ export const StyledList = styled('ul')<{ ownerState: ListOwnerState }>(({ theme,
     if (size === 'md') {
       return {
         '--ListDivider-gap': '0.375rem',
-        '--ListItem-minHeight': '2.5rem',
-        '--ListItem-paddingY': '0.375rem',
+        '--ListItem-minHeight': '2.25rem',
+        '--ListItem-paddingY': '0.25rem',
         '--ListItem-paddingX': '0.75rem',
         '--ListItemDecorator-size': ownerState.orientation === 'horizontal' ? '1.75rem' : '2.5rem',
         '--Icon-fontSize': theme.vars.fontSize.xl,
@@ -64,8 +64,8 @@ export const StyledList = styled('ul')<{ ownerState: ListOwnerState }>(({ theme,
     if (size === 'lg') {
       return {
         '--ListDivider-gap': '0.5rem',
-        '--ListItem-minHeight': '3rem',
-        '--ListItem-paddingY': '0.5rem',
+        '--ListItem-minHeight': '2.75rem',
+        '--ListItem-paddingY': '0.375rem',
         '--ListItem-paddingX': '1rem',
         '--ListItemDecorator-size': ownerState.orientation === 'horizontal' ? '2.25rem' : '3rem',
         '--Icon-fontSize': theme.vars.fontSize.xl2,

diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
@@ -102,13 +102,13 @@ const SelectRoot = styled('div', {
         '--Icon-fontSize': theme.vars.fontSize.xl,
       }),
       ...(ownerState.size === 'md' && {
-        '--Select-minHeight': '2.5rem',
+        '--Select-minHeight': '2.25rem',
         '--Select-paddingInline': '0.75rem',
-        '--Select-decoratorChildHeight': 'min(2rem, var(--Select-minHeight))',
+        '--Select-decoratorChildHeight': 'min(1.75rem, var(--Select-minHeight))',
         '--Icon-fontSize': theme.vars.fontSize.xl2,
       }),
       ...(ownerState.size === 'lg' && {
-        '--Select-minHeight': '3rem',
+        '--Select-minHeight': '2.75rem',
         '--Select-paddingInline': '1rem',
         '--Select-decoratorChildHeight': 'min(2.375rem, var(--Select-minHeight))',
         '--Icon-fontSize': theme.vars.fontSize.xl2,

diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
@@ -65,23 +65,23 @@ const SwitchRoot = styled('div', {
     '--Switch-thumbShadow':
       ownerState.variant === 'soft' ? 'none' : '0 0 0 1px var(--Switch-trackBackground)', // create border-like if the thumb is bigger than the track
     ...(ownerState.size === 'sm' && {
-      '--Switch-trackWidth': '40px',
-      '--Switch-trackHeight': '20px',
-      '--Switch-thumbSize': '12px',
+      '--Switch-trackWidth': '32px',
+      '--Switch-trackHeight': '16px',
+      '--Switch-thumbSize': '8px',
       '--Switch-gap': '6px',
       fontSize: theme.vars.fontSize.sm,
     }),
     ...(ownerState.size === 'md' && {
-      '--Switch-trackWidth': '48px',
-      '--Switch-trackHeight': '24px',
-      '--Switch-thumbSize': '16px',
+      '--Switch-trackWidth': '40px',
+      '--Switch-trackHeight': '20px',
+      '--Switch-thumbSize': '12px',
       '--Switch-gap': '8px',
       fontSize: theme.vars.fontSize.md,
     }),
     ...(ownerState.size === 'lg' && {
-      '--Switch-trackWidth': '64px',
-      '--Switch-trackHeight': '32px',
-      '--Switch-thumbSize': '24px',
+      '--Switch-trackWidth': '48px',
+      '--Switch-trackHeight': '24px',
+      '--Switch-thumbSize': '16px',
       '--Switch-gap': '12px',
     }),
     '--unstable_paddingBlock': `max((var(--Switch-trackHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Switch-thumbSize)) / 2, 0px)`,

diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -58,16 +58,16 @@ const TextareaRoot = styled('div', {
           }),
       ...(ownerState.size === 'sm' && {
         '--Textarea-minHeight': '2rem',
-        '--Textarea-paddingBlock': 'calc(0.5rem - var(--variant-borderWidth, 0px))', // to match Input because <textarea> does not center the text at the middle like <input>
+        '--Textarea-paddingBlock': 'calc(0.375rem - 0.5px - var(--variant-borderWidth, 0px))', // to match Input because <textarea> does not center the text at the middle like <input>
         '--Textarea-paddingInline': '0.5rem',
         '--Textarea-decoratorChildHeight': 'min(1.5rem, var(--Textarea-minHeight))',
         '--Icon-fontSize': theme.vars.fontSize.xl,
       }),
       ...(ownerState.size === 'md' && {
-        '--Textarea-minHeight': '2.5rem',
-        '--Textarea-paddingBlock': 'calc(0.5rem - var(--variant-borderWidth, 0px))',
+        '--Textarea-minHeight': '2.25rem',
+        '--Textarea-paddingBlock': 'calc(0.375rem - var(--variant-borderWidth, 0px))',
         '--Textarea-paddingInline': '0.75rem',
-        '--Textarea-decoratorChildHeight': 'min(2rem, var(--Textarea-minHeight))',
+        '--Textarea-decoratorChildHeight': 'min(1.75rem, var(--Textarea-minHeight))',
         '--Icon-fontSize': theme.vars.fontSize.xl2,
       }),
       ...(ownerState.size === 'lg' && {

diff --git a/packages/mui-joy/src/styles/variantColorInheritance.tsx b/packages/mui-joy/src/styles/variantColorInheritance.tsx
@@ -35,13 +35,14 @@ export function getChildVariantAndColor(
 export function useVariantColor(
   instanceVariant: VariantProp | undefined,
   instanceColor: ColorPaletteProp | undefined,
+  alwaysInheritColor: boolean = false,
 ) {
   const value = React.useContext(VariantColorContext);
   const [variant, color] =
     typeof value === 'string' ? (value.split(':') as [VariantProp, ColorPaletteProp]) : [];
   const result = getChildVariantAndColor(variant || undefined, color || undefined);
   result.variant = instanceVariant || result.variant;
-  result.color = instanceColor || result.color;
+  result.color = instanceColor || (alwaysInheritColor ? color : result.color);
   return result;
 }