Migrate ShowMore to Tailwind (#4517)

toptal · Sep 2, 2024 · e551bb5 · e551bb5
1 parent dab9bf8
commit e551bb5
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 57 deletions.
diff --git a/.changeset/red-keys-smile.md 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
@@ -25,22 +25,23 @@
     "@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": [
     "**/styles.ts",
     "**/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
@@ -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
@@ -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
diff --git 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" }