Add adornments to Select input (#820)

* Add addorments to Select input

* Add changeset

* update changeset

* Add main start, end adorment

* make text full width

* Fix empty space

* Fix story

* Remove box

.changeset/silent-spies-laugh.md

@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": patch
+---
+
+You can now see start and end adornment in select input options

src/components/Select/Select.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
+import { Option } from "~/components/BaseSelect";
 
 import { Box } from "../Box";
 import { Select } from ".";
@@ -41,7 +42,11 @@ const SelectTemplate: Story = {
  const [value, setValue] = useState(options[0]);
 
  return (
- <Select {...args} value={value} onChange={(value) => setValue(value)} />
+ <Select
+ {...args}
+ value={value}
+ onChange={(value) => setValue(value as Option)}
+ />
  );
  },
 };
@@ -155,6 +160,50 @@ export const WithStringValue = () => {
  );
 };
 
+export const WithStartAdornment = () => {
+ const [value, setValue] = useState("color-black");
+
+ return (
+ <Select
+ label="Pick a color"
+ size="large"
+ value={value}
+ onChange={(value) => setValue(value)}
+ startAdornment={(value) => {
+ if (!value) {
+ return null;
+ }
+
+ return (
+ <Box
+ width={4}
+ height={4}
+ marginRight={2}
+ __flexShrink={0}
+ __backgroundColor={value}
+ ></Box>
+ );
+ }}
+ options={options.map((option) => {
+ const value = option.value.split("color-")[1];
+ return {
+ ...option,
+ value,
+ startAdornment: (
+ <Box
+ __backgroundColor={value}
+ marginRight={2}
+ width={4}
+ height={4}
+ __flexShrink={0}
+ ></Box>
+ ),
+ };
+ })}
+ />
+ );
+};
+
 export const WithEllipsis = () => {
  const values = [
  { value: "color-black", label: "Long black label here" },

src/components/Select/Select.tsx

@@ -52,6 +52,8 @@ export type SelectProps<T, V> = PropsWithBox<
  options: T[];
  onChange?: SingleChangeHandler<V>;
  value: V | null;
+ startAdornment?: (inputValue: V | null) => ReactNode;
+ endAdornment?: (inputValue: V | null) => ReactNode;
  children?: ReactNode;
  }
 > &
@@ -82,6 +84,8 @@ const SelectInner = <T extends Option, V extends Option | string>(
  onChange,
  onFocus,
  onBlur,
+ startAdornment,
+ endAdornment,
  children,
  ...props
  }: SelectProps<T, V>,
@@ -146,14 +150,18 @@ const SelectInner = <T extends Option, V extends Option | string>(
  whiteSpace="nowrap"
  overflow="hidden"
  textOverflow="ellipsis"
+ display="flex"
  >
+ {startAdornment && typed && startAdornment(value)}
  <Text
  size={convertSizeToScale(size)}
  color={labelColor}
  title={selectedItem?.label}
+ width="100%"
  >
  {selectedItem?.label}
  </Text>
+ {endAdornment && typed && endAdornment(value)}
  </Box>
  </SelectWrapper>
  <Portal asChild ref={refs.setFloating} style={floatingStyles}>
@@ -185,7 +193,11 @@ const SelectInner = <T extends Option, V extends Option | string>(
  })}
  active={highlightedIndex === index}
  >
- <Text size={getListTextSize(size)}>{item.label}</Text>
+ {item?.startAdornment}
+ <Text size={getListTextSize(size)} width="100%">
+ {item.label}
+ </Text>
+ {item?.endAdornment}
  </List.Item>
  ))}