From e551bb56fda72940e4a12aa2bebc2d5c3345b2ec Mon Sep 17 00:00:00 2001
From: Aleksandr Shumilov <alexander.shumilov@toptal.com>
Date: Mon, 2 Sep 2024 08:53:40 +0100
Subject: [PATCH] Migrate ShowMore to Tailwind (#4517)

---
 .changeset/red-keys-smile.md                  |  9 +++++
 packages/base/ShowMore/package.json           |  7 ++--
 .../base/ShowMore/src/ShowMore/ShowMore.tsx   | 19 ++++------
 .../src/ShowMore/__snapshots__/test.tsx.snap  | 36 +++++++++----------
 packages/base/ShowMore/src/ShowMore/styles.ts | 24 -------------
 packages/base/ShowMore/tsconfig.json          |  2 ++
 6 files changed, 40 insertions(+), 57 deletions(-)
 create mode 100644 .changeset/red-keys-smile.md
 delete mode 100644 packages/base/ShowMore/src/ShowMore/styles.ts

diff --git a/.changeset/red-keys-smile.md b/.changeset/red-keys-smile.md
new file mode 100644
index 0000000000..b2df6ae572
--- /dev/null
+++ b/.changeset/red-keys-smile.md
@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-show-more': major
+'@toptal/picasso': patch
+---
+
+### ShowMore
+
+- migrate to TailwindCSS, `material-ui@4` is no longer required for this package
+- update peer dependencies
diff --git a/packages/base/ShowMore/package.json b/packages/base/ShowMore/package.json
index c055006bb4..2c7c6511b8 100644
--- a/packages/base/ShowMore/package.json
+++ b/packages/base/ShowMore/package.json
@@ -25,7 +25,6 @@
     "@toptal/picasso-button": "4.0.1",
     "@toptal/picasso-icons": "1.6.0",
     "@toptal/picasso-typography": "4.0.0",
-    "classnames": "^2.5.1",
     "react-truncate": "^2.4.0"
   },
   "sideEffects": [
@@ -33,14 +32,16 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@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-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/ShowMore/src/ShowMore/ShowMore.tsx b/packages/base/ShowMore/src/ShowMore/ShowMore.tsx
index e5f94dd981..569b81d413 100644
--- a/packages/base/ShowMore/src/ShowMore/ShowMore.tsx
+++ b/packages/base/ShowMore/src/ShowMore/ShowMore.tsx
@@ -1,15 +1,12 @@
 import type { ReactNode } from 'react'
 import React, { forwardRef, useMemo, useCallback, useState } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 import Truncate from 'react-truncate'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { ChevronRight16 } from '@toptal/picasso-icons'
 import { Typography } from '@toptal/picasso-typography'
 import { ButtonAction } from '@toptal/picasso-button'
 
-import styles from './styles'
 import { replaceLineBreaksWithTags } from './utils'
 
 export interface Props extends BaseProps {
@@ -33,8 +30,6 @@ export interface Props extends BaseProps {
   }
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoShowMore' })
-
 export const ShowMore = forwardRef<HTMLSpanElement, Props>(function ShowMore(
   props,
   ref
@@ -52,7 +47,6 @@ export const ShowMore = forwardRef<HTMLSpanElement, Props>(function ShowMore(
     testIds,
     ...rest
   } = props
-  const classes = useStyles()
   const [shownMore, setShownMore] = useState(initialExpanded)
   const [needsTruncation, setNeedsTruncation] = useState(true)
   const content = useMemo(
@@ -97,13 +91,14 @@ export const ShowMore = forwardRef<HTMLSpanElement, Props>(function ShowMore(
             setShownMore(nextState)
             onToggle(nextState)
           }}
-          className={classes.toggleText}
+          className='inline-flex items-center transition-none'
           icon={
-            <div className={classes.iconWrapper}>
+            <div className='rotate-90 text-lg/none'>
               <ChevronRight16
-                className={cx(classes.icon, {
-                  [classes.expandedIcon]: shownMore,
-                })}
+                className={twJoin(
+                  'text-graphite-700',
+                  shownMore && 'rotate-180'
+                )}
               />
             </div>
           }
diff --git a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
index e6b1fa004c..a5f31793ca 100644
--- a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
+++ b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
@@ -24,7 +24,7 @@ exports[`ShowMore renders 1`] = `
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -35,10 +35,10 @@ exports[`ShowMore renders 1`] = `
       >
         Show more
         <div
-          class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
+          class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
         >
           <svg
-            class="PicassoSvgChevronRight16-root PicassoShowMore-icon"
+            class="PicassoSvgChevronRight16-root text-graphite"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -77,7 +77,7 @@ exports[`ShowMore when custom lessText text is specified should render with cust
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -88,10 +88,10 @@ exports[`ShowMore when custom lessText text is specified should render with cust
       >
         Show more
         <div
-          class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
+          class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
         >
           <svg
-            class="PicassoSvgChevronRight16-root PicassoShowMore-icon"
+            class="PicassoSvgChevronRight16-root text-graphite"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -130,7 +130,7 @@ exports[`ShowMore when custom showMore text is specified should render with cust
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -141,10 +141,10 @@ exports[`ShowMore when custom showMore text is specified should render with cust
       >
         Display everything
         <div
-          class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
+          class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
         >
           <svg
-            class="PicassoSvgChevronRight16-root PicassoShowMore-icon"
+            class="PicassoSvgChevronRight16-root text-graphite"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -197,7 +197,7 @@ exports[`ShowMore when initialExpanded prop is true should render expanded versi
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -208,10 +208,10 @@ exports[`ShowMore when initialExpanded prop is true should render expanded versi
       >
         Show less
         <div
-          class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
+          class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
         >
           <svg
-            class="PicassoSvgChevronRight16-root PicassoShowMore-icon PicassoShowMore-expandedIcon"
+            class="PicassoSvgChevronRight16-root text-graphite rotate-180"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -250,7 +250,7 @@ exports[`ShowMore when initialExpanded prop is true when show less link is click
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -261,10 +261,10 @@ exports[`ShowMore when initialExpanded prop is true when show less link is click
       >
         Show more
         <div
-          class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
+          class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
         >
           <svg
-            class="PicassoSvgChevronRight16-root PicassoShowMore-icon"
+            class="PicassoSvgChevronRight16-root text-graphite"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -291,7 +291,7 @@ exports[`ShowMore when show more link is clicked should render expanded version
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -302,10 +302,10 @@ exports[`ShowMore when show more link is clicked should render expanded version
       >
         Show less
         <div
-          class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
+          class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
         >
           <svg
-            class="PicassoSvgChevronRight16-root PicassoShowMore-icon PicassoShowMore-expandedIcon"
+            class="PicassoSvgChevronRight16-root text-graphite rotate-180"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
diff --git a/packages/base/ShowMore/src/ShowMore/styles.ts b/packages/base/ShowMore/src/ShowMore/styles.ts
deleted file mode 100644
index 066cd808bf..0000000000
--- a/packages/base/ShowMore/src/ShowMore/styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    toggleText: {
-      display: 'flex',
-      alignItems: 'center',
-      marginTop: '0.5rem',
-      transition: 'none',
-      fontWeight: 'normal',
-    },
-    iconWrapper: {
-      fontSize: '1rem !important',
-      lineHeight: 0,
-      transform: 'rotate(90deg)',
-    },
-    icon: {
-      color: palette.grey.dark,
-    },
-    expandedIcon: {
-      transform: 'rotate(180deg)',
-    },
-  })
diff --git a/packages/base/ShowMore/tsconfig.json b/packages/base/ShowMore/tsconfig.json
index 4e398ace07..2a1a1d04fa 100644
--- a/packages/base/ShowMore/tsconfig.json
+++ b/packages/base/ShowMore/tsconfig.json
@@ -3,6 +3,8 @@
   "compilerOptions": { "outDir": "dist-package" },
   "include": ["src"],
   "references": [
+    { "path": "../../picasso-tailwind" },
+    { "path": "../../picasso-tailwind-merge" },
     { "path": "../Button" },
     { "path": "../Icons" },
     { "path": "../Typography" }