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>
               ))}