[FX-5185] Use twMerge in Typography

toptal · May 24, 2024 · e3fdddf · e3fdddf
1 parent 0dd90e9
commit e3fdddf
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 6 deletions.
diff --git a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
@@ -104,7 +104,7 @@ exports[`Tag renders with adornment 1`] = `
           foobar
         </span>
         <span
-          class="m-0 text-xxs text-inherit font-regular inline-flex items-center gap-[5px] text-gray group-aria-disabled:text-gray"
+          class="m-0 text-xxs font-regular inline-flex items-center gap-[5px] text-gray group-aria-disabled:text-gray"
         >
           <svg
             class="PicassoSvgLink16-root"
@@ -150,7 +150,7 @@ exports[`Tag renders with connection and icon 1`] = `
           foobar
         </span>
         <span
-          class="m-0 text-xxs text-inherit font-regular inline-flex items-center gap-[5px] text-gray group-aria-disabled:text-gray"
+          class="m-0 text-xxs font-regular inline-flex items-center gap-[5px] text-gray group-aria-disabled:text-gray"
         >
           <svg
             class="PicassoSvgLink16-root"

diff --git a/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap b/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
@@ -9,7 +9,7 @@ exports[`TagRectangular renders rectangular Tag 1`] = `
       class="text-lg transition-none rounded-sm font-semibold h-4 inline-flex content-center justify-center align-middle bg-gray"
     >
       <p
-        class="m-0 text-2xs text-graphite font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden mx-1 w-max text-graphite"
+        class="m-0 text-2xs font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden mx-1 w-max text-graphite"
       >
         Reactangular Tag
       </p>

diff --git a/packages/base/Typography/package.json b/packages/base/Typography/package.json
@@ -33,6 +33,7 @@
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
+    "@toptal/picasso-tailwind-merge": "^1.0.0",
     "tailwindcss": ">=3",
     "react": ">=16.12.0 < 19.0.0"
   },

diff --git a/packages/base/Typography/src/Typography/Typography.tsx b/packages/base/Typography/src/Typography/Typography.tsx
@@ -1,13 +1,13 @@
 import type { ReactNode, HTMLAttributes, ElementType } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
 import type {
   StandardProps,
   ColorType,
   TextLabelProps,
   SizeType,
 } from '@toptal/picasso-shared'
 import { toTitleCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import variantToElement from './utils/variant-to-element'
 
@@ -191,7 +191,7 @@ export const Typography = forwardRef<HTMLElement, Props>(function Typography(
   return (
     <Component
       ref={ref}
-      className={cx(
+      className={twMerge(
         'm-0',
         VARIANT_SIZE[variant][size],
         getColor(),

diff --git a/packages/base/Typography/tsconfig.json b/packages/base/Typography/tsconfig.json
@@ -2,5 +2,9 @@
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": { "outDir": "dist-package" },
   "include": ["src"],
-  "references": [{ "path": "../../picasso-provider" }, { "path": "../Utils" }]
+  "references": [
+    { "path": "../../picasso-provider" },
+    { "path": "../../picasso-tailwind-merge" },
+    { "path": "../Utils" }
+  ]
 }