💄 Remove padding around Select MenuItems

equinor · Jan 7, 2025 · 706dc62 · 706dc62
1 parent 86f908f
commit 706dc62
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/molecules/Select/Select.styles.ts b/src/molecules/Select/Select.styles.ts
@@ -214,7 +214,6 @@ interface CustomMenuItemProps {
 
 const StyledMenuItem = styled(EDSMenu.Item)<CustomMenuItemProps>`
   flex-grow: 1;
-  border-radius: 2px;
   ${({ $paddedLeft }) => $paddedLeft && `margin-left: 36px`};
   padding-left: 10px;
   
@@ -235,6 +234,10 @@ const StyledMenuItem = styled(EDSMenu.Item)<CustomMenuItemProps>`
       $selected
         ? css`
             background: ${colors.interactive.primary__selected_highlight.rgba};
+
+            &:hover {
+              background: ${colors.interactive.primary__selected_hover.rgba};
+            }
           `
         : ''}}
 `;
@@ -281,7 +284,6 @@ const StyledMenu = styled(EDSMenu)`
 const MenuItemWrapper = styled.div`
   display: flex;
   align-items: center;
-  padding: 0 ${spacings.small};
 `;
 
 const SmallButton = styled(Button)`

diff --git a/src/molecules/Select/SelectMenuItem.tsx b/src/molecules/Select/SelectMenuItem.tsx
@@ -11,6 +11,7 @@ import { tokens } from '@equinor/eds-tokens';
 
 import { getChildOffset } from './Select.utils';
 import { getParentIcon } from './SelectMenuItem.utils';
+import { spacings } from 'src/atoms/style/spacings';
 import {
   MenuItemSpacer,
   MenuItemWrapper,
@@ -117,7 +118,9 @@ export const SelectMenuItem = <T extends SelectOptionRequired>(
   if (item.children && item.children.length > 0 && multiselect) {
     return (
       <>
-        <MenuItemWrapper>
+        <MenuItemWrapper
+          style={{ paddingLeft: depth === 0 ? spacings.small : 0 }}
+        >
           {spacers}
           <SmallButton
             variant="ghost_icon"