[Joy] Add Link component

[hbjORbj]

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

• variant: 'text' | 'outlined' | 'light' | 'contained' (undefined by default)

• color: 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning' (primary by default)

• level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'body3' (body1 by default)

• underline: 'none' | 'hover' | 'always' (always by default)

Preview: https://deploy-preview-31175--material-ui.netlify.app/experiments/joy/link/

[mui-bot]

Details of bundle changes

@mui/joy: parsed: +2.47% , gzip: +1.74%

Generated by 🚫 dangerJS against 403e1c5

[siriwatknp]

@hbjORbj Please reexport the component from mui-joy/src/index.

[siriwatknp]

Suggested change

	margin: 0, // Remove the margin in Safari
	borderRadius: 0,
	padding: 0, // Remove the padding in Firefox
	margin: 0, // Remove the margin in Safari
	borderRadius: 0,
	padding: 0, // Remove the padding in Firefox
	...(!!ownerState.variant && {
	paddingInline: '0.25em', // better than left, right because it also works with writing mode.
	marginInline: '-0.25em',
	}),

I think this is worth trying because the current variant looks so tight which I think anyone will customize it anyway.

Adding paddingInline gives this result (hover on text variant):

Negative marginInline is for making the content align with others by default (hover on text variant):

[siriwatknp]

From what I tested, 0.25em works best.

[hbjORbj]

Agree. Resolved.

[siriwatknp]

👍 Other than my suggestion, the rest looks really good.

[siriwatknp]

@hbjORbj The focus style & cursor pointer in the preview does not work, can you check?

[danilo-leal]

Not sure why but the color prop doesn't seem to be working?! At least in the preview demo.

[hbjORbj]

@danilo-leal You are right. I just fixed it!
@siriwatknp Thanks for comments! Just addressed them.

[siriwatknp]

Please check the button condition again.

[siriwatknp]

👍 Looks great!