ListBox.Option now accepting ReactNode as children

.changeset/rude-pianos-boil.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Modified the options and text options files to accept ReactNode children

polaris-react/src/components/Listbox/components/Option/Option.module.css

@@ -11,3 +11,48 @@
 .divider {
   border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
 }
+
+.CustomContent {
+  margin: var(--p-space-100) var(--p-space-200) 0;
+  flex: 1;
+  border-radius: var(--p-border-radius-200);
+  cursor: pointer;
+  display: flex;
+
+  &:hover {
+    background-color: var(--p-color-bg-surface-hover);
+
+    &:not(.disabled) {
+      background-color: var(--p-color-bg-surface-secondary-hover);
+    }
+  }
+
+  &:active {
+    background-color: var(--p-color-bg-surface-active);
+
+    &:not(.disabled) {
+      background-color: var(--p-color-bg-surface-secondary-active);
+    }
+  }
+
+  &.selected {
+    background-color: var(--p-color-bg-surface-secondary-selected);
+    font-weight: var(--p-font-weight-semibold);
+  }
+
+  &.disabled {
+    background-color: transparent;
+    color: var(--p-color-text-disabled);
+    cursor: default;
+  }
+}
+
+li:first-of-type .CustomContent {
+  margin-top: 0;
+}
+
+[data-focused] .CustomContent:not(.disabled) {
+  outline: none;
+  background-color: var(--p-color-bg-surface-secondary-selected);
+  transition: background-color var(--p-motion-duration-400);
+}

polaris-react/src/components/Listbox/components/Option/Option.tsx

@@ -7,6 +7,8 @@ import {TextOption} from '../TextOption';
 import {UnstyledLink} from '../../../UnstyledLink';
 import {MappedActionContext} from '../../../../utilities/autocomplete';
 import {ActionContext} from '../../../../utilities/listbox/context';
+import {Box} from '../../../Box';
+import {InlineStack} from '../../../InlineStack';
 
 import styles from './Option.module.css';
 
@@ -65,14 +67,12 @@ export const Option = memo(function Option({
     event.preventDefault();
   };
 
-  const content =
-    typeof children === 'string' ? (
-      <TextOption selected={selected} disabled={disabled}>
-        {children}
-      </TextOption>
-    ) : (
-      children
-    );
+  // Always use TextOption to ensure consistent behavior and styling
+  const content = (
+    <TextOption selected={selected} disabled={disabled}>
+      {children}
+    </TextOption>
+  );
 
   const sectionAttributes = {
     [listboxWithinSectionDataSelector.attribute]: isWithinSection,

polaris-react/src/components/Listbox/components/Option/tests/Option.test.tsx

@@ -7,6 +7,10 @@ import {Option} from '../Option';
 import {TextOption} from '../../TextOption';
 import {MappedActionContext} from '../../../../../utilities/autocomplete';
 import {UnstyledLink} from '../../../../UnstyledLink';
+import {Badge} from '../../../../Badge';
+import {InlineStack} from '../../../../InlineStack';
+import {Text} from '../../../../Text';
+import {Icon} from '../../../../Icon';
 
 const defaultProps = {
   accessibilityLabel: 'label',
@@ -374,6 +378,47 @@ describe('Option', () => {
       });
     });
   });
+
+  it('renders a string child in TextOption', () => {
+    const option = mountWithListboxProvider(
+      <Option {...defaultProps}>String content</Option>,
+    );
+
+    expect(option).toContainReactComponent(TextOption, {
+      children: 'String content',
+    });
+  });
+
+  it('renders ReactNode children in TextOption', () => {
+    const complexContent = (
+      <InlineStack gap="200">
+        <Text as="span">Complex content</Text>
+        <Badge>New</Badge>
+      </InlineStack>
+    );
+
+    const option = mountWithListboxProvider(
+      <Option {...defaultProps}>{complexContent}</Option>,
+    );
+
+    expect(option).toContainReactComponent(TextOption, {
+      children: expect.objectContaining({
+        type: InlineStack,
+        props: expect.objectContaining({
+          children: [
+            expect.objectContaining({
+              type: Text,
+              props: {as: 'span', children: 'Complex content'},
+            }),
+            expect.objectContaining({
+              type: Badge,
+              props: {children: 'New'},
+            }),
+          ],
+        }),
+      }),
+    });
+  });
 });
 
 function noop() {}

polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx

@@ -35,7 +35,7 @@ export const TextOption = memo(function TextOption({
     isAction && styles.isAction,
   );
 
-  const optionMarkup = selected ? (
+  const contentMarkup = selected && !allowMultiple ? (
     <Box width="100%">
       <InlineStack wrap={false} align="space-between" gap="200">
         {children}
@@ -45,7 +45,11 @@ export const TextOption = memo(function TextOption({
       </InlineStack>
     </Box>
   ) : (
-    <>{children}</>
+    <Box width="100%">
+      <InlineStack wrap={false} gap="200">
+        {children}
+      </InlineStack>
+    </Box>
   );
 
   return (
@@ -56,7 +60,7 @@ export const TextOption = memo(function TextOption({
             <Checkbox disabled={disabled} checked={selected} label={children} />
           </div>
         ) : (
-          optionMarkup
+          contentMarkup
         )}
       </div>
     </div>

polaris-react/src/components/Listbox/components/TextOption/tests/TextOption.test.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-
+import {Badge} from '../../../../Badge';
+import {InlineStack} from '../../../../InlineStack';
+import {Text} from '../../../../Text';
+import {Icon} from '../../../../Icon';
+import {Box} from '../../../../Box';
 import {TextOption} from '../TextOption';
 import {Listbox} from '../../..';
 import {Checkbox} from '../../../../Checkbox';
@@ -63,4 +67,90 @@ describe('TextOption', () => {
 
     expect(textOption).not.toContainReactComponent(Checkbox);
   });
+
+  const defaultContext = {
+    allowMultiple: false,
+  };
+
+  function mountWithContext(
+    children: React.ReactNode,
+    context = defaultContext,
+  ) {
+    return mountWithApp(
+      <ComboboxListboxOptionContext.Provider value={context}>
+        {children}
+      </ComboboxListboxOptionContext.Provider>,
+    );
+  }
+
+  describe('children', () => {
+    it('renders string children', () => {
+      const textOption = mountWithContext(
+        <TextOption>Simple text</TextOption>,
+      );
+
+      expect(textOption).toContainReactText('Simple text');
+    });
+
+    it('renders ReactNode children', () => {
+      const complexContent = (
+        <InlineStack gap="200">
+          <Text as="span">Complex content</Text>
+          <Badge>New</Badge>
+        </InlineStack>
+      );
+
+      const textOption = mountWithContext(
+        <TextOption>{complexContent}</TextOption>,
+      );
+
+      expect(textOption).toContainReactComponent(InlineStack, {
+        children: [
+          expect.objectContaining({
+            type: Text,
+            props: {as: 'span', children: 'Complex content'},
+          }),
+          expect.objectContaining({
+            type: Badge,
+            props: {children: 'New'},
+          }),
+        ],
+      });
+    });
+
+    it('wraps ReactNode children in Box when selected', () => {
+      const complexContent = (
+        <InlineStack gap="200">
+          <Text as="span">Complex content</Text>
+          <Badge>New</Badge>
+        </InlineStack>
+      );
+
+      const textOption = mountWithContext(
+        <TextOption selected>{complexContent}</TextOption>,
+      );
+
+      expect(textOption).toContainReactComponent(Box, {
+        width: '100%',
+      });
+    });
+
+    it('maintains proper layout with ReactNode children in multiple selection mode', () => {
+      const complexContent = (
+        <InlineStack gap="200">
+          <Text as="span">Complex content</Text>
+          <Badge>New</Badge>
+        </InlineStack>
+      );
+
+      const textOption = mountWithContext(
+        <TextOption>{complexContent}</TextOption>,
+        {allowMultiple: true},
+      );
+
+      expect(textOption).toContainReactComponent(Box, {
+        width: '100%',
+      });
+    });
+  });
 });