From e84ca7b24cf16f96857ebae2540baae40e819c8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Wed, 20 Dec 2023 12:52:30 +0100
Subject: [PATCH] fix: muliselect height

---
 src/components/Multiselect/Common/MultiselectWrapper.tsx  | 4 +++-
 .../Multiselect/Dynamic/DynamicMultiselect.stories.tsx    | 2 +-
 src/components/Multiselect/Dynamic/DynamicMultiselect.tsx | 8 ++------
 src/components/Multiselect/Static/Multiselect.stories.tsx | 6 +++++-
 src/components/Multiselect/Static/Multiselect.tsx         | 8 ++------
 src/components/Select/Select.stories.tsx                  | 4 ++++
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/Multiselect/Common/MultiselectWrapper.tsx b/src/components/Multiselect/Common/MultiselectWrapper.tsx
index d715caf9..df5a0a41 100644
--- a/src/components/Multiselect/Common/MultiselectWrapper.tsx
+++ b/src/components/Multiselect/Common/MultiselectWrapper.tsx
@@ -86,13 +86,15 @@ export const MultiselectWrapper = forwardRef<
           </Box>
         </Box>
 
-        {hasItemsToSelect && (
+        {hasItemsToSelect ? (
           <Adornment
             size={size}
             getToggleButtonProps={getToggleButtonProps}
             renderEndAdornment={renderEndAdornment}
             disabled={disabled}
           />
+        ) : (
+          <Box width={5} height={5} />
         )}
       </Box>
     );
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.stories.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.stories.tsx
index 881f7eb0..c98a32f0 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.stories.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.stories.tsx
@@ -73,7 +73,7 @@ export const Default = () => {
     <Box __width={300}>
       <DynamicMultiselect
         value={value}
-        label="Pick a star wars characters"
+        // label="Pick a star wars characters"
         onChange={(value) => setValue(value)}
         options={options}
         loading={loading}
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
index 794c2d8a..bdf23288 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -134,7 +134,7 @@ const DynamicMultiselectInner = <T extends Option>(
             key={`selected-option-${item.value}-${idx}`}
             data-test-id={`selected-option-${item.value}-${idx}`}
             paddingX={1.5}
-            paddingY={0.5}
+            paddingY="px"
             backgroundColor="default1"
             borderColor="default1"
             borderWidth={1}
@@ -148,10 +148,7 @@ const DynamicMultiselectInner = <T extends Option>(
               index: idx,
             })}
           >
-            <Text
-              variant="caption"
-              size={size === "small" ? "small" : "medium"}
-            >
+            <Text variant="caption" size="small">
               {item.label}
             </Text>
             {!disabled && (
@@ -159,7 +156,6 @@ const DynamicMultiselectInner = <T extends Option>(
                 cursor="pointer"
                 variant="caption"
                 size="small"
-                marginBottom="px"
                 onClick={(event) => {
                   event.stopPropagation();
                   event.preventDefault();
diff --git a/src/components/Multiselect/Static/Multiselect.stories.tsx b/src/components/Multiselect/Static/Multiselect.stories.tsx
index a9f26f83..e3c76b21 100644
--- a/src/components/Multiselect/Static/Multiselect.stories.tsx
+++ b/src/components/Multiselect/Static/Multiselect.stories.tsx
@@ -23,7 +23,7 @@ const meta: Meta<typeof Multiselect> = {
   component: Multiselect,
   args: {
     options,
-    label: "Pick colors",
+    // label: "Pick colors",
     id: "multiselect",
     size: "large",
   },
@@ -196,3 +196,7 @@ export const WithStringAsValues = () => {
     </Box>
   );
 };
+
+export const Empty = () => {
+  return <Multiselect options={[]} value={[]} />;
+};
diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx
index 2f0dc0cc..b0c6bcab 100644
--- a/src/components/Multiselect/Static/Multiselect.tsx
+++ b/src/components/Multiselect/Static/Multiselect.tsx
@@ -123,7 +123,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
             key={`selected-option-${item.value}-${idx}`}
             data-test-id={`selected-option-${item.value}-${idx}`}
             paddingX={1.5}
-            paddingY={0.5}
+            paddingY="px"
             backgroundColor="default1"
             borderColor="default1"
             borderWidth={1}
@@ -137,10 +137,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
               index: idx,
             })}
           >
-            <Text
-              variant="caption"
-              size={size === "small" ? "small" : "medium"}
-            >
+            <Text variant="caption" size="small">
               {item.label}
             </Text>
             {!disabled && (
@@ -148,7 +145,6 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
                 cursor="pointer"
                 variant="caption"
                 size="small"
-                marginBottom="px"
                 onClick={(event) => {
                   event.stopPropagation();
                   event.preventDefault();
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 15cde9f4..3ca39ea6 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -177,3 +177,7 @@ export const WithEllipsis = () => {
     </Box>
   );
 };
+
+export const Empty = () => {
+  return <Select options={options} value="" />;
+};