fix: multiselect overlow (#93)

* fix(multiselect): add overflow ellipsis * fix chevron size
canonical · Jan 26, 2024 · 6d904ab · 6d904ab
1 parent 0912579
commit 6d904ab
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/lib/components/MultiSelect/MultiSelect.scss b/src/lib/components/MultiSelect/MultiSelect.scss
@@ -13,6 +13,13 @@
   margin-top: 0;
 }
 
+.multi-select__condensed-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-right: $sph--large + $sph--x-small;
+}
+
 .multi-select__input {
   position: relative;
   cursor: pointer;
@@ -124,13 +131,17 @@ button.multi-select__select-button {
   z-index: 0;
 
     &::after {
+      position: absolute;
+      right: $sph--small;
+      top: 50%;
+
         @extend %icon;
         @include vf-icon-chevron($color-mid-dark);
         @include vf-transition($property: transform, $duration: fast);
 
         content: '';
         margin-left: $sph--large;
-        transform: rotate(-180deg);
+        transform: translateY(-50%) rotate(-180deg);
       }
 
       &[aria-expanded='true'] {
@@ -139,7 +150,7 @@ button.multi-select__select-button {
 
       &[aria-expanded='false'] {
         &::after {
-          transform: rotate(0);
+          transform: translateY(-50%) rotate(0);
         }
       }
     }

diff --git a/src/lib/components/MultiSelect/MultiSelect.tsx b/src/lib/components/MultiSelect/MultiSelect.tsx
@@ -228,9 +228,11 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
             onFocus={() => setIsDropdownOpen(true)}
             onClick={() => setIsDropdownOpen(true)}
           >
-            {selectedItems.length > 0
-              ? selectedItemsLabel
-              : placeholder ?? "Select items"}
+            <span className="multi-select__condensed-text">
+              {selectedItems.length > 0
+                ? selectedItemsLabel
+                : placeholder ?? "Select items"}
+            </span>
           </button>
         )}
         <MultiSelectDropdown