[Joy] Add Chip component

[hbjORbj]

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

This PR includes:

• correcting typos in Joy SvgIcon demo / Joy Avatar demo / Joy Avatar API code
• addition of Joy Chip component
• tests for Joy Chip component

Props: startDecorator, endDecorator, color, size, variant, disabled

Default values:

• color: primary
• size: md
• variant: contained
• disabled: false

I removed onDelete, icon, avatar, label, clickable and deleteIcon props and added startDecorator / endDecorator following up with this discussion

Preview: https://deploy-preview-31983--material-ui.netlify.app/experiments/joy/chip/

Lines of code comparison

	Material	Joy	% change
Chip	560	350	-37.50
ChipDelete		148
total	560	498	-11.07

[mui-bot]

Details of bundle changes

@mui/joy: parsed: +5.93% , gzip: +3.81%

Generated by 🚫 dangerJS against e151fb6

[siriwatknp]

From the issues that I can find:

• [RFC] Chip markup #20470
• [Chip] Rename onDelete and deleteIcon #16097
• [Chip] deleteIcon has role set to presentation #19468

I am thinking about these changes

1. Can we get rid of the label prop and use the same old children prop? This will give the same experience across other components. However, the slot label is needed to create text-overflow ellipsis.

// implementation
<ChipRoot>
 ...startDecorator
  <ChipLabel>{children}</ChipLabel>
 ...endDecorator
</ChipRoot>

// usage
<Chip>text</Chip>

2. introduce ChipButton, and ChipDelete component instead of using clickable, onDelete and deleteIcon prop. This would make the Chip API cleaner since it already exposes start/endDecorator. Here is what the usage looks like in [RFC] Chip markup #20470 (comment)

cc @hbjORbj @danilo-leal @mnajdova

[danilo-leal]

introduce ChipButton, and ChipDelete component instead of using clickable, onDelete and deleteIcon prop.

This is a great idea. Other than that, it's looking pretty good to me!

[siriwatknp]

@hbjORbj Could you replicate some of these design inspirations in the /experiments/joy/chip/ page to verify the flexibility of the new Chip component?

• https://dribbble.com/shots/13386064-React-design-system-UI-kit-Chips-Select-Filters-for-Figma
• https://www.figma.com/file/cEWBQUmVbQpXP25YvZNSCo/Material-Desktop-System-Demo?node-id=0%3A149
• https://blog.prototypr.io/react-material-ui-templates-chips-components-e73d664da85f

[hbjORbj]

@siriwatknp

Can we get rid of the label prop and use the same old children prop? This will give the same experience across other components. However, the slot label is needed to create text-overflow ellipsis.

Yes, I can do that.

introduce ChipButton, and ChipDelete component instead of using clickable, onDelete and deleteIcon prop. This would make the Chip API cleaner since it already exposes start/endDecorator. Here is what the usage looks like in #20470 (comment)

Yes, I agree it looks better. I will work on it.

Could you replicate some of these design inspirations in the /experiments/joy/chip/ page to verify the flexibility of the new Chip component?

Sure, no problem.

[hbjORbj]

@siriwatknp

Here are updates:

• Changed default value for variant and color to contained and primary, respectively
• Created a ChipDelete component
• Replaced ButtonBase with a HTML button when clickable is true
• Made the style more solid
• Added more examples

[danilo-leal]

Great start! I'll probably tweak some styles later on but this is excellent already :)

[siriwatknp]

Summary of my changes

• Component variables:
  • remove some variables that are not necessary, eg --Chip-color, --Chip-fontSize
  • add --Chip-delete-size, --Chip-radius to make customization easier
• Markup:
  • add action slot for creating clickable chip
  • custom chip delete icon by providing children
• Integration:
  • allow chip to automatically adjust avatar's radius
  • chip delete's radius also adjust to the chip's radius
  • the chip control the icon's font-size based on its size
  • chip delete's variant, color adapt to the root chip
• Accesibility: follow [RFC] Chip markup #20470