fix(Select): update menu styles

Ref UXD-1651
securityscorecard · Oct 11, 2024 · 8ae3817 · 8ae3817
1 parent 4e4e415
commit 8ae3817
Show file tree

Hide file tree

Showing 18 changed files with 19 additions and 18 deletions.
diff --git a/.../image-snapshots/expected/components_forms_Select_CreatableSelect_Dark Mode.png b/.../image-snapshots/expected/components_forms_Select_CreatableSelect_Dark Mode.png
diff --git a/...image-snapshots/expected/components_forms_Select_CreatableSelect_Playground.png b/...image-snapshots/expected/components_forms_Select_CreatableSelect_Playground.png
diff --git a/...ge-snapshots/expected/components_forms_Select_CreatableSelect_Single Select.png b/...ge-snapshots/expected/components_forms_Select_CreatableSelect_Single Select.png
diff --git a/.../image-snapshots/expected/components_forms_Select_Select_Custom Group Label.png b/.../image-snapshots/expected/components_forms_Select_Select_Custom Group Label.png
diff --git a/...image-snapshots/expected/components_forms_Select_Select_Custom Menu Actions.png b/...image-snapshots/expected/components_forms_Select_Select_Custom Menu Actions.png
diff --git a/...-snapshots/expected/components_forms_Select_Select_Custom Multi Value Label.png b/...-snapshots/expected/components_forms_Select_Select_Custom Multi Value Label.png
diff --git a/...ge-snapshots/expected/components_forms_Select_Select_Custom No Option Found.png b/...ge-snapshots/expected/components_forms_Select_Select_Custom No Option Found.png
diff --git a/...image-snapshots/expected/components_forms_Select_Select_Custom Option Label.png b/...image-snapshots/expected/components_forms_Select_Select_Custom Option Label.png
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
diff --git a/...ok/image-snapshots/expected/components_forms_Select_Select_Disabled Options.png b/...ok/image-snapshots/expected/components_forms_Select_Select_Disabled Options.png
diff --git a/...ok/image-snapshots/expected/components_forms_Select_Select_Max Visible Item.png b/...ok/image-snapshots/expected/components_forms_Select_Select_Max Visible Item.png
diff --git a/...rybook/image-snapshots/expected/components_forms_Select_Select_Multi Select.png b/...rybook/image-snapshots/expected/components_forms_Select_Select_Multi Select.png
diff --git a/...ook/image-snapshots/expected/components_forms_Select_Select_No Option Found.png b/...ook/image-snapshots/expected/components_forms_Select_Select_No Option Found.png
diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Opened.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Opened.png
diff --git a/...ybook/image-snapshots/expected/components_forms_Select_Select_Options Group.png b/...ybook/image-snapshots/expected/components_forms_Select_Select_Options Group.png
diff --git a/...ook/image-snapshots/expected/components_forms_Select_Select_Pill Truncation.png b/...ook/image-snapshots/expected/components_forms_Select_Select_Pill Truncation.png
diff --git a/...ybook/image-snapshots/expected/components_forms_Select_Select_Pill Wrapping.png b/...ybook/image-snapshots/expected/components_forms_Select_Select_Pill Wrapping.png
diff --git 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<OptionProps<OptionType, boolean>> = (
   }
 
   return (
-    <div>
-      <components.Option {...props}>
-        <Inline gap={SpaceSizes.sm}>
-          <StyledCheckbox
-            checkboxId={`select-${label}`}
-            checked={isSelected}
-            isDisabled={isDisabled}
-            label={children}
-            name={label}
-            readOnly
-          />
-        </Inline>
-      </components.Option>
-    </div>
+    <components.Option {...props}>
+      <Inline gap={SpaceSizes.sm}>
+        <StyledCheckbox
+          checkboxId={`select-${label}`}
+          checked={isSelected}
+          isDisabled={isDisabled}
+          label={children}
+          name={label}
+          readOnly
+        />
+      </Inline>
+    </components.Option>
   );
 };