[FX-5658] Migrate Timeline to TailwindCSS (#4521)

.changeset/purple-donuts-attack.md

@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-timeline': major
+'@toptal/picasso': patch
+---
+
+### Timeline
+
+- migrate to TailwindCSS, material-ui@4 is no longer required for this package
+- make @toptal/picasso-tailwind-merge a peer dependency

packages/base/Timeline/package.json

@@ -25,23 +25,23 @@
     "@toptal/picasso-container": "3.0.0",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-typography": "4.0.0",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-test-utils": "1.1.1"
+    "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-tailwind-merge": "2.0.0"
   },
   "files": [
     "dist-package/**",

packages/base/Timeline/src/Timeline/Timeline.tsx

@@ -1,29 +1,21 @@
 import React, { forwardRef } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import { Container } from '@toptal/picasso-container'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { TimelineRow } from '../TimelineRow'
-import styles from './styles'
 
 export type Props = BaseProps & {
   /** Timeline rows */
   children: React.ReactNode
 }
 
-const useStyles = makeStyles(styles, {
-  name: 'PicassoTimeline',
-})
-
 export const Timeline = forwardRef<HTMLDivElement, Props>(function Timeline(
   { className, children },
   ref
 ) {
-  const classes = useStyles()
-
   return (
-    <Container ref={ref} className={cx(classes.root, className)}>
+    <Container ref={ref} className={twMerge('table h-fit w-fit', className)}>
       {children}
     </Container>
   )