fix(ld-select): text ellipsis on trigger button

emdgroup-liquid · Jul 20, 2021 · 429714e · 429714e
1 parent 64b71ca
commit 429714e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -216,31 +216,32 @@
   }
 }
 
-.ld-select__btn-trigger-text,
+.ld-select__btn-trigger-text-wrapper,
 .ld-select__selection-list {
   flex-grow: 1;
 }
 
-.ld-select__btn-trigger-text {
+.ld-select__btn-trigger-text-wrapper {
   font: var(--ld-typo-label-m);
   padding: var(--ld-sp-6) var(--ld-sp-8) var(--ld-sp-6) 0;
   height: calc(100% + var(--ld-sp-12));
   margin: calc(-1 * var(--ld-sp-6)) 0;
   display: flex;
   align-items: center;
+  overflow: hidden;
 
   :where(.ld-select__btn-trigger[aria-disabled='true']) & {
     color: var(--ld-col-rblck1);
   }
 }
 
 .ld-select--sm > select,
-.ld-select--sm .ld-select__btn-trigger-text {
+.ld-select--sm .ld-select__btn-trigger-text-wrapper {
   font: var(--ld-typo-body-s);
   line-height: 1;
 }
 .ld-select--lg > select,
-.ld-select--lg .ld-select__btn-trigger-text {
+.ld-select--lg .ld-select__btn-trigger-text-wrapper {
   font: var(--ld-typo-body-l);
   line-height: 1;
 }

diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
@@ -971,8 +971,11 @@ export class LdSelect {
                 })}
               </ul>
             ) : (
-              <span class="ld-select__btn-trigger-text" title={triggerText}>
-                {triggerText}
+              <span
+                class="ld-select__btn-trigger-text-wrapper"
+                title={triggerText}
+              >
+                <span class="ld-select__btn-trigger-text">{triggerText}</span>
               </span>
             )}