fix(button): truncate the label instead of wrapping it

fix(dropdown): limit button width to allow the label to be truncated
statistikZH · May 23, 2024 · 4118c0b · 4118c0b
1 parent 7b7402f
commit 4118c0b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
@@ -198,7 +198,7 @@ export class LeuButton extends LitElement {
         type=${this.type}
       >
         ${this.renderIconBefore()}
-        <slot></slot>
+        <span class="label"><slot></slot></span>
         ${this.renderIconAfter()} ${this.renderExpandingIcon()}
       </button>
     `

diff --git a/src/components/button/button.css b/src/components/button/button.css
@@ -10,11 +10,24 @@ button {
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: 2px;
+
+  max-width: 100%;
   display: flex;
   align-items: center;
   column-gap: 8px;
 }
 
+.label {
+  flex: 1 1 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon .label {
+  display: none;
+}
+
 button.round {
   border-radius: 50%;
 }

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -84,6 +84,7 @@ export class LeuDropdown extends LitElement {
         autoSizePadding="8"
       >
         <leu-button
+          class="button"
           slot="anchor"
           icon="download"
           variant="ghost"

diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
@@ -14,3 +14,7 @@
 
   margin-top: 0.5rem;
 }
+
+.button {
+  max-width: 100%;
+}