[joy-ui][design] Stray design tweaks to components

[zanivan]

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

Added some tweaks to the components, to make them consistent and work better together out-of-the box.

Changes on default Card

• Changed Card boxShadow to md from sm
• Changed default Card variant to outlined

Current	New

Changes on default Input

• Added boxShadow to input

Current	New

Changes on default Alert

• Removed boxShadow from Alert
• Changed the default Alert variant to soft

Current	New

[mui-bot]

Netlify deploy preview

• docs/data/joy/components/card/card.md

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 970948d

[danilo-leal]

Great changes all-around ⎯ I love the subtle box shadow on the inputs, it really elevates the design a lot! 🤙 Make sure to check the failing PR tests there, though.

[siriwatknp]

One last question, since the shadow is added to Input, should it be the same for Textarea, Select, Autocomplete?

[siriwatknp]

@zanivan I found an edge case. There are common cases where <Input variant="plain" /> or <Select variant="plain" /> are useful but not with the shadow. Now I have to do:

<Input variant="plain" sx={{ boxShadow: 'none' }} />
<Select variant="plain" sx={{ boxShadow: 'none' }} />

Should the shadow applied only to the outlined variant?

[zanivan]

Should the shadow applied only to the outlined variant?

I think it makes sense—in the same way, I believe we should remove the shadows from outlined, soft, and solid cards. What do you think?

[siriwatknp]

Should the shadow applied only to the outlined variant?

I think it makes sense—in the same way, I believe we should remove the shadows from outlined, soft, and solid cards. What do you think?

I think that you mean plain, soft and solid?

[zanivan]

I think that you mean plain, soft and solid?

Actually no. Sorry, I expressed myself poorly, but I thought that for the cards, we should only keep the shadows on the plain variant. However, after making some tests, I think we could remove the shadows from all the cards by default. @danilo-leal I'd love to hear your take on this. I've seen many examples in libraries where, by default, the cards have shadows—but, when it comes to real products, it's commonly the opposite.

[danilo-leal]

This is looking great, overall! Agree with the reflection above ☝️ and it's been real in my experience as well with real apps. It may be generally safer to go without it by default as that can be too opinionated, devs and designers will customize that quickly if they need it!

[danilo-leal]

@zanivan Oh, by the way, one thing I just realized while browsing the Joy UI docs that we could do here as well: I think the Chip default size could also be changed to sm. It looks too much like a pill button to me in the medium size, and Chips are usually used smaller.

[zanivan]

Oh, by the way, one thing I just realized while browsing the Joy UI docs that we could do here as well: I think the Chip default size could also be changed to sm. It looks too much like a pill button to me in the medium size, and Chips are usually used smaller.

Totally! And I think even the sm could use some polishing. While I was revamping the templates, I realized that sometimes I ended up using the aspectRatio instead of the chip because it was just too big to be inside tabs and lists. I think we could polish it out on the #38527

[siriwatknp]

@zanivan Oh, by the way, one thing I just realized while browsing the Joy UI docs that we could do here as well: I think the Chip default size could also be changed to sm. It looks too much like a pill button to me in the medium size, and Chips are usually used smaller.

We have discussed this and the fix to this is to change the values of md size instead of changing the default size to sm. Let's do it in #38527