From de412265058c0664565a739173d78595130bc128 Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 17 Aug 2023 16:12:44 -0300 Subject: [PATCH 01/17] Change button height --- packages/mui-joy/src/Button/Button.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 4c34ea7161aea3..fbd61f99e54013 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', From c43c554c68e9ad8dd6683c99503ef7f98c4c0f9a Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 17 Aug 2023 16:15:55 -0300 Subject: [PATCH 02/17] Changed IconButton height --- packages/mui-joy/src/IconButton/IconButton.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index 02964cb2752023..89875b33463d34 100644 --- a/packages/mui-joy/src/IconButton/IconButton.tsx +++ b/packages/mui-joy/src/IconButton/IconButton.tsx @@ -56,10 +56,10 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt }), ...(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)', + '--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', }), From 9f8dbae81d0cdec2d7dff4674e7a254c202ff604 Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 17 Aug 2023 16:19:21 -0300 Subject: [PATCH 03/17] Changed Input height --- packages/mui-joy/src/Input/Input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx index 3904b5470d34cf..6b10641c2aeccb 100644 --- a/packages/mui-joy/src/Input/Input.tsx +++ b/packages/mui-joy/src/Input/Input.tsx @@ -60,7 +60,7 @@ 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))', '--Icon-fontSize': theme.vars.fontSize.xl2, From 9dded9b6dc6d2dad0f3b3672360b23f98549d787 Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 17 Aug 2023 16:27:20 -0300 Subject: [PATCH 04/17] Changed select height --- packages/mui-joy/src/Select/Select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index e38553b16c22fa..8342bdb8c08873 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -114,7 +114,7 @@ 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))', '--Icon-fontSize': theme.vars.fontSize.xl2, From f3aab18c43b4a06f01c3fbf4ba705eb058d7538f Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 17 Aug 2023 16:38:01 -0300 Subject: [PATCH 05/17] Changed Switch sizes --- packages/mui-joy/src/Switch/Switch.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) 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)`, From f99ea85aad221940f416fddc109d23dc7fba352d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Aug 2023 14:42:07 +0700 Subject: [PATCH 06/17] fix IconButton md size --- packages/mui-joy/src/IconButton/IconButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index 89875b33463d34..014f0f068c5db3 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: '3rem' }[ownerState.instanceSize], }), ...(ownerState.size === 'sm' && { '--Icon-fontSize': 'calc(var(--IconButton-size, 2rem) / 1.6)', // 1.25rem by default From d840b485caab3b6c5161776cdd7b3249823fb920 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Aug 2023 14:51:36 +0700 Subject: [PATCH 07/17] add startDecorator to ButtonUsage --- docs/data/joy/components/button/ButtonUsage.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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) => ( - + From 787cb1565210f16e70671d7543aa5eaaba82bf66 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Aug 2023 14:51:51 +0700 Subject: [PATCH 08/17] fix IconButton icon size --- packages/mui-joy/src/IconButton/IconButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index 014f0f068c5db3..74985a0f1e8d21 100644 --- a/packages/mui-joy/src/IconButton/IconButton.tsx +++ b/packages/mui-joy/src/IconButton/IconButton.tsx @@ -55,7 +55,7 @@ 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 + '--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)', From 755b57210617d0f9896ff23ae012a8cc52eb2d7f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Aug 2023 14:52:59 +0700 Subject: [PATCH 09/17] fix IconVariables default size --- docs/data/joy/components/button/IconButtonVariables.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) => ( From 912b87254c9b0f2c6dbe4b921eb80c7a49136623 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Aug 2023 15:24:26 +0700 Subject: [PATCH 10/17] fix Autocomplete multiple styles --- .../mui-joy/src/Autocomplete/Autocomplete.tsx | 42 +++++++++---------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx index 3407c15bf1c337..1018db8083d74f 100644 --- 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,9 +106,17 @@ 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', + '--Chip-minHeight': '1.5rem', + }), + ...(ownerState.size === 'md' && { + '--Autocomplete-wrapperGap': '3px', + '--Chip-minHeight': '1.75rem', + }), ...(ownerState.size === 'lg' && { '--Autocomplete-wrapperGap': '4px', + '--Chip-minHeight': '2.5rem', }), /* Avoid double tap issue on iOS */ '@media (pointer: fine)': { @@ -136,24 +144,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 +164,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)', }), })); From 77c6093d1cbb92f553118a72e0db11e35a396512 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Aug 2023 15:36:10 +0700 Subject: [PATCH 11/17] fix Input, Select, and Textarea --- .../main-features/automatic-adjustment/InputVariables.js | 4 ++-- packages/mui-joy/src/Input/Input.tsx | 2 +- packages/mui-joy/src/Select/Select.tsx | 2 +- packages/mui-joy/src/Textarea/Textarea.tsx | 8 ++++---- 4 files changed, 8 insertions(+), 8 deletions(-) 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 ( ...(ownerState.size === 'md' && { '--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' && { diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index 8342bdb8c08873..6a5b84a3dd3ba6 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -116,7 +116,7 @@ const SelectRoot = styled('div', { ...(ownerState.size === 'md' && { '--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' && { diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx index 3a2332e160f697..b2cb12aeb3ec04 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