Render radio icons on single select modal select panel

Author: hectahertz

packages/react/src/ActionList/ActionList.module.css

@@ -409,6 +409,10 @@
   visibility: hidden;
 }
 
+.SingleSelectRadio {
+  margin-right: var(--base-size-8);
+}
+
 /* button or a tag */
 
 /* [ [spacer] [leadingAction] [leadingVisual] [content] ] */

packages/react/src/ActionList/Selection.tsx

@@ -8,6 +8,7 @@ import Box from '../Box'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './ActionList.module.css'
 import {actionListCssModulesFlag} from './featureflag'
+import Radio from '../Radio'
 
 type SelectionProps = Pick<ActionListItemProps, 'selected' | 'className'>
 export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({selected, className}) => {
@@ -34,6 +35,17 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
     }
   }
 
+  if (selectionVariant === 'radio') {
+    return (
+      <VisualContainer className={className}>
+        {/* This is just a way to get the visuals from Radio, but it should be ignored in terms of accessibility */}
+        <div aria-hidden="true">
+          <Radio className={classes.SingleSelectRadio} value="unused" checked={selected} />
+        </div>
+      </VisualContainer>
+    )
+  }
+
   if (selectionVariant === 'single' || listRole === 'menu') {
     if (enabled) {
       return (

packages/react/src/ActionList/shared.ts

@@ -124,7 +124,7 @@ export type ActionListProps = React.PropsWithChildren<{
   /**
    * Whether multiple Items or a single Item can be selected.
    */
-  selectionVariant?: 'single' | 'multiple'
+  selectionVariant?: 'single' | 'radio' | 'multiple'
   /**
    * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
    */

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -545,7 +545,7 @@ export function SelectPanel({
             // we don't accidentally override props.aria-label
             aria-labelledby={listProps['aria-label'] ? undefined : titleId}
             aria-multiselectable={isMultiSelectVariant(selected) ? 'true' : 'false'}
-            selectionVariant={isMultiSelectVariant(selected) ? 'multiple' : 'single'}
+            selectionVariant={isSingleSelectModal ? 'radio' : isMultiSelectVariant(selected) ? 'multiple' : 'single'}
             items={itemsToRender}
             textInputProps={extendedTextInputProps}
             loading={loading || isLoading}

packages/react/src/deprecated/ActionList/Item.tsx

@@ -84,7 +84,7 @@ export interface ItemProps extends SxProp {
   /**
    *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
    */
-  selectionVariant?: 'single' | 'multiple'
+  selectionVariant?: 'single' | 'multiple' | 'radio'
 
   /**
    * Designates the group that an item belongs to.

packages/react/src/deprecated/ActionList/List.tsx

@@ -67,7 +67,7 @@ export interface ListPropsBase {
   /**
    *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
    */
-  selectionVariant?: 'single' | 'multiple'
+  selectionVariant?: 'single' | 'multiple' | 'radio'
 
   /**
    * Whether to display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.