[FX-5649] Migrate Autocomplete to TailwindCSS (#4491)

.changeset/angry-worms-stare.md

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

packages/base/Autocomplete/package.json

@@ -35,16 +35,15 @@
     "@toptal/picasso-typography": "3.0.0",
     "@toptal/picasso-utils": "1.0.3",
     "ap-style-title-case": "^1.1.2",
-    "classnames": "^2.5.1",
     "debounce": "^1.2.1"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-tailwind": ">=2.5.0",
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
     "@toptal/picasso-provider": "*",
     "react": ">=16.12.0 < 19.0.0"
   },

packages/base/Autocomplete/src/Autocomplete/Autocomplete.tsx

@@ -11,10 +11,6 @@ import type {
   Ref,
 } from 'react'
 import React, { forwardRef, useRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import capitalize from '@material-ui/core/utils/capitalize'
-import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { isForwardRef } from '@toptal/picasso-shared'
 import type { PopperOptions } from 'popper.js'
@@ -32,13 +28,14 @@ import type { InputProps } from '@toptal/picasso-input'
 import { MenuItem } from '@toptal/picasso-menu'
 import type { BaseInputProps, Status } from '@toptal/picasso-outlined-input'
 import { useFieldsLayoutContext } from '@toptal/picasso-form'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import PoweredByGoogle from './PoweredByGoogle'
 import NoOptionsMenuItem from './NoOptionsMenuItem'
 import OtherOptionMenuItem from './OtherOptionMenuItem'
 import type { Item, ChangedOptions } from './types'
 import { useAutocomplete, EMPTY_INPUT_VALUE } from './use-autocomplete'
-import styles from './styles'
+import { rootClassByWidth } from './styles'
 
 export interface Props
   extends BaseProps,
@@ -136,10 +133,6 @@ export interface Props
   highlight?: 'autofill'
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoAutocomplete',
-})
-
 const getItemText = (item: Item | null) =>
   (item && item.text) || EMPTY_INPUT_VALUE
 
@@ -206,8 +199,6 @@ export const Autocomplete = forwardRef<HTMLInputElement, Props>(
         'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
     })
 
-    const classes = useStyles()
-
     const getKey = (item: Item) => {
       if (customGetKey) {
         return customGetKey(item)
@@ -256,8 +247,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, Props>(
         data-testid={testIds?.scrollMenu}
         selectedIndex={highlightedIndex}
         fixedFooter={
-          optionsLength > 0 &&
-          poweredByGoogle && <PoweredByGoogle classes={classes} />
+          optionsLength > 0 && poweredByGoogle && <PoweredByGoogle />
         }
       >
         {options?.map((option, index) => (
@@ -310,13 +300,10 @@ export const Autocomplete = forwardRef<HTMLInputElement, Props>(
 
     return (
       <div
-        className={cx(
-          classes.root,
-          className,
-          classes[`root${capitalize(width)}` as 'rootAuto'],
-          {
-            [classes.horizontalLayout]: layout === 'horizontal',
-          }
+        className={twMerge(
+          'relative',
+          layout === 'horizontal' ? 'w-full' : rootClassByWidth[width],
+          className
         )}
         style={style}
         role='combobox'

packages/base/Autocomplete/src/Autocomplete/PoweredByGoogle.tsx

@@ -1,13 +1,16 @@
-import type { JssProps } from '@toptal/picasso-shared'
 import React from 'react'
 import { Container } from '@toptal/picasso-container'
 
 /**
  * "You may not resize or modify these logos in any way." by the Google Policies
  * https://developers.google.com/places/web-service/policies
  */
-const PoweredByGoogle = ({ classes }: JssProps) => (
-  <Container flex justifyContent='flex-end' className={classes.poweredByGoogle}>
+const PoweredByGoogle = () => (
+  <Container
+    flex
+    justifyContent='flex-end'
+    className='py-3 px-4 border-0 border-t border-solid border-t-gray-300'
+  >
     <img
       src='data:image/png;base64,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'
       alt='Powered by Google'

packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap

@@ -232,7 +232,7 @@ exports[`Autocomplete static behavior renders 1`] = `
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
-      class="PicassoAutocomplete-root PicassoAutocomplete-rootAuto"
+      class="relative w-[18.75rem]"
       role="combobox"
     >
       <div

packages/base/Autocomplete/src/Autocomplete/styles.ts

@@ -1,24 +1,5 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ sizes: { input, borderWidth }, palette }: Theme) =>
-  createStyles({
-    root: {
-      position: 'relative',
-      width: input.width,
-    },
-    rootFull: {
-      width: '100%',
-    },
-    rootShrink: {
-      width: 'auto',
-    },
-    rootAuto: {},
-    poweredByGoogle: {
-      padding: '0.75rem 1rem',
-      borderTop: `${borderWidth} solid ${palette.grey.light}`,
-    },
-    horizontalLayout: {
-      width: '100%',
-    },
-  })
+export const rootClassByWidth: Record<'full' | 'shrink' | 'auto', string> = {
+  full: 'w-full',
+  shrink: 'w-auto',
+  auto: 'w-[18.75rem]',
+}

packages/base/Autocomplete/tsconfig.json

@@ -5,6 +5,7 @@
   "references": [
     { "path": "../../picasso-provider" },
     { "path": "../../picasso-tailwind" },
+    { "path": "../../picasso-tailwind-merge" },
     { "path": "../../shared" },
     { "path": "../Container" },
     { "path": "../Form" },

packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap

@@ -8,7 +8,7 @@ exports[`PageAutocomplete renders 1`] = `
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
-      class="PicassoAutocomplete-root PicassoAutocomplete-rootAuto"
+      class="relative w-[18.75rem]"
       role="combobox"
     >
       <div

packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap

@@ -8,7 +8,7 @@ exports[`TagSelector disabled render 1`] = `
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
-      class="PicassoAutocomplete-root PicassoAutocomplete-rootAuto"
+      class="relative w-[18.75rem]"
       role="combobox"
     >
       <div
@@ -76,7 +76,7 @@ exports[`TagSelector preselected value 1`] = `
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="PicassoAutocomplete-root PicassoAutocomplete-rootAuto"
+        class="relative w-[18.75rem]"
         role="combobox"
       >
         <div
@@ -142,7 +142,7 @@ exports[`TagSelector renders 1`] = `
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
-      class="PicassoAutocomplete-root PicassoAutocomplete-rootAuto"
+      class="relative w-[18.75rem]"
       role="combobox"
     >
       <div