[chip] Add ChipButton, ChipLink and ChipDelete

[mj12albert]

Closes #20470
Closes #47234
Closes #46753
Closes #16097
Closes #23041

Previews:

• Docs page
• Experiments

API as discussed:

<Chip
  label="Bob"
  startAdornment={<Avatar />}
  endAdornment={<PlusIcon />}
  action={<ChipButton onClick={() => {}} />}
/>

• All the new Chip* components are their own tab stop
• The HTML is similar to Joy UI, there is always a div wrapper, and a pseudo-element is used to define the hitbox of the chip
• Requires [button] Add nativeButton prop to ButtonBase #47989

[mui-bot]

Netlify deploy preview

• docs/data/material/components/chips/chips.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	🔺+12.3KB(+2.45%)	🔺+2.53KB(+1.74%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against f4d6c3e

[siriwatknp]

what's prop causes this change

[siriwatknp]

Is using span cause warning in dev when the children is a div e.g. from Avatar?

[siriwatknp]

Overall, it looks really good. 👍 Awesome.

For Chip, the effort to make it support legacy and new API in the same component looks fragile to me. Isn't it better if we create a new Chip (v2) with a clean separation, styles classes and theme still shared. For docs, add "Chip v2 [new]" to the sidebar and mark the v1 as deprecated "Chip [deprecated]". Create a codemod for migration.

This way, we reduce the breaking change surface for the current chip, and the code changes from now on will be on v2 only. What do you think?

[siriwatknp]

Is this following other component? using p utility

[mj12albert]

Isn't it better if we create a new Chip (v2) with a clean separation, styles classes and theme still shared. For docs, add "Chip v2 [new]" to the sidebar and mark the v1 as deprecated "Chip [deprecated]"

I'm on board with this, the only thing is how to position it well, v1/v2 maybe confusing at the component level. We used "unstable" before but it looks unappealing to users. Base UI uses "preview" and so does RA, we could do the same?

[siriwatknp]

Isn't it better if we create a new Chip (v2) with a clean separation, styles classes and theme still shared. For docs, add "Chip v2 [new]" to the sidebar and mark the v1 as deprecated "Chip [deprecated]"

I'm on board with this, the only thing is how to position it well, v1/v2 maybe confusing at the component level. We used "unstable" before but it looks unappealing to users. Base UI uses "preview" and so does RA, we could do the same?

I'm good with that.