search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
5.15k stars 321 forks source link

Option to hide Progress Ring label #2992

Open knd775 opened 2 days ago

knd775 commented 2 days ago

Describe the feature in detail (code, mocks, or screenshots encouraged)

This is especially important for small rings where a label cannot fit.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

phamduylong commented 1 day ago

I might have misunderstood here but isn't there a labelClasses prop for Progress Ring? Could that be used to not display the label?

knd775 commented 1 day ago

You can, that's what I'm doing currently. I'm really not a fan of using css to hide things in svelte when we can remove it from the dom entirely.

phamduylong commented 1 day ago

I can cook a PR if the team agrees with this direction. Without looking at the code, most likely a boolean props will do.

endigo9740 commented 1 day ago

@phamduylong go for it.

We tend to favor style props for manipulating the look and feel of components, but in this case we have a fairly opinionated default - which includes the auto-generated label.

As I think about it, we should probably start with the simplest state first, so how about we flip this. So the default would be no label. Then when you add showLabel: boolean we show the calculated percent label.

If we go this route, we'll want to update the documentation examples: