fix: muliselect height

saleor · Dec 20, 2023 · e84ca7b · e84ca7b
1 parent 6ef0671
commit e84ca7b
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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,18 +148,14 @@ const DynamicMultiselectInner = <T extends Option>(
  index: idx,
  })}
  >
- <Text
- variant="caption"
- size={size === "small" ? "small" : "medium"}
- >
+ <Text variant="caption" size="small">
  {item.label}
  </Text>
  {!disabled && (
  <Text
  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
@@ -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
@@ -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,18 +137,14 @@ 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 && (
  <Text
  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
@@ -177,3 +177,7 @@ export const WithEllipsis = () => {
  </Box>
  );
 };
+
+export const Empty = () => {
+ return <Select options={options} value="" />;
+};