fix: select flex and start icon inline bug (#1786)

### What does it do? Fix small bugs on Select to match styles on Locale Picker from CMS ### Related issue(s)/PR(s) strapi/strapi#19960
strapi · Sep 13, 2024 · b95628d · b95628d
2 parents 6f405fa + dc49935
commit b95628d
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 3 deletions.
diff --git a/.changeset/swift-garlics-cross.md b/.changeset/swift-garlics-cross.md
@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix select bugs with startIcon
diff --git a/docs/stories/03-inputs/Select.mdx b/docs/stories/03-inputs/Select.mdx
@@ -78,6 +78,12 @@ There are two options for sizes, `"S"` or `"M"`, the default is `"M"`.
 
 <Canvas of={SelectStories.Size} />
 
+### Start Icons
+
+Is possible to pass a start icon for general Select or for each option.
+
+<Canvas of={SelectStories.StartIcon} />
+
 ### Controlled
 
 All the select variants can be a controlled component by passing a `value` prop and an `onChange` callback, this also

diff --git a/docs/stories/03-inputs/Select.stories.tsx b/docs/stories/03-inputs/Select.stories.tsx
@@ -9,6 +9,7 @@ import {
   MultiSelectOption,
   Field,
 } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import { default as outdent } from 'outdent';
 
 const meta: Meta<typeof SingleSelect> = {
@@ -140,6 +141,56 @@ export const Size = {
   name: 'small size',
 } satisfies SingleSelectStory;
 
+export const StartIcon = {
+  args: {
+    startIcon: <Plus />,
+  },
+  render: ({ label, error, hint, ...props }) => {
+    const selectRef = React.useRef<HTMLDivElement | null>(null);
+
+    return (
+      <Field.Root error={error} hint={hint}>
+        <Field.Label onClick={() => selectRef.current?.focus()}>{label}</Field.Label>
+        <SingleSelect ref={selectRef} {...props}>
+          <SingleSelectOption value="apple" startIcon={<Plus />}>
+            Apple
+          </SingleSelectOption>
+          <SingleSelectOption value="avocado" startIcon={<Plus />}>
+            Avocado
+          </SingleSelectOption>
+          <SingleSelectOption value="banana" startIcon={<Plus />}>
+            Banana
+          </SingleSelectOption>
+        </SingleSelect>
+        <Field.Error />
+        <Field.Hint />
+      </Field.Root>
+    );
+  },
+  parameters: {
+    docs: {
+      code: outdent`
+      <Field.Root error={error} hint={hint}>
+        <Field.Label onClick={() => selectRef.current?.focus()}>{label}</Field.Label>
+        <SingleSelect ref={selectRef} {...props}>
+          <SingleSelectOption value="apple" startIcon={<Plus />}>
+            Apple
+          </SingleSelectOption>
+          <SingleSelectOption value="avocado" startIcon={<Plus />}>
+            Avocado
+          </SingleSelectOption>
+          <SingleSelectOption value="banana" startIcon={<Plus />}>
+            Banana
+          </SingleSelectOption>
+        </SingleSelect>
+        <Field.Error />
+        <Field.Hint />
+      </Field.Root>
+      `,
+    },
+  },
+};
+
 type MultipleSelectStory = StoryObj<typeof MultiSelect>;
 
 export const Multiple = {

diff --git a/packages/design-system/src/components/Select/SingleSelect.tsx b/packages/design-system/src/components/Select/SingleSelect.tsx
@@ -4,6 +4,7 @@ import { stripReactIdOfColon } from '../../helpers/strings';
 import { useId } from '../../hooks/useId';
 import { useIntersection } from '../../hooks/useIntersection';
 import { Box } from '../../primitives/Box';
+import { Flex } from '../../primitives/Flex';
 import { Typography } from '../../primitives/Typography';
 import { useField } from '../Field';
 
@@ -169,11 +170,12 @@ export const SingleSelectOption = React.forwardRef<HTMLDivElement, SingleSelectO
     return (
       <SelectParts.Item ref={ref} value={value.toString()} {...restProps}>
         {startIcon && (
-          <Box tag="span" aria-hidden>
+          <Flex tag="span" aria-hidden>
             {startIcon}
-          </Box>
+          </Flex>
         )}
-        <Typography lineHeight="20px">
+        {/* @TODO: Probably we should refactor this to allow composable option building */}
+        <Typography lineHeight="20px" width="100%">
           <SelectParts.ItemText>{children}</SelectParts.ItemText>
         </Typography>
       </SelectParts.Item>