SelectPanel2: Instant selection variant

[siddharthkp]

Context:

• https://github.com/github/primer/issues/2715
• https://github.com/github/primer/issues/2396

<SelectPanel selectionVariant="instant">
  ...
</SelectPanel>

1. renders ActionList with selectionVariant=single
2. does not render primary footer actions
3. Selecting an item calls onSubmit and closes the menu instantly

instant-selectpanel.mov

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	104.62 KB (0%)
dist/browser.umd.js	105.2 KB (0%)

[siddharthkp]

not throwing validation errors yet. Will create a PR for all validations errors together

[broccolinisoup]

Looks good to me ⭐ Just left two comments/questions

[broccolinisoup]

Totally optional - I usually find the syntax below more readable but feel free to ignore if it doesn't resonate with you 🤗

Suggested change

	{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>
	)}
	{!hidePrimaryActions && (
	<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>
	)}

[siddharthkp]

but feel free to ignore if it doesn't resonate with you 🤗

Firstly, thank you! I appreciate that!

because I feel the opposite 😅

I find double negatives like !hide confusing. don't hide = so show. There's something really clean about hide → return null

[broccolinisoup]

😅 Fair enough!!

[pksjce]

Just wondering why this Button needs to be block type?

[siddharthkp]

Good question!

So, for most cases of SelectPanel you'd see a Save and Cancel button on the right, but then also an optional secondary button on the left:

In the case of instant variant, there is no Save and Cancel. So, we'd like the secondary button to take the full width of the footer so it looks less awkward:

Without block	With block

Now because the footer has 2 divs inside of it - left buttons container and right buttons container, it's the left container that "flex-grows" based on variant. Inside the left container, secondary button can always take the full width (block) available to it.

left container with flexGrow: 0	left container with flexGrow: 1

[pksjce]

I see! thanks for the explainer!

[siddharthkp]

While I'm able to see the story for Instant selection variant, the other stories for SelectPanel2 seem to be erroring out

Thanks @pksjce for catching that! Fixed now!