Prevent ActionList crash when selected prop is used without selectionVariant (#6235)

Author: liuliu-dev

.changeset/true-lines-find.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Prevent ActionList crash when selected prop is true without selectionVariant.

packages/react/src/ActionList/ActionList.test.tsx

@@ -30,21 +30,24 @@ describe('ActionList', () => {
     expect(results).toHaveNoViolations()
   })
 
-  it('should throw when selected is provided without a selectionVariant on parent', async () => {
-    // we expect console.error to be called, so we suppress that in the test
-    const mockError = vi.spyOn(console, 'error').mockImplementation(() => vi.fn())
-
-    expect(() => {
-      HTMLRender(
-        <ActionList showDividers role="listbox" aria-label="Select a project">
-          <ActionList.Item role="option" selected={true}>
-            Primer React
-          </ActionList.Item>
-        </ActionList>,
-      )
-    }).toThrow('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined')
+  it('should warn when selected is provided without a selectionVariant on parent', async () => {
+    // we expect console.warn to be called, so we spy on that in the test
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => vi.fn())
+
+    HTMLRender(
+      <ActionList showDividers role="listbox" aria-label="Select a project">
+        <ActionList.Item role="option" selected={true}>
+          Primer React
+        </ActionList.Item>
+      </ActionList>,
+    )
+
+    expect(spy).toHaveBeenCalledWith(
+      'Warning:',
+      'For Item to be selected, ActionList or ActionList.Group should have a selectionVariant defined.',
+    )
 
-    mockError.mockRestore()
+    spy.mockRestore()
   })
 
   it('should be navigatable with arrow keys for certain roles', async () => {

packages/react/src/ActionList/Selection.tsx

@@ -6,6 +6,7 @@ import {type ActionListProps, type ActionListItemProps, ListContext} from './sha
 import {VisualContainer} from './Visuals'
 import classes from './ActionList.module.css'
 import Radio from '../Radio'
+import {warning} from '../utils/warning'
 
 type SelectionProps = Pick<ActionListItemProps, 'selected' | 'className'>
 export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({selected, className}) => {
@@ -20,14 +21,11 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
 
   if (!selectionVariant) {
     // if selectionVariant is not set on List, but Item is selected
-    // fail loudly instead of silently ignoring
+    // warn in development
     if (selected) {
-      throw new Error(
-        'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined',
-      )
-    } else {
-      return null
+      warning(true, 'For Item to be selected, ActionList or ActionList.Group should have a selectionVariant defined.')
     }
+    return null
   }
 
   if (selectionVariant === 'radio') {