kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.27k stars 72 forks source link

[Component] Rating #315

Open jer3m01 opened 9 months ago

Shubhdeep12 commented 1 week ago

I hope we are planning to create a star rating component here.

Out of curiosity I found out which wcag pattern we should use here. Looks like this would be perfect - https://www.w3.org/WAI/ARIA/apg/patterns/radio/

dinezh256 commented 1 week ago

Hi @jer3m01

Can I work on this issue? It looks like we are following the compound pattern in the components here. Are we planning to implement something like this

<Rating value={num} setValue={func} disabled={boolean}>
  <Rating.Label>Label</Rating.Label>
  <Rating.Input />
  <Rating.Input />
  .
  .
  .
  <Rating.Input />
</Rating>

or something like

<Rating
  label={string}
  value={num}
  setValue={func}
  count={num}
  disabled={boolean}
/>
dinezh256 commented 1 week ago

Just checked react-spectrum and found this example of star rating and found this - examples/rac-spectrum-tailwind/src/components/StarRatingGroup.tsx. They are using radiogroup.

jer3m01 commented 6 days ago

The API should be similar to Ark-ui (https://ark-ui.com/react/docs/components/rating-group#examples) and based on radio group.

dinezh256 commented 5 days ago

@jer3m01 Should we create a Rating group component with Root, Label, Item? All of these will be a wrapper of RadioGroup, with some extra properties like data-highlighted and modified onChange functions to highlight all smaller values. Also Root should accept values as numbers.?