Skip to content

Commit

Permalink
LabelWithIndicator component: UI improvements (#819)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vmilan
vmilan authored Jan 4, 2024
1 parent 8d012d1 commit b0ee755
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 38 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

## Not released

- LabelWithIndicator: UI improvements [#819](https://github.com/CartoDB/carto-react/pull/819)
- SelectField: extend to accept more data structures as children and to fix placeholder [#796](https://github.com/CartoDB/carto-react/pull/796)

## 2.3
Expand Down
2 changes: 2 additions & 0 deletions packages/react-ui/src/components/atoms/LabelWithIndicator.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
export type LabelWithIndicatorProps = {
label: React.ReactNode;
type?: 'optional' | 'required';
icon?: React.ReactNode;
inheritSize?: boolean;
};

declare const LabelWithIndicator: (props: LabelWithIndicatorProps) => JSX.Element;
Expand Down
49 changes: 36 additions & 13 deletions packages/react-ui/src/components/atoms/LabelWithIndicator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Box, styled } from '@mui/material';

import Typography from './Typography';
import { ICON_SIZE_SMALL } from '../../theme/themeConstants';

const Root = styled(Box)(({ theme }) => ({
display: 'flex',
Expand All @@ -16,30 +17,52 @@ const LabelIndicator = styled(Typography)(({ theme }) => ({
}
}));

const LabelWithIndicator = ({ label, type }) => {
const Icon = styled(Box)(({ theme }) => ({
display: 'flex',

svg: {
width: ICON_SIZE_SMALL,
height: ICON_SIZE_SMALL,
fontSize: ICON_SIZE_SMALL,

path: {
fill: theme.palette.text.secondary,

'.Mui-disabled &': {
fill: theme.palette.text.disabled
}
}
}
}));

const LabelWithIndicator = ({ label, type, icon, inheritSize }) => {
const isRequired = type === 'required';

return (
<Root>
{label}
<LabelIndicator
component='span'
variant='inherit'
color='textSecondary'
weight='regular'
>
{isRequired ? '(required)' : '(optional)'}
</LabelIndicator>

{type && (
<LabelIndicator
component='span'
variant={inheritSize ? 'inherit' : 'caption'}
color='textSecondary'
weight='regular'
>
{isRequired ? '(required)' : '(optional)'}
</LabelIndicator>
)}

{icon && <Icon>{icon}</Icon>}
</Root>
);
};

LabelWithIndicator.defaultProps = {
type: 'optional'
};
LabelWithIndicator.propTypes = {
label: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
type: PropTypes.oneOf(['optional' | 'required'])
type: PropTypes.oneOf(['optional', 'required']),
icon: PropTypes.element,
inheritSize: PropTypes.bool
};

export default LabelWithIndicator;
125 changes: 100 additions & 25 deletions packages/react-ui/storybook/stories/atoms/LabelWithIndicator.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ import {
FormGroup,
FormControlLabel,
Checkbox,
MenuItem
MenuItem,
Tooltip
} from '@mui/material';
import PasswordField from '../../../src/components/atoms/PasswordField';
import SelectField from '../../../src/components/atoms/SelectField';
import LabelWithIndicator from '../../../src/components/atoms/LabelWithIndicator';
import UploadField from '../../../src/components/molecules/UploadField/UploadField';
import { Container, Label } from '../../utils/storyStyles';
import { HelpOutline } from '@mui/icons-material';

const options = {
title: 'Atoms/LabelWithIndicator',
Expand All @@ -24,7 +26,8 @@ const options = {
type: {
control: {
type: 'select',
options: ['optional', 'required']
options: ['optional', 'required', undefined],
defaultValue: 'undefined'
}
},
label: {
Expand Down Expand Up @@ -64,14 +67,14 @@ const PlaygroundTemplate = (args) => (
</InputLabel>
);

const TypesTemplate = ({ ...args }) => {
const TypeTemplate = (args) => {
return (
<Grid container direction='column' spacing={6}>
<Grid item>
<Container>
<Label variant='body2'>{'Optional'}</Label>
<InputLabel>
<LabelWithIndicator {...args} />
<LabelWithIndicator {...args} type='optional' />
</InputLabel>
</Container>
</Grid>
Expand All @@ -87,6 +90,67 @@ const TypesTemplate = ({ ...args }) => {
);
};

const IconTemplate = (args) => (
<Grid container direction='column' spacing={6}>
<Grid item>
<Container>
<Label variant='body2'>{'With Icon'}</Label>
<Grid container spacing={2}>
<Grid item xs={3}>
<InputLabel>
<LabelWithIndicator
{...args}
icon={
<Tooltip title='Tooltip example'>
<HelpOutline cursor='pointer' />
</Tooltip>
}
type='required'
/>
</InputLabel>
</Grid>
<Grid item xs={3}>
<InputLabel>
<LabelWithIndicator
{...args}
icon={
<Tooltip title='Tooltip example'>
<HelpOutline cursor='pointer' />
</Tooltip>
}
/>
</InputLabel>
</Grid>
<Grid item xs={3}>
<InputLabel error>
<LabelWithIndicator
{...args}
icon={
<Tooltip title='Tooltip example'>
<HelpOutline cursor='pointer' />
</Tooltip>
}
/>
</InputLabel>
</Grid>
<Grid item xs={3}>
<InputLabel disabled>
<LabelWithIndicator
{...args}
icon={
<Tooltip title='Tooltip example'>
<HelpOutline cursor='pointer' />
</Tooltip>
}
/>
</InputLabel>
</Grid>
</Grid>
</Container>
</Grid>
</Grid>
);

const UseCasesTemplate = ({ label, ...rest }) => {
const [files, setFiles] = useState([]);
const handleUploadFieldChange = (files) => {
Expand All @@ -102,7 +166,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
<Grid item container spacing={2}>
<Grid item xs={3}>
<TextField
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
/>
</Grid>
Expand All @@ -111,14 +175,14 @@ const UseCasesTemplate = ({ label, ...rest }) => {
</Grid>
<Grid item xs={3}>
<TextField
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
error
/>
</Grid>
<Grid item xs={3}>
<TextField
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
disabled
/>
Expand All @@ -134,7 +198,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
<Grid item container spacing={2}>
<Grid item xs={3}>
<SelectField
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
onChange={() => void 0}
value={[]}
Expand Down Expand Up @@ -171,7 +235,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
</Grid>
<Grid item xs={3}>
<SelectField
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
onChange={() => void 0}
value={[]}
Expand All @@ -190,7 +254,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
</Grid>
<Grid item xs={3}>
<SelectField
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
onChange={() => void 0}
value={[]}
Expand Down Expand Up @@ -219,7 +283,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
<Grid item xs={3}>
<UploadField
files={files}
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
onChange={handleUploadFieldChange}
/>
Expand All @@ -236,7 +300,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
<Grid item xs={3}>
<UploadField
files={files}
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
onChange={handleUploadFieldChange}
error
Expand All @@ -245,7 +309,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
<Grid item xs={3}>
<UploadField
files={files}
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
onChange={handleUploadFieldChange}
disabled
Expand All @@ -262,7 +326,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
<Grid item container spacing={2}>
<Grid item xs={3}>
<PasswordField
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
defaultValue='1234'
/>
Expand All @@ -277,15 +341,15 @@ const UseCasesTemplate = ({ label, ...rest }) => {
</Grid>
<Grid item xs={3}>
<PasswordField
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
defaultValue='1234'
error
/>
</Grid>
<Grid item xs={3}>
<PasswordField
label={<LabelWithIndicator {...rest} label={label} />}
label={<LabelWithIndicator {...rest} label={label} type='optional' />}
placeholder='Placeholder text'
defaultValue='1234'
disabled
Expand All @@ -306,7 +370,9 @@ const UseCasesTemplate = ({ label, ...rest }) => {
renderInput={(params) => (
<TextField
size='small'
label={<LabelWithIndicator {...rest} label={label} />}
label={
<LabelWithIndicator {...rest} label={label} type='optional' />
}
/>
)}
size='small'
Expand All @@ -327,7 +393,9 @@ const UseCasesTemplate = ({ label, ...rest }) => {
renderInput={(params) => (
<TextField
size='small'
label={<LabelWithIndicator {...rest} label={label} />}
label={
<LabelWithIndicator {...rest} label={label} type='optional' />
}
error
/>
)}
Expand All @@ -340,7 +408,9 @@ const UseCasesTemplate = ({ label, ...rest }) => {
renderInput={(params) => (
<TextField
size='small'
label={<LabelWithIndicator {...rest} label={label} />}
label={
<LabelWithIndicator {...rest} label={label} type='optional' />
}
disabled
/>
)}
Expand All @@ -359,7 +429,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
<Grid item xs={3}>
<FormControl component='fieldset'>
<FormLabel component='legend'>
<LabelWithIndicator label={'Group Label'} />
<LabelWithIndicator label={'Group Label'} type='optional' />
</FormLabel>
<FormGroup>
<FormControlLabel control={<Checkbox checked />} label='Gilad Gray' />
Expand Down Expand Up @@ -387,7 +457,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
<Grid item xs={3}>
<FormControl error component='fieldset'>
<FormLabel component='legend'>
<LabelWithIndicator label={'Group Label'} />
<LabelWithIndicator label={'Group Label'} type='optional' />
</FormLabel>
<FormGroup>
<FormControlLabel control={<Checkbox checked />} label='Gilad Gray' />
Expand All @@ -402,7 +472,7 @@ const UseCasesTemplate = ({ label, ...rest }) => {
<Grid item xs={3}>
<FormControl disabled component='fieldset'>
<FormLabel component='legend'>
<LabelWithIndicator label={'Group Label'} />
<LabelWithIndicator label={'Group Label'} type='optional' />
</FormLabel>
<FormGroup>
<FormControlLabel control={<Checkbox checked />} label='Gilad Gray' />
Expand All @@ -427,10 +497,15 @@ const commonArgs = {
};

export const Playground = PlaygroundTemplate.bind({});
Playground.args = { ...commonArgs };
Playground.args = { ...commonArgs, type: 'optional' };

export const Types = TypesTemplate.bind({});
Types.args = { ...commonArgs };
export const Type = TypeTemplate.bind({});
Type.args = { ...commonArgs };

export const Icon = IconTemplate.bind({});
Icon.args = {
...commonArgs
};

export const UseCases = UseCasesTemplate.bind({});
UseCases.args = { ...commonArgs };

0 comments on commit b0ee755

Please sign in to comment.