feat(pie-button): DSW-000 styling allowing for text-overflow in buttons

justeattakeaway · Jan 15, 2024 · 85563c8 · 85563c8
1 parent 4b692c5
commit 85563c8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/.changeset/clever-trees-sort.md b/.changeset/clever-trees-sort.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-button": minor
+---
+
+[Changed] - Styling allowing for text-overflow in buttons
diff --git a/packages/components/pie-button/src/button.scss b/packages/components/pie-button/src/button.scss
@@ -32,12 +32,6 @@ $breakpoint-wide: 768px;
     // currently this sets the primary button styles
     --btn-bg-color: var(--dt-color-interactive-brand);
     --btn-text-color: var(--dt-color-content-interactive-primary);
-
-    // Heights for the different button sizes
-    --btn-height--xsmall: 32px;
-    --btn-height--small: 40px;
-    --btn-height--medium: 48px;
-    --btn-height--large: 56px;
     --icon-display-override: block;
 
     /**
@@ -46,31 +40,26 @@ $breakpoint-wide: 768px;
     */
     @mixin button-size($size) {
         @if $size == 'xsmall' {
-            --btn-height: var(--btn-height--xsmall);
             --btn-padding: 6px var(--dt-spacing-b);
             --btn-font-size: #{p.font-size(--dt-font-size-14)};
             --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
             --icon-size-override: 16px;
         } @else if $size == 'small-expressive' {
-            --btn-height: var(--btn-height--small);
             --btn-padding: 6px var(--dt-spacing-d);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
             --icon-size-override: 20px;
         } @else if $size == 'small-productive' {
-            --btn-height: var(--btn-height--small);
             --btn-padding: 8px var(--dt-spacing-d);
             --btn-font-size: #{p.font-size(--dt-font-size-16)};
             --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
             --icon-size-override: 20px;
         } @else if $size == 'medium' {
-            --btn-height: var(--btn-height--medium);
             --btn-padding: 10px var(--dt-spacing-e);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
             --icon-size-override: 24px;
         } @else if $size == 'large' {
-            --btn-height: var(--btn-height--large);
             --btn-padding: 14px var(--dt-spacing-e);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
@@ -84,7 +73,6 @@ $breakpoint-wide: 768px;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    height: var(--btn-height);
     padding: var(--btn-padding);
     border: none;
     border-radius: var(--btn-border-radius);
@@ -253,6 +241,14 @@ $breakpoint-wide: 768px;
     }
 }
 
+// The inner span for the button text is needed to handle the text-overflow
+// Without this, single word overflow wouldn't be possible in combination
+// with display: flex.
+.o-btn-text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
 // Used to size an SVG if one is passed in (when not using the component icons)
 ::slotted(svg) {
     height: var(--icon-size-override);

diff --git a/packages/components/pie-button/src/index.ts b/packages/components/pie-button/src/index.ts
@@ -240,7 +240,7 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
                 ?isLoading=${isLoading}>
                     ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
-                    <slot></slot>
+                    <span class="o-btn-text"><slot></slot></span>
                     ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
             </button>`;
     }