From 45170ed19381b70500d7524ec7f392aff3c786a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 16 Jan 2024 19:03:47 +0100 Subject: [PATCH 1/7] new ToggleButtonGroup --- .../components/atoms/ToggleButtonGroup.d.ts | 8 ++++++ .../src/components/atoms/ToggleButtonGroup.js | 28 +++++++++++++++++++ packages/react-ui/src/index.d.ts | 7 ++++- packages/react-ui/src/index.js | 2 ++ .../stories/molecules/ToggleButton.stories.js | 25 ++++++++++++++++- 5 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 packages/react-ui/src/components/atoms/ToggleButtonGroup.d.ts create mode 100644 packages/react-ui/src/components/atoms/ToggleButtonGroup.js diff --git a/packages/react-ui/src/components/atoms/ToggleButtonGroup.d.ts b/packages/react-ui/src/components/atoms/ToggleButtonGroup.d.ts new file mode 100644 index 000000000..6fe15b6f7 --- /dev/null +++ b/packages/react-ui/src/components/atoms/ToggleButtonGroup.d.ts @@ -0,0 +1,8 @@ +import { ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material'; + +export type ToggleButtonGroupProps = MuiToggleButtonGroupProps & { + variant?: 'contained' | 'text'; +}; + +declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element; +export default ToggleButtonGroup; diff --git a/packages/react-ui/src/components/atoms/ToggleButtonGroup.js b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js new file mode 100644 index 000000000..b251c6116 --- /dev/null +++ b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { ToggleButtonGroup as MuiToggleButtonGroup, styled } from '@mui/material'; + +const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { + shouldForwardProp: (prop) => prop !== 'variant' +})(({ variant, theme }) => ({ + boxShadow: variant === 'contained' ? 'none' : undefined, + backgroundColor: variant === 'contained' ? theme.palette.background.default : undefined +})); + +const ToggleButtonGroup = ({ children, variant, ...rest }) => { + return ( + + {children} + + ); +}; + +ToggleButtonGroup.defaultProps = { + variant: 'text' +}; + +ToggleButtonGroup.propTypes = { + variant: PropTypes.oneOf(['text', 'contained']) +}; + +export default ToggleButtonGroup; diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index 7f2494631..3899b5a77 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -37,8 +37,11 @@ import Typography, { TypographyProps } from './components/atoms/Typography'; import Button, { ButtonProps } from './components/atoms/Button'; -import PasswordField, { PasswordFieldProps } from './components/atoms/PasswordField'; import SelectField, { SelectFieldProps } from './components/atoms/SelectField'; +import PasswordField, { PasswordFieldProps } from './components/atoms/PasswordField'; +import ToggleButtonGroup, { + ToggleButtonGroupProps +} from './components/atoms/ToggleButtonGroup'; import UploadField, { UploadFieldProps } from './components/molecules/UploadField/UploadField'; @@ -101,6 +104,8 @@ export { CartoFontWeight, Button, ButtonProps, + ToggleButtonGroup, + ToggleButtonGroupProps, PasswordField, PasswordFieldProps, SelectField, diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index a9c7165f8..19960221f 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -31,6 +31,7 @@ import CircleIcon from './assets/icons/CircleIcon'; import ArrowDropIcon from './assets/icons/ArrowDropIcon'; import Typography from './components/atoms/Typography'; import Button from './components/atoms/Button'; +import ToggleButtonGroup from './components/atoms/ToggleButtonGroup'; import PasswordField from './components/atoms/PasswordField'; import SelectField from './components/atoms/SelectField'; import UploadField from './components/molecules/UploadField/UploadField'; @@ -86,6 +87,7 @@ export { LegendRamp, Typography, Button, + ToggleButtonGroup, PasswordField, SelectField, UploadField, diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index 9de133081..8908426a5 100644 --- a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ToggleButtonGroup, ToggleButton, Grid, Divider } from '@mui/material'; +import { ToggleButton, Grid, Divider } from '@mui/material'; import { CheckCircleOutline, FormatAlignCenter, @@ -8,11 +8,19 @@ import { FormatAlignRight } from '@mui/icons-material'; import Typography from '../../../src/components/atoms/Typography'; +import ToggleButtonGroup from '../../../src/components/atoms/ToggleButtonGroup'; const options = { title: 'Molecules/Toggle Button', component: ToggleButtonGroup, argTypes: { + variant: { + defaultValue: 'text', + control: { + type: 'select', + options: ['text', 'contained'] + } + }, size: { defaultValue: 'medium', control: { @@ -182,6 +190,19 @@ const DividedTemplate = ({ exclusive, ...args }) => { ); }; +const VariantTemplate = ({ ...args }) => { + return ( + + + + + + + + + ); +}; + const BehaviorTemplate = ({ exclusive, ...args }) => { const [selected, setSelected] = React.useState(() => ['opt1']); const [selected2, setSelected2] = React.useState(() => ['opt1']); @@ -251,4 +272,6 @@ HorizontalTextGroup.args = { label: 'Text' }; export const MultipleSelectionGroup = GroupTemplate.bind({}); MultipleSelectionGroup.args = { exclusive: false }; +export const Variant = VariantTemplate.bind({}); + export const Behavior = BehaviorTemplate.bind({}); From 02423015f0471b483a9867c388e1870432f2d3e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 16 Jan 2024 19:09:56 +0100 Subject: [PATCH 2/7] documentation --- CHANGELOG.md | 2 ++ UPGRADE.md | 11 +++++++ .../stories/molecules/ToggleButton.stories.js | 29 +++++++++++++++++++ 3 files changed, 42 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 97f628306..b62253a63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Not released +- ToggleButtonGroup component: Add support for variant [#824](https://github.com/CartoDB/carto-react/pull/824) + ## 2.3 ### 2.3.7 (2024-01-11) diff --git a/UPGRADE.md b/UPGRADE.md index fe7612a5c..44114b113 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -204,6 +204,17 @@ So, instead of Mui Button, the component you should use to create buttons is thi For external use: `import { Button } from '@carto/react-ui';`. +### ToggleButtonGroup + +We have a `ToggleButtonGroup` component that uses `Mui ToggleButtonGroup` and extends it with some extra props: + +- variant + +So, instead of Mui ToggleButtonGroup, the component you should use is this one: +`react-ui/src/components/atoms/ToggleButtonGroup` + +For external use: `import { ToggleButtonGroup } from '@carto/react-ui';`. + ### AppBar We have a custom component to build the basic structure and styles on top of AppBar Mui component. diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index 8908426a5..fcf4383c2 100644 --- a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -9,6 +9,7 @@ import { } from '@mui/icons-material'; import Typography from '../../../src/components/atoms/Typography'; import ToggleButtonGroup from '../../../src/components/atoms/ToggleButtonGroup'; +import { DocContainer, DocHighlight, DocLink } from '../../utils/storyStyles'; const options = { title: 'Molecules/Toggle Button', @@ -122,6 +123,32 @@ const ToggleRow = ({ label, divider, fullWidth, exclusive, ...rest }) => { ); }; +const DocTemplate = () => { + return ( + + We have our own + + ToggleButtonGroup + + component that extends Mui ToggleButtonGroup with some props (variant + support). + + So, instead of Mui ToggleButtonGroup, you should use this one: + + react-ui/src/components/atoms/ToggleButtonGroup + + + + For external use: + + {'import { ToggleButtonGroup } from "@carto/react-ui";'} + + . + + + ); +}; + const IconTemplate = ({ exclusive, ...args }) => { return ( @@ -255,6 +282,8 @@ const BehaviorTemplate = ({ exclusive, ...args }) => { export const Playground = ToggleRow.bind({}); +export const Guide = DocTemplate.bind({}); + export const Icon = IconTemplate.bind({}); export const Text = TextTemplate.bind({}); From 98100628eb6f8bcb53702171a87d7b7eff6bff4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 16 Jan 2024 19:12:31 +0100 Subject: [PATCH 3/7] cleanup --- packages/react-ui/src/components/atoms/ToggleButtonGroup.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/components/atoms/ToggleButtonGroup.js b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js index b251c6116..db70ccafa 100644 --- a/packages/react-ui/src/components/atoms/ToggleButtonGroup.js +++ b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js @@ -5,8 +5,10 @@ import { ToggleButtonGroup as MuiToggleButtonGroup, styled } from '@mui/material const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { shouldForwardProp: (prop) => prop !== 'variant' })(({ variant, theme }) => ({ - boxShadow: variant === 'contained' ? 'none' : undefined, - backgroundColor: variant === 'contained' ? theme.palette.background.default : undefined + ...(variant === 'contained' && { + boxShadow: 'none', + backgroundColor: theme.palette.background.default + }) })); const ToggleButtonGroup = ({ children, variant, ...rest }) => { From 9b93a3a1dce85b123023bf6de99ea4d7990710ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 19 Jan 2024 11:52:55 +0100 Subject: [PATCH 4/7] add colors and final variants --- UPGRADE.md | 1 + .../components/atoms/ToggleButtonGroup.d.ts | 3 +- .../src/components/atoms/ToggleButtonGroup.js | 69 +++++++++++++++++-- .../src/theme/sections/components/buttons.js | 9 ++- .../stories/molecules/ToggleButton.stories.js | 39 +++++++++-- 5 files changed, 107 insertions(+), 14 deletions(-) diff --git a/UPGRADE.md b/UPGRADE.md index 44114b113..8cfa7c3bc 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -209,6 +209,7 @@ For external use: `import { Button } from '@carto/react-ui';`. We have a `ToggleButtonGroup` component that uses `Mui ToggleButtonGroup` and extends it with some extra props: - variant +- backgroundColor So, instead of Mui ToggleButtonGroup, the component you should use is this one: `react-ui/src/components/atoms/ToggleButtonGroup` diff --git a/packages/react-ui/src/components/atoms/ToggleButtonGroup.d.ts b/packages/react-ui/src/components/atoms/ToggleButtonGroup.d.ts index 6fe15b6f7..b292f506d 100644 --- a/packages/react-ui/src/components/atoms/ToggleButtonGroup.d.ts +++ b/packages/react-ui/src/components/atoms/ToggleButtonGroup.d.ts @@ -1,7 +1,8 @@ import { ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material'; export type ToggleButtonGroupProps = MuiToggleButtonGroupProps & { - variant?: 'contained' | 'text'; + variant?: 'contained' | 'floating' | 'unbounded'; + backgroundColor?: 'primary' | 'secondary' | 'transparent'; }; declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element; diff --git a/packages/react-ui/src/components/atoms/ToggleButtonGroup.js b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js index db70ccafa..a2464c1c7 100644 --- a/packages/react-ui/src/components/atoms/ToggleButtonGroup.js +++ b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js @@ -3,28 +3,85 @@ import PropTypes from 'prop-types'; import { ToggleButtonGroup as MuiToggleButtonGroup, styled } from '@mui/material'; const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { - shouldForwardProp: (prop) => prop !== 'variant' -})(({ variant, theme }) => ({ + shouldForwardProp: (prop) => !['variant', 'backgroundColor'].includes(prop) +})(({ variant, backgroundColor, theme }) => ({ + // Variants ...(variant === 'contained' && { + boxShadow: 'none' + }), + ...(variant === 'unbounded' && { boxShadow: 'none', + + '.MuiToggleButtonGroup-grouped': { + margin: 0, + + '&.MuiToggleButton-sizeSmall': { + margin: 0 + }, + + '&:first-of-type': { + marginLeft: 0, + borderRadius: theme.spacing(1, 0.5, 0.5, 1) + }, + '&:not(:last-of-type)': { + marginRight: theme.spacing(0.5) + }, + '&:last-of-type': { + borderRadius: theme.spacing(0.5, 1, 1, 0.5) + } + }, + '&.MuiToggleButtonGroup-vertical': { + '.MuiToggleButtonGroup-grouped': { + margin: theme.spacing(0, 0, 0.5), + + '&:first-of-type': { + borderRadius: theme.spacing(1, 1, 0.5, 0.5) + }, + '&:not(:last-of-type)': { + marginRight: 0 + }, + '&:last-of-type': { + marginBottom: 0, + borderRadius: theme.spacing(0.5, 0.5, 1, 1) + } + } + } + }), + + // Colors + ...(backgroundColor === 'primary' && { + backgroundColor: theme.palette.background.paper + }), + ...(backgroundColor === 'secondary' && { backgroundColor: theme.palette.background.default + }), + ...(backgroundColor === 'transparent' && { + backgroundColor: 'transparent' }) })); -const ToggleButtonGroup = ({ children, variant, ...rest }) => { +const ToggleButtonGroup = ({ children, variant, backgroundColor, ...rest }) => { + const isUnbounded = variant === 'unbounded'; + const defaultColor = isUnbounded ? 'transparent' : 'primary'; + return ( - + {children} ); }; ToggleButtonGroup.defaultProps = { - variant: 'text' + variant: 'floating' }; ToggleButtonGroup.propTypes = { - variant: PropTypes.oneOf(['text', 'contained']) + variant: PropTypes.oneOf(['floating', 'contained', 'unbounded']), + backgroundColor: PropTypes.oneOf(['primary', 'secondary', 'transparent']) }; export default ToggleButtonGroup; diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 6cfc974a9..41b454985 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -434,7 +434,11 @@ export const buttonsOverrides = { '&.MuiToggleButton-root': { marginLeft: theme.spacing(1), - marginBottom: theme.spacing(0.5) + marginBottom: theme.spacing(0.5), + + '&:last-of-type': { + marginBottom: theme.spacing(1) + } }, '&.MuiToggleButton-sizeSmall': { width: sizeSmall, @@ -442,6 +446,9 @@ export const buttonsOverrides = { '&:not(:first-of-type)': { marginTop: 0 + }, + '&:last-of-type': { + marginBottom: theme.spacing(0.5) } } }) diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index fcf4383c2..cdbd5bd2d 100644 --- a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -16,10 +16,16 @@ const options = { component: ToggleButtonGroup, argTypes: { variant: { - defaultValue: 'text', + defaultValue: 'floating', control: { type: 'select', - options: ['text', 'contained'] + options: ['floating', 'contained', 'unbounded'] + } + }, + backgroundColor: { + control: { + type: 'select', + options: ['primary', 'secondary', 'transparent'] } }, size: { @@ -66,7 +72,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36258' }, status: { - type: 'validated' + type: 'readyToReview' } } }; @@ -130,8 +136,8 @@ const DocTemplate = () => { ToggleButtonGroup - component that extends Mui ToggleButtonGroup with some props (variant - support). + component that extends Mui ToggleButtonGroup with some props (variant and + backgroundColor support). So, instead of Mui ToggleButtonGroup, you should use this one: @@ -221,11 +227,30 @@ const VariantTemplate = ({ ...args }) => { return ( - + + + + + + ); +}; + +const BgColorTemplate = ({ ...args }) => { + return ( + + + + + + + + + + ); }; @@ -303,4 +328,6 @@ MultipleSelectionGroup.args = { exclusive: false }; export const Variant = VariantTemplate.bind({}); +export const BackgroundColor = BgColorTemplate.bind({}); + export const Behavior = BehaviorTemplate.bind({}); From f704a6500d394d4f897c10a7437c32209162493b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 19 Jan 2024 15:36:49 +0100 Subject: [PATCH 5/7] several fixes --- CHANGELOG.md | 2 +- .../src/components/atoms/ToggleButtonGroup.js | 34 +++++++++++++++-- .../src/theme/sections/components/buttons.js | 37 +++++++++++++++---- .../stories/molecules/ToggleButton.stories.js | 25 ++++++++----- 4 files changed, 75 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b62253a63..f205abcff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## Not released -- ToggleButtonGroup component: Add support for variant [#824](https://github.com/CartoDB/carto-react/pull/824) +- ToggleButtonGroup component: Add support for variant and backgroundColor [#824](https://github.com/CartoDB/carto-react/pull/824) ## 2.3 diff --git a/packages/react-ui/src/components/atoms/ToggleButtonGroup.js b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js index a2464c1c7..dffd54572 100644 --- a/packages/react-ui/src/components/atoms/ToggleButtonGroup.js +++ b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js @@ -12,12 +12,33 @@ const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { ...(variant === 'unbounded' && { boxShadow: 'none', - '.MuiToggleButtonGroup-grouped': { + '& .MuiDivider-root': { + height: theme.spacing(4), + + '&.MuiToggleButtonGroup-groupedHorizontal': { + height: theme.spacing(4) + }, + '&.MuiToggleButtonGroup-groupedVertical': { + width: theme.spacing(4), + height: 'auto', + margin: `${theme.spacing(0.5, 0, 1)} !important`, + borderRadius: '0 !important' + } + }, + + '& .MuiToggleButton-sizeSmall': { margin: 0, - '&.MuiToggleButton-sizeSmall': { - margin: 0 + '& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal': { + height: theme.spacing(3) }, + '& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical': { + width: theme.spacing(3) + } + }, + + '.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)': { + margin: 0, '&:first-of-type': { marginLeft: 0, @@ -30,7 +51,12 @@ const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { borderRadius: theme.spacing(0.5, 1, 1, 0.5) } }, - '&.MuiToggleButtonGroup-vertical': { + '&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)': { + '.MuiToggleButtonGroup-grouped': { + margin: theme.spacing(0, 0.5) + } + }, + '&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)': { '.MuiToggleButtonGroup-grouped': { margin: theme.spacing(0, 0, 0.5), diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 41b454985..e67fa472e 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -397,9 +397,25 @@ export const buttonsOverrides = { borderRadius: radius }, '.MuiDivider-root': { - height: sizeLarge, - margin: theme.spacing(0, 1), - marginLeft: theme.spacing(0.5) + '&.MuiToggleButtonGroup-groupedHorizontal': { + height: sizeLarge, + margin: theme.spacing(0, 1), + marginLeft: theme.spacing(0.5) + }, + '&.MuiToggleButtonGroup-groupedVertical': { + width: sizeLarge, + margin: theme.spacing(1, 0), + marginTop: theme.spacing(0.5) + } + }, + + '.MuiToggleButton-sizeSmall': { + '& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal': { + height: sizeMedium + }, + '& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical': { + width: sizeMedium + } } }), // Styles applied to the children if orientation="horizontal" @@ -412,19 +428,24 @@ export const buttonsOverrides = { marginLeft: 0, borderLeft: 'none' }, - '&:first-of-type': { + '&:first-of-type:not(.MuiDivider-root)': { marginLeft: theme.spacing(1) }, - '&.MuiToggleButton-sizeSmall': { + '&.MuiToggleButton-sizeSmall:not(.MuiDivider-root)': { height: sizeSmall, margin: theme.spacing(0.5), '&:not(:first-of-type)': { marginLeft: 0 - }, - '& + .MuiDivider-root': { - height: sizeMedium } + /* '& + .MuiDivider-root': { + '&.MuiToggleButtonGroup-groupedHorizontal': { + height: sizeMedium + }, + '&.MuiToggleButtonGroup-groupedVertical': { + width: sizeMedium + } + } */ } }), // Styles applied to the children if orientation="vertical" diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index cdbd5bd2d..526fb8fce 100644 --- a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -78,7 +78,7 @@ const options = { }; export default options; -const Toggle = ({ label, exclusive, ...rest }) => { +const Toggle = ({ label, ...rest }) => { const [selected, setSelected] = React.useState(false); return ( @@ -96,8 +96,10 @@ const Toggle = ({ label, exclusive, ...rest }) => { ); }; -const ToggleRow = ({ label, divider, fullWidth, exclusive, ...rest }) => { +const ToggleRow = ({ label, divider, fullWidth, exclusive, orientation, ...rest }) => { const [selected, setSelected] = React.useState(() => ['AlignLeft']); + const isVertical = orientation === 'vertical'; + const dividerOrientation = isVertical ? 'horizontal' : 'vertical'; const handleAlignment = (event, newAlignment) => { setSelected(newAlignment); @@ -110,6 +112,7 @@ const ToggleRow = ({ label, divider, fullWidth, exclusive, ...rest }) => { onChange={handleAlignment} fullWidth={fullWidth} exclusive={exclusive} + orientation={orientation} aria-label='text alignment' > @@ -118,7 +121,9 @@ const ToggleRow = ({ label, divider, fullWidth, exclusive, ...rest }) => { {label ? label : } - {divider && } + {divider && ( + + )} {label ? label : } @@ -155,7 +160,7 @@ const DocTemplate = () => { ); }; -const IconTemplate = ({ exclusive, ...args }) => { +const IconTemplate = (args) => { return ( @@ -171,7 +176,7 @@ const IconTemplate = ({ exclusive, ...args }) => { ); }; -const TextTemplate = ({ exclusive, ...args }) => { +const TextTemplate = (args) => { return ( @@ -184,7 +189,7 @@ const TextTemplate = ({ exclusive, ...args }) => { ); }; -const GroupTemplate = ({ exclusive, ...args }) => { +const GroupTemplate = (args) => { return ( @@ -197,7 +202,7 @@ const GroupTemplate = ({ exclusive, ...args }) => { ); }; -const VerticalGroupTemplate = ({ exclusive, ...args }) => { +const VerticalGroupTemplate = (args) => { return ( @@ -210,7 +215,7 @@ const VerticalGroupTemplate = ({ exclusive, ...args }) => { ); }; -const DividedTemplate = ({ exclusive, ...args }) => { +const DividedTemplate = (args) => { return ( @@ -223,7 +228,7 @@ const DividedTemplate = ({ exclusive, ...args }) => { ); }; -const VariantTemplate = ({ ...args }) => { +const VariantTemplate = (args) => { return ( @@ -239,7 +244,7 @@ const VariantTemplate = ({ ...args }) => { ); }; -const BgColorTemplate = ({ ...args }) => { +const BgColorTemplate = (args) => { return ( From e15e9eeff50a0fd6e3656ace75fbf75a73a28df7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 19 Jan 2024 17:00:30 +0100 Subject: [PATCH 6/7] several fixes --- .../src/components/atoms/ToggleButtonGroup.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/react-ui/src/components/atoms/ToggleButtonGroup.js b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js index dffd54572..3e84bbd79 100644 --- a/packages/react-ui/src/components/atoms/ToggleButtonGroup.js +++ b/packages/react-ui/src/components/atoms/ToggleButtonGroup.js @@ -11,6 +11,7 @@ const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { }), ...(variant === 'unbounded' && { boxShadow: 'none', + borderRadius: theme.spacing(0.5), '& .MuiDivider-root': { height: theme.spacing(4), @@ -19,8 +20,8 @@ const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { height: theme.spacing(4) }, '&.MuiToggleButtonGroup-groupedVertical': { - width: theme.spacing(4), height: 'auto', + width: theme.spacing(4), margin: `${theme.spacing(0.5, 0, 1)} !important`, borderRadius: '0 !important' } @@ -29,10 +30,14 @@ const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { '& .MuiToggleButton-sizeSmall': { margin: 0, + '&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)': { + margin: 0 + }, '& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal': { height: theme.spacing(3) }, '& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical': { + height: 'auto', width: theme.spacing(3) } }, @@ -41,14 +46,10 @@ const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { margin: 0, '&:first-of-type': { - marginLeft: 0, - borderRadius: theme.spacing(1, 0.5, 0.5, 1) + marginLeft: 0 }, '&:not(:last-of-type)': { marginRight: theme.spacing(0.5) - }, - '&:last-of-type': { - borderRadius: theme.spacing(0.5, 1, 1, 0.5) } }, '&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)': { @@ -60,15 +61,11 @@ const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, { '.MuiToggleButtonGroup-grouped': { margin: theme.spacing(0, 0, 0.5), - '&:first-of-type': { - borderRadius: theme.spacing(1, 1, 0.5, 0.5) - }, '&:not(:last-of-type)': { marginRight: 0 }, '&:last-of-type': { - marginBottom: 0, - borderRadius: theme.spacing(0.5, 0.5, 1, 1) + marginBottom: 0 } } } From 721fb01e18bb29717fe215403c2de6b82667f236 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 19 Jan 2024 17:02:25 +0100 Subject: [PATCH 7/7] cleanup --- .../react-ui/src/theme/sections/components/buttons.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index e67fa472e..06c484452 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -438,14 +438,6 @@ export const buttonsOverrides = { '&:not(:first-of-type)': { marginLeft: 0 } - /* '& + .MuiDivider-root': { - '&.MuiToggleButtonGroup-groupedHorizontal': { - height: sizeMedium - }, - '&.MuiToggleButtonGroup-groupedVertical': { - width: sizeMedium - } - } */ } }), // Styles applied to the children if orientation="vertical"