SelectPanel2: Add back button #4288
Conversation
🦋 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? |
joshblack
left a comment
joshblack
left a comment
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 |
joshblack
left a comment
joshblack
left a comment
There was a problem hiding this comment.
Approving for onBack support 👍
| }) | ||
|
|
||
| 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
Uh oh!
There was an error while loading. Please reload this page.