Form components: fixes and improvements to IconButton, Checkbox, Radio, Switch and Autocomplete

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Form components: fixes and improvements to IconButton, Checkbox, Radio, Switch and Autocomplete [#883](https://github.com/CartoDB/carto-react/pull/883)
+
 ## 3.0.0
 
 ### 3.0.0-alpha.13 (2024-06-21)

packages/react-ui/src/theme/carto-theme.d.ts

@@ -134,6 +134,13 @@ 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 {

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

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;
@@ -14,6 +17,14 @@ const checkboxRadioOverrides = {
     ...(ownerState.size === 'small' && {
       padding: '3px' // Forced to a non-standard value to meet with design
     }),
+    ...(ownerState.readOnly === true && {
+      pointerEvents: 'none',
+      color: theme.palette.text.disabled,
+
+      '&.Mui-checked': {
+        color: theme.palette.text.disabled
+      }
+    }),
 
     '&:hover, &:focus-visible': {
       backgroundColor: theme.palette.primary.background
@@ -28,10 +39,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,13 +92,19 @@ const LabelOverrides = {
 export const formsOverrides = {
   // Checkbox
   MuiCheckbox: {
+    defaultProps: {
+      size: 'small'
+    },
     styleOverrides: {
       ...checkboxRadioOverrides
     }
   },
 
   // Radio Button
   MuiRadio: {
+    defaultProps: {
+      size: 'small'
+    },
     styleOverrides: {
       ...checkboxRadioOverrides
     }
@@ -436,12 +459,16 @@ export const formsOverrides = {
   // Form Control Label (radio, checkbox and switch wrapper)
   MuiFormControlLabel: {
     styleOverrides: {
-      root: ({ theme }) => ({
+      root: ({ ownerState, theme }) => ({
         marginLeft: theme.spacing(-0.5),
 
         '& .MuiSwitch-root': {
           marginLeft: theme.spacing(0.5)
-        }
+        },
+
+        ...(ownerState.readOnly === true && {
+          pointerEvents: 'none'
+        })
       })
     }
   },
@@ -609,6 +636,9 @@ export const formsOverrides = {
                 paddingLeft: theme.spacing(0.5)
               })
             }),
+            ...(ownerState.readOnly === true && {
+              backgroundColor: theme.palette.default.background
+            }),
 
             '&.Mui-disabled': {
               pointerEvents: 'none'
@@ -783,7 +813,7 @@ export const formsOverrides = {
         }
       }),
 
-      switchBase: ({ theme }) => ({
+      switchBase: ({ ownerState, theme }) => ({
         width: theme.spacing(switchSizeL),
         height: theme.spacing(switchSizeL),
         padding: theme.spacing(0.5),
@@ -809,7 +839,11 @@ export const formsOverrides = {
             opacity: 1,
             border: 0
           }
-        }
+        },
+
+        ...(ownerState.readOnly === true && {
+          color: theme.palette.text.disabled
+        })
       }),
 
       thumb: ({ theme }) => ({
@@ -834,7 +868,7 @@ export const formsOverrides = {
         left: 0
       }),
 
-      track: ({ theme }) => ({
+      track: ({ ownerState, theme }) => ({
         height: 'auto',
         border: `1px solid ${theme.palette.text.secondary}`,
         borderRadius: theme.spacing(2),
@@ -848,7 +882,18 @@ export const formsOverrides = {
         },
         '.MuiButtonBase-root.Mui-checked.Mui-disabled + &': {
           backgroundColor: theme.palette.text.disabled
-        }
+        },
+
+        '.MuiButtonBase-root.MuiSwitch-switchBase[readOnly] + &': {
+          borderColor: theme.palette.text.disabled
+        },
+        '[readOnly] .MuiButtonBase-root.Mui-checked + &': {
+          backgroundColor: theme.palette.text.disabled
+        },
+
+        ...(ownerState.readOnly === true && {
+          borderColor: theme.palette.text.disabled
+        })
       }),
 
       colorPrimary: ({ theme }) => ({

packages/react-ui/storybook/stories/atoms/Checkbox.stories.js

@@ -26,6 +26,11 @@ const options = {
         type: 'boolean'
       }
     },
+    readOnly: {
+      control: {
+        type: 'boolean'
+      }
+    },
     label: {
       control: {
         type: 'text'
@@ -44,7 +49,15 @@ const options = {
 };
 export default options;
 
-const CheckboxTemplate = ({ label, size, checked, indeterminate, disabled, ...args }) => {
+const CheckboxTemplate = ({
+  label,
+  size,
+  checked,
+  indeterminate,
+  disabled,
+  readOnly,
+  ...args
+}) => {
   return (
     <FormControlLabel
       control={
@@ -53,9 +66,11 @@ const CheckboxTemplate = ({ label, size, checked, indeterminate, disabled, ...ar
           checked={checked}
           indeterminate={indeterminate}
           disabled={disabled}
+          readOnly={readOnly}
         />
       }
       label={label}
+      readOnly={readOnly}
       {...args}
     />
   );
@@ -109,6 +124,32 @@ const StatesTemplate = ({ size, ...args }) => {
             {...args}
           />
         </Grid>
+        <Grid item container spacing={2}>
+          <Grid item xs={4}>
+            <FormControlLabel
+              control={<Checkbox size={size} checked readOnly />}
+              label='Read Only Active'
+              readOnly
+              {...args}
+            />
+          </Grid>
+          <Grid item xs={4}>
+            <FormControlLabel
+              control={<Checkbox size={size} readOnly />}
+              label='Read Only Inactive'
+              readOnly
+              {...args}
+            />
+          </Grid>
+          <Grid item xs={4}>
+            <FormControlLabel
+              control={<Checkbox size={size} checked indeterminate readOnly />}
+              label='Read Only Indeterminate'
+              readOnly
+              {...args}
+            />
+          </Grid>
+        </Grid>
       </Grid>
     </Grid>
   );
@@ -143,17 +184,21 @@ const SizeTemplate = ({ ...args }) => {
       <Grid item container spacing={2}>
         <Grid item xs={4}>
           <FormControlLabel
-            control={<Checkbox checked />}
+            control={<Checkbox checked size='medium' />}
             label='Medium Active'
             {...args}
           />
         </Grid>
         <Grid item xs={4}>
-          <FormControlLabel control={<Checkbox />} label='Medium Inactive' {...args} />
+          <FormControlLabel
+            control={<Checkbox size='medium' />}
+            label='Medium Inactive'
+            {...args}
+          />
         </Grid>
         <Grid item xs={4}>
           <FormControlLabel
-            control={<Checkbox checked indeterminate />}
+            control={<Checkbox checked indeterminate size='medium' />}
             label='Medium Indeterminate'
             {...args}
           />
@@ -180,7 +225,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;

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: {