From 19a473e85e6746c146d681b97ecdb357484eba14 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Sat, 13 Jan 2024 22:48:45 +0530
Subject: [PATCH 1/5] add secondary actions: link and checkbox

---
 src/drafts/SelectPanel2/SelectPanel.tsx       | 46 ++++++++++++++++---
 .../stories/SelectPanel.examples.stories.tsx  |  7 +--
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/drafts/SelectPanel2/SelectPanel.tsx b/src/drafts/SelectPanel2/SelectPanel.tsx
index 10404a96f87..d1f5ce6d2e5 100644
--- a/src/drafts/SelectPanel2/SelectPanel.tsx
+++ b/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -15,12 +15,17 @@ import {
   Text,
   ActionListProps,
   Octicon,
+  Link,
+  LinkProps,
+  Checkbox,
 } from '../../index'
 import {ActionListContainerContext} from '../../ActionList/ActionListContainerContext'
 import {useSlots} from '../../hooks/useSlots'
 import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
 import {useFocusZone} from '../../hooks/useFocusZone'
 import {StyledOverlay, OverlayProps} from '../../Overlay/Overlay'
+import InputLabel from '../../internal/components/InputLabel'
+import {invariant} from '../../utils/invariant'
 
 const SelectPanelContext = React.createContext<{
   title: string
@@ -405,7 +410,9 @@ const SelectPanelFooter = ({...props}) => {
       sx={{
         display: 'flex',
         justifyContent: 'space-between',
-        padding: 3,
+        alignItems: 'center',
+        padding: hidePrimaryActions ? 2 : 3,
+        minHeight: '44px',
         borderTop: '1px solid',
         borderColor: 'border.default',
       }}
@@ -426,13 +433,38 @@ const SelectPanelFooter = ({...props}) => {
   )
 }
 
-// TODO: is this the right way to add button props?
 const SelectPanelSecondaryButton: React.FC<ButtonProps> = props => {
   return <Button type="button" size="small" block {...props} />
 }
-// SelectPanel.SecondaryLink = props => {
-//   return <a {...props}>{props.children}</a>
-// }
+
+const SelectPanelSecondaryLink: React.FC<LinkProps> = props => {
+  return (
+    // @ts-ignore TODO: is as prop is not recognised by button?
+    <Button as={Link} size="small" variant="invisible" block {...props} sx={{fontSize: 0}}>
+      {props.children}
+    </Button>
+  )
+}
+
+const SelectPanelSecondaryCheckbox: React.FC<{children: string; id?: string}> = props => {
+  const id = useId(props.id)
+  const {selectionVariant} = React.useContext(SelectPanelContext)
+
+  // Checkbox should not be used with instant selection
+  invariant(
+    selectionVariant !== 'instant',
+    'Sorry! Secondary action with checkbox is not allowed with selectionVariant="instant"',
+  )
+
+  return (
+    <Box sx={{display: 'flex', alignItems: 'center', gap: 2}}>
+      <Checkbox id={id} sx={{marginTop: 0}} />
+      <InputLabel htmlFor={id} sx={{fontSize: 0}}>
+        {props.children}
+      </InputLabel>
+    </Box>
+  )
+}
 
 const SelectPanelLoading: React.FC<{children: string}> = ({children = 'Fetching items...'}) => {
   return (
@@ -536,7 +568,9 @@ export const SelectPanel = Object.assign(Panel, {
   Header: SelectPanelHeader,
   SearchInput: SelectPanelSearchInput,
   Footer: SelectPanelFooter,
-  SecondaryButton: SelectPanelSecondaryButton,
   Loading: SelectPanelLoading,
   Message: SelectPanelMessage,
+  SecondaryButton: SelectPanelSecondaryButton,
+  SecondaryLink: SelectPanelSecondaryLink,
+  SecondaryCheckbox: SelectPanelSecondaryCheckbox,
 })
diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
index 81698bdb900..e890a706efe 100644
--- a/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
+++ b/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
@@ -574,7 +574,7 @@ export const WithFilterButtons = () => {
             Try a different search term
           </SelectPanel.Message>
         ) : (
-          <ActionList selectionVariant="single">
+          <ActionList>
             {itemsToShow.map(item => (
               <ActionList.Item
                 key={item.id}
@@ -589,10 +589,7 @@ export const WithFilterButtons = () => {
         )}
 
         <SelectPanel.Footer>
-          {/* @ts-ignore TODO as prop is not identified by button? */}
-          <SelectPanel.SecondaryButton as="a" href={`/${selectedFilter}`}>
-            View all {selectedFilter}
-          </SelectPanel.SecondaryButton>
+          <SelectPanel.SecondaryLink href={`/${selectedFilter}`}>View all {selectedFilter}</SelectPanel.SecondaryLink>
         </SelectPanel.Footer>
       </SelectPanel>
     </>

From 02e3ac278da72bae2436d3e6e93680c956a5a0f0 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Sun, 14 Jan 2024 00:52:04 +0530
Subject: [PATCH 2/5] merge secondary actions

---
 src/drafts/SelectPanel2/SelectPanel.tsx       | 91 ++++++++++++-------
 .../stories/SelectPanel.default.stories.tsx   |  2 +-
 .../stories/SelectPanel.examples.stories.tsx  |  8 +-
 .../stories/SelectPanel.features.stories.tsx  |  2 +-
 4 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/src/drafts/SelectPanel2/SelectPanel.tsx b/src/drafts/SelectPanel2/SelectPanel.tsx
index d1f5ce6d2e5..21050ff1fd2 100644
--- a/src/drafts/SelectPanel2/SelectPanel.tsx
+++ b/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -18,6 +18,7 @@ import {
   Link,
   LinkProps,
   Checkbox,
+  CheckboxProps,
 } from '../../index'
 import {ActionListContainerContext} from '../../ActionList/ActionListContainerContext'
 import {useSlots} from '../../hooks/useSlots'
@@ -394,6 +395,7 @@ const SelectPanelSearchInput: React.FC<TextInputProps> = ({onChange: propsOnChan
   )
 }
 
+const FooterContext = React.createContext(false)
 const SelectPanelFooter = ({...props}) => {
   const {onCancel, selectionVariant} = React.useContext(SelectPanelContext)
 
@@ -406,38 +408,40 @@ const SelectPanelFooter = ({...props}) => {
   }
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: hidePrimaryActions ? 2 : 3,
-        minHeight: '44px',
-        borderTop: '1px solid',
-        borderColor: 'border.default',
-      }}
-    >
-      <Box sx={{flexGrow: hidePrimaryActions ? 1 : 0}}>{props.children}</Box>
-
-      {hidePrimaryActions ? null : (
-        <Box data-selectpanel-primary-actions sx={{display: 'flex', gap: 2}}>
-          <Button size="small" type="button" onClick={() => onCancel()}>
-            Cancel
-          </Button>
-          <Button size="small" type="submit" variant="primary">
-            Save
-          </Button>
-        </Box>
-      )}
-    </Box>
+    <FooterContext.Provider value={true}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: hidePrimaryActions ? 2 : 3,
+          minHeight: '44px',
+          borderTop: '1px solid',
+          borderColor: 'border.default',
+        }}
+      >
+        <Box sx={{flexGrow: hidePrimaryActions ? 1 : 0}}>{props.children}</Box>
+
+        {hidePrimaryActions ? null : (
+          <Box data-selectpanel-primary-actions sx={{display: 'flex', gap: 2}}>
+            <Button size="small" type="button" onClick={() => onCancel()}>
+              Cancel
+            </Button>
+            <Button size="small" type="submit" variant="primary">
+              Save
+            </Button>
+          </Box>
+        )}
+      </Box>
+    </FooterContext.Provider>
   )
 }
 
-const SelectPanelSecondaryButton: React.FC<ButtonProps> = props => {
+const SecondaryButton: React.FC<ButtonProps> = props => {
   return <Button type="button" size="small" block {...props} />
 }
 
-const SelectPanelSecondaryLink: React.FC<LinkProps> = props => {
+const SecondaryLink: React.FC<LinkProps> = props => {
   return (
     // @ts-ignore TODO: is as prop is not recognised by button?
     <Button as={Link} size="small" variant="invisible" block {...props} sx={{fontSize: 0}}>
@@ -446,26 +450,45 @@ const SelectPanelSecondaryLink: React.FC<LinkProps> = props => {
   )
 }
 
-const SelectPanelSecondaryCheckbox: React.FC<{children: string; id?: string}> = props => {
-  const id = useId(props.id)
+const SecondaryCheckbox: React.FC<CheckboxProps> = ({id, children, ...props}) => {
+  const checkboxId = useId(id)
   const {selectionVariant} = React.useContext(SelectPanelContext)
 
   // Checkbox should not be used with instant selection
   invariant(
     selectionVariant !== 'instant',
-    'Sorry! Secondary action with checkbox is not allowed with selectionVariant="instant"',
+    'Sorry! SelectPanel.SecondaryAction with variant="checkbox" is not allowed inside selectionVariant="instant"',
   )
 
   return (
     <Box sx={{display: 'flex', alignItems: 'center', gap: 2}}>
-      <Checkbox id={id} sx={{marginTop: 0}} />
-      <InputLabel htmlFor={id} sx={{fontSize: 0}}>
-        {props.children}
+      <Checkbox id={checkboxId} sx={{marginTop: 0}} {...props} />
+      <InputLabel htmlFor={checkboxId} sx={{fontSize: 0}}>
+        {children}
       </InputLabel>
     </Box>
   )
 }
 
+type SelectPanelSecondaryActionProps = {children: React.ReactNode} & (
+  | ({variant: 'button'} & Partial<Omit<ButtonProps, 'variant'>>)
+  | ({variant: 'link'} & Partial<LinkProps>)
+  | ({variant: 'checkbox'; id?: string} & CheckboxProps)
+)
+
+const SelectPanelSecondaryAction: React.FC<SelectPanelSecondaryActionProps> = ({variant, ...props}) => {
+  const insideFooter = React.useContext(FooterContext)
+  invariant(insideFooter, 'SelectPanel.SecondaryAction is only allowed inside SelectPanel.Footer')
+
+  // @ts-ignore TODO
+  if (variant === 'button') return <SecondaryButton {...props} />
+  // @ts-ignore TODO
+  else if (variant === 'link') return <SecondaryLink {...props} />
+  // @ts-ignore TODO
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  else if (variant === 'checkbox') return <SecondaryCheckbox {...props} />
+}
+
 const SelectPanelLoading: React.FC<{children: string}> = ({children = 'Fetching items...'}) => {
   return (
     <Box
@@ -570,7 +593,5 @@ export const SelectPanel = Object.assign(Panel, {
   Footer: SelectPanelFooter,
   Loading: SelectPanelLoading,
   Message: SelectPanelMessage,
-  SecondaryButton: SelectPanelSecondaryButton,
-  SecondaryLink: SelectPanelSecondaryLink,
-  SecondaryCheckbox: SelectPanelSecondaryCheckbox,
+  SecondaryAction: SelectPanelSecondaryAction,
 })
diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx
index 923ffb5ad53..b5faea6f4e2 100644
--- a/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx
+++ b/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx
@@ -103,7 +103,7 @@ export const Default = () => {
         )}
 
         <SelectPanel.Footer>
-          <SelectPanel.SecondaryButton>Edit labels</SelectPanel.SecondaryButton>
+          <SelectPanel.SecondaryAction variant="button">Edit labels</SelectPanel.SecondaryAction>
         </SelectPanel.Footer>
       </SelectPanel>
     </>
diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
index e890a706efe..a9d58360027 100644
--- a/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
+++ b/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
@@ -205,7 +205,9 @@ export const AsyncWithSuspendedList = () => {
         <React.Suspense fallback={<SelectPanel.Loading>Fetching labels...</SelectPanel.Loading>}>
           <SuspendedActionList query={query} />
           <SelectPanel.Footer>
-            <SelectPanel.SecondaryButton>Edit labels</SelectPanel.SecondaryButton>
+            <SelectPanel.SecondaryAction variant="link" href="/settings">
+              Edit labels
+            </SelectPanel.SecondaryAction>
           </SelectPanel.Footer>
         </React.Suspense>
       </SelectPanel>
@@ -589,7 +591,9 @@ export const WithFilterButtons = () => {
         )}
 
         <SelectPanel.Footer>
-          <SelectPanel.SecondaryLink href={`/${selectedFilter}`}>View all {selectedFilter}</SelectPanel.SecondaryLink>
+          <SelectPanel.SecondaryAction variant="link" href={`/${selectedFilter}`}>
+            View all {selectedFilter}
+          </SelectPanel.SecondaryAction>
         </SelectPanel.Footer>
       </SelectPanel>
     </>
diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx
index 255edd3a9d2..50d607ab25c 100644
--- a/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx
+++ b/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx
@@ -38,7 +38,7 @@ export const InstantSelectionVariant = () => {
           ))}
         </ActionList>
         <SelectPanel.Footer>
-          <SelectPanel.SecondaryButton>Edit tags</SelectPanel.SecondaryButton>
+          <SelectPanel.SecondaryAction variant="button">Edit tags</SelectPanel.SecondaryAction>
         </SelectPanel.Footer>
       </SelectPanel>
     </>

From a41d55fc31d9ec6a29635bca27c4e7b386b6c08f Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Sun, 14 Jan 2024 00:56:44 +0530
Subject: [PATCH 3/5] Create sharp-seahorses-guess.md

---
 .changeset/sharp-seahorses-guess.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sharp-seahorses-guess.md

diff --git a/.changeset/sharp-seahorses-guess.md b/.changeset/sharp-seahorses-guess.md
new file mode 100644
index 00000000000..e3ddc8a1c8d
--- /dev/null
+++ b/.changeset/sharp-seahorses-guess.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+experimental/SelectPanel: Add SelectPanel.SecondaryAction

From 37966a4fef1a2c6f0a54dd32646b614cf483c206 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Sun, 14 Jan 2024 01:10:40 +0530
Subject: [PATCH 4/5] update playground

---
 .../stories/SelectPanel.playground.stories.tsx   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx
index a9d318eccc7..dd3b0216ce0 100644
--- a/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx
+++ b/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx
@@ -11,10 +11,16 @@ export default {
   args: {
     title: 'Select labels',
     selectionVariant: 'multiple',
+    secondaryActionVariant: 'button',
   },
   argTypes: {
-    secondaryButtonText: {
-      name: 'Secondary button text',
+    secondaryActionVariant: {
+      name: 'Secondary action variant',
+      type: 'enum',
+      options: ['button', 'link', 'checkbox'],
+    },
+    secondaryActionText: {
+      name: 'Secondary action text',
       type: 'string',
     },
   },
@@ -125,8 +131,10 @@ export const Playground: StoryFn = args => {
         )}
 
         <SelectPanel.Footer>
-          {args.secondaryButtonText ? (
-            <SelectPanel.SecondaryButton>{args.secondaryButtonText}</SelectPanel.SecondaryButton>
+          {args.secondaryActionText ? (
+            <SelectPanel.SecondaryAction variant={args.secondaryActionVariant}>
+              {args.secondaryActionText}
+            </SelectPanel.SecondaryAction>
           ) : null}
         </SelectPanel.Footer>
       </SelectPanel>

From 3789bee7c8a204d8e3e1027d06214f1268e48365 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 22 Jan 2024 23:43:35 +0530
Subject: [PATCH 5/5] explicit type for footer context

---
 src/drafts/SelectPanel2/SelectPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/drafts/SelectPanel2/SelectPanel.tsx b/src/drafts/SelectPanel2/SelectPanel.tsx
index 21050ff1fd2..af23295f82a 100644
--- a/src/drafts/SelectPanel2/SelectPanel.tsx
+++ b/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -395,7 +395,7 @@ const SelectPanelSearchInput: React.FC<TextInputProps> = ({onChange: propsOnChan
   )
 }
 
-const FooterContext = React.createContext(false)
+const FooterContext = React.createContext<boolean>(false)
 const SelectPanelFooter = ({...props}) => {
   const {onCancel, selectionVariant} = React.useContext(SelectPanelContext)