feat(Ladder): new component

DarkGhostHunter commented 6 months ago

🔗 Linked issue

Resolves #180

❓ Type of change

[X] 📖 Documentation (updates to the documentation or readme)
[ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
[ ] 👌 Enhancement (improving an existing functionality)
[X] ✨ New feature (a non-breaking change that adds functionality)
[ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
[ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This is my interpretation of #549. While is not that simplier like the aforementioned, it's more flexible in design:

Labels are below the indicator icon
Separators can be disabled
Supports click and navigation.
Steps can be enabled to receive click-to-change.
Multiple color combinations

While I tried to make it vertically compatible, it's impossible without making spaghetti code to support both orientations. Instead, we should grab inspiration from Tailwind UI Feeds.

📝 Checklist

[X] I have linked an issue or discussion.
[X] I have updated the documentation accordingly.

vercel[bot] commented 6 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	❌ Failed (Inspect)		Dec 28, 2023 4:52pm

benjamincanac commented 5 months ago

@DarkGhostHunter Thanks for this PR! Don't you think it would be better to call this component USteps?

benjamincanac commented 5 months ago

Also, would it make sense to support links?

DarkGhostHunter commented 5 months ago

@DarkGhostHunter Thanks for this PR! Don't you think it would be better to call this component USteps?

Yep, that's okay.

I thought of a ULadder because you go up and down step by step. Also UStairs for the same reason.

Also, would it make sense to support links?

Well, it does with to, but only if you click the icon.

Its tricky to support links because the link would:

comprise the whole step, including the separators,
or apply both link elements to the icon and label separately.

So I went with the easy route only supporting the click on the icon. Now that you mention it, I should add a hover effect.

As previous attempts show, creating this type of element is tricky and doesn't come without its own limitations and issues, primarily because the design of the step and the separators themselves. Some concessions on functionality and design must be made to avoid unwanted or shallow behavior.

benjamincanac commented 5 months ago

I've encountered this issue on the Breadcrumb component and added the divider outside of the link: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Breadcrumb.vue#L24

benjamincanac commented 5 months ago

Also, it would be nice to move this component to the Navigation category 😊

DarkGhostHunter commented 5 months ago

I've encountered this issue on the Breadcrumb component and added the divider outside of the link: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Breadcrumb.vue#L24

Yeah, but here the separstor would be tricky to put unless...

...we add four separators. Two each side of the icon, and two each side of the whole step. This way the looks like the separators are one.

To align them, we should use a 3x2 CSS grid instead, that way the separators on the top can be naturally aligned in the center of the first row, where the icon is.

Also, it would be nice to move this component to the Navigation category 😊

Go ahead.

benjamincanac commented 4 months ago

@DarkGhostHunter Do you plan to keep working this PR or should I take over?

DarkGhostHunter commented 4 months ago

You may take over. The time I had left to work on it is gone 😥

uricholiveira commented 4 months ago

Any news?

EvanSchleret commented 1 month ago

Hey ! Is there any news on this PR ? Thanks :)

benjamincanac commented 1 month ago

I haven't found the time to finish this unfortunately. I think this will be dropped and implemented in v3 (#1289) later on as a feature request has been opened in Radix Vue: https://github.com/radix-vue/radix-vue/issues/805.

DarkGhostHunter commented 1 month ago

I haven't found the time to finish this unfortunately. I think this will be dropped and implemented in v3 (#1289) later on as a feature request has been opened in Radix Vue: radix-vue/radix-vue#805.

Me neither. I have some nitpicks about the implementation, but either way it's better to wait for radix, or push a PR there.

nuxt / ui