fix: truncate Text with welcome font (#2614)

* fix: truncate Text with welcome font * v6.2.0-alpha.0
WTTJ · Nov 19, 2024 · 746bc1d · 746bc1d
1 parent 2a71f05
commit 746bc1d
Show file tree

Hide file tree

Showing 17 changed files with 46 additions and 52 deletions.
diff --git a/lerna.json b/lerna.json
@@ -6,7 +6,7 @@
   "ignore": [
     "website"
   ],
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "npmClient": "yarn",
   "useNx": false
 }
diff --git a/packages/Alert/package.json b/packages/Alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/alert",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -50,7 +50,7 @@
     "@welcome-ui/button": "^6.1.1",
     "@welcome-ui/close-button": "^6.1.1",
     "@welcome-ui/system": "^6.1.1",
-    "@welcome-ui/text": "^6.1.1",
+    "@welcome-ui/text": "^6.2.0-alpha.0",
     "@welcome-ui/variant-icon": "^6.1.1"
   },
   "peerDependencies": {

diff --git a/packages/Avatar/package.json b/packages/Avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/avatar",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -49,7 +49,7 @@
     "@welcome-ui/box": "^6.1.1",
     "@welcome-ui/shape": "^6.1.1",
     "@welcome-ui/system": "^6.1.1",
-    "@welcome-ui/text": "^6.1.1"
+    "@welcome-ui/text": "^6.2.0-alpha.0"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

diff --git a/packages/DatePicker/package.json b/packages/DatePicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/date-picker",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@types/react-datepicker": "^4.15.0",
-    "@welcome-ui/date-time-picker-common": "^6.1.1",
+    "@welcome-ui/date-time-picker-common": "^6.2.0-alpha.0",
     "@welcome-ui/system": "^6.1.1",
     "react-datepicker": "^4.16.0"
   },

diff --git a/packages/DateTimePicker/package.json b/packages/DateTimePicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/date-time-picker",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -46,10 +46,10 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "dependencies": {
-    "@welcome-ui/date-picker": "^6.1.1",
-    "@welcome-ui/date-time-picker-common": "^6.1.1",
+    "@welcome-ui/date-picker": "^6.2.0-alpha.0",
+    "@welcome-ui/date-time-picker-common": "^6.2.0-alpha.0",
     "@welcome-ui/system": "^6.1.1",
-    "@welcome-ui/time-picker": "^6.1.1"
+    "@welcome-ui/time-picker": "^6.2.0-alpha.0"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

diff --git a/packages/DateTimePickerCommon/package.json b/packages/DateTimePickerCommon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/date-time-picker-common",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -53,7 +53,7 @@
     "@welcome-ui/field": "^6.1.1",
     "@welcome-ui/icon": "^6.1.1",
     "@welcome-ui/icons": "^6.1.1",
-    "@welcome-ui/select": "^6.1.1",
+    "@welcome-ui/select": "^6.2.0-alpha.0",
     "@welcome-ui/system": "^6.1.1",
     "@welcome-ui/utils": "^6.1.1",
     "date-fns": "^2.30.0",

diff --git a/packages/Drawer/package.json b/packages/Drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/drawer",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -50,7 +50,7 @@
     "@welcome-ui/box": "^6.1.1",
     "@welcome-ui/close-button": "^6.1.1",
     "@welcome-ui/system": "^6.1.1",
-    "@welcome-ui/text": "^6.1.1",
+    "@welcome-ui/text": "^6.2.0-alpha.0",
     "@welcome-ui/utils": "^6.1.1"
   },
   "peerDependencies": {

diff --git a/packages/EmojiPicker/package.json b/packages/EmojiPicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/emoji-picker",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -54,7 +54,7 @@
     "@welcome-ui/popover": "^6.1.1",
     "@welcome-ui/system": "^6.1.1",
     "@welcome-ui/tabs": "^6.1.1",
-    "@welcome-ui/text": "^6.1.1",
+    "@welcome-ui/text": "^6.2.0-alpha.0",
     "@welcome-ui/utils": "^6.1.1",
     "lodash.debounce": "^4.0.8",
     "lodash.escaperegexp": "^4.1.2",

diff --git a/packages/FileDrop/package.json b/packages/FileDrop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/file-drop",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -50,7 +50,7 @@
     "@welcome-ui/files": "^6.1.1",
     "@welcome-ui/icons": "^6.1.1",
     "@welcome-ui/system": "^6.1.1",
-    "@welcome-ui/text": "^6.1.1",
+    "@welcome-ui/text": "^6.2.0-alpha.0",
     "@welcome-ui/utils": "^6.1.1",
     "react-dropzone": "14.3.5"
   },

diff --git a/packages/Modal/package.json b/packages/Modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/modal",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Modal from Ariakit with a really nice theme 👀",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -56,7 +56,7 @@
     "@welcome-ui/shape": "^6.1.1",
     "@welcome-ui/swiper": "^6.1.1",
     "@welcome-ui/system": "^6.1.1",
