diff --git a/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Dark Mode.png b/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Dark Mode.png index dbc9f7416..fc96d1a70 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Dark Mode.png and b/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Dark Mode.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Playground.png b/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Playground.png index a12250cee..86e72a71b 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Playground.png and b/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Playground.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Single Select.png b/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Single Select.png index 5c56ef4cc..287903f32 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Single Select.png and b/.storybook/image-snapshots/expected/components_forms_Select_CreatableSelect_Single Select.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Group Label.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Group Label.png index 5005d964f..17796924f 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Group Label.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Group Label.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Menu Actions.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Menu Actions.png index bb1d15835..2c3dbfd0e 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Menu Actions.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Menu Actions.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Multi Value Label.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Multi Value Label.png index 7cad9a7de..c150b9400 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Multi Value Label.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Multi Value Label.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom No Option Found.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom No Option Found.png index a896b2c40..cb2d22201 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom No Option Found.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom No Option Found.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Option Label.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Option Label.png index f5627151a..2984b2452 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Option Label.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Custom Option Label.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Dark Mode.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Dark Mode.png index e7c7767fe..198848de8 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Dark Mode.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Dark Mode.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Disabled Options.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Disabled Options.png index e510547bb..c6040a72d 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Disabled Options.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Disabled Options.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Max Visible Item.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Max Visible Item.png index ad2e09caf..e9994cffc 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Max Visible Item.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Max Visible Item.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Multi Select.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Multi Select.png index 05f8b91bb..caee9db65 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Multi Select.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Multi Select.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_No Option Found.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_No Option Found.png index f79b52ba1..7dd7ec795 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_No Option Found.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_No Option Found.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Opened.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Opened.png index abf696f63..eb3b3b3eb 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Opened.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Opened.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Options Group.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Options Group.png index 371f2d7cc..56b824254 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Options Group.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Options Group.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Pill Truncation.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Pill Truncation.png index ab4cdf28d..a3eefd6d5 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Pill Truncation.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Pill Truncation.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Pill Wrapping.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Pill Wrapping.png index a102e34f9..123952f79 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Pill Wrapping.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Pill Wrapping.png differ diff --git a/src/components/forms/Select/Select.styles.tsx b/src/components/forms/Select/Select.styles.tsx index c3a1ed564..705bfcae9 100644 --- a/src/components/forms/Select/Select.styles.tsx +++ b/src/components/forms/Select/Select.styles.tsx @@ -209,8 +209,7 @@ export const selectStyles: ( boxShadow: 'var(--sscds-shadow-1x)', marginBottom: 'var(--sscds-space-1x)', marginTop: 'var(--sscds-space-1x)', - paddingTop: 'var(--sscds-space-2x)', - paddingBottom: 'var(--sscds-space-2x)', + padding: 'var(--sscds-space-2x)', }), menuList: (styles) => ({ ...styles, @@ -229,15 +228,19 @@ export const selectStyles: ( fontSize: 'var(--sscds-font-size-body-md)', lineHeight: 'var(--sscds-font-lineheight-body-md)', padding: menuItemPadding, + transition: 'var(--sscds-action-transition)', ':active': { ...styles[':active'], backgroundColor: 'var(--sscds-color-background-selectable-active)', }, + borderRadius: 'var(--sscds-radii-default)', }), group: (styles) => ({ ...styles, padding: 0, - marginTop: 'var(--sscds-space-2x)', + ':not(:first-child)': { + marginTop: 'var(--sscds-space-2x)', + }, }), groupHeading: (styles) => ({ ...styles, @@ -328,7 +331,7 @@ const ActionsMenu = styled.div` const SelectActionButton = styled(Button)` justify-content: flex-start; - border-radius: 0; + border-radius: var(--sscds-radii-default); `; const getActionProps: ( @@ -458,20 +461,18 @@ export const Option: ComponentType> = ( } return ( -
- - - - - -
+ + + + + ); };