#445 replace heading balancing with native css text wrap (#451)

getflip · Nov 13, 2023 · 8d4ce24 · 8d4ce24
1 parent 9da5880
commit 8d4ce24
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 30 deletions.
diff --git a/.changeset/thick-coats-speak.md b/.changeset/thick-coats-speak.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": patch
+"@getflip/swirl-components-angular": patch
+"@getflip/swirl-components-react": patch
+---
+
+Replace JS text balancing of swirl-heading with native css text wrap
diff --git a/packages/swirl-components/package.json b/packages/swirl-components/package.json
@@ -46,7 +46,6 @@
     "@getflip/swirl-tokens": "^2.4.0",
     "@stencil/core": "^3.3.1",
     "a11y-dialog": "^7.5.2",
-    "balance-text": "^3.3.1",
     "body-scroll-lock": "^4.0.0-beta.0",
     "classnames": "^2.3.1",
     "color2k": "^2.0.0",

diff --git a/packages/swirl-components/src/components/swirl-heading/swirl-heading.css b/packages/swirl-components/src/components/swirl-heading/swirl-heading.css
@@ -17,6 +17,10 @@
   text-align: start;
 }
 
+.heading--balanced {
+  text-wrap: balance;
+}
+
 .heading--align-start {
   text-align: start;
 }

diff --git a/packages/swirl-components/src/components/swirl-heading/swirl-heading.spec.tsx b/packages/swirl-components/src/components/swirl-heading/swirl-heading.spec.tsx
@@ -12,7 +12,7 @@ describe("swirl-heading", () => {
     expect(page.root).toEqualHtml(`
       <swirl-heading heading-id="id" level="3">
         Heading
-        <h3 class="heading heading--align-start heading--level-3" id="id"></h3>
+        <h3 class="heading heading--align-start heading--balanced heading--level-3" id="id"></h3>
       </swirl-heading>
     `);
   });
@@ -26,7 +26,7 @@ describe("swirl-heading", () => {
     expect(page.root).toEqualHtml(`
       <swirl-heading as="h6" heading-id="id" level="3">
         Heading
-        <h6 class="heading heading--align-start heading--level-3" id="id"></h6>
+        <h6 class="heading heading--align-start heading--balanced heading--level-3" id="id"></h6>
       </swirl-heading>
     `);
   });

diff --git a/packages/swirl-components/src/components/swirl-heading/swirl-heading.tsx b/packages/swirl-components/src/components/swirl-heading/swirl-heading.tsx
@@ -1,6 +1,5 @@
-import { Component, h, Host, Listen, Prop } from "@stencil/core";
+import { Component, h, Host, Prop } from "@stencil/core";
 import classnames from "classnames";
-import balanceText from "balance-text";
 
 export type SwirlHeadingAlign = "start" | "center" | "end";
 
@@ -33,25 +32,6 @@ export class SwirlHeading {
   @Prop() text!: string;
   @Prop() truncate?: boolean;
 
-  private headingEl: HTMLElement;
-
-  componentDidRender() {
-    this.rebalance();
-  }
-
-  @Listen("resize", { target: "window" })
-  onWindowResize() {
-    this.rebalance();
-  }
-
-  private rebalance() {
-    if (!this.balance || !Boolean(this.headingEl) || Boolean(this.lines)) {
-      return;
-    }
-
-    balanceText(this.headingEl);
-  }
-
   render() {
     const Tag = this.as || `h${this.level}`;
 
@@ -70,18 +50,14 @@ export class SwirlHeading {
       `heading--align-${this.align}`,
       `heading--level-${this.level}`,
       {
+        "heading--balanced": this.balance,
         "heading--truncate": this.truncate,
       }
     );
 
     return (
       <Host>
-        <Tag
-          class={className}
-          id={this.headingId}
-          ref={(el) => (this.headingEl = el)}
-          style={styles}
-        >
+        <Tag class={className} id={this.headingId} style={styles}>
           {this.text}
         </Tag>
       </Host>