-    "@welcome-ui/text": "^6.1.1",
+    "@welcome-ui/text": "^6.2.0-alpha.0",
     "@welcome-ui/utils": "^6.1.1"
   },
   "peerDependencies": {

diff --git a/packages/Select/package.json b/packages/Select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/select",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

diff --git a/packages/Slider/package.json b/packages/Slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/slider",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -50,7 +50,7 @@
     "@welcome-ui/hint": "^6.1.1",
     "@welcome-ui/input-text": "^6.1.1",
     "@welcome-ui/system": "^6.1.1",
-    "@welcome-ui/text": "^6.1.1"
+    "@welcome-ui/text": "^6.2.0-alpha.0"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

diff --git a/packages/Text/docs/examples/truncation.tsx b/packages/Text/docs/examples/truncation.tsx
@@ -21,6 +21,14 @@ const Example = () => {
         malesuada.
       </Text>
       <Text lines={3}>Lorem ipsum dolor sit amet</Text>
+      <Text lines={3} variant="h4">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis viverra lectus, vel
+        tristique turpis. Vivamus magna nulla, elementum in feugiat feugiat, egestas eget nibh. Ut
+        ac justo vitae dolor iaculis gravida. In eu nisl lorem. Cras eu mauris et tortor suscipit
+        accumsan. Duis ullamcorper nisl a justo ultricies, eu consequat risus imperdiet. Phasellus
+        at metus cursus, fringilla tortor eu, scelerisque quam. Donec efficitur porta elit ac
+        malesuada.
+      </Text>
     </>
   )
 }

diff --git a/packages/Text/package.json b/packages/Text/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/text",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

diff --git a/packages/Text/src/styles.ts b/packages/Text/src/styles.ts
@@ -11,15 +11,6 @@ const MOBILE_VARIANTS = {
   h5: 'h6',
   h6: 'h6',
 }
-const headingsLineHeightFixer = {
-  h0: 0.825,
-  h1: 0.75,
-  h2: 0.825,
-  h3: 1.075,
-  h4: 1,
-  h5: 0.9,
-  h6: 0.9,
-}
 
 const getBlockHeight = (lines: number) => css`
   /* stylelint-disable-next-line value-no-vendor-prefix */
@@ -33,24 +24,14 @@ const getBlockHeight = (lines: number) => css`
   word-break: ${lines === 1 ? 'break-all' : null};
 `
 
-const fixHeadingsLineHeightStyles = (variant: TextOptions['variant']) => css`
-  & {
-    line-height: ${headingsLineHeightFixer[variant as keyof typeof headingsLineHeightFixer]};
-  }
-  &::before {
-    content: '';
-    vertical-align: text-bottom;
-  }
-`
-
 export const Text = styled.p<TextOptions>(({ lines, theme, variant, withDash }) => {
   const mobileVariant = MOBILE_VARIANTS[variant as keyof typeof MOBILE_VARIANTS]
   const isHeading = variant?.startsWith('h')
-  // only add lineHeight fixer styles when these concditions are fulfilled
+  // only add lineHeight fixer styles when these conditions are fulfilled
   const shouldFixHeadingsLineHeight =
     lines &&
     lines !== Infinity &&
-    Object.keys(headingsLineHeightFixer).includes(variant) &&
+    variant.startsWith('h') &&
     theme.fonts.headings.includes('welcome-font')
 
   return css`
@@ -83,7 +64,12 @@ export const Text = styled.p<TextOptions>(({ lines, theme, variant, withDash })
       ${system};
     }
 
-    ${shouldFixHeadingsLineHeight && fixHeadingsLineHeightStyles(variant)};
+    ${shouldFixHeadingsLineHeight &&
+    css`
+      & {
+        line-height: 1.4;
+      }
+    `}
 
     ${system};
   `

diff --git a/packages/TimePicker/package.json b/packages/TimePicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/time-picker",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@types/react-datepicker": "^4.15.0",
-    "@welcome-ui/date-time-picker-common": "^6.1.1",
+    "@welcome-ui/date-time-picker-common": "^6.2.0-alpha.0",
     "@welcome-ui/system": "^6.1.1",
     "react-datepicker": "^4.16.0"
   },

diff --git a/packages/Toast/package.json b/packages/Toast/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/toast",
-  "version": "6.1.1",
+  "version": "6.2.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -49,12 +49,12 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "dependencies": {
-    "@welcome-ui/alert": "^6.1.1",
+    "@welcome-ui/alert": "^6.2.0-alpha.0",
     "@welcome-ui/box": "^6.1.1",
     "@welcome-ui/button": "^6.1.1",
     "@welcome-ui/close-button": "^6.1.1",
     "@welcome-ui/system": "^6.1.1",
-    "@welcome-ui/text": "^6.1.1",
+    "@welcome-ui/text": "^6.2.0-alpha.0",
     "@welcome-ui/utils": "^6.1.1",
     "react-hot-toast": "^2.4.1"
   },