💄 Add selected color for SingleSelect menu items

.storybook/addons/SpacingsAddon/withSpacingsMode.ts

@@ -14,7 +14,6 @@ export const withSpacingsMode = (StoryFn: StoryFunction<Renderer>) => {
 
   const spacingsMode = globals[PARAM_KEY];
 
-  console.log('spacingsMode', spacingsMode);
   useEffect(() => {
     document.documentElement.setAttribute('data-spacing-mode', spacingsMode);
   }, [spacingsMode, updateGlobals]);

src/atoms/hooks/useSelect.ts

@@ -152,7 +152,11 @@ const useSelect = <T extends SelectOptionRequired>(
 
   const handleOnItemSelect = (item: SelectOption<T>) => {
     if ('value' in props) {
-      props.onSelect(item);
+      if (props.value?.value === item.value) {
+        props.onSelect(undefined);
+      } else {
+        props.onSelect(item);
+      }
     } else {
       props.onSelect(getNewValues(props.values, item), item);
     }

src/molecules/InfoElement/CopyText.test.tsx

@@ -25,8 +25,9 @@ test('Renders label on hover', async () => {
 
   await user.hover(screen.getByText('other'));
 
-  await waitFor(() =>
-    expect(screen.queryByText(/copy/i)).not.toBeInTheDocument()
+  await waitFor(
+    () => expect(screen.queryByText(/copy/i)).not.toBeInTheDocument(),
+    { timeout: 5000 }
   );
 });
 

src/molecules/Select/GroupedSelectMenu.tsx

@@ -91,6 +91,7 @@ export const GroupedSelectMenu = <T extends SelectOptionRequired>(
           itemRefs={itemRefs}
           onItemKeyDown={onItemKeyDown}
           onItemSelect={onItemSelect}
+          value={props.value}
         />
       ))}
     </Menu.Section>

src/molecules/Select/ListSelectMenu.tsx

@@ -124,6 +124,7 @@ export const ListSelectMenu = <T extends SelectOptionRequired>(
       onItemKeyDown={onItemKeyDown}
       onItemSelect={onItemSelect}
       parentHasNestedItems={hasNestedItems}
+      value={props.value}
     />
   ));
 };

src/molecules/Select/Select.styles.ts

@@ -209,14 +209,14 @@ const ComboBoxChip = styled(Chip)<ComboBoxChipProps>`
 
 interface CustomMenuItemProps {
   $paddedLeft?: boolean;
+  $selected?: boolean;
 }
 
 const StyledMenuItem = styled(EDSMenu.Item)<CustomMenuItemProps>`
   flex-grow: 1;
-  border-radius: 2px;
   ${({ $paddedLeft }) => $paddedLeft && `margin-left: 36px`};
   padding-left: 10px;
-
+  
   > div {
     grid-auto-columns: auto;
     justify-content: flex-start;
@@ -229,6 +229,17 @@ const StyledMenuItem = styled(EDSMenu.Item)<CustomMenuItemProps>`
   &:focus-visible {
     outline: 2px dashed ${colors.interactive.primary__resting.rgba};
   }
+
+    ${({ $selected }) =>
+      $selected
+        ? css`
+            background: ${colors.interactive.primary__selected_highlight.rgba};
+
+            &:hover {
+              background: ${colors.interactive.primary__selected_hover.rgba};
+            }
+          `
+        : ''}}
 `;
 
 const MenuItemSpacer = styled.hr`
@@ -273,7 +284,6 @@ const StyledMenu = styled(EDSMenu)`
 const MenuItemWrapper = styled.div`
   display: flex;
   align-items: center;
-  padding: 0 ${spacings.small};
 `;
 
 const SmallButton = styled(Button)`

src/molecules/Select/Select.types.ts

@@ -70,7 +70,8 @@ export type SingleSelectMenuItemProps<T extends SelectOptionRequired> = {
   isParentSelected?: boolean;
   parentHasNestedItems?: boolean;
 } & Omit<SelectMenuProps<T>, 'search'> &
-  SelectMenuItemProps<T>;
+  SelectMenuItemProps<T> &
+  Pick<SingleSelectCommon<T>, 'value'>;
 
 export type MultiSelectMenuItemProps<T extends SelectOptionRequired> = {
   isParentSelected?: boolean;

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"
@@ -197,6 +200,7 @@ export const SelectMenuItem = <T extends SelectOptionRequired>(
     <MenuItemWrapper>
       <StyledMenuItem
         $depth={depth}
+        $selected={props.value && item.value === props.value.value}
         ref={(element: HTMLButtonElement | null) => {
           itemRefs.current[index] = element;
         }}

src/molecules/Select/SingleSelect/SingleSelect.jsdom.test.tsx

@@ -0,0 +1,28 @@
+import { colors } from 'src/atoms/style/colors';
+import { SingleSelect } from 'src/molecules';
+import {
+  fakeSelectItems,
+  render,
+  screen,
+  userEvent,
+} from 'src/tests/jsdomtest-utils';
+
+test('Renders highlight color for selected items', async () => {
+  const items = fakeSelectItems();
+  const handleOnSelect = vi.fn();
+
+  render(
+    <SingleSelect value={items[0]} items={items} onSelect={handleOnSelect} />
+  );
+
+  const user = userEvent.setup();
+
+  await user.click(screen.getByRole('combobox'));
+
+  expect(
+    screen.getByRole('menuitem', { name: items[0].label })
+  ).toHaveStyleRule(
+    'background',
+    colors.interactive.primary__selected_highlight.rgba
+  );
+});

src/molecules/Select/SingleSelect/SingleSelect.test.tsx

@@ -157,3 +157,31 @@ test('Groups work as expected when clicking items', async () => {
   expect(handler).toBeCalledTimes(1);
   expect(handler).toBeCalledWith(randomItem);
 });
+
+test('Clicking the same item deselects it', async () => {
+  const items = fakeSelectItems();
+  const label = faker.animal.bear();
+  const meta = faker.animal.insect();
+  const handleOnSelect = vi.fn();
+  const value = faker.helpers.arrayElement(items);
+  render(
+    <SingleSelect
+      label={label}
+      meta={meta}
+      onSelect={handleOnSelect}
+      value={value}
+      items={items}
+    />
+  );
+  const user = userEvent.setup();
+
+  expect(screen.getByText(label)).toBeInTheDocument();
+  expect(screen.getByText(meta)).toBeInTheDocument();
+
+  await user.click(screen.getByRole('combobox'));
+
+  await user.click(screen.getByRole('menuitem', { name: value.label }));
+
+  expect(handleOnSelect).toHaveBeenCalledTimes(1);
+  expect(handleOnSelect).toHaveBeenCalledWith(undefined);
+});