ShortcutsBar - clickable and keyboard shortcut enabled buttons

[ak4zh]

Check example in: https://github.com/ak4zh/statera
Live site: https://statera.in

Desired props:

• Layout: h | v (horizontal | vertical)
• data: a writable store of array of objects [{title: 'Option 1', key: 'F1', href: '/option-1'}, ...]
• background: sets button bg-color
• keyBackground: sets key pill bg-color
• color: sets text-color
• keyColor: sets key text-color

[ak4zh]

I think a better implementation will be to add the kbd option (as key might be confusing) in Button component.

[endigo9740]

The shortcut bar would probably be too specific to be included in the library, however we have a proposal to handle the keyboard shortcut presentiation:
https://github.com/Brain-Bones/skeleton/wiki/%F0%9F%9B%A3%EF%B8%8F-The-Skeleton-Roadmap-(proposal)

Components > Keys, which links to Mantine's kbd component as reference:
https://mantine.dev/core/kbd/

NOTE: I'm fine with keeping the kbd name as well

I would advise against trying to augment the Button component for this purpose though. Buttons are intractable UI elements that handle click/touch events. Instead, we should treat these as their own standalone component similar to badges:
https://skeleton.brainandbonesllc.com/components/badges

[ak4zh]

I personally like keyboard shortcuts and wish more sites offer keyboard shortcuts for nav bar sidebar menu etc to minimise mouse interaction. Not sure why this is not as common as it should be.

But yeah if you are ok including the ShortcutsBar In the lib, I will try to setup a pull request in next few days.

I did a quick test with TabGroups utilising the current event listener you have setup, just to test the idea so I can move forward and create it as a standalone component.
Everything seems to work but I am not sure about how we can set the event keydown listener on whole page and not just inside the component for the shortcut bar to work.

[endigo9740]

As mentioned above, I do not think the ShortcutsBar is a good candidate for Skeleton. It's too specific. Good components should be like puzzle pieces that when merged together form a more complex entity. From what you've shown in your screenshot above this seems like this could be constructed using a combination of grid cells + the proposed kbd component. The Tailwind grid could be constructed like so:

<div class="grid grid-cols1 gap-4">...</div>

I would, however, accept a PR for introducing the kdb component. Just follow the conventions set in the Skeleton Badge component:
https://skeleton.brainandbonesllc.com/components/badges

Then model the visual design and prop names after what Mantine does here:
https://mantine.dev/core/kbd/

Agreed on the lack of more keyboard support though. I'm implementing this into the new Drawer component as we speak! It's not too difficult, just something people often overlook I suppose.