[FX-5660] Migrate TypographyOverflown to TailwindCSS (#4520)

toptal · Sep 4, 2024 · 2903881 · 2903881
1 parent 3d63d3d
commit 2903881
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 53 deletions.
diff --git a/.changeset/slimy-rings-remain.md b/.changeset/slimy-rings-remain.md
@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-typography-overflow': major
+'@toptal/picasso': patch
+---
+
+### TypographyOverflow
+
+- migrate to TailwindCSS, `material-ui@4` is no longer required for this package
+- require `@toptal/picasso-tailwind` and `@toptal/picasso-tailwind-merge` to be installed
diff --git a/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
@@ -32,7 +32,7 @@ exports[`FileList renders 1`] = `
               </svg>
             </div>
             <p
-              class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis overflow-hidden TypographyOverflow-wrapper !block !whitespace-nowrap FileListItem-label"
+              class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
             >
               user-profile-picture.png
             </p>

diff --git a/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
@@ -29,7 +29,7 @@ exports[`FileListItem renders 1`] = `
             </svg>
           </div>
           <p
-            class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis overflow-hidden TypographyOverflow-wrapper !block !whitespace-nowrap FileListItem-label"
+            class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
           >
             user-profile-picture.png
           </p>

diff --git a/packages/base/Step/src/Step/Step.tsx b/packages/base/Step/src/Step/Step.tsx
@@ -73,9 +73,7 @@ export const Step = (props: Props) => {
       {expand ? (
         withOverflowEllipsis ? (
           <span className='grid'>
-            <TypographyOverflow className='flex'>
-              {labelElement}
-            </TypographyOverflow>
+            <TypographyOverflow>{labelElement}</TypographyOverflow>
           </span>
         ) : (
           labelElement

diff --git a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
@@ -162,7 +162,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
               class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
-                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
+                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
               >
                 Tab 1
               </div>
@@ -180,7 +180,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
               class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
-                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
+                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
               >
                 Tab 2
               </div>

diff --git a/packages/base/TypographyOverflow/package.json b/packages/base/TypographyOverflow/package.json
@@ -24,20 +24,20 @@
   "dependencies": {
     "@toptal/picasso-tooltip": "1.1.5",
     "@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",
-    "tailwindcss": ">=3",
+    "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "devDependencies": {
     "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-tailwind-merge": "2.0.0",
     "styled-components": "^6.1.1"
   },
   "exports": {

diff --git a/packages/base/TypographyOverflow/src/TypographyOverflow/TypographyOverflow.tsx b/packages/base/TypographyOverflow/src/TypographyOverflow/TypographyOverflow.tsx
@@ -1,16 +1,12 @@
-import cx from 'classnames'
 import type { ReactNode } from 'react'
 import React, { useCallback, useState } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Tooltip } from '@toptal/picasso-tooltip'
 import { Typography } from '@toptal/picasso-typography'
 import { isOverflown } from '@toptal/picasso-utils'
 import type { TypographyProps } from '@toptal/picasso-typography'
 import type { DelayType, PlacementType } from '@toptal/picasso-tooltip'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends BaseProps, TypographyProps {
   /** A typography which can possibly overflow */
@@ -27,10 +23,6 @@ export interface Props extends BaseProps, TypographyProps {
   placement?: PlacementType
 }
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'TypographyOverflow',
-})
-
 export const TypographyOverflow = (props: Props) => {
   const {
     children,
@@ -46,7 +38,6 @@ export const TypographyOverflow = (props: Props) => {
     ...rest
   } = props
 
-  const classes = useStyles(props)
   const [isTooltipActive, setIsTooltipActive] = useState(false)
   const [isTooltipOpened, setIsTooltipOpened] = useState(false)
   const [isTooltipAnimating, setIsTooltipAnimating] = useState(false)
@@ -115,9 +106,12 @@ export const TypographyOverflow = (props: Props) => {
     <Typography
       {...rest}
       style={extendedStyle}
-      className={cx(
-        classes.wrapper,
-        isMultiline ? classes.multiLine : '!block !whitespace-nowrap',
+      noWrap={!isMultiline}
+      className={twMerge(
+        '[-webkit-box-orient:vertical] overflow-hidden text-ellipsis pr-[0.9px]',
+        isMultiline
+          ? '[display:-webkit-box] break-words ![white-space:initial]'
+          : 'block',
         className
       )}
       onClick={handleClick}
@@ -149,8 +143,4 @@ export const TypographyOverflow = (props: Props) => {
 
 TypographyOverflow.displayName = 'TypographyOverflow'
 
-TypographyOverflow.defaultProps = {
-  noWrap: true,
-}
-
 export default TypographyOverflow
diff --git a/packages/base/TypographyOverflow/src/TypographyOverflow/styles.ts b/packages/base/TypographyOverflow/src/TypographyOverflow/styles.ts
diff --git a/packages/base/TypographyOverflow/tsconfig.json b/packages/base/TypographyOverflow/tsconfig.json
@@ -3,6 +3,8 @@
   "compilerOptions": { "outDir": "dist-package" },
   "include": ["src"],
   "references": [
+    { "path": "../../picasso-tailwind" },
+    { "path": "../../picasso-tailwind-merge" },
     { "path": "../Tooltip" },
     { "path": "../Typography" },
     { "path": "../Utils" }