From 4118c0b117532615c5254d6849d8740ef43cb30f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dan=20B=C3=BCschlen?= <danbueschlen@gmail.com>
Date: Thu, 23 May 2024 08:57:43 +0200
Subject: [PATCH] fix(button): truncate the label instead of wrapping it

fix(dropdown): limit button width to allow the label to be truncated
---
 src/components/button/Button.js      |  2 +-
 src/components/button/button.css     | 13 +++++++++++++
 src/components/dropdown/Dropdown.js  |  1 +
 src/components/dropdown/dropdown.css |  4 ++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/button/Button.js b/src/components/button/Button.js
index e123d17d..6c5abb8f 100644
--- 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
index 32a435b6..85fc54bf 100644
--- 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
index 21c51372..824310cc 100644
--- 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
index f7b96693..7df7ba9c 100644
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@@ -14,3 +14,7 @@
 
   margin-top: 0.5rem;
 }
+
+.button {
+  max-width: 100%;
+}