[patch] support text-overflow: ellipsis in toniq-heading

Toniq-Labs · Jan 28, 2024 · 0908528 · 0908528
1 parent 55b2bf7
commit 0908528
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.2.0",
+    "version": "16.2.1",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.2.0",
+    "version": "16.2.1",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

diff --git a/packages/design-system/src/elements/toniq-heading/toniq-heading.element.book.ts b/packages/design-system/src/elements/toniq-heading/toniq-heading.element.book.ts
@@ -38,5 +38,29 @@ export const toniqHeadingBookPage = defineBookPage({
                 `;
             },
         });
+        defineExample({
+            title: 'can do ellipsis',
+            styles: css`
+                ${ToniqHeading}:first-of-type {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                :host {
+                    width: 300px;
+                }
+            `,
+            renderCallback() {
+                return html`
+                    <${ToniqHeading.assign({level: ToniqHeadingLevel.H3})}>
+                        title longer than bounds
+                    </${ToniqHeading}>
+                    <${ToniqHeading.assign({level: ToniqHeadingLevel.H3})}>
+                        title longer than bounds
+                    </${ToniqHeading}>
+                `;
+            },
+        });
     },
 });
diff --git a/packages/design-system/src/elements/toniq-heading/toniq-heading.element.ts b/packages/design-system/src/elements/toniq-heading/toniq-heading.element.ts
@@ -39,6 +39,8 @@ export const ToniqHeading = defineToniqElement<{level: ToniqHeadingLevel}>()({
         h4 {
             ${noNativeSpacing};
             font: inherit;
+            overflow: inherit;
+            text-overflow: inherit;
         }
     `,
     renderCallback({inputs}) {

diff --git a/packages/native-elements-test/package.json b/packages/native-elements-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.2.0",
+    "version": "16.2.1",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.2.0",
+    "version": "16.2.1",
     "private": true,
     "scripts": {
         "compile": "virmator compile",