Merge branch 'next-major' into sid/update-changelog-next-major

Author: siddharthkp

.github/workflows/release-schedule.yml

@@ -6,7 +6,7 @@ on:
         type: boolean
         description: 'Run in dry mode. This option will disable creating and closing issues'
   schedule:
-    - cron: '30 13 * * MON'
+    - cron: '30 15 * * MON'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

src/drafts/SelectPanel2/SelectPanel.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {SelectPanel} from './SelectPanel'
 import {ActionList, ActionMenu, Avatar, Box, Button, Flash} from '../../../src/index'
-import {ArrowRightIcon, AlertIcon, EyeIcon, GitBranchIcon, TriangleDownIcon} from '@primer/octicons-react'
+import {ArrowRightIcon, AlertIcon, EyeIcon, GitBranchIcon, TriangleDownIcon, TagIcon} from '@primer/octicons-react'
 import data from './mock-data'
 
 const getCircle = (color: string) => (
@@ -839,6 +839,39 @@ export const IWithRemoveFilterIcon = () => {
   )
 }
 
+export const FInstantSelectionVariant = () => {
+  const [selectedTag, setSelectedTag] = React.useState<string>()
+
+  const onSubmit = () => {
+    if (!selectedTag) return
+    data.ref = selectedTag // pretending to persist changes
+  }
+
+  const itemsToShow = data.tags
+
+  return (
+    <>
+      <h1>Instant selection variant</h1>
+
+      <SelectPanel title="Choose a tag" selectionVariant="instant" onSubmit={onSubmit} height="medium" defaultOpen>
+        {/* @ts-ignore todo */}
+        <SelectPanel.Button leadingIcon={TagIcon}>{selectedTag || 'Choose a tag'}</SelectPanel.Button>
+
+        <ActionList>
+          {itemsToShow.map(tag => (
+            <ActionList.Item key={tag.id} onSelect={() => setSelectedTag(tag.id)} selected={selectedTag === tag.id}>
+              {tag.name}
+            </ActionList.Item>
+          ))}
+        </ActionList>
+        <SelectPanel.Footer>
+          <SelectPanel.SecondaryButton>Edit tags</SelectPanel.SecondaryButton>
+        </SelectPanel.Footer>
+      </SelectPanel>
+    </>
+  )
+}
+
 // ----- Suspense implementation details ----
 
 const cache = new Map()

src/drafts/SelectPanel2/SelectPanel.tsx

@@ -13,6 +13,7 @@ import {
   AnchoredOverlayProps,
   Spinner,
   Text,
+  ActionListProps,
 } from '../../../src/index'
 import {ActionListContainerContext} from '../../../src/ActionList/ActionListContainerContext'
 import {useSlots} from '../../hooks/useSlots'
@@ -24,12 +25,14 @@ const SelectPanelContext = React.createContext<{
   onClearSelection: undefined | (() => void)
   searchQuery: string
   setSearchQuery: () => void
+  selectionVariant: ActionListProps['selectionVariant'] | 'instant'
 }>({
   title: '',
   onCancel: () => {},
   onClearSelection: undefined,
   searchQuery: '',
   setSearchQuery: () => {},
+  selectionVariant: 'multiple',
 })
 
 // @ts-ignore todo
@@ -56,9 +59,9 @@ const SelectPanel = props => {
     if (props.open === undefined) setInternalOpen(false)
     if (typeof props.onCancel === 'function') props.onCancel()
   }
-  // @ts-ignore todo
-  const onInternalSubmit = event => {
-    event.preventDefault()
+
+  const onInternalSubmit = (event?: React.SyntheticEvent) => {
+    event?.preventDefault() // there is no event with selectionVariant=instant
     if (props.open === undefined) setInternalOpen(false)
     if (typeof props.onSubmit === 'function') props.onSubmit(event)
   }
@@ -67,6 +70,10 @@ const SelectPanel = props => {
     if (typeof props.onSubmit === 'function') props.onClearSelection()
   }
 
+  const internalAfterSelect = () => {
+    if (props.selectionVariant === 'instant') onInternalSubmit()
+  }
+
   /* Search/Filter */
   const [searchQuery, setSearchQuery] = React.useState('')
 
@@ -96,6 +103,7 @@ const SelectPanel = props => {
             searchQuery,
             // @ts-ignore todo
             setSearchQuery,
+            selectionVariant: props.selectionVariant,
           }}
         >
           <Box
@@ -126,7 +134,9 @@ const SelectPanel = props => {
                   container: 'SelectPanel',
                   listRole: 'listbox',
                   selectionAttribute: 'aria-selected',
-                  selectionVariant: props.selectionVariant || 'multiple',
+                  selectionVariant:
+                    props.selectionVariant === 'instant' ? 'single' : props.selectionVariant || 'multiple',
+                  afterSelect: internalAfterSelect,
                 }}
               >
                 {childrenInBody}
@@ -243,7 +253,15 @@ const SelectPanelSearchInput = props => {
 SelectPanel.SearchInput = SelectPanelSearchInput
 
 const SelectPanelFooter = ({...props}) => {
-  const {onCancel} = React.useContext(SelectPanelContext)
+  const {onCancel, selectionVariant} = React.useContext(SelectPanelContext)
+
+  const hidePrimaryActions = selectionVariant === 'instant'
+
+  if (hidePrimaryActions && !props.children) {
+    // nothing to render
+    // todo: we can inform them the developer footer will render nothing
+    return null
+  }
 
   return (
     <Box
@@ -255,23 +273,26 @@ const SelectPanelFooter = ({...props}) => {
         borderColor: 'border.default',
       }}
     >
-      <div>{props.children}</div>
-      <Box 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 sx={{flexGrow: hidePrimaryActions ? 1 : 0}}>{props.children}</Box>
+
+      {hidePrimaryActions ? null : (
+        <Box 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>
   )
 }
 SelectPanel.Footer = SelectPanelFooter
 
 // @ts-ignore todo
 SelectPanel.SecondaryButton = props => {
-  return <Button {...props} size="small" type="button" />
+  return <Button {...props} size="small" type="button" block />
 }
 // SelectPanel.SecondaryLink = props => {
 //   return <a {...props}>{props.children}</a>

src/drafts/SelectPanel2/mock-data.ts

@@ -922,7 +922,9 @@ const data = {
     {id: 'dependabot/markdownlint-github-0.4.1', name: 'dependabot/markdownlint-github-0.4.1'},
   ],
   tags: [
-    {id: 'v35.29.0', name: 'v35.29.0', trailingInfo: 'Latest'},
+    {id: 'v35.31.0', name: 'v35.31.0', trailingInfo: 'Latest'},
+    {id: 'v35.30.0', name: 'v35.30.0'},
+    {id: 'v35.29.0', name: 'v35.29.0'},
     {id: 'v35.28.0', name: 'v35.28.0'},
     {id: 'v35.27.1', name: 'v35.27.1'},
     {id: 'v35.27.0', name: 'v35.27.0'},