-
-
Couldn't load subscription status.
- Fork 423
feat: add Gridbox component
#2177
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: v2
Are you sure you want to change the base?
Conversation
|
Important note: the current |
|
@zernonia sorry pinging you directly. Could you please review this PR? |
|
Thanks for the PR @niusia-ua ! However I think this addition is abit repetitive of what |
|
@zernonia Thank you for your response! Great. Then, I will look into your ticket and try to update the If you have any thoughts or work done already, please share it so that I can do my best to align with your idea. |
|
Thanks for being open to suggestion and changes @niusia-ua ! |
This PR introduces a new
Gridboxcomponent. Closes #2088.I've tried to implement it following Reka UI's conventions and principles in accordance with WAI-ARIA.
This is an initial implementation to prove the concept and collaborate with maintainers.
The purpose of this component is to build layout grids with selection capabilities rather than tables.
Component anatomy:
Currently, it supports the following keyboard interaction:
Right Arrow: Moves focus one cell to the right.If focus is on the right-most cell in the row, focus moves to the first cell in the following row.
If focus is on the last cell in the grid, focus does not move.
Left Arrow: Moves focus one cell to the left.If focus is on the left-most cell in the row, focus moves to the last cell in the previous row.
If focus is on the first cell in the grid, focus does not move.
Down Arrow: Moves focus one cell down.If focus is on the last cell in the grid, focus does not move.
Up Arrow: Moves focus one cell up.If focus is on the first cell in the grid, focus does not move.
Home: Moves focus to the first cell in the row that contains focus.End: Moves focus to the last cell in the row that contains focus.SpaceorEnter: Changes the selection state of the focused option.Control + A: Selects all cells.Here is the preview of the base story of the
Gridbox:Screen.Recording.2025-09-22.135509.mp4
Todo:
GridboxCellIndicator.