ToggleButtonGroup component: Add support for variant and backgroundColor

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- ToggleButtonGroup component: Add support for variant and backgroundColor [#824](https://github.com/CartoDB/carto-react/pull/824)
+
 ## 2.3
 
 ### 2.3.7 (2024-01-11)

UPGRADE.md

@@ -204,6 +204,18 @@ 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
+- backgroundColor
+
+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.

packages/react-ui/src/components/atoms/ToggleButtonGroup.d.ts

@@ -0,0 +1,9 @@
+import { ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material';
+
+export type ToggleButtonGroupProps = MuiToggleButtonGroupProps & {
+  variant?: 'contained' | 'floating' | 'unbounded';
+  backgroundColor?: 'primary' | 'secondary' | 'transparent';
+};
+
+declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
+export default ToggleButtonGroup;

packages/react-ui/src/components/atoms/ToggleButtonGroup.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ToggleButtonGroup as MuiToggleButtonGroup, styled } from '@mui/material';
+
+const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, {
+  shouldForwardProp: (prop) => !['variant', 'backgroundColor'].includes(prop)
+})(({ variant, backgroundColor, theme }) => ({
+  // Variants
+  ...(variant === 'contained' && {
+    boxShadow: 'none'
+  }),
+  ...(variant === 'unbounded' && {
+    boxShadow: 'none',
+    borderRadius: theme.spacing(0.5),
+
+    '& .MuiDivider-root': {
+      height: theme.spacing(4),
+
+      '&.MuiToggleButtonGroup-groupedHorizontal': {
+        height: theme.spacing(4)
+      },
+      '&.MuiToggleButtonGroup-groupedVertical': {
+        height: 'auto',
+        width: theme.spacing(4),
+        margin: `${theme.spacing(0.5, 0, 1)} !important`,
+        borderRadius: '0 !important'
+      }
+    },
+
+    '& .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)
+      }
+    },
+
+    '.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)': {
+      margin: 0,
+
+      '&:first-of-type': {
+        marginLeft: 0
+      },
+      '&:not(:last-of-type)': {
+        marginRight: theme.spacing(0.5)
+      }
+    },
+    '&.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),
+
+        '&:not(:last-of-type)': {
+          marginRight: 0
+        },
+        '&:last-of-type': {
+          marginBottom: 0
+        }
+      }
+    }
+  }),
+
+  // Colors
+  ...(backgroundColor === 'primary' && {
+    backgroundColor: theme.palette.background.paper
+  }),
+  ...(backgroundColor === 'secondary' && {
+    backgroundColor: theme.palette.background.default
+  }),
+  ...(backgroundColor === 'transparent' && {
+    backgroundColor: 'transparent'
+  })
+}));
+
+const ToggleButtonGroup = ({ children, variant, backgroundColor, ...rest }) => {
+  const isUnbounded = variant === 'unbounded';
+  const defaultColor = isUnbounded ? 'transparent' : 'primary';
+
+  return (
+    <StyledToggleButtonGroup
+      {...rest}
+      variant={variant}
+      backgroundColor={backgroundColor || defaultColor}
+    >
+      {children}
+    </StyledToggleButtonGroup>
+  );
+};
+
+ToggleButtonGroup.defaultProps = {
+  variant: 'floating'
+};
+
+ToggleButtonGroup.propTypes = {
+  variant: PropTypes.oneOf(['floating', 'contained', 'unbounded']),
+  backgroundColor: PropTypes.oneOf(['primary', 'secondary', 'transparent'])
+};
+
+export default ToggleButtonGroup;

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,

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,

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,18 +428,15 @@ 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
           }
         }
       }),
@@ -434,14 +447,21 @@ 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,
           margin: theme.spacing(0.5),
 
           '&:not(:first-of-type)': {
             marginTop: 0
+          },
+          '&:last-of-type': {
+            marginBottom: theme.spacing(0.5)
           }
         }
       })