experimental/SelectPanel2: Add back button (#4288)

* add back button * add nested panel example * fix nested panel focus * implement save and cancel on second panel * add onCancel for first panel * Create fair-sloths-kick.md * add preview for selection * show dividers * hide selection in story * update snapshots * make the first ActionList role=list * add warning to story
primer · Mar 7, 2024 · 200fb18 · 200fb18
1 parent 93d1f5f
commit 200fb18
Show file tree

Hide file tree

Showing 6 changed files with 290 additions and 17 deletions.
diff --git a/.changeset/fair-sloths-kick.md b/.changeset/fair-sloths-kick.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+experimental/SelectPanel: Add back button
diff --git a/packages/react/src/ActionList/Selection.tsx b/packages/react/src/ActionList/Selection.tsx
@@ -30,7 +30,9 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
   }
 
   if (selectionVariant === 'single' || listRole === 'menu') {
-    return <LeadingVisualContainer>{selected && <CheckIcon />}</LeadingVisualContainer>
+    return (
+      <LeadingVisualContainer data-component="ActionList.Selection">{selected && <CheckIcon />}</LeadingVisualContainer>
+    )
   }
 
   /**
@@ -59,7 +61,7 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
   }
 
   return (
-    <LeadingVisualContainer>
+    <LeadingVisualContainer data-component="ActionList.Selection">
       <Box
         sx={{
           borderColor: selected ? 'accent.fg' : 'neutral.emphasis',