skeletonlabs
Implement anchor navigation for Tabs component
Describe the feature in detail (code, mocks, or screenshots encouraged)
Zag.js allows using anchors as triggers for tab navigation:
Currently this is not implemented as the trigger is hard-coded to be a button.
What type of pull request would this be?
Enhancement
Provide relevant links or additional information.
The old Tabs component from Skeleton v2 had this functionality: https://v2.skeleton.dev/components/tabs
Do you mean re-implement this feature as described here?
Presumably that would mean updating/refactoring/adding to:
https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton-svelte/src/components/Tabs/TabsControl.svelte
and end up with something similar to:
https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton-svelte/src/components/Navigation/NavTile.svelte
TabsControls does hardcode a button element, whereas NavTile allows a button or a link element.
This is my first comment or attempt at contribution to this project, so I just wanted to ask a few questions for clarity since having worked on very similar components in closed-source projects I think I could help here and in fact by sheer coincidence this is the first issue I saw.
If the above assumptions/questions are helpful, and clarifying and that's the feature in question, I'd be happy to help out and write/review/document a PR.
@YoungElPaso you've linked a screenshot from v2. Just to make sure we're on the same page, v2 and v3 components should not be compared. They have been completely rewritten in v3 due to the introduction of Zag.js.
https://zagjs.com/components/svelte/tabs
The NavTile would not be a good comparison as it's one of the only non-Zag component in Skeleton at the moment. The proper implementation would be to utilize the navigate API Zag provides and ensure the Tabs can switch from a <button> to an <a> (anchor).
Plus we'll need this update for both the Svelte and React components.
Unfortunately this would not be what I'd deem a trivial contribution, which is why it's not flagged with the Good first issue tag on GitHub. If you are a first time contributor, I'd recommend starting with one of those instead. We appreciate the offer either way!
Lol, obviously I was a bit naive in my estimation. Thanks for the clarifying comment. I will follow this issue to see how its resolved, but indeed check out some lower hanging fruit type issues for now.
Hi
I’d love to help enhance the Tabs component to support anchor (<a>) elements as triggers like in Zag.js and Skeleton v2. Please assign me
@nullpointerexceptionkek you'll need to make a comment before I can reassign this issue. And no pressure if you wish to work on other issues prior.
@nullpointerexceptionkek This feature request has already been solved thanks to the Bring Your Own Markup concept in V4. Therefor I'll unassign you.
The v4 RC is now available to test for this: https://github.com/skeletonlabs/skeleton/discussions/3844