From 29c8b5a9644d98a11a30b526a309288fbf820311 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 13 Jun 2024 16:34:13 +0200 Subject: [PATCH 01/15] fix checkbox and radio size --- CHANGELOG.md | 4 +++- .../src/theme/sections/components/forms.js | 21 ++++++++++++++++--- .../stories/atoms/Checkbox.stories.js | 11 ++++++---- .../storybook/stories/atoms/Radio.stories.js | 13 +++++++++--- 4 files changed, 38 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 53e46a1ee..92f3747db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,11 +2,13 @@ ## Not released +- Fix LegendProportion radius scale [#827](https://github.com/CartoDB/carto-react/pull/877) + ## 3.0.0 ### 3.0.0-alpha.11 (2024-06-12) -- Add creatable functionality to Autocomplete & MenuItem fixed [#828](https://github.com/CartoDB/carto-react/pull/828) +- Add creatable functionality to Autocomplete & MenuItem fixed [#873](https://github.com/CartoDB/carto-react/pull/873) - Table component: Added selected row and with checkbox example in Storybook [#876](https://github.com/CartoDB/carto-react/pull/876) ### 3.0.0-alpha.10 (2024-06-03) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 00388f18d..87d3cc73c 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -1,8 +1,11 @@ import React from 'react'; -import { ICON_SIZE_MEDIUM, ICON_SIZE_LARGE } from '../../themeConstants'; +import { ICON_SIZE_MEDIUM } from '../../themeConstants'; import ArrowDropIcon from '../../../assets/icons/ArrowDropIcon'; import CancelIcon from '@mui/icons-material/Cancel'; +const controlSizeS = 2.25; +const controlSizeM = 3; + const switchSizeS = 2; const switchSizeM = 3; const switchSizeL = 4; @@ -28,10 +31,16 @@ const checkboxRadioOverrides = { }, '& .MuiSvgIcon-root': { - fontSize: ICON_SIZE_LARGE, + fontSize: theme.spacing(controlSizeM), + width: theme.spacing(controlSizeM), + minWidth: theme.spacing(controlSizeM), + height: theme.spacing(controlSizeM), ...(ownerState.size === 'small' && { - fontSize: ICON_SIZE_MEDIUM + fontSize: theme.spacing(controlSizeS), + width: theme.spacing(controlSizeS), + minWidth: theme.spacing(controlSizeS), + height: theme.spacing(controlSizeS) }) } }) @@ -75,6 +84,9 @@ const LabelOverrides = { export const formsOverrides = { // Checkbox MuiCheckbox: { + defaultProps: { + size: 'small' + }, styleOverrides: { ...checkboxRadioOverrides } @@ -82,6 +94,9 @@ export const formsOverrides = { // Radio Button MuiRadio: { + defaultProps: { + size: 'small' + }, styleOverrides: { ...checkboxRadioOverrides } diff --git a/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js index 3161d7616..1609e8ef4 100644 --- a/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js @@ -143,17 +143,21 @@ const SizeTemplate = ({ ...args }) => { } + control={} label='Medium Active' {...args} /> - } label='Medium Inactive' {...args} /> + } + label='Medium Inactive' + {...args} + /> } + control={} label='Medium Indeterminate' {...args} /> @@ -180,7 +184,6 @@ Playground.args = { label: 'Text' }; export const States = StatesTemplate.bind({}); States.argTypes = disabledStatesArgTypes; -States.args = { size: 'medium' }; export const Sizes = SizeTemplate.bind({}); Sizes.argTypes = disabledSizesArgTypes; diff --git a/packages/react-ui/storybook/stories/atoms/Radio.stories.js b/packages/react-ui/storybook/stories/atoms/Radio.stories.js index c90639f72..ab4f6a052 100644 --- a/packages/react-ui/storybook/stories/atoms/Radio.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Radio.stories.js @@ -102,10 +102,18 @@ const SizeTemplate = ({ ...args }) => { - } label='Medium Active' {...args} /> + } + label='Medium Active' + {...args} + /> - } label='Medium Inactive' {...args} /> + } + label='Medium Inactive' + {...args} + /> @@ -127,7 +135,6 @@ Playground.args = { label: 'Text' }; export const States = StatesTemplate.bind({}); States.argTypes = disabledStatesArgTypes; -States.args = { size: 'medium' }; export const Sizes = SizeTemplate.bind({}); Sizes.argTypes = disabledSizesArgTypes; From b34cd506c0b7ccec4c948bbb849a6a05b34c8323 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 13 Jun 2024 17:16:37 +0200 Subject: [PATCH 02/15] new xsmall size for buttons --- packages/react-ui/src/theme/carto-theme.d.ts | 3 +++ .../src/theme/sections/components/buttons.js | 23 +++++++++++++++++-- .../stories/atoms/IconButton.stories.js | 2 +- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index ed5c02367..7ca5e0ac1 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -132,6 +132,9 @@ declare module '@mui/material/Button' { interface ButtonPropsColorOverrides { default: true; } + interface ButtonPropsSizeOverrides { + xsmall: true; + } } // Update the FAB's color prop options diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 06c484452..660677fda 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -1,6 +1,7 @@ import { getSpacing } from '../../themeUtils'; -import { ICON_SIZE_MEDIUM, ICON_SIZE_LARGE } from '../../themeConstants'; +import { ICON_SIZE_MEDIUM, ICON_SIZE_LARGE, ICON_SIZE_SMALL } from '../../themeConstants'; +const sizeXsmall = getSpacing(2); const sizeSmall = getSpacing(3); const sizeMedium = getSpacing(4); const sizeLarge = getSpacing(6); @@ -326,7 +327,25 @@ export const buttonsOverrides = { width: sizeLarge, height: sizeLarge }) - } + }, + + variants: [ + // Custom props and its variants + { + props: { size: 'xsmall' }, + style: ({ theme }) => ({ + width: sizeXsmall, + height: sizeXsmall, + + '& .MuiSvgIcon-root, & svg': { + fontSize: ICON_SIZE_SMALL, + width: ICON_SIZE_SMALL, + minWidth: ICON_SIZE_SMALL, + height: ICON_SIZE_SMALL + } + }) + } + ] }, // MuiToggleButton diff --git a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js index 8013fe1d7..abfc53545 100644 --- a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js +++ b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js @@ -17,7 +17,7 @@ const options = { size: { control: { type: 'select', - options: ['small', 'medium', 'large'] + options: ['xsmall', 'small', 'medium', 'large'] } }, disabled: { From f97a1ba1cd6c54fb7a9252a7e55d47930600c853 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 13 Jun 2024 18:00:18 +0200 Subject: [PATCH 03/15] fix theme module --- packages/react-ui/src/theme/carto-theme.d.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index 7ca5e0ac1..cbf6b60aa 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -132,7 +132,11 @@ declare module '@mui/material/Button' { interface ButtonPropsColorOverrides { default: true; } - interface ButtonPropsSizeOverrides { +} + +// Update the IconButtons's size prop options +declare module '@mui/material/IconButton' { + interface IconButtonPropsSizeOverrides { xsmall: true; } } From 2f888aabdae4f22c5da6daeeebec8eb8719ffc15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 14 Jun 2024 10:23:00 +0200 Subject: [PATCH 04/15] changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 92f3747db..94991f17e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,8 @@ ## Not released -- Fix LegendProportion radius scale [#827](https://github.com/CartoDB/carto-react/pull/877) +- Forms fixes & improvements [#881](https://github.com/CartoDB/carto-react/pull/881) +- Fix LegendProportion radius scale [#877](https://github.com/CartoDB/carto-react/pull/877) ## 3.0.0 From 2246bee5287be7693b1511b8157c29c1de7ee987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 18 Jun 2024 18:05:28 +0200 Subject: [PATCH 05/15] more flexibility to Autocomplete creatable --- packages/react-ui/src/components/molecules/Autocomplete.js | 5 ++++- packages/react-ui/src/components/molecules/MenuItem.js | 6 ++++++ .../storybook/stories/molecules/Autocomplete.stories.js | 3 ++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/components/molecules/Autocomplete.js b/packages/react-ui/src/components/molecules/Autocomplete.js index f1a6ed081..69fe2af1a 100644 --- a/packages/react-ui/src/components/molecules/Autocomplete.js +++ b/packages/react-ui/src/components/molecules/Autocomplete.js @@ -67,12 +67,15 @@ const Autocomplete = forwardRef( const creatableRenderOption = (props, option) => ( {option.inputValue && } - + {option.inputValue && ( )} + {option.icon && !option.inputValue && ( + {option.icon} + )} {option.title} diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index d5f61dba5..023eb1e4a 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -13,6 +13,12 @@ const StyledMenuItem = styled(MuiMenuItem, { fontWeight: 500, color: theme.palette.text.secondary, + '.MuiListItemText-root .MuiTypography-root': { + ...theme.typography.caption, + fontWeight: 500, + color: theme.palette.text.secondary + }, + '&.MuiMenuItem-root': { minHeight: theme.spacing(3), paddingTop: 0, diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index 35a21172d..f5d1cbe66 100644 --- a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -121,9 +121,10 @@ const options = { export default options; const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994, icon: }, + { title: 'The Shawshank Redemption', year: 1994, icon: , fixed: true }, { title: 'The Godfather', year: 1972, icon: }, { title: 'The Godfather: Part II', year: 1974, icon: }, + { title: 'Subtitle', subtitle: true }, { title: 'The Dark Knight', year: 2008, icon: }, { title: '12 Angry Men', year: 1957, icon: }, { title: "Schindler's List", year: 1993, icon: }, From af036e845938f364f7d078b4ec6f592a3201edcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 19 Jun 2024 17:13:57 +0200 Subject: [PATCH 06/15] more flexibility to Autocomplete creatable --- .../components/molecules/Autocomplete.d.ts | 1 + .../src/components/molecules/Autocomplete.js | 41 ++- .../src/components/molecules/MenuItem.js | 2 +- .../stories/molecules/Autocomplete.stories.js | 244 ++++++++++++++++-- 4 files changed, 252 insertions(+), 36 deletions(-) diff --git a/packages/react-ui/src/components/molecules/Autocomplete.d.ts b/packages/react-ui/src/components/molecules/Autocomplete.d.ts index 2989adb7c..c80553103 100644 --- a/packages/react-ui/src/components/molecules/Autocomplete.d.ts +++ b/packages/react-ui/src/components/molecules/Autocomplete.d.ts @@ -11,6 +11,7 @@ export type AutocompleteProps< > = MuiAutocompleteProps & { creatable?: boolean; newItemTitle?: React.ReactNode | string; + newItemIcon?: React.ReactNode; }; declare const Autocomplete: < diff --git a/packages/react-ui/src/components/molecules/Autocomplete.js b/packages/react-ui/src/components/molecules/Autocomplete.js index 69fe2af1a..1281b2445 100644 --- a/packages/react-ui/src/components/molecules/Autocomplete.js +++ b/packages/react-ui/src/components/molecules/Autocomplete.js @@ -11,6 +11,7 @@ import { import { AddCircleOutlineOutlined } from '@mui/icons-material'; import MenuItem from './MenuItem'; import useImperativeIntl from '../../hooks/useImperativeIntl'; +import Typography from '../atoms/Typography'; const filter = createFilterOptions(); @@ -18,7 +19,8 @@ const Autocomplete = forwardRef( ( { creatable, - newItemTitle, + newItemTitle = 'c4r.form.add', + newItemIcon, freeSolo, renderOption, forcePopupIcon, @@ -33,7 +35,7 @@ const Autocomplete = forwardRef( const intl = useIntl(); const intlConfig = useImperativeIntl(intl); - const creatableOptions = (options, params) => { + const creatableFilterOptions = (options, params) => { const filtered = filter(options, params); const { inputValue } = params; @@ -42,9 +44,7 @@ const Autocomplete = forwardRef( if (inputValue.length > 1 && inputValue !== '' && !isExisting) { filtered.push({ inputValue, - title: - newItemTitle || - `${intlConfig.formatMessage({ id: 'c4r.form.add' })} "${inputValue}"` + title: `${intlConfig.formatMessage({ id: newItemTitle })} "${inputValue}"` }); } @@ -67,16 +67,28 @@ const Autocomplete = forwardRef( const creatableRenderOption = (props, option) => ( {option.inputValue && } - + {option.inputValue && ( - - - + {newItemIcon || } )} - {option.icon && !option.inputValue && ( - {option.icon} + {option.startAdornment && !option.inputValue && ( + {option.startAdornment} )} - {option.title} + + {option.alternativeTitle || option.title} + {option.secondaryText && ( + + {option.secondaryText} + + )} + + {option.endAdornment} ); @@ -84,7 +96,7 @@ const Autocomplete = forwardRef( return ( , fixed: true }, - { title: 'The Godfather', year: 1972, icon: }, - { title: 'The Godfather: Part II', year: 1974, icon: }, + { + title: 'The Shawshank Redemption', + year: 1994, + startAdornment: , + fixed: true + }, + { + title: 'Extended item', + secondaryText: 'Secondary text', + year: 1972, + startAdornment: , + extended: true + }, + { + title: 'The Godfather: Part II', + year: 1974, + startAdornment: + }, + { + title: 'The Dark Knight', + alternativeTitle: 'Movie: The Dark Knight', + year: 2008, + startAdornment: + }, + { + title: '12 Angry Men', + year: 1957, + startAdornment: , + iconColor: 'default' + }, + { + title: "Schindler's List", + year: 1993, + startAdornment: , + endAdornment: + }, { title: 'Subtitle', subtitle: true }, - { title: 'The Dark Knight', year: 2008, icon: }, - { title: '12 Angry Men', year: 1957, icon: }, - { title: "Schindler's List", year: 1993, icon: }, - { title: 'Pulp Fiction', year: 1994, icon: }, + { title: 'Pulp Fiction', year: 1994, startAdornment: }, { title: 'The Lord of the Rings: The Return of the King', year: 2003, - icon: + startAdornment: + }, + { + title: 'The Good, the Bad and the Ugly', + year: 1966, + startAdornment: }, - { title: 'The Good, the Bad and the Ugly', year: 1966, icon: }, - { title: 'Fight Club', year: 1999, icon: }, + { title: 'Fight Club', year: 1999, startAdornment: }, { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001, - icon: + startAdornment: }, { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980, - icon: + startAdornment: }, - { title: 'Forrest Gump', year: 1994, icon: }, - { title: 'Inception', year: 2010, icon: }, + { title: 'Forrest Gump', year: 1994, startAdornment: }, + { title: 'Inception', year: 2010, startAdornment: }, { title: 'The Lord of the Rings: The Two Towers', year: 2002, - icon: + startAdornment: } ]; @@ -911,7 +946,9 @@ const RenderOptionTemplate = ({ renderInput={(params) => { if (selectedOption) { params.InputProps.startAdornment = ( - {selectedOption.icon} + + {selectedOption.startAdornment} + ); } return ( @@ -930,9 +967,22 @@ const RenderOptionTemplate = ({ }} size={size} renderOption={(props, option) => ( - - {option.icon} - {option.title} + + {option.startAdornment} + + {option.title} + + {option.secondaryText} + + + {option.endAdornment} )} /> @@ -956,7 +1006,7 @@ const CreatableTemplate = ({ if (newOption.inputValue) { const newFilm = { title: newOption.inputValue, - icon: + startAdornment: }; setCreatableTop100Films((prev) => [...prev, newFilm]); } @@ -968,7 +1018,6 @@ const CreatableTemplate = ({ {...args} creatable options={creatableTop100Films} - getOptionLabel={(option) => option.title} onChange={(event, newValue) => { if (newValue && newValue.inputValue) { handleAddOption(newValue); @@ -993,6 +1042,146 @@ const CreatableTemplate = ({ ); }; +const CreatableWithPrefixAndSuffixTemplate = ({ + label, + variant, + placeholder, + helperText, + error, + size, + required, + ...args +}) => { + const [creatableTop100Films, setCreatableTop100Films] = useState(top100Films); + const [selectedOption, setSelectedOption] = useState(null); + + const handleAddOption = (newOption) => { + if (newOption.inputValue) { + const newFilm = { + title: newOption.inputValue, + startAdornment: + }; + console.log('newFilm', newFilm); + setCreatableTop100Films((prev) => [...prev, newFilm]); + } + }; + + return ( + + { + if (newValue && newValue.inputValue) { + handleAddOption(newValue); + } + setSelectedOption(newValue); + console.log('onChange newValue', newValue); + }} + renderInput={(params) => { + if (selectedOption) { + params.InputProps.startAdornment = ( + + {selectedOption.startAdornment} + + ); + params.InputProps.endAdornment = ( + <> + + {selectedOption.endAdornment} + + + {params.InputProps.endAdornment} + + + ); + } + return ( + + ); + }} + size={size} + /> + + ); +}; + +const CreatableMultipleWithPrefixTemplate = ({ + label, + variant, + placeholder, + helperText, + error, + size, + required, + ...args +}) => { + const [creatableTop100Films, setCreatableTop100Films] = useState(top100Films); + const [selectedOption, setSelectedOption] = useState(null); + + const handleAddOption = (newOption) => { + if (newOption.inputValue) { + const newFilm = { + title: newOption.inputValue, + startAdornment: + }; + setCreatableTop100Films((prev) => [...prev, newFilm]); + } + }; + + return ( + + option.title} + onChange={(event, newValue) => { + if (newValue && newValue.inputValue) { + handleAddOption(newValue); + } + setSelectedOption(newValue); + }} + renderInput={(params) => { + if (selectedOption) { + params.InputProps.startAdornment = ( + + {selectedOption.startAdornment} + + ); + } + return ( + + ); + }} + size={size} + /> + + ); +}; + const FreeSoloTemplate = ({ label, variant, @@ -1123,5 +1312,18 @@ CustomRenderOption.args = { ...commonArgs }; export const Creatable = CreatableTemplate.bind({}); Creatable.args = { ...commonArgs }; +export const CreatableCustomNewOption = CreatableTemplate.bind({}); +CreatableCustomNewOption.args = { + ...commonArgs, + newItemTitle: 'c4r.widgets.category.apply', + newItemIcon: +}; + +export const CreatableWithPrefixAndSuffix = CreatableWithPrefixAndSuffixTemplate.bind({}); +CreatableWithPrefixAndSuffix.args = { ...commonArgs }; + +export const CreatableMultipleWithPrefix = CreatableMultipleWithPrefixTemplate.bind({}); +CreatableMultipleWithPrefix.args = { ...commonArgs }; + export const FreeSolo = FreeSoloTemplate.bind({}); FreeSolo.args = { ...commonArgs }; From 6d489e918c3ec27e17b14f3b16b00fbf25c44e92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 19 Jun 2024 17:39:54 +0200 Subject: [PATCH 07/15] more flexibility to Autocomplete creatable --- .../src/components/molecules/Autocomplete.js | 57 +++++++++++-------- .../stories/molecules/Autocomplete.stories.js | 15 ++++- 2 files changed, 45 insertions(+), 27 deletions(-) diff --git a/packages/react-ui/src/components/molecules/Autocomplete.js b/packages/react-ui/src/components/molecules/Autocomplete.js index 1281b2445..7d44ad95e 100644 --- a/packages/react-ui/src/components/molecules/Autocomplete.js +++ b/packages/react-ui/src/components/molecules/Autocomplete.js @@ -66,30 +66,39 @@ const Autocomplete = forwardRef( const creatableRenderOption = (props, option) => ( - {option.inputValue && } - - {option.inputValue && ( - {newItemIcon || } - )} - {option.startAdornment && !option.inputValue && ( - {option.startAdornment} - )} - - {option.alternativeTitle || option.title} - {option.secondaryText && ( - - {option.secondaryText} - - )} - - {option.endAdornment} - + {option.divider ? ( + + ) : ( + <> + {option.inputValue && } + + {option.inputValue && ( + {newItemIcon || } + )} + {option.startAdornment && !option.inputValue && ( + {option.startAdornment} + )} + + {option.alternativeTitle || option.title} + {option.secondaryText && ( + + {option.secondaryText} + + )} + + {option.endAdornment} + + + )} ); diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index a32909fc9..aed70c47b 100644 --- a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -138,7 +138,8 @@ const top100Films = [ { title: 'The Godfather: Part II', year: 1974, - startAdornment: + startAdornment: , + dense: true }, { title: 'The Dark Knight', @@ -159,7 +160,12 @@ const top100Films = [ endAdornment: }, { title: 'Subtitle', subtitle: true }, - { title: 'Pulp Fiction', year: 1994, startAdornment: }, + { + title: 'Pulp Fiction', + year: 1994, + startAdornment: , + disabled: true + }, { title: 'The Lord of the Rings: The Return of the King', year: 2003, @@ -183,10 +189,12 @@ const top100Films = [ }, { title: 'Forrest Gump', year: 1994, startAdornment: }, { title: 'Inception', year: 2010, startAdornment: }, + { title: 'divider', divider: true }, { title: 'The Lord of the Rings: The Two Towers', year: 2002, - startAdornment: + startAdornment: , + destructive: true } ]; @@ -1070,6 +1078,7 @@ const CreatableWithPrefixAndSuffixTemplate = ({ { From eb1ddb3344a94df5beab478340a71ea4946f47ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 20 Jun 2024 10:29:24 +0200 Subject: [PATCH 08/15] Apply suggestions from code review Co-authored-by: Ivan Moreno --- packages/react-ui/src/components/molecules/Autocomplete.d.ts | 2 +- packages/react-ui/src/components/molecules/Autocomplete.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/components/molecules/Autocomplete.d.ts b/packages/react-ui/src/components/molecules/Autocomplete.d.ts index c80553103..52197ce97 100644 --- a/packages/react-ui/src/components/molecules/Autocomplete.d.ts +++ b/packages/react-ui/src/components/molecules/Autocomplete.d.ts @@ -10,7 +10,7 @@ export type AutocompleteProps< ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'] > = MuiAutocompleteProps & { creatable?: boolean; - newItemTitle?: React.ReactNode | string; + newItemTitle?: string | (value: string) => (React.ReactNode | string); newItemIcon?: React.ReactNode; }; diff --git a/packages/react-ui/src/components/molecules/Autocomplete.js b/packages/react-ui/src/components/molecules/Autocomplete.js index 7d44ad95e..89eaef69d 100644 --- a/packages/react-ui/src/components/molecules/Autocomplete.js +++ b/packages/react-ui/src/components/molecules/Autocomplete.js @@ -44,7 +44,7 @@ const Autocomplete = forwardRef( if (inputValue.length > 1 && inputValue !== '' && !isExisting) { filtered.push({ inputValue, - title: `${intlConfig.formatMessage({ id: newItemTitle })} "${inputValue}"` + title: typeof newItemTitle === 'function' ? newItemTitle(inputValue) : `${newItemTitle} "${inputValue}"` }); } From d37377efa488e2583003089c0a26fa087e9ec01b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 20 Jun 2024 16:30:38 +0200 Subject: [PATCH 09/15] CR changes --- .../src/components/molecules/Autocomplete.d.ts | 2 +- .../src/components/molecules/Autocomplete.js | 13 ++++++++++--- .../stories/molecules/Autocomplete.stories.js | 6 +++--- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/react-ui/src/components/molecules/Autocomplete.d.ts b/packages/react-ui/src/components/molecules/Autocomplete.d.ts index 52197ce97..f58fa9f1c 100644 --- a/packages/react-ui/src/components/molecules/Autocomplete.d.ts +++ b/packages/react-ui/src/components/molecules/Autocomplete.d.ts @@ -10,7 +10,7 @@ export type AutocompleteProps< ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'] > = MuiAutocompleteProps & { creatable?: boolean; - newItemTitle?: string | (value: string) => (React.ReactNode | string); + newItemLabel?: string | ((value: string) => React.ReactNode | string); newItemIcon?: React.ReactNode; }; diff --git a/packages/react-ui/src/components/molecules/Autocomplete.js b/packages/react-ui/src/components/molecules/Autocomplete.js index 89eaef69d..d27e310fe 100644 --- a/packages/react-ui/src/components/molecules/Autocomplete.js +++ b/packages/react-ui/src/components/molecules/Autocomplete.js @@ -19,7 +19,7 @@ const Autocomplete = forwardRef( ( { creatable, - newItemTitle = 'c4r.form.add', + newItemLabel = 'c4r.form.add', newItemIcon, freeSolo, renderOption, @@ -44,7 +44,10 @@ const Autocomplete = forwardRef( if (inputValue.length > 1 && inputValue !== '' && !isExisting) { filtered.push({ inputValue, - title: typeof newItemTitle === 'function' ? newItemTitle(inputValue) : `${newItemTitle} "${inputValue}"` + title: + typeof newItemLabel === 'function' + ? newItemLabel(inputValue) + : `${intlConfig.formatMessage({ id: newItemLabel })} "${inputValue}"` }); } @@ -117,7 +120,11 @@ const Autocomplete = forwardRef( Autocomplete.propTypes = { creatable: PropTypes.bool, - newItemTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), + newItemLabel: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string, + PropTypes.element + ]), newItemIcon: PropTypes.element }; diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index aed70c47b..87d7f8503 100644 --- a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -103,7 +103,7 @@ const options = { type: 'text' } }, - newItemTitle: { + newItemLabel: { control: { type: 'text' } @@ -1078,7 +1078,7 @@ const CreatableWithPrefixAndSuffixTemplate = ({ { @@ -1324,7 +1324,7 @@ Creatable.args = { ...commonArgs }; export const CreatableCustomNewOption = CreatableTemplate.bind({}); CreatableCustomNewOption.args = { ...commonArgs, - newItemTitle: 'c4r.widgets.category.apply', + newItemLabel: (value) => `Add this '${value}' new item`, newItemIcon: }; From b970a3492e445e16fea376066f899f8d400eed96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 20 Jun 2024 16:36:34 +0200 Subject: [PATCH 10/15] CR changes --- .../stories/molecules/Autocomplete.stories.js | 68 ------------------- 1 file changed, 68 deletions(-) diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index 87d7f8503..97d9846e7 100644 --- a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -1126,71 +1126,6 @@ const CreatableWithPrefixAndSuffixTemplate = ({ ); }; -const CreatableMultipleWithPrefixTemplate = ({ - label, - variant, - placeholder, - helperText, - error, - size, - required, - ...args -}) => { - const [creatableTop100Films, setCreatableTop100Films] = useState(top100Films); - const [selectedOption, setSelectedOption] = useState(null); - - const handleAddOption = (newOption) => { - if (newOption.inputValue) { - const newFilm = { - title: newOption.inputValue, - startAdornment: - }; - setCreatableTop100Films((prev) => [...prev, newFilm]); - } - }; - - return ( - - option.title} - onChange={(event, newValue) => { - if (newValue && newValue.inputValue) { - handleAddOption(newValue); - } - setSelectedOption(newValue); - }} - renderInput={(params) => { - if (selectedOption) { - params.InputProps.startAdornment = ( - - {selectedOption.startAdornment} - - ); - } - return ( - - ); - }} - size={size} - /> - - ); -}; - const FreeSoloTemplate = ({ label, variant, @@ -1331,8 +1266,5 @@ CreatableCustomNewOption.args = { export const CreatableWithPrefixAndSuffix = CreatableWithPrefixAndSuffixTemplate.bind({}); CreatableWithPrefixAndSuffix.args = { ...commonArgs }; -export const CreatableMultipleWithPrefix = CreatableMultipleWithPrefixTemplate.bind({}); -CreatableMultipleWithPrefix.args = { ...commonArgs }; - export const FreeSolo = FreeSoloTemplate.bind({}); FreeSolo.args = { ...commonArgs }; From 0cef508214f824588ec1545e14cb316251b403b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 20 Jun 2024 17:33:11 +0200 Subject: [PATCH 11/15] moving out changes from different epic --- CHANGELOG.md | 2 +- packages/react-ui/src/theme/carto-theme.d.ts | 7 ------ .../src/theme/sections/components/buttons.js | 23 ++----------------- .../src/theme/sections/components/forms.js | 21 +++-------------- .../stories/atoms/Checkbox.stories.js | 11 ++++----- .../stories/atoms/IconButton.stories.js | 2 +- .../storybook/stories/atoms/Radio.stories.js | 13 +++-------- 7 files changed, 14 insertions(+), 65 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e798359e..50240eb05 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## Not released -- Forms fixes & improvements [#881](https://github.com/CartoDB/carto-react/pull/881) +- Autocomplete creatable: improved API to cover more use cases [#881](https://github.com/CartoDB/carto-react/pull/881) - Fix LegendProportion radius scale [#877](https://github.com/CartoDB/carto-react/pull/877) - Fix time zone handling in week counts, separate getMonday and getUTCMonday utilities [#879](https://github.com/CartoDB/carto-react/pull/879) diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index cbf6b60aa..ed5c02367 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -134,13 +134,6 @@ declare module '@mui/material/Button' { } } -// Update the IconButtons's size prop options -declare module '@mui/material/IconButton' { - interface IconButtonPropsSizeOverrides { - xsmall: true; - } -} - // Update the FAB's color prop options declare module '@mui/material/Fab' { interface FabPropsColorOverrides { diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 660677fda..06c484452 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -1,7 +1,6 @@ import { getSpacing } from '../../themeUtils'; -import { ICON_SIZE_MEDIUM, ICON_SIZE_LARGE, ICON_SIZE_SMALL } from '../../themeConstants'; +import { ICON_SIZE_MEDIUM, ICON_SIZE_LARGE } from '../../themeConstants'; -const sizeXsmall = getSpacing(2); const sizeSmall = getSpacing(3); const sizeMedium = getSpacing(4); const sizeLarge = getSpacing(6); @@ -327,25 +326,7 @@ export const buttonsOverrides = { width: sizeLarge, height: sizeLarge }) - }, - - variants: [ - // Custom props and its variants - { - props: { size: 'xsmall' }, - style: ({ theme }) => ({ - width: sizeXsmall, - height: sizeXsmall, - - '& .MuiSvgIcon-root, & svg': { - fontSize: ICON_SIZE_SMALL, - width: ICON_SIZE_SMALL, - minWidth: ICON_SIZE_SMALL, - height: ICON_SIZE_SMALL - } - }) - } - ] + } }, // MuiToggleButton diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 87d3cc73c..00388f18d 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -1,11 +1,8 @@ import React from 'react'; -import { ICON_SIZE_MEDIUM } from '../../themeConstants'; +import { ICON_SIZE_MEDIUM, ICON_SIZE_LARGE } from '../../themeConstants'; import ArrowDropIcon from '../../../assets/icons/ArrowDropIcon'; import CancelIcon from '@mui/icons-material/Cancel'; -const controlSizeS = 2.25; -const controlSizeM = 3; - const switchSizeS = 2; const switchSizeM = 3; const switchSizeL = 4; @@ -31,16 +28,10 @@ const checkboxRadioOverrides = { }, '& .MuiSvgIcon-root': { - fontSize: theme.spacing(controlSizeM), - width: theme.spacing(controlSizeM), - minWidth: theme.spacing(controlSizeM), - height: theme.spacing(controlSizeM), + fontSize: ICON_SIZE_LARGE, ...(ownerState.size === 'small' && { - fontSize: theme.spacing(controlSizeS), - width: theme.spacing(controlSizeS), - minWidth: theme.spacing(controlSizeS), - height: theme.spacing(controlSizeS) + fontSize: ICON_SIZE_MEDIUM }) } }) @@ -84,9 +75,6 @@ const LabelOverrides = { export const formsOverrides = { // Checkbox MuiCheckbox: { - defaultProps: { - size: 'small' - }, styleOverrides: { ...checkboxRadioOverrides } @@ -94,9 +82,6 @@ export const formsOverrides = { // Radio Button MuiRadio: { - defaultProps: { - size: 'small' - }, styleOverrides: { ...checkboxRadioOverrides } diff --git a/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js index 1609e8ef4..3161d7616 100644 --- a/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js @@ -143,21 +143,17 @@ const SizeTemplate = ({ ...args }) => { } + control={} label='Medium Active' {...args} /> - } - label='Medium Inactive' - {...args} - /> + } label='Medium Inactive' {...args} /> } + control={} label='Medium Indeterminate' {...args} /> @@ -184,6 +180,7 @@ Playground.args = { label: 'Text' }; export const States = StatesTemplate.bind({}); States.argTypes = disabledStatesArgTypes; +States.args = { size: 'medium' }; export const Sizes = SizeTemplate.bind({}); Sizes.argTypes = disabledSizesArgTypes; diff --git a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js index abfc53545..8013fe1d7 100644 --- a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js +++ b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js @@ -17,7 +17,7 @@ const options = { size: { control: { type: 'select', - options: ['xsmall', 'small', 'medium', 'large'] + options: ['small', 'medium', 'large'] } }, disabled: { diff --git a/packages/react-ui/storybook/stories/atoms/Radio.stories.js b/packages/react-ui/storybook/stories/atoms/Radio.stories.js index ab4f6a052..c90639f72 100644 --- a/packages/react-ui/storybook/stories/atoms/Radio.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Radio.stories.js @@ -102,18 +102,10 @@ const SizeTemplate = ({ ...args }) => { - } - label='Medium Active' - {...args} - /> + } label='Medium Active' {...args} /> - } - label='Medium Inactive' - {...args} - /> + } label='Medium Inactive' {...args} /> @@ -135,6 +127,7 @@ Playground.args = { label: 'Text' }; export const States = StatesTemplate.bind({}); States.argTypes = disabledStatesArgTypes; +States.args = { size: 'medium' }; export const Sizes = SizeTemplate.bind({}); Sizes.argTypes = disabledSizesArgTypes; From b56559ac5d3de815c9bc9b992ee08b213e965753 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 20 Jun 2024 17:35:01 +0200 Subject: [PATCH 12/15] cleanup --- .../react-ui/storybook/stories/molecules/Autocomplete.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index 97d9846e7..9d773f1cf 100644 --- a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -1078,7 +1078,6 @@ const CreatableWithPrefixAndSuffixTemplate = ({ { From eb60b18e35b1844ffecf2f81e37dd29c80602aa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 21 Jun 2024 11:03:52 +0200 Subject: [PATCH 13/15] QA fixes --- .../src/components/molecules/MenuItem.js | 18 ++++++++++++++++-- .../src/theme/sections/components/forms.js | 11 +++++++++++ .../stories/molecules/Autocomplete.stories.js | 2 -- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index c931af38f..be239cbc7 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -5,7 +5,7 @@ import { MenuItem as MuiMenuItem, styled } from '@mui/material'; const StyledMenuItem = styled(MuiMenuItem, { shouldForwardProp: (prop) => !['subtitle', 'destructive', 'extended', 'iconColor', 'fixed'].includes(prop) -})(({ subtitle, destructive, extended, iconColor, fixed, theme }) => ({ +})(({ dense, subtitle, destructive, extended, iconColor, fixed, theme }) => ({ ...(subtitle && { pointerEvents: 'none', columnGap: 0, @@ -23,10 +23,10 @@ const StyledMenuItem = styled(MuiMenuItem, { minHeight: theme.spacing(3), paddingTop: 0, paddingBottom: 0, + marginTop: theme.spacing(1), '&:not(:first-of-type)': { minHeight: theme.spacing(5), - marginTop: theme.spacing(1), paddingTop: theme.spacing(1), borderTop: `1px solid ${theme.palette.divider}` } @@ -100,12 +100,26 @@ const StyledMenuItem = styled(MuiMenuItem, { padding: theme.spacing(0.5, 1.5), backgroundColor: theme.palette.background.paper, borderBottom: `1px solid ${theme.palette.divider}` + }, + '.MuiAutocomplete-listbox &:first-of-type': { + minHeight: theme.spacing(6), + marginTop: 0, + + '&:hover': { + backgroundColor: theme.palette.background.paper + } } }), ...(!fixed && { '.MuiList-root &:first-of-type': { marginTop: theme.spacing(1) } + }), + ...(dense && { + '&.MuiButtonBase-root.MuiMenuItem-root': { + minHeight: theme.spacing(3), + padding: theme.spacing(0.25, 1.5) + } }) })); diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 00388f18d..322630f84 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -715,6 +715,12 @@ export const formsOverrides = { color: theme.palette.primary.main, backgroundColor: theme.palette.primary.background, + '.MuiTypography-root': { + color: theme.palette.primary.main + }, + '.MuiTypography-caption': { + color: theme.palette.text.secondary + }, '&.Mui-focused:hover': { backgroundColor: theme.palette.action.hover } @@ -737,11 +743,16 @@ export const formsOverrides = { }), listbox: ({ ownerState, theme }) => ({ + paddingTop: 0, + '.MuiDivider-root': { display: 'none' }, '.MuiButtonBase-root + .MuiDivider-root': { display: 'block' + }, + '.MuiMenuItem-root': { + marginTop: theme.spacing(1) } }) } diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index 9d773f1cf..5ac01e9e9 100644 --- a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -1069,7 +1069,6 @@ const CreatableWithPrefixAndSuffixTemplate = ({ title: newOption.inputValue, startAdornment: }; - console.log('newFilm', newFilm); setCreatableTop100Films((prev) => [...prev, newFilm]); } }; @@ -1085,7 +1084,6 @@ const CreatableWithPrefixAndSuffixTemplate = ({ handleAddOption(newValue); } setSelectedOption(newValue); - console.log('onChange newValue', newValue); }} renderInput={(params) => { if (selectedOption) { From 05869227bb36f50550ce6ccd7af1cfa63e73e641 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 21 Jun 2024 12:44:42 +0200 Subject: [PATCH 14/15] QA fixes --- packages/react-ui/src/components/molecules/MenuItem.js | 3 +++ packages/react-ui/src/theme/sections/components/forms.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index be239cbc7..651307d54 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -39,6 +39,9 @@ const StyledMenuItem = styled(MuiMenuItem, { }, '&.Mui-selected .MuiListItemIcon-root svg path': { fill: theme.palette.primary.main + }, + '.MuiAutocomplete-listbox &[aria-selected="true"] svg path': { + fill: theme.palette.primary.main } }), ...(destructive && { diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 322630f84..041ed7c96 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -751,7 +751,7 @@ export const formsOverrides = { '.MuiButtonBase-root + .MuiDivider-root': { display: 'block' }, - '.MuiMenuItem-root': { + '.MuiMenuItem-root:first-of-type': { marginTop: theme.spacing(1) } }) From 57d1a77c1f64fe319476110826e28dbf1257197f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 21 Jun 2024 13:43:41 +0200 Subject: [PATCH 15/15] QA fixes --- packages/react-ui/src/components/molecules/MenuItem.js | 2 +- packages/react-ui/src/theme/sections/components/forms.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index 651307d54..1cb0c8fe1 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -104,7 +104,7 @@ const StyledMenuItem = styled(MuiMenuItem, { backgroundColor: theme.palette.background.paper, borderBottom: `1px solid ${theme.palette.divider}` }, - '.MuiAutocomplete-listbox &:first-of-type': { + '.MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type': { minHeight: theme.spacing(6), marginTop: 0, diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 041ed7c96..6f1876cc2 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -725,6 +725,9 @@ export const formsOverrides = { backgroundColor: theme.palette.action.hover } }, + '&:first-of-type': { + marginTop: theme.spacing(1) + }, ...(ownerState.size === 'small' && { padding: theme.spacing(0.5, 1.5)