feat: implement FilterOptionsList component

cspell.json

@@ -18,6 +18,7 @@
     "Autodocs",
     "autodocs",
     "Embla",
-    "svgs"
+    "svgs",
+    "toggleable"
   ]
 }

spec/components/FilterOption/FilterOption.test.tsx

@@ -207,6 +207,26 @@ describe('FilterOption component', () => {
       );
       expect(screen.queryByText('Red')).not.toBeInTheDocument();
     });
+
+    test('render-prop reactNode receives children so nested content can be re-emitted', () => {
+      render(
+        <FilterOption
+          id='test-1'
+          optionValue='red'
+          displayValue='Red'
+          componentOverrides={{
+            reactNode: (props) => <li data-testid='custom-override'>{props.children}</li>,
+          }}
+          onChange={() => {}}>
+          <span data-testid='nested-child'>Nested</span>
+        </FilterOption>,
+      );
+      const override = screen.getByTestId('custom-override');
+      expect(override).toBeInTheDocument();
+      expect(screen.getByTestId('nested-child')).toBeInTheDocument();
+      // The nested child is inside the overridden node, not lost.
+      expect(override).toContainElement(screen.getByTestId('nested-child'));
+    });
   });
 
   describe('CSS classes', () => {
@@ -241,6 +261,20 @@ describe('FilterOption component', () => {
       const listItem = screen.getByRole('listitem');
       expect(listItem.classList.contains('cio:text-base')).toBeTruthy();
     });
+
+    test('label takes the leftover space rather than sizing to its text', () => {
+      const { container } = render(
+        <FilterOption id='test-1' optionValue='red' displayValue='Red' onChange={() => {}}>
+          <button type='button'>beside the label</button>
+        </FilterOption>,
+      );
+      // `grow basis-0 min-w-0`: a long display value wraps inside the label instead of claiming
+      // the whole flex line and pushing a sibling (e.g. a hierarchy toggle) onto its own line.
+      const label = container.querySelector('.cio-filter-option-label');
+      expect(label?.classList.contains('cio:grow')).toBeTruthy();
+      expect(label?.classList.contains('cio:basis-0')).toBeTruthy();
+      expect(label?.classList.contains('cio:min-w-0')).toBeTruthy();
+    });
   });
 
   describe('data attributes', () => {

spec/components/FilterOptionVisual/FilterOptionVisual.test.tsx

@@ -183,6 +183,61 @@ describe('FilterOptionVisual component', () => {
     });
   });
 
+  describe('children', () => {
+    test('renders children inside the row', () => {
+      render(
+        <FilterOptionVisual
+          id='test-1'
+          optionValue='red'
+          displayValue='Red'
+          visualType='color'
+          visualValue='#FF0000'
+          onChange={() => {}}>
+          <span data-testid='nested'>Nested</span>
+        </FilterOptionVisual>,
+      );
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toContainElement(screen.getByTestId('nested'));
+    });
+
+    test('renders children outside the label, after it', () => {
+      render(
+        <FilterOptionVisual
+          id='test-1'
+          optionValue='red'
+          displayValue='Red'
+          visualType='color'
+          visualValue='#FF0000'
+          onChange={() => {}}>
+          <button type='button' data-testid='nested-control'>
+            Toggle
+          </button>
+        </FilterOptionVisual>,
+      );
+      const child = screen.getByTestId('nested-control');
+      // Interactive children must stay out of the <label>: a nested control is invalid markup
+      // there and its clicks would also fire the row's checkbox.
+      expect(child.closest('label')).toBeNull();
+      expect(child.previousElementSibling).toBe(document.querySelector('.cio-filter-option-label'));
+    });
+
+    test('renders no extra nodes when children are omitted', () => {
+      render(
+        <FilterOptionVisual
+          id='test-1'
+          optionValue='red'
+          displayValue='Red'
+          visualType='color'
+          visualValue='#FF0000'
+          onChange={() => {}}
+        />,
+      );
+      const listItem = screen.getByRole('listitem');
+      expect(listItem.children).toHaveLength(1);
+      expect(listItem.children[0].classList.contains('cio-filter-option-label')).toBeTruthy();
+    });
+  });
+
   describe('checkbox default position', () => {
     test('checkbox defaults to right position', () => {
       render(