[FX-5543] Migrate List and ListItem to TailwindCSS (#4497)

toptal · Aug 24, 2024 · 1f9def0 · 1f9def0
1 parent 4068e86
commit 1f9def0
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 144 deletions.
diff --git a/.changeset/light-eels-deny.md b/.changeset/light-eels-deny.md
@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-list': major
+'@toptal/picasso': patch
+---
+
+- migrate `List` and `ListItem` to TailwindCSS
+- add `@toptal/picasso-tailwind-merge` as a peer dependency
+- remove `material-ui/core` from peer dependencies
diff --git a/packages/base/List/package.json b/packages/base/List/package.json
@@ -34,17 +34,18 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
     "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
     "@toptal/picasso-provider": "5.0.0",
-    "@toptal/picasso-test-utils": "1.1.1"
+    "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-tailwind-merge": "2.0.0"
   },
   "files": [
     "dist-package/**",

diff --git a/packages/base/List/src/List/List.tsx b/packages/base/List/src/List/List.tsx
@@ -1,27 +1,12 @@
-import type { ReactNode } from 'react'
-import React from 'react'
-import type { BaseProps } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
+import React, { useMemo } from 'react'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { ListItem } from '../ListItem'
 import type { Props as ListItemProps } from '../ListItem'
-import styles from './styles'
-import type { ListItemType } from './context'
 import { ListContextProvider, useListContext } from './context'
-
-export type Props = BaseProps & {
-  children: ReactNode
-  /** The variant to use */
-  variant: 'ordered' | 'unordered'
-  /** Specifies the start value of the first list item in an ordered list */
-  start?: number
-  /** Style for items bullet/ordinal, can be overridden on a item level */
-  styleType?: ListItemType
-}
-
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoList' })
+import { listStyleTypeClass, getPaddingClasses } from './styles'
+import type { ListItemType } from './context'
+import type { Props } from './types'
 
 const Tags = {
   unordered: 'ul',
@@ -56,7 +41,6 @@ const getDefaultType = (
 }
 
 export const List = (props: Props) => {
-  const classes = useStyles()
   const {
     variant,
     children,
@@ -83,18 +67,21 @@ export const List = (props: Props) => {
 
   const ListTag = Tags[variant]
 
+  const classes = useMemo(
+    () =>
+      twMerge(
+        'text-[0.875rem] text-black mt-1',
+        listStyleTypeClass[styleType ?? getDefaultType(variant, level) ?? ''],
+        getPaddingClasses({ variant, level }),
+        className
+      ),
+    [variant, styleType, level, className]
+  )
+
   return (
     <ListTag
       start={start !== 1 ? start : undefined}
-      className={cx(
-        classes.root,
-        classes[variant],
-        classes[styleType ?? getDefaultType(variant, level) ?? ''],
-        {
-          [classes.firstLevel]: level === 0,
-        },
-        className
-      )}
+      className={classes}
       data-testid={testId}
     >
       <ListContextProvider styleType={styleType}>

diff --git a/packages/base/List/src/List/__snapshots__/test.tsx.snap b/packages/base/List/src/List/__snapshots__/test.tsx.snap
@@ -6,14 +6,14 @@ exports[`List renders ordered list 1`] = `
     class="Picasso-root"
   >
     <ol
-      class="PicassoList-root PicassoList-numeral PicassoList-firstLevel"
+      class="text-[0.875rem] text-black mt-1 list-decimal pl-4"
       data-testid="ordered-list"
     >
       <li
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -26,7 +26,7 @@ exports[`List renders ordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -39,7 +39,7 @@ exports[`List renders ordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -52,7 +52,7 @@ exports[`List renders ordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -65,7 +65,7 @@ exports[`List renders ordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -85,14 +85,14 @@ exports[`List renders unordered list 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="PicassoList-root PicassoList-unordered PicassoList-disc PicassoList-firstLevel"
+      class="text-[0.875rem] text-black mt-1 list-disc pl-4"
       data-testid="unordered-list"
     >
       <li
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -105,7 +105,7 @@ exports[`List renders unordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -118,7 +118,7 @@ exports[`List renders unordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -131,7 +131,7 @@ exports[`List renders unordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -144,7 +144,7 @@ exports[`List renders unordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"

diff --git a/packages/base/List/src/List/index.ts b/packages/base/List/src/List/index.ts
@@ -1,6 +1,6 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared'
 
-import type { Props } from './List'
+import type { Props } from './types'
 
 export { default as List } from './List'
 export type ListProps = OmitInternalProps<Props>

diff --git a/packages/base/List/src/List/styles.ts b/packages/base/List/src/List/styles.ts
@@ -1,23 +1,20 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { rem } from '@toptal/picasso-shared'
-import { palette } from '@toptal/picasso-utils'
+import type { ListItemType } from './context'
+import type { Variant } from './types'
 
-import { listStyleTypes } from '../ListItem/styles'
+export const listStyleTypeClass: Record<ListItemType, string> = {
+  circle: 'list-[circle]',
+  disc: 'list-disc',
+  checkmark: 'list-none',
+  arrow: 'list-none',
+  numeral: 'list-decimal',
+  alpha: 'list-[lower-alpha]',
+  roman: 'list-[lower-roman]',
+}
 
-export default ({ typography }: Theme) =>
-  createStyles({
-    root: {
-      fontSize: typography.fontSizes.medium,
-      color: palette.common.black,
-      marginTop: rem(4),
-      paddingLeft: rem(16),
-    },
-    unordered: {
-      paddingLeft: rem(24),
-    },
-    firstLevel: {
-      paddingLeft: rem(16),
-    },
-    ...listStyleTypes,
-  })
+export const getPaddingClasses = ({
+  variant,
+  level,
+}: {
+  variant: Variant
+  level: number
+}) => (level === 0 || variant !== 'unordered' ? 'pl-4' : 'pl-6')
diff --git a/packages/base/List/src/List/types.ts b/packages/base/List/src/List/types.ts
@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+
+import type { ListItemType } from './context'
+
+export type Variant = 'ordered' | 'unordered'
+
+export type Props = BaseProps & {
+  children: ReactNode
+  /** The variant to use */
+  variant: Variant
+  /** Specifies the start value of the first list item in an ordered list */
+  start?: number
+  /** Style for items bullet/ordinal, can be overridden on a item level */
+  styleType?: ListItemType
+}
diff --git a/packages/base/List/src/ListItem/ListItem.tsx b/packages/base/List/src/ListItem/ListItem.tsx
@@ -1,22 +1,32 @@
-import type { ReactNode } from 'react'
 import React from 'react'
+import type { ReactNode } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 import { usePropDeprecationWarning } from '@toptal/picasso-utils'
 import { ArrowLongRight16, Check16 } from '@toptal/picasso-icons'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import type { ListItemType } from '../List'
 import { useListContext } from '../List'
+import { listStyleTypeClass } from '../List/styles'
+import type { Variant } from '../List/types'
+
+const resolveIcon = (type: ListItemType | undefined) => {
+  switch (type) {
+    case 'checkmark':
+      return <Check16 />
+    case 'arrow':
+      return <ArrowLongRight16 />
+    default:
+      return undefined
+  }
+}
 
 export type Props = BaseProps & {
   children: ReactNode
-  variant?: 'ordered' | 'unordered'
   index?: number
+  variant?: Variant
   /**
    * @deprecated [FX-4717] if you need a custom icon that is not available on the prop `type`, please contact the BASE team to add it to the theme
    **/
@@ -26,25 +36,10 @@ export type Props = BaseProps & {
   isLastElement?: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoListItem' })
-
-const resolveIcon = (type: ListItemType | undefined) => {
-  switch (type) {
-    case 'checkmark':
-      return <Check16 />
-    case 'arrow':
-      return <ArrowLongRight16 />
-    default:
-      return undefined
-  }
-}
-
 export const ListItem = (props: Props) => {
-  const classes = useStyles()
   const { styleType: parentType } = useListContext()
   const {
     children,
-    variant = 'unordered',
     type,
     icon = resolveIcon(type ?? parentType),
     'data-testid': testId,
@@ -59,13 +54,13 @@ export const ListItem = (props: Props) => {
 
   return (
     <li
-      className={cx(classes.root, classes[variant], {
-        [classes.hasIcon]: icon != null,
-        [classes[type ?? '']]: type != null,
-      })}
+      className={twJoin(
+        icon && 'list-none -ml-[1.375rem]',
+        type && listStyleTypeClass[type]
+      )}
       data-testid={testId}
     >
-      <Container flex direction='row' className={cx(classes.listContainer)}>
+      <Container flex direction='row' className='mt-1'>
         {icon && (
           <Container inline justifyContent='flex-end'>
             {icon}