Select label width adjustment (#843)

* select label width adjustment * Fix label with ellipses * Fix changeset * Addd comment --------- Co-authored-by: Paweł Chyła <[email protected]>
saleor · Aug 27, 2024 · 6a51f52 · 6a51f52
1 parent a6348a8
commit 6a51f52
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 13 deletions.
diff --git a/.changeset/early-planets-do.md b/.changeset/early-planets-do.md
@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": patch
+---
+
+You can now see ellipses in select when text width is too long.
diff --git a/src/components/Combobox/Common/ComboboxWrapper.tsx b/src/components/Combobox/Common/ComboboxWrapper.tsx
@@ -59,7 +59,7 @@ export const ComboboxWrapper = forwardRef<
         {...getLabelProps({ htmlFor: id })}
         cursor={disabled ? "not-allowed" : "text"}
       >
-        <Box display="flex" flexDirection="column" __width="79%">
+        <Box display="flex" flexDirection="column" width="100%">
           <Box
             as="span"
             className={classNames(spanRecipe({ typed, size, disabled, error }))}

diff --git a/src/components/Combobox/Static/StaticCombobox.stories.tsx b/src/components/Combobox/Static/StaticCombobox.stories.tsx
@@ -212,7 +212,7 @@ export const WithAdornment = () => {
 
 export const WithEllipsis = () => {
   const values = [
-    { value: "color-black", label: "Long black label here" },
+    { value: "color-black", label: "Very very long black label here" },
     {
       value: "color-red",
       label: "Long red label here",

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -206,7 +206,7 @@ export const WithStartAdornment = () => {
 
 export const WithEllipsis = () => {
   const values = [
-    { value: "color-black", label: "Long black label here" },
+    { value: "color-black", label: "Very very long black label here" },
     {
       value: "color-red",
       label: "Long red label here",

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -143,21 +143,16 @@ const SelectInner = <T extends Option, V extends Option | string>(
         getLabelProps={getLabelProps}
         getToggleButtonProps={getToggleButtonProps}
       >
-        <Box
-          height={getBoxHeight(size)}
-          {...props}
-          ref={ref}
-          whiteSpace="nowrap"
-          overflow="hidden"
-          textOverflow="ellipsis"
-          display="flex"
-        >
+        <Box height={getBoxHeight(size)} {...props} ref={ref} display="flex">
           {startAdornment && typed && startAdornment(value)}
           <Text
             size={convertSizeToScale(size)}
             color={labelColor}
             title={selectedItem?.label}
             width="100%"
+            whiteSpace="nowrap"
+            overflow="hidden"
+            textOverflow="ellipsis"
           >
             {selectedItem?.label}
           </Text>

diff --git a/src/components/Select/SelectWrapper.tsx b/src/components/Select/SelectWrapper.tsx
@@ -57,7 +57,12 @@ export const SelectWrapper = forwardRef<HTMLLabelElement, SelectWrapperProps>(
           data-macaw-ui-component="Select"
           cursor={disabled ? "not-allowed" : "pointer"}
         >
-          <Box display="flex" flexDirection="column" __width="79%">
+          <Box
+            display="flex"
+            flexDirection="column"
+            // Take full width minus the arrow icon width
+            __width="calc(100% - 30px)"
+          >
             <Box
               as="span"
               className={classNames(