Feat/persistent combobox updates (#1193)

* ✨ Added loading skeleton for items for persistent combo box

* 🚧 Persistent combobox tests wip

* ✅ Updates to tests for comboboxes

* 🩹 minor fix to text

* ✅ Added more coverage for persistentComboBox

* 📦 Clean install

* 🩹 Fix comments for test

* ✅ Added tests for new env toggle functionality

* ✅ Small fix to select test

* ✅ More adjustments for coverage

* ♻️ Changed name logic on select stories and moved test-only tag

* 📦 Clean install

* ✅ Fixed banner test

Author: aslakihle

bun.lock

@@ -38,15 +38,6 @@ const VARIANT_COLORS: Record<StatusVariant, ColorConfig> = {
   },
 };
 
-const DEFAULT_COLORS: ColorConfig = {
-  border: colors.interactive.warning__resting.rgba,
-  background: colors.interactive.warning__text.rgba,
-  chipBackground: colors.interactive.warning__resting.rgba,
-  outline: colors.interactive.warning__resting.rgba,
-};
-
-export function getVariantColors(
-  variant: StatusVariant | undefined
-): ColorConfig {
-  return variant ? VARIANT_COLORS[variant] : DEFAULT_COLORS;
+export function getVariantColors(variant: StatusVariant): ColorConfig {
+  return VARIANT_COLORS[variant];
 }

src/atoms/utils/environmentToggle.ts

@@ -89,6 +89,6 @@ export const Compact: Story = {
   },
   play: async ({ canvas, args }) => {
     const container = canvas.getByText(args.children as string);
-    await expect(container.parentElement).toHaveStyle('padding: 8px');
+    await expect(container.parentElement).toHaveStyle('padding: 4px 8px');
   },
 };

src/molecules/Banner/Banner.stories.tsx

@@ -119,7 +119,7 @@ export const BasicComboBox: StoryFn = (args) => {
   );
 };
 
-export const ComboBoxWithReallyLongName: StoryFn = (args) => {
+export const ReallyLongName: StoryFn = (args) => {
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
 
   const handleOnSelect = (
@@ -140,7 +140,7 @@ export const ComboBoxWithReallyLongName: StoryFn = (args) => {
   );
 };
 
-export const ComboBoxWithGroups: StoryFn = (args) => {
+export const Groups: StoryFn = (args) => {
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
 
   const handleOnSelect = (
@@ -161,7 +161,7 @@ export const ComboBoxWithGroups: StoryFn = (args) => {
   );
 };
 
-export const ComboBoxParented: StoryFn = (args) => {
+export const Parented: StoryFn = (args) => {
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
 
   const handleOnSelect = (
@@ -182,7 +182,7 @@ export const ComboBoxParented: StoryFn = (args) => {
   );
 };
 
-export const ComboBoxInDialog: StoryFn = (args) => {
+export const InDialog: StoryFn = (args) => {
   const [openDialog, setOpenDialog] = useState(false);
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
   const [openComboBox, setOpenComboBox] = useState(false);
@@ -225,7 +225,7 @@ export const ComboBoxInDialog: StoryFn = (args) => {
   );
 };
 
-export const ComboBoxWithAdd: StoryFn = (args) => {
+export const AddFunctionality: StoryFn = (args) => {
   const [items, setItems] = useState([...FAKE_ITEMS]);
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
   const handleOnSelect = (newValues: SelectOptionRequired[]) => {
@@ -277,7 +277,7 @@ const CustomValueElement: FC<{
   </ComboBoxChip>
 );
 
-export const ComboBoxWithCustomValueElements: StoryFn = (args) => {
+export const CustomizableValueElement: StoryFn = (args) => {
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
 
   const handleOnSelect = (
@@ -299,7 +299,7 @@ export const ComboBoxWithCustomValueElements: StoryFn = (args) => {
   );
 };
 
-export const ComboBoxWithSelectedValuesAsText: StoryFn = (args) => {
+export const SelectedValuesAsText: StoryFn = (args) => {
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
 
   const handleOnSelect = (
@@ -321,9 +321,7 @@ export const ComboBoxWithSelectedValuesAsText: StoryFn = (args) => {
   );
 };
 
-export const ComboBoxWithCustomSelectedValuesAsTextFunction: StoryFn = (
-  args
-) => {
+export const CustomSelectedValuesAsTextFunction: StoryFn = (args) => {
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
 
   const handleOnSelect = (
@@ -358,7 +356,7 @@ const CustomMenuItem: FC<{
   </>
 );
 
-export const ComboboxWithCustomizableSelectMenuItem: StoryFn = (args) => {
+export const CustomizableMenuItem: StoryFn = (args) => {
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
 
   const handleOnSelect = (

src/molecules/Select/ComboBox/ComboBox.stories.tsx

@@ -664,22 +664,102 @@ const CustomValueElement: FC<{
   </ComboBoxChip>
 );
 
-test('Custom value component', () => {
-  const label = faker.animal.bear();
-  const items = fakeSelectItems();
-  const handler = vi.fn();
+describe('Custom value component', () => {
+  test('Renders', () => {
+    const label = faker.animal.bear();
+    const items = fakeSelectItems();
+    const handler = vi.fn();
 
-  render(
-    <ComboBox
-      label={label}
-      onSelect={handler}
-      items={items}
-      values={[items[0]]}
-      customValueComponent={CustomValueElement}
-    />
-  );
+    render(
+      <ComboBox
+        label={label}
+        onSelect={handler}
+        items={items}
+        values={[items[0]]}
+        customValueComponent={CustomValueElement}
+      />
+    );
+
+    const customChip = screen
+      .getByText('custom')
+      .closest('.amplify-combo-box-chip');
+
+    expect(customChip).toBeInTheDocument();
+  });
+
+  test('Removal by clicking', async () => {
+    const label = faker.animal.bear();
+    const items = fakeSelectItems();
+    const handler = vi.fn();
+
+    const { rerender } = render(
+      <ComboBox
+        label={label}
+        onSelect={handler}
+        items={items}
+        values={[items[0]]}
+        customValueComponent={CustomValueElement}
+      />
+    );
 
-  expect(screen.getByText('custom')).toBeInTheDocument();
+    const user = userEvent.setup();
+    const customChip = screen
+      .getByText('custom')
+      .closest('.amplify-combo-box-chip');
+
+    await user.click(customChip!);
+
+    expect(handler).toHaveBeenCalledWith([], items[0]);
+
+    rerender(
+      <ComboBox
+        label={label}
+        onSelect={handler}
+        items={items}
+        values={[]}
+        customValueComponent={CustomValueElement}
+      />
+    );
+
+    expect(screen.queryByText('custom')).not.toBeInTheDocument();
+  });
+
+  test('Removal by backspace', async () => {
+    const label = faker.animal.bear();
+    const items = fakeSelectItems();
+    const handler = vi.fn();
+
+    const { rerender } = render(
+      <ComboBox
+        label={label}
+        onSelect={handler}
+        items={items}
+        values={[items[0]]}
+        customValueComponent={CustomValueElement}
+      />
+    );
+
+    const user = userEvent.setup();
+    const searchField = screen.getByRole('combobox');
+
+    await user.click(searchField);
+    await user.keyboard('{Backspace}');
+    await user.keyboard('{Backspace}');
+
+    expect(handler).toHaveBeenCalledWith([], items[0]);
+
+    rerender(
+      <ComboBox
+        label={label}
+        onSelect={handler}
+        items={items}
+        values={[]}
+        customValueComponent={CustomValueElement}
+      />
+    );
+
+    expect(screen.queryByText('custom')).not.toBeInTheDocument();
+  });
 });
 
 test('showSelectedValuesAsText', async () => {

src/molecules/Select/ComboBox/ComboBox.test.tsx

@@ -1,4 +1,4 @@
-import { KeyboardEvent, MouseEvent, ReactNode, useMemo } from 'react';
+import { KeyboardEvent, MouseEvent, useMemo } from 'react';
 
 import { checkbox, checkbox_outline } from '@equinor/eds-icons';
 
@@ -22,14 +22,12 @@ interface DynamicMenuItemProps<T extends SelectOptionRequired> {
   menuItemProps: SingleSelectMenuItemProps<T> | MultiSelectMenuItemProps<T>;
   isSelected: boolean;
   handleOnParentKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
-  children?: ReactNode;
 }
 
 export const DynamicMenuItem = <T extends SelectOptionRequired>({
   menuItemProps,
   isSelected,
   handleOnParentKeyDown,
-  children,
 }: DynamicMenuItemProps<T>) => {
   const {
     index,
@@ -64,8 +62,6 @@ export const DynamicMenuItem = <T extends SelectOptionRequired>({
   };
 
   const itemContent = useMemo(() => {
-    if (children) return children;
-
     if (CustomMenuItemComponent) {
       return (
         <CustomMenuItemComponent item={item} selectedState={selectedState} />
@@ -90,7 +86,6 @@ export const DynamicMenuItem = <T extends SelectOptionRequired>({
   }, [
     CustomMenuItemComponent,
     checkboxIcon,
-    children,
     item,
     menuItemProps,
     selectedState,

src/molecules/Select/DynamicMenuItem.tsx

@@ -7,11 +7,25 @@ import {
   NoItemsFoundText,
   PersistentGroupsWrapper,
 } from 'src/molecules/Select/Select.styles';
-import { GroupedSelectPropsCombined } from 'src/molecules/Select/Select.types';
+import {
+  CustomMenuItemComponentProps,
+  GroupedSelectProps,
+  MenuModeSelectProps,
+  MultiSelectCommon,
+  PersistentModeSelectProps,
+  SelectMenuProps,
+  SingleSelectCommon,
+} from 'src/molecules/Select/Select.types';
 import { SelectMenuItem } from 'src/molecules/Select/SelectMenuItem';
 
+// Ignored because <T extends SelectOptionRequired> is marked at not covered, and is removed at runtime so it cannot be covered.
+/* c8 ignore next */
 export const GroupedSelectPersistent = <T extends SelectOptionRequired>(
-  props: GroupedSelectPropsCombined<T>
+  props: GroupedSelectProps<T> &
+    SelectMenuProps<T> &
+    CustomMenuItemComponentProps<T> &
+    (MultiSelectCommon<T> | SingleSelectCommon<T>) &
+    (PersistentModeSelectProps | MenuModeSelectProps)
 ) => {
   const {
     onItemSelect,
@@ -27,9 +41,9 @@ export const GroupedSelectPersistent = <T extends SelectOptionRequired>(
     return <NoItemsFoundText>No items found</NoItemsFoundText>;
   }
 
-  if ('value' in props) {
-    throw new Error('You cannot use SingleSelect with persistent mode');
-  }
+  // This case never happens, since there is a check in select.tsx. This check gives the correct typescript inference.
+  /* c8 ignore next */
+  if ('value' in props) return null;
 
   return (
     <PersistentGroupsWrapper>

src/molecules/Select/GroupedSelectPersistent.tsx

@@ -22,6 +22,8 @@ import {
 import { getChildOffset } from 'src/molecules/Select/Select.utils';
 import { SelectMenuItem } from 'src/molecules/Select/SelectMenuItem';
 
+// Ignored because <T extends SelectOptionRequired> is marked at not covered, and is removed at runtime so it cannot be covered.
+/* c8 ignore next */
 export const ListSelectPersistent = <T extends SelectOptionRequired>(
   props: Omit<ListSelectProps<T>, 'onAddItem'> &
     ListSelectMenuProps &