From b167dd8e5414011b97192a96bb4777807038aaa7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 6 Oct 2023 14:52:52 +0200 Subject: [PATCH 01/35] trying to support and object for renderValue --- .../src/components/atoms/SelectField.js | 38 ++++--- .../stories/atoms/SelectField.stories.js | 101 +++++++++++++----- 2 files changed, 98 insertions(+), 41 deletions(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 39e53c22b..b04d5f032 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -13,7 +13,7 @@ const SelectField = forwardRef( multiple, displayEmpty, selectProps, - renderValue, + renderValue: customRenderValue, menuProps, ...otherProps }, @@ -26,23 +26,33 @@ const SelectField = forwardRef( const defaultRenderValue = React.useCallback( (selected) => { - if (selected.length === 0) { - return ( - - {placeholder} - - ); + if (Array.isArray(selected)) { + if (selected.length === 0) { + return ( + + {placeholder} + + ); + } + return selected.join(', '); + } else if (selected && typeof selected === 'object' && 'label' in selected) { + // Handle the case where selected is a single object + return selected.label; + } else { + return selected || ''; } - return selected.join(', '); }, [isSmall, placeholder] ); + // Use the custom renderValue function if provided, or use the default + const renderValue = customRenderValue || defaultRenderValue; + return ( }, + { label: 'Twenty', value: '20', icon: }, + { label: 'Thirty', value: '30', icon: } + ]; + return ( - - {[...Array(20)].map((item, index) => { - const itemText = - index === 1 - ? `Very long item text with overflow ${index + 1}` - : `Item ${index + 1}`; - - return ( - - {itemText} - - ); - })} - +
+
+ + {'Object'} + + + {optionsSelect.map((o, i) => ( + + {typeof o === 'object' ? ( + + {o.icon && } + {o.label} + + ) : ( + o + )} + + ))} + +
+
+ + {'Array'} + + + {[...Array(20)].map((item, index) => { + const itemText = + index === 1 + ? `Very long item text with overflow ${index + 1}` + : `Item ${index + 1}`; + + return ( + + {itemText} + + ); + })} + +
+
); }; From ad201d67b146808a11b512f4a97cd0d91055439e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 7 Nov 2023 16:00:54 +0100 Subject: [PATCH 02/35] fix object data handling --- .../src/components/atoms/SelectField.js | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index b04d5f032..1af415669 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -26,23 +26,25 @@ const SelectField = forwardRef( const defaultRenderValue = React.useCallback( (selected) => { + if (selected.length === 0) { + return ( + + {placeholder} + + ); + } if (Array.isArray(selected)) { - if (selected.length === 0) { - return ( - - {placeholder} - - ); - } return selected.join(', '); - } else if (selected && typeof selected === 'object' && 'label' in selected) { - // Handle the case where selected is a single object - return selected.label; + } else if (selected && typeof selected === 'object') { + // Check if selected is an object and has a 'label' property + if ('label' in selected) { + return selected.label; + } } else { return selected || ''; } From 2e00bb002f21fdee5b0499b27bca7ca7b5aea94e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 8 Nov 2023 10:56:16 +0100 Subject: [PATCH 03/35] fix icon styles and export multiple select field component --- .../react-ui/src/components/atoms/SelectField.js | 15 ++++++++++++--- packages/react-ui/src/index.js | 2 ++ packages/react-ui/src/types.d.ts | 1 + 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 1af415669..e9104dd95 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -1,8 +1,17 @@ import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; -import { TextField } from '@mui/material'; +import { TextField, styled } from '@mui/material'; import Typography from './Typography'; +const StyledTextField = styled(TextField)(({ theme }) => ({ + '& .MuiInputAdornment-root.MuiInputAdornment-positionStart': { + paddingLeft: `8px !important` + }, + '& .MuiInputBase-inputAdornedStart': { + paddingLeft: `0px !important` + } +})); + const SelectField = forwardRef( ( { @@ -56,7 +65,7 @@ const SelectField = forwardRef( const renderValue = customRenderValue || defaultRenderValue; return ( - {children} - + ); } ); diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index a9771167e..8a72e0de8 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -33,6 +33,7 @@ import Typography from './components/atoms/Typography'; import Button from './components/atoms/Button'; import PasswordField from './components/atoms/PasswordField'; import SelectField from './components/atoms/SelectField'; +import MultipleSelectField from './components/atoms/MultipleSelectField'; import UploadField from './components/molecules/UploadField/UploadField'; import AppBar from './components/organisms/AppBar/AppBar'; import LabelWithIndicator from './components/atoms/LabelWithIndicator'; @@ -87,6 +88,7 @@ export { Button, PasswordField, SelectField, + MultipleSelectField, UploadField, AppBar, ArrowDropIcon, diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index ed8f71413..2c9fd3712 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -1,5 +1,6 @@ import { GroupDateTypes } from '@carto/react-core'; export { SelectFieldProps } from './components/atoms/SelectField'; +export { MultipleSelectFieldProps } from './components/atoms/MultipleSelectField'; export { TypographyProps } from './components/atoms/Typography'; export { LabelWithIndicatorProps } from './components/atoms/LabelWithIndicator'; export { AvatarProps } from './components/molecules/Avatar'; From e934af88b877e4e650b5cd948508d99e54a68d28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 8 Nov 2023 11:08:37 +0100 Subject: [PATCH 04/35] export multiple select field component --- packages/react-ui/src/index.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index 8a39aff0c..d0c25e92a 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -39,6 +39,9 @@ import Typography, { import Button, { ButtonProps } from './components/atoms/Button'; import PasswordField, { PasswordFieldProps } from './components/atoms/PasswordField'; import SelectField, { SelectFieldProps } from './components/atoms/SelectField'; +import MultipleSelectField, { + MultipleSelectFieldProps +} from './components/atoms/MultipleSelectField'; import UploadField, { UploadFieldProps } from './components/molecules/UploadField/UploadField'; @@ -102,6 +105,8 @@ export { PasswordFieldProps, SelectField, SelectFieldProps, + MultipleSelectField, + MultipleSelectFieldProps, UploadField, UploadFieldProps, AppBar, From d24bf777d9999b72d5ef8e0de9a7732b4f6cc6ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 8 Nov 2023 19:03:51 +0100 Subject: [PATCH 05/35] remove placeholder passed twice --- packages/react-ui/src/components/atoms/SelectField.js | 1 - .../storybook/stories/atoms/MiltipleSelectField.stories.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index e9104dd95..d2eeb95ce 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -71,7 +71,6 @@ const SelectField = forwardRef( onChange={onChange} ref={ref} size={size} - placeholder={placeholder} SelectProps={{ ...selectProps, multiple: multiple, diff --git a/packages/react-ui/storybook/stories/atoms/MiltipleSelectField.stories.js b/packages/react-ui/storybook/stories/atoms/MiltipleSelectField.stories.js index 62aa3749e..a6a9924c9 100644 --- a/packages/react-ui/storybook/stories/atoms/MiltipleSelectField.stories.js +++ b/packages/react-ui/storybook/stories/atoms/MiltipleSelectField.stories.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import MultipleSelectField from '../../../src/components/atoms/MultipleSelectField'; -import { DocContainer, DocHighlight, DocLink } from '../../utils/storyStyles'; +import { DocContainer, DocHighlight } from '../../utils/storyStyles'; import Typography from '../../../src/components/atoms/Typography'; const options = { From d3e7d6dbadab74b1bd427ee483ec5507420bffe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 27 Nov 2023 11:30:24 +0100 Subject: [PATCH 06/35] remove unneeded props --- packages/react-ui/src/components/atoms/SelectField.d.ts | 2 +- packages/react-ui/src/components/atoms/SelectField.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.d.ts b/packages/react-ui/src/components/atoms/SelectField.d.ts index 13f0e2c69..74ca9b1a3 100644 --- a/packages/react-ui/src/components/atoms/SelectField.d.ts +++ b/packages/react-ui/src/components/atoms/SelectField.d.ts @@ -4,7 +4,7 @@ import { TextFieldProps } from '@mui/material/TextField'; import React from 'react'; export type SelectFieldProps = Omit & - Omit & { + SelectProps & { placeholder?: React.ReactNode; size?: 'small' | 'medium'; selectProps?: Partial>; diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index d2eeb95ce..b4c61e555 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -16,7 +16,6 @@ const SelectField = forwardRef( ( { children, - onChange, placeholder, size, multiple, @@ -68,7 +67,6 @@ const SelectField = forwardRef( Date: Mon, 27 Nov 2023 14:15:12 +0100 Subject: [PATCH 07/35] trying different approach --- .../src/components/atoms/SelectField2.d.ts | 15 + .../src/components/atoms/SelectField2.js | 118 +++ .../stories/atoms/SelectField2.stories.js | 673 ++++++++++++++++++ 3 files changed, 806 insertions(+) create mode 100644 packages/react-ui/src/components/atoms/SelectField2.d.ts create mode 100644 packages/react-ui/src/components/atoms/SelectField2.js create mode 100644 packages/react-ui/storybook/stories/atoms/SelectField2.stories.js diff --git a/packages/react-ui/src/components/atoms/SelectField2.d.ts b/packages/react-ui/src/components/atoms/SelectField2.d.ts new file mode 100644 index 000000000..5aad35ae0 --- /dev/null +++ b/packages/react-ui/src/components/atoms/SelectField2.d.ts @@ -0,0 +1,15 @@ +import { MenuProps } from '@mui/material'; +import { SelectProps } from '@mui/material/Select'; +import { TextFieldProps } from '@mui/material/TextField'; +import React from 'react'; + +export type SelectFieldProps2 = Omit & + SelectProps & { + placeholder?: React.ReactNode; + size?: 'small' | 'medium'; + renderValue?: (value: string[]) => React.ReactNode; + menuProps?: Partial; + }; + +declare const SelectField2: (props: SelectFieldProps2) => JSX.Element; +export default SelectField2; diff --git a/packages/react-ui/src/components/atoms/SelectField2.js b/packages/react-ui/src/components/atoms/SelectField2.js new file mode 100644 index 000000000..b64530862 --- /dev/null +++ b/packages/react-ui/src/components/atoms/SelectField2.js @@ -0,0 +1,118 @@ +import React, { forwardRef, useState } from 'react'; +import PropTypes from 'prop-types'; +import { FormControl, FormHelperText, InputLabel, Select, styled } from '@mui/material'; +import Typography from './Typography'; +import uniqueId from 'lodash/uniqueId'; + +const StyledSelect = styled(Select)(({ theme }) => ({ + '& .MuiInputAdornment-root.MuiInputAdornment-positionStart': { + paddingLeft: `8px !important` + }, + '& .MuiInputBase-inputAdornedStart': { + paddingLeft: `0px !important` + } +})); + +const SelectField = forwardRef( + ( + { + children, + placeholder, + size, + displayEmpty, + renderValue: customRenderValue, + menuProps, + labelId, + label, + helperText, + error, + focused, + disabled, + ...otherProps + }, + ref + ) => { + // forwardRef needed to be able to hold a reference, in this way it can be a child for some Mui components, like Tooltip + // https://mui.com/material-ui/guides/composition/#caveat-with-refs + + const isSmall = size === 'small'; + + const defaultRenderValue = React.useCallback( + (selected) => { + if (selected.length === 0) { + return ( + + {placeholder} + + ); + } + if (Array.isArray(selected)) { + return selected.join(', '); + } else if (selected && typeof selected === 'object') { + // Check if selected is an object and has a 'label' property + if ('label' in selected) { + return selected.label; + } + } else { + return selected || ''; + } + }, + [isSmall, placeholder] + ); + + // Use the custom renderValue function if provided, or use the default + const renderValue = customRenderValue || defaultRenderValue; + + // Accessibility: label id + const [id] = useState(uniqueId('select-label-')); + + return ( + + {label && {label}} + + + {children} + + + {helperText && {helperText}} + + ); + } +); + +SelectField.defaultProps = { + size: 'small' +}; +SelectField.propTypes = { + placeholder: PropTypes.string, + size: PropTypes.oneOf(['small', 'medium']), + renderValue: PropTypes.func, + menuProps: PropTypes.object, + label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), + helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]) +}; + +export default SelectField; diff --git a/packages/react-ui/storybook/stories/atoms/SelectField2.stories.js b/packages/react-ui/storybook/stories/atoms/SelectField2.stories.js new file mode 100644 index 000000000..a9c8b77b1 --- /dev/null +++ b/packages/react-ui/storybook/stories/atoms/SelectField2.stories.js @@ -0,0 +1,673 @@ +import React, { useState } from 'react'; +import { FormControl, Grid, InputLabel, MenuItem, TextField } from '@mui/material'; +import Typography from '../../../src/components/atoms/Typography'; +import SelectField2 from '../../../src/components/atoms/SelectField2'; +import { + Container, + DocContainer, + DocHighlight, + DocLink, + Label +} from '../../utils/storyStyles'; +import Button from '../../../src/components/atoms/Button'; +import { EuroOutlined } from '@mui/icons-material'; + +const options = { + title: 'Atoms/Select Field 2', + component: SelectField2, + argTypes: { + variant: { + control: { + type: 'select', + options: ['outlined', 'filled', 'standard'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium'] + } + }, + required: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + error: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + }, + placeholder: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29965' + }, + status: { + type: 'validated' + } + } +}; +export default options; + +const menuItems = [ + { + label: 'Ten: super large text with overflow', + value: '10' + }, + { + label: 'Twenty', + value: '20' + }, + { + label: 'Thirty', + value: '30' + } +]; + +const SelectField2Item = ({ + label, + required, + placeholder, + variant, + helperText, + size, + focused, + disabled, + error, + ...rest +}) => { + const [content, setContent] = useState([]); + + const handleChange = (event) => { + const { + target: { value } + } = event; + setContent( + // On autofill we get a stringified value + typeof value === 'string' ? value.split(',') : value + ); + }; + + const optionsSelect = [ + { label: 'Ten: super large text with overflow', value: '10', icon: }, + { label: 'Twenty', value: '20', icon: }, + { label: 'Thirty', value: '30', icon: } + ]; + + return ( +
+
+ + {'Object'} + + + {optionsSelect.map((o, i) => ( + + {typeof o === 'object' ? ( + + {o.icon && } + {o.label} + + ) : ( + o + )} + + ))} + +
+
+ + {'Array'} + + + {[...Array(20)].map((item, index) => { + const itemText = + index === 1 + ? `Very long item text with overflow ${index + 1}` + : `Item ${index + 1}`; + + return ( + + {itemText} + + ); + })} + +
+
+ ); +}; + +const PlaygroundTemplate = (args) => ; + +const VariantsTemplate = ({ label, required, placeholder, ...rest }) => { + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; + +const LabelAndHelperTextTemplate = ({ label, placeholder, helperText, ...rest }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const SizeTemplate = ({ + label, + placeholder, + defaultValue, + helperText, + size, + ...rest +}) => { + const [fixedValue, setFixedValue] = useState('Twenty'); + const [fixedValue2, setFixedValue2] = useState('Twenty'); + const [fixedValue3, setFixedValue3] = useState('Thirty'); + const handleChange = (event) => { + setFixedValue(event.target.value); + }; + const handleChange2 = (event) => { + setFixedValue2(event.target.value); + }; + const handleChange3 = (event) => { + setFixedValue3(event.target.value); + }; + + return ( + + + + Placeholder + Custom component + + + + + + + + + + + + + + + Empty + + + + {label} + + + + + + {label} + + + + + + {label} + + + + + + + + Filled + + + + {menuItems.map((option) => ( + + {option.label} + + ))} + + + + + {menuItems.map((option) => ( + + {option.label} + + ))} + + + + + {menuItems.map((option) => ( + + {option.label} + + ))} + + + + + + + Focused + + + + + + + + + + + + + + + Disabled + + + + + + + + + + + + + + + Error + + + + + + + + + + + + + ); +}; + +const MultipleTemplate = ({ + label, + placeholder, + defaultValue, + helperText, + size, + ...rest +}) => { + return ( + + MultipleSelectField2 story + + } + > + We have a specific + + MultipleSelectField2 + + component to handle this functionality, check the associated story. + + ); +}; + +const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const DocTemplate = () => { + return ( + + This component adds the placeholder logic on top of TextField Mui component. + + So, instead of {''} or {''}, you - should use this one: - - react-ui/src/components/atoms/SelectField2 - - - - For external use: - - {'import { SelectField2 } from "@carto/react-ui";'} - - . - - - ); -}; - -const commonArgs = { - label: 'Label text', - placeholder: 'Placeholder text', - helperText: 'Helper text.' -}; - -const sizeArgs = { - helperText: 'This is a error message.' -}; - -const disabledControlsArgTypes = { - variant: { table: { disable: true } }, - multiple: { table: { disable: true } } -}; - -const disabledControlsSizeArgTypes = { - ...disabledControlsArgTypes, - error: { table: { disable: true } }, - defaultValue: { table: { disable: true } } -}; - -export const Playground = PlaygroundTemplate.bind({}); -Playground.args = { ...commonArgs }; -Playground.argTypes = disabledControlsArgTypes; - -export const Guide = DocTemplate.bind({}); - -export const Variants = VariantsTemplate.bind({}); -Variants.args = { ...commonArgs }; -Variants.argTypes = disabledControlsArgTypes; - -export const LabelAndHelperText = LabelAndHelperTextTemplate.bind({}); -LabelAndHelperText.args = { ...commonArgs }; -LabelAndHelperText.argTypes = disabledControlsArgTypes; - -export const Medium = SizeTemplate.bind({}); -Medium.args = { ...commonArgs, ...sizeArgs, size: 'medium' }; -Medium.argTypes = disabledControlsSizeArgTypes; - -export const Small = SizeTemplate.bind({}); -Small.args = { ...commonArgs, ...sizeArgs, size: 'small' }; -Small.argTypes = disabledControlsSizeArgTypes; - -export const MultipleSelection = MultipleTemplate.bind({}); -MultipleSelection.args = { ...commonArgs }; -MultipleSelection.argTypes = disabledControlsArgTypes; - -export const Behavior = BehaviorTemplate.bind({}); -Behavior.args = { ...commonArgs }; -Behavior.argTypes = disabledControlsArgTypes; From fff4d833239e30f49d35374708e99acb9af02833 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 1 Dec 2023 18:28:08 +0100 Subject: [PATCH 23/35] add missing prop --- packages/react-ui/src/components/atoms/SelectField.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 55855b3f4..87e97da7d 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -70,6 +70,7 @@ const SelectField = forwardRef( Date: Fri, 1 Dec 2023 18:42:11 +0100 Subject: [PATCH 24/35] add missing prop --- packages/react-ui/src/components/atoms/SelectField.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 87e97da7d..57d517537 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -42,6 +42,7 @@ const SelectField = forwardRef( error, focused, disabled, + fullWidth, 'aria-label': ariaLabel, ...otherProps }, @@ -62,8 +63,9 @@ const SelectField = forwardRef( error={error} focused={focused} disabled={disabled} + fullWidth={fullWidth} // TODO: remove this backgroundColor before creating the patch version - sx={{ backgroundColor: '#fbfbbc !important' }} + //sx={{ backgroundColor: '#fbfbbc !important' }} > {label && {label}} @@ -73,6 +75,7 @@ const SelectField = forwardRef( name={name} ref={ref} size={size} + fullWidth={fullWidth} displayEmpty={displayEmpty || !!placeholder} renderValue={customRenderValue} inputProps={{ From 9e61d9e8d1d48b771b04f0556409af38d81b3396 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 1 Dec 2023 18:46:02 +0100 Subject: [PATCH 25/35] color for debug --- packages/react-ui/src/components/atoms/SelectField.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 57d517537..eb24df162 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -65,7 +65,7 @@ const SelectField = forwardRef( disabled={disabled} fullWidth={fullWidth} // TODO: remove this backgroundColor before creating the patch version - //sx={{ backgroundColor: '#fbfbbc !important' }} + sx={{ backgroundColor: '#fbfbbc !important' }} > {label && {label}} From 81e586abb2f21603b6f6cf7f5efcdb177a3af807 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 11 Dec 2023 11:25:46 +0100 Subject: [PATCH 26/35] cleanup code --- CHANGELOG.md | 1 + .../react-ui/src/components/atoms/SelectField.d.ts | 1 - .../react-ui/src/components/atoms/SelectField.js | 12 ++++-------- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c79d6019..c7c2c981a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Extend SelectField to cover more use cases [#796](https://github.com/CartoDB/carto-react/pull/796) - Added filterable prop to TimeSeriesWidget [#808](https://github.com/CartoDB/carto-react/pull/808) - Fix dataSources store type [#807](https://github.com/CartoDB/carto-react/pull/807) diff --git a/packages/react-ui/src/components/atoms/SelectField.d.ts b/packages/react-ui/src/components/atoms/SelectField.d.ts index 60dd9f68b..8d95b9360 100644 --- a/packages/react-ui/src/components/atoms/SelectField.d.ts +++ b/packages/react-ui/src/components/atoms/SelectField.d.ts @@ -5,7 +5,6 @@ import { SelectProps } from '@mui/material/Select'; export type SelectFieldProps = Omit & { placeholder?: React.ReactNode | string; size?: 'small' | 'medium'; - renderValue?: (value: string[]) => React.ReactNode; menuProps?: Partial; inputProps?: Partial; helperText?: React.ReactNode | string; diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index eb24df162..cc919ee9e 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -11,12 +11,12 @@ import { import Typography from './Typography'; import uniqueId from 'lodash/uniqueId'; -const StyledSelect = styled(Select)(() => ({ - '& .MuiInputAdornment-root.MuiInputAdornment-positionStart': { - paddingLeft: `8px !important` +const StyledSelect = styled(Select)(({ theme }) => ({ + '& .MuiInputAdornment-positionStart': { + paddingLeft: theme.spacing(1) }, '& .MuiInputBase-inputAdornedStart': { - paddingLeft: `0px !important` + paddingLeft: '0px !important' } })); @@ -28,11 +28,9 @@ const SelectField = forwardRef( ( { children, - // https://github.com/mui/material-ui/pull/8875#issuecomment-349771804 placeholder, size, displayEmpty, - renderValue: customRenderValue, menuProps, inputProps, labelId, @@ -77,7 +75,6 @@ const SelectField = forwardRef( size={size} fullWidth={fullWidth} displayEmpty={displayEmpty || !!placeholder} - renderValue={customRenderValue} inputProps={{ ...inputProps, 'aria-label': ariaLabel @@ -123,7 +120,6 @@ SelectField.defaultProps = { SelectField.propTypes = { placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), size: PropTypes.oneOf(['small', 'medium']), - renderValue: PropTypes.func, menuProps: PropTypes.object, inputProps: PropTypes.object, helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]) From 0607d3103b4fa714c47b83fce13f2119da3aa221 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 11 Dec 2023 18:27:32 +0100 Subject: [PATCH 27/35] fix required prop --- .../src/components/atoms/SelectField.js | 3 +++ .../stories/atoms/SelectField.stories.js | 23 ++++--------------- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index cc919ee9e..6bfc34722 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -41,6 +41,7 @@ const SelectField = forwardRef( focused, disabled, fullWidth, + required, 'aria-label': ariaLabel, ...otherProps }, @@ -62,6 +63,7 @@ const SelectField = forwardRef( focused={focused} disabled={disabled} fullWidth={fullWidth} + required={required} // TODO: remove this backgroundColor before creating the patch version sx={{ backgroundColor: '#fbfbbc !important' }} > @@ -103,6 +105,7 @@ const SelectField = forwardRef( )} + {children} diff --git a/packages/react-ui/storybook/stories/atoms/SelectField.stories.js b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js index 5f1e9c18c..9380a8ff3 100644 --- a/packages/react-ui/storybook/stories/atoms/SelectField.stories.js +++ b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js @@ -112,6 +112,7 @@ const SelectFieldItem = ({ error={error} size={size} fullWidth={rest.fullWidth} + required={required} > {menuItems.map((o, i) => ( @@ -124,7 +125,7 @@ const SelectFieldItem = ({ const PlaygroundTemplate = (args) => ; -const VariantsTemplate = ({ label, required, placeholder, ...rest }) => { +const VariantsTemplate = ({ label, placeholder, ...rest }) => { return ( @@ -200,14 +201,7 @@ const LabelAndHelperTextTemplate = ({ label, placeholder, helperText, ...rest }) ); }; -const SizeTemplate = ({ - label, - placeholder, - defaultValue, - helperText, - size, - ...rest -}) => { +const SizeTemplate = ({ label, placeholder, helperText, size, ...rest }) => { const [fixedValue, setFixedValue] = useState('Twenty'); const [fixedValue2, setFixedValue2] = useState('Twenty'); const [fixedValue3, setFixedValue3] = useState('Thirty'); @@ -458,14 +452,7 @@ const SizeTemplate = ({ ); }; -const MultipleTemplate = ({ - label, - placeholder, - defaultValue, - helperText, - size, - ...rest -}) => { +const MultipleTemplate = ({ label, placeholder, helperText, size, ...rest }) => { return ( { +const BehaviorTemplate = ({ label, placeholder, helperText, ...rest }) => { return ( From 976bc8e83d79feb645293dce94015b5dbe03764f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 13 Dec 2023 09:18:24 +0100 Subject: [PATCH 28/35] add prefix case to Storybook and fix Label styles --- .../src/components/atoms/SelectField.js | 18 ++++++- .../stories/atoms/SelectField.stories.js | 54 ++++++++++++++++++- 2 files changed, 68 insertions(+), 4 deletions(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 6bfc34722..7cd5f9c12 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -11,9 +11,23 @@ import { import Typography from './Typography'; import uniqueId from 'lodash/uniqueId'; +const Label = styled(InputLabel)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(0.5), + + '& .MuiFormLabel-asterisk::after': { + marginLeft: theme.spacing(-1) + } +})); + const StyledSelect = styled(Select)(({ theme }) => ({ '& .MuiInputAdornment-positionStart': { - paddingLeft: theme.spacing(1) + paddingLeft: theme.spacing(2), + + '&.MuiInputAdornment-sizeSmall': { + paddingLeft: theme.spacing(1.5) + } }, '& .MuiInputBase-inputAdornedStart': { paddingLeft: '0px !important' @@ -67,7 +81,7 @@ const SelectField = forwardRef( // TODO: remove this backgroundColor before creating the patch version sx={{ backgroundColor: '#fbfbbc !important' }} > - {label && {label}} + {label && } { + return ( + + + + + Kg} + /> + + + + + + + + + } + /> + + + + + + + + + + ); +}; + const SizeTemplate = ({ label, placeholder, helperText, size, ...rest }) => { const [fixedValue, setFixedValue] = useState('Twenty'); const [fixedValue2, setFixedValue2] = useState('Twenty'); @@ -580,6 +627,9 @@ export const LabelAndHelperText = LabelAndHelperTextTemplate.bind({}); LabelAndHelperText.args = { ...commonArgs }; LabelAndHelperText.argTypes = disabledControlsArgTypes; +export const Prefix = PrefixTemplate.bind({}); +Prefix.args = { ...commonArgs }; + export const Medium = SizeTemplate.bind({}); Medium.args = { ...commonArgs, ...sizeArgs, size: 'medium' }; Medium.argTypes = disabledControlsSizeArgTypes; From fb50c3ad56f925db9c9bae39e7e769c2fbafac85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 15 Dec 2023 13:04:58 +0100 Subject: [PATCH 29/35] changelog description --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 795f2b548..97ff440bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## Not released -- Extend SelectField to cover more use cases [#796](https://github.com/CartoDB/carto-react/pull/796) +- Extend SelectField: to accept more data structures as children and to fix placeholder [#796](https://github.com/CartoDB/carto-react/pull/796) ## 2.3 From 42ea9a7f3b66b6404706d5f8d3dce0050c3a6aeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 15 Dec 2023 13:09:00 +0100 Subject: [PATCH 30/35] rollabck multiple selectfield export --- packages/react-ui/src/index.d.ts | 5 ----- packages/react-ui/src/index.js | 2 -- packages/react-ui/src/types.d.ts | 1 - 3 files changed, 8 deletions(-) diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index d0c25e92a..8a39aff0c 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -39,9 +39,6 @@ import Typography, { import Button, { ButtonProps } from './components/atoms/Button'; import PasswordField, { PasswordFieldProps } from './components/atoms/PasswordField'; import SelectField, { SelectFieldProps } from './components/atoms/SelectField'; -import MultipleSelectField, { - MultipleSelectFieldProps -} from './components/atoms/MultipleSelectField'; import UploadField, { UploadFieldProps } from './components/molecules/UploadField/UploadField'; @@ -105,8 +102,6 @@ export { PasswordFieldProps, SelectField, SelectFieldProps, - MultipleSelectField, - MultipleSelectFieldProps, UploadField, UploadFieldProps, AppBar, diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index 8a72e0de8..a9771167e 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -33,7 +33,6 @@ import Typography from './components/atoms/Typography'; import Button from './components/atoms/Button'; import PasswordField from './components/atoms/PasswordField'; import SelectField from './components/atoms/SelectField'; -import MultipleSelectField from './components/atoms/MultipleSelectField'; import UploadField from './components/molecules/UploadField/UploadField'; import AppBar from './components/organisms/AppBar/AppBar'; import LabelWithIndicator from './components/atoms/LabelWithIndicator'; @@ -88,7 +87,6 @@ export { Button, PasswordField, SelectField, - MultipleSelectField, UploadField, AppBar, ArrowDropIcon, diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index e337beb76..d990c3c50 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -1,6 +1,5 @@ import { GroupDateTypes } from '@carto/react-core'; export { SelectFieldProps } from './components/atoms/SelectField'; -export { MultipleSelectFieldProps } from './components/atoms/MultipleSelectField'; export { TypographyProps } from './components/atoms/Typography'; export { LabelWithIndicatorProps } from './components/atoms/LabelWithIndicator'; export { AvatarProps } from './components/molecules/Avatar'; From aecf93a88c164232ad1e0f09ab082699bb504f20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 19 Dec 2023 13:53:10 +0100 Subject: [PATCH 31/35] fix selectfield types --- packages/react-ui/src/components/atoms/SelectField.d.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.d.ts b/packages/react-ui/src/components/atoms/SelectField.d.ts index 8d95b9360..156ef0a7e 100644 --- a/packages/react-ui/src/components/atoms/SelectField.d.ts +++ b/packages/react-ui/src/components/atoms/SelectField.d.ts @@ -2,7 +2,10 @@ import React from 'react'; import { InputProps, MenuProps } from '@mui/material'; import { SelectProps } from '@mui/material/Select'; -export type SelectFieldProps = Omit & { +export type SelectFieldProps = Omit< + SelectProps, + 'placeholder' +> & { placeholder?: React.ReactNode | string; size?: 'small' | 'medium'; menuProps?: Partial; @@ -10,5 +13,5 @@ export type SelectFieldProps = Omit & { helperText?: React.ReactNode | string; }; -declare const SelectField: (props: SelectFieldProps) => JSX.Element; +declare const SelectField: (props: SelectFieldProps) => JSX.Element; export default SelectField; From 1cdb07bd7332b3a25b9eb3f578dc54660bbf5fae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 21 Dec 2023 17:15:42 +0100 Subject: [PATCH 32/35] fix hover background --- packages/react-ui/src/components/atoms/SelectField.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 7cd5f9c12..9702ffa7d 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -31,6 +31,9 @@ const StyledSelect = styled(Select)(({ theme }) => ({ }, '& .MuiInputBase-inputAdornedStart': { paddingLeft: '0px !important' + }, + '& .MuiSelect-select .MuiMenuItem-root:hover': { + backgroundColor: 'transparent' } })); @@ -113,7 +116,6 @@ const SelectField = forwardRef( variant={isSmall ? 'body2' : 'body1'} color='text.hint' component='span' - noWrap > {placeholder} From 65f91ab94fca8058c8b27d7b7cd452d1150d1a64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 26 Dec 2023 10:40:56 +0100 Subject: [PATCH 33/35] fix LabelWithIndicator for Design QA of SelectField --- packages/react-ui/src/components/atoms/LabelWithIndicator.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-ui/src/components/atoms/LabelWithIndicator.js b/packages/react-ui/src/components/atoms/LabelWithIndicator.js index 70e62b23b..85e8aa826 100644 --- a/packages/react-ui/src/components/atoms/LabelWithIndicator.js +++ b/packages/react-ui/src/components/atoms/LabelWithIndicator.js @@ -5,7 +5,6 @@ import { styled } from '@mui/material/styles'; import Typography from './Typography'; const LabelIndicator = styled(Typography)(({ theme }) => ({ - marginLeft: theme.spacing(0.5), '.Mui-disabled &': { color: theme.palette.text.disabled } From 1279f1608ef651689cf9448cf420301614011686 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 2 Jan 2024 16:31:12 +0100 Subject: [PATCH 34/35] remove temporary background color --- packages/react-ui/src/components/atoms/SelectField.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 9702ffa7d..0b9916cf0 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -81,8 +81,6 @@ const SelectField = forwardRef( disabled={disabled} fullWidth={fullWidth} required={required} - // TODO: remove this backgroundColor before creating the patch version - sx={{ backgroundColor: '#fbfbbc !important' }} > {label && } From 0283cb54ad43ec3bae93efbb50dcbd59ab0580b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 3 Jan 2024 12:55:36 +0100 Subject: [PATCH 35/35] cleanup Label styles --- .../src/components/atoms/LabelWithIndicator.js | 12 +++++++++--- .../react-ui/src/components/atoms/SelectField.js | 12 +----------- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/react-ui/src/components/atoms/LabelWithIndicator.js b/packages/react-ui/src/components/atoms/LabelWithIndicator.js index 85e8aa826..d3406208b 100644 --- a/packages/react-ui/src/components/atoms/LabelWithIndicator.js +++ b/packages/react-ui/src/components/atoms/LabelWithIndicator.js @@ -1,9 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; +import { Box, styled } from '@mui/material'; import Typography from './Typography'; +const Root = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(0.5) +})); + const LabelIndicator = styled(Typography)(({ theme }) => ({ '.Mui-disabled &': { color: theme.palette.text.disabled @@ -14,7 +20,7 @@ const LabelWithIndicator = ({ label, type }) => { const isRequired = type === 'required'; return ( - <> + {label} { > {isRequired ? '(required)' : '(optional)'} - + ); }; diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 0b9916cf0..b0340fb54 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -11,16 +11,6 @@ import { import Typography from './Typography'; import uniqueId from 'lodash/uniqueId'; -const Label = styled(InputLabel)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - gap: theme.spacing(0.5), - - '& .MuiFormLabel-asterisk::after': { - marginLeft: theme.spacing(-1) - } -})); - const StyledSelect = styled(Select)(({ theme }) => ({ '& .MuiInputAdornment-positionStart': { paddingLeft: theme.spacing(2), @@ -82,7 +72,7 @@ const SelectField = forwardRef( fullWidth={fullWidth} required={required} > - {label && } + {label && {label}}