SelectPanel2: Add back button #4288
Conversation
siddharthkp
commented
Feb 20, 2024
•
siddharthkp
commented
- Closes https://github.com/github/primer/issues/3061
- Demo: https://primer-0f789cb9c7-13348165.drafts.github.io/storybook/?path=/story/drafts-components-selectpanel-examples--nested-selection
- Integration tests with dotcom: https://github.com/github/github/pull/313651
🦋 Changeset detectedLatest commit: 065f107 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
|
@siddharthkp for reviewing, should I be looking at the semantics of the nested selection story or should I be just looking at the back button behavior? Seeing the initial listbox was surprising so just wanted to double-check what I should be looking at in this PR 👀 |
Both are welcome!
I can go either way on this 🤔 Repositories from the first panel still could be treated as "selected", with PRs inside them being displayed outside the panel. Orrr we could treat the first panel/layer simply as filtering buttons that lead to the actual "options" that can be selected. What do you think? |
There was a problem hiding this comment.
Going through this, something I'm not sure about is the listbox being used for nested selection in this way. Something that is disorienting is that you make a selection in a listbox and then shift to a text input and you don't necessarily know why depending on the screen reader. This kind of relationship almost feels more like checkbox groups or a tree.
When going through it with voiceover, I noticed that sometimes the virtual cursor and the focused element got out of sync in selection 🤔 Not sure why but this may be unrelated to this PR. It also seems like hitting escape out of the second dialog will not restore focus to the button and will make it so that you cannot open the dialog again.
Very valid! I changed it to |
| @@ -316,7 +319,7 @@ const SelectPanelButton = React.forwardRef<HTMLButtonElement, ButtonProps>((prop | |||
| return <Button ref={anchorRef} {...props} /> | |||
| }) | |||
|
|
|||
| const SelectPanelHeader: React.FC<React.PropsWithChildren> = ({children, ...props}) => { | |||
| const SelectPanelHeader: React.FC<React.PropsWithChildren & {onBack?: () => void}> = ({children, onBack, ...props}) => { | |||
There was a problem hiding this comment.
Another syntax if it's helpful, React.PropsWithChildren is generic over input props
| const SelectPanelHeader: React.FC<React.PropsWithChildren & {onBack?: () => void}> = ({children, onBack, ...props}) => { | |
| const SelectPanelHeader: React.FC<React.PropsWithChildren<{onBack?: () => void}>> = ({children, onBack, ...props}) => { |
siddharthkp
changed the title
* 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
