[Component] Rating

[Shubhdeep12]

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]

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]

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]

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

[dinezh256]

@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.?