From 845aab61aa3dbfa0738404f8b262770cd9fb714c Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Thu, 7 Sep 2023 12:19:56 -0300 Subject: [PATCH] [joy-ui] Reduce height of some variants (#38527) Co-authored-by: siriwatknp --- .../data/joy/components/button/ButtonUsage.js | 4 +- .../components/button/IconButtonVariables.js | 2 +- .../automatic-adjustment/InputVariables.js | 4 +- .../mui-joy/src/Autocomplete/Autocomplete.tsx | 39 ++++++++----------- packages/mui-joy/src/Button/Button.tsx | 8 ++-- packages/mui-joy/src/Chip/Chip.tsx | 34 +++++++++------- .../mui-joy/src/ChipDelete/ChipDelete.tsx | 9 ++++- .../mui-joy/src/IconButton/IconButton.tsx | 18 ++++----- packages/mui-joy/src/Input/Input.tsx | 8 ++-- packages/mui-joy/src/List/List.tsx | 10 ++--- packages/mui-joy/src/Select/Select.tsx | 6 +-- packages/mui-joy/src/Switch/Switch.tsx | 18 ++++----- packages/mui-joy/src/Textarea/Textarea.tsx | 8 ++-- .../src/styles/variantColorInheritance.tsx | 3 +- 14 files changed, 88 insertions(+), 83 deletions(-) diff --git a/docs/data/joy/components/button/ButtonUsage.js b/docs/data/joy/components/button/ButtonUsage.js index d461f2eee03af2..bfd5ee04559c71 100644 --- 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) => ( - + diff --git a/docs/data/joy/components/button/IconButtonVariables.js b/docs/data/joy/components/button/IconButtonVariables.js index 3d1568ec452a6a..5d6e7a53e9e584 100644 --- 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 index bfc8d9cbc4d5c9..319855bb8a7818 100644 --- 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 ( - --Input-childHeight + --Input-decoratorChildHeight 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).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 index 98937099ec0141..89d5067fdb3d2a 100644 --- 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 index f35a558d540138..19793643c40d7c 100644 --- 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 index 72648ede7bb177..162e729b5e4b7c 100644 --- 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 index fe092f39d82baf..8a169ab2d456c1 100644 --- 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 index 43e8830d12d2e5..d925e827bf5496 100644 --- 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 index ecbf7d91597f67..3b544ece406d55 100644 --- 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 index d27104fec683f5..2b3f19a198941f 100644 --- 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 index 05e9999496f5e8..abc10f43080e6e 100644 --- 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 index 13cacbdd15eb93..9c858dbbdefce3 100644 --- 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