[FX-5536] Migrate FormControlLabel to TailwindCSS (#4454)

toptal · Aug 13, 2024 · f084dd3 · f084dd3
1 parent 480d7c9
commit f084dd3
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 150 deletions.
diff --git a/.changeset/short-starfishes-sell.md b/.changeset/short-starfishes-sell.md
@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-checkbox': patch
+'@toptal/picasso-radio': patch
+'@toptal/picasso-form': patch
+---
+
+- migrate styles of FormControlLabel to TailwindCSS
diff --git a/packages/base/Checkbox/src/Checkbox/Checkbox.tsx b/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
@@ -12,6 +12,7 @@ import React, { forwardRef } from 'react'
 import { Container } from '@toptal/picasso-container'
 import { FormControlLabel } from '@toptal/picasso-form'
 import type { RequiredDecoration } from '@toptal/picasso-form'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 import styles from './styles'
 
@@ -111,8 +112,11 @@ export const Checkbox = forwardRef<HTMLButtonElement | HTMLLabelElement, Props>(
         style={labelStyle}
         ref={ref as React.ForwardedRef<HTMLLabelElement>}
         classes={{
-          ...rootClasses,
-          label: classes.label,
+          label: twJoin(
+            'max-w-[calc(100%_-_1.5em_+_1px)]',
+            'ml-[0.5em]',
+            disabled && 'text-gray-500'
+          ),
         }}
         control={muiCheckbox}
         requiredDecoration={requiredDecoration}

diff --git a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -40,7 +40,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -54,7 +54,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -79,7 +79,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -93,7 +93,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -118,7 +118,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -132,7 +132,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -157,7 +157,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -171,7 +171,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -196,7 +196,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -210,7 +210,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -235,7 +235,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
               </span>
             </span>
             <span
-              class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+              class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -257,7 +257,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
     class="Picasso-root"
   >
     <label
-      class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+      class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
     >
       <span
         class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -282,7 +282,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
         </span>
       </span>
       <span
-        class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+        class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
       >
         <span
           class="align-top text-[0.8125rem]"
@@ -458,7 +458,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
     class="Picasso-root"
   >
     <label
-      class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
+      class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
     >
       <span
         class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -483,7 +483,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
         </span>
       </span>
       <span
-        class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
+        class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
       >
         <span
           class="align-top text-[0.8125rem]"

diff --git a/packages/base/Checkbox/src/Checkbox/styles.ts b/packages/base/Checkbox/src/Checkbox/styles.ts
@@ -3,9 +3,6 @@ import { createStyles } from '@material-ui/core/styles'
 import { mix, outline } from '@toptal/picasso-shared'
 import { PicassoProvider } from '@toptal/picasso-provider'
 
-const controlWidth = '1em'
-const labelMargin = '0.5em'
-
 PicassoProvider.override(() => ({
   MuiCheckbox: {
     root: {
@@ -51,9 +48,6 @@ export default ({ palette, sizes, transitions }: Theme) =>
       '&:hover $uncheckedIcon': {
         border: `${sizes.borderWidth} solid ${palette.grey.main}`,
       },
-      '& $label': {
-        color: palette.grey.main,
-      },
     },
     focused: {
       '& $uncheckedIcon': {
@@ -125,11 +119,6 @@ export default ({ palette, sizes, transitions }: Theme) =>
         transform: 'translate(-50%, -50%)',
       },
     },
-    label: {
-      marginLeft: labelMargin,
-      // 1px is needed for safari
-      maxWidth: `calc(100% - ${controlWidth} - ${labelMargin} + 1px)`,
-    },
     labelWithRightSpacing: {},
     checkboxWrapper: {
       alignSelf: 'flex-start',

diff --git a/packages/base/Form/src/FormControlLabel/FormControlLabel.tsx b/packages/base/Form/src/FormControlLabel/FormControlLabel.tsx
@@ -1,13 +1,10 @@
 import type { ReactElement, ReactNode, LabelHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 import type { FormControlLabelProps } from '@material-ui/core/FormControlLabel'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps, TextLabelProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import type { RequiredDecoration } from '../FormLabel'
-import styles from './styles'
 import { FormCompound as Form } from '../FormCompound'
 import { useFieldsLayoutContext } from '../FieldsLayout'
 
@@ -27,12 +24,12 @@ export interface Props
   disabled?: boolean
   /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
   requiredDecoration?: RequiredDecoration
+  classes?: {
+    root?: string
+    label?: string
+  }
 }
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoFormControlLabel',
-})
-
 const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
   function FormControlLabel(props, ref) {
     const {
@@ -43,33 +40,33 @@ const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
       disabled,
       requiredDecoration,
       titleCase,
-      // Avoid passing external classes inside the rest props
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      classes: externalClasses,
+      classes,
       ...rest
     } = props
 
-    const classes = useStyles(props)
-
     const { layout } = useFieldsLayoutContext()
+    const isHorizontalLayout = layout === 'horizontal'
 
     return (
       <label
         {...rest}
         ref={ref}
-        className={cx(
-          classes.root,
-          {
-            [classes.disabled]: disabled,
-            [classes.horizontalLayout]: layout === 'horizontal',
-          },
+        className={twMerge(
+          'inline-flex items-center',
+          'max-w-full',
+          'align-middle',
+          '-webkit-tap-highlight-color-transparent',
+          'mx-0',
+          disabled ? 'cursor-default' : 'cursor-pointer',
+          isHorizontalLayout && 'col-start-1 col-span-2',
+          classes?.root,
           className
         )}
         style={style}
       >
         {React.cloneElement(control, { disabled })}
         <Form.Label
-          className={classes.label}
+          className={twMerge(disabled && 'pointer-events-auto', classes?.label)}
           as='span'
           requiredDecoration={requiredDecoration}
           disabled={disabled}

diff --git a/packages/base/Form/src/FormControlLabel/styles.ts b/packages/base/Form/src/FormControlLabel/styles.ts
diff --git a/packages/base/Radio/src/Radio/Radio.tsx b/packages/base/Radio/src/Radio/Radio.tsx
@@ -90,10 +90,9 @@ export const Radio = forwardRef<HTMLButtonElement | HTMLLabelElement, Props>(
         {...externalEventListeners}
         ref={ref as React.ForwardedRef<HTMLLabelElement>}
         control={muiRadio}
-        className={classes.labelWithRightSpacing}
         classes={{
-          ...rootClasses,
-          label: classes.label,
+          label: 'mt-[0.25em] max-w-[calc(100%_-_1.5em_+_1px)]',
+          root: 'text-[1rem] items-start',
         }}
         style={style}
         label={label}