diff --git a/.changeset/early-planets-do.md b/.changeset/early-planets-do.md new file mode 100644 index 00000000..8f148a46 --- /dev/null +++ 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 index 5f180f6f..01593b37 100644 --- 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"} > - + { 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 index be38159c..70a8a70c 100644 --- 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 index ebf768c6..6b3f1f37 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -143,21 +143,16 @@ const SelectInner = ( getLabelProps={getLabelProps} getToggleButtonProps={getToggleButtonProps} > - + {startAdornment && typed && startAdornment(value)} {selectedItem?.label} diff --git a/src/components/Select/SelectWrapper.tsx b/src/components/Select/SelectWrapper.tsx index fa6c5126..07ce18f7 100644 --- a/src/components/Select/SelectWrapper.tsx +++ b/src/components/Select/SelectWrapper.tsx @@ -57,7 +57,12 @@ export const SelectWrapper = forwardRef( data-macaw-ui-component="Select" cursor={disabled ? "not-allowed" : "pointer"} > - +