feat: ✨ new Rating Component

[flixlix]

✨ New Rating Component

Disclaimer: I am aware of other PRs such as #2818 and #2350, but I reviewed both and came to the conclusion that I wanted to sort of combine them. #2818 allows a user to select a new rating but a new rating is set when hovering, which I'm not a fan of. #2350 does not allow for setting a rating, instead just displays the rating that was passed as a prop.

This implementation is based on @radix-ui/react-radio-group, which makes it more accessible, since it is also navigable with a keyboard.

Screen.Recording.2024-03-08.at.14.36.59.mov

Custom icon

A custom icon can be passed as an Icon prop. Depending on the style, you should pass a Lucide Icon or a Radix Icon. The Rating components handles all states.

count

A custom amount of ratings can be passed to adjust the granularity of the rating using the ratingSteps prop.

custom label

By default the label will be (${currentValue}/${totalSteps}). This can be overridden by simply passing a customLabel prop as a string.

disabled

To show the user the rating component is disabled, the opacity of the icons is lowered.

readonly

In contrary to the disabled state, the readonly is supposed to be used in cases where the component merely displays the current rating and never expects any input to be entered.
In this case the component looks the same but cursor events as well as keyboard events are turned off.

[vercel]

@flixlix is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2024 3:46pm

[amjed-ali-k]

LGTM

[ruymon]

LGTM! 🚀

[rayaanr]

Hey, Is it possible to rate, or display decimal values such as 3.5 , 4.5?