[Rating] Add a demo with different icons

[hoop71]

Starts to provide a solution for #18971. Thinking I will round this out and also add a prop that allows the user to align the icons as desired.

Would love feedback from the team if this seems like a good path? @oliviertassinari

• I have followed (at least) the PR section of the contributing guide.

Closes #18971.

[mui-pr-bot]

No bundle size changes comparing 25d7040...08811eb

Generated by 🚫 dangerJS against 08811eb

[mbrookes]

Thanks for working on this, it's a great start!

A docs demo would be good, for example using the sentiment icons.

[hoop71]

Thanks for working on this, it's a great start!

A docs demo would be good, for example using the sentiment icons.

Thanks! I'll work on this soon. Any CSS ideas on how to align these icon to baseline?

[oliviertassinari]

@hoop71 Thanks for exploring this issue. Regarding the implementation, I don't think that we need to significantly change the source nor the API. I believe a new demo would require most of the work (leveraging the existing IconContainer prop). However, maybe we need to leak part/all the state to the public API?

[hoop71]

@hoop71 Thanks for exploring this issue. Regarding the implementation, I don't think that we need to significantly change the source nor the API. I believe a new demo would require most of the work (leveraging the existing IconContainer prop). However, maybe we need to leak part/all the state to the public API?

Got it. This makes a lot of senes.

[hoop71]

OK - I think this is working pretty well with the IconContainer prop. This is a slick solution. Very nice. On the VariableSizeRating icons, I am having trouble getting the hidden input to match the size? Any ideas @oliviertassinari or @mbrookes? I can write a few more tests for this as well if needed.

Cheers.

[mbrookes]

For the sentiment example it would be good to provide custom text labels using getLabelText.

Not sure what's going on with the size example. (Do you have a practical use-case for this?)

If you edit the typescript demo, the JS demo can be generated with yarn docs:typescript.

[oliviertassinari]

What has Google done! There is twice the SVG path for the eyes, it makes me feel uncomfortable 😆.

Not sure what's going on with the size example. (Do you have a practical use-case for this?)

@mbrookes +1 for keeping it simple (no demo)

---

@hoop71 Could you migrate the demo to TypeScript? :)

[hoop71]

For the sentiment example it would be good to provide custom text labels using getLabelText.

Not sure what's going on with the size example. (Do you have a practical use-case for this?)

If you edit the typescript demo, the JS demo can be generated with yarn docs:typescript.

Yes, I can do this in typescript and getLabelText, no problem.

The example came from the orginal ask in #18971. I guess it depends on how much you'd like to show in the demo or let users figure out?

[oliviertassinari]

Regarding the size issue, all the rating needs to have the same width for the logic to work correctly. It's a simplification of the logic. We are lucky it's probably a good constraint for UX.

[mbrookes]

The example came from the orginal ask in #18971.

In the sample image in the issue those look like different icons, rather than the same icon resized (they're all the same width).

I think we can safely drop the size demo as @oliviertassinari suggested.

updated

[oliviertassinari]

@hoop71 Thanks