[Joy] Add Chip doc

[hbjORbj]

Preview: https://deploy-preview-32819--material-ui.netlify.app/joy-ui/react-chip/

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

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 4d4ac3c

[danilo-leal]

Something I just realized while playing with the demo there is that the size variant is purely affecting the Chip's padding?! I'd intuitively expect that prop to also affect text size, otherwise, we have mostly a difference on horizontal padding. Does that make sense to you @hbjORbj and @siriwatknp?

[siriwatknp]

Something I just realized while playing with the demo there is that the size variant is purely affecting the Chip's padding?! I'd intuitively expect that prop to also affect text size, otherwise, we have mostly a difference on horizontal padding. Does that make sense to you @hbjORbj and @siriwatknp?

I think you don't see the text size changes because there is a Typography (by default it uses body1 typography from the theme) placed inside the chip. I think if @hbjORbj removes the typography, it should work.

[danilo-leal]

Right, cool! Just pushed a commit with those changes :)

[danilo-leal]

Another thing that just came up while designing the email UI: I remember we removed the clickable prop from the Chip but can't really recall why now 😅 Should we bring it back?

[siriwatknp]

Another thing that just came up while designing the email UI: I remember we removed the clickable prop from the Chip but can't really recall why now 😅 Should we bring it back?

clickable is replaced by onClick prop. @hbjORbj Can you add demos for these headings?

## Decorators

## Delete button

## Clickable

## With checkbox

## With radio

The demos have been done in https://deploy-preview-32819--material-ui.netlify.app/experiments/joy/chip/

[siriwatknp]

Looks much better!

Some improvements that I think:

Basic
I think this is redundant given the playground.

Decorators

• The demo, eg. "Turn on lights" looks like it is clickable. Can you find another text that does not lead to that expectation?
• I think there should be 2 chips in this demo, the startDecorator and endDecorator. Please remove the ChipDelete.

** Delete button**

• The demo is too big (no need to use Array).
• Shows 2 chips where:

  <Chip variant="outlined" endDecorator={<ChipDelete />}>text</Chip>
  <Chip variant="soft" endDecorator={<ChipDelete variant="plain" />}>text</Chip>
• Add "The variant of the ChipDelete changes based on the parent Chip unless you specify a specific variant to it." (Feel free to make this phrase better)

Clickable

• 1 chip with onClick is enough

Clickable and Deletable (new)

• also 1 chip is enough

With checkbox

• don't hide the toolbar

With radio

• don't hide the toolbar

[hbjORbj]

@siriwatknp

Thanks for the feedback, Jun. I addressed them all.

[siriwatknp]

Should we add a TextField for customizing the children?

[hbjORbj]

Sure. Done

[siriwatknp]

👍 Nice!