[Alert][joy] Add Alert component

[hbjORbj]

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

Done:

• Initial implementation
• Initial demos
• Props: color, variant, onClose, closeText, etc; To be more discussed with Jun and Danilo

UPDATE:

• Iterations on demos / props based on Jun / Danilo's feedback
• Unit tests
• Typescript tests

Preview: https://deploy-preview-33859--material-ui.netlify.app/joy-ui/react-alert/

[mui-bot]

Details of bundle changes

@mui/joy: parsed: +1.13% , gzip: +0.61%

Generated by 🚫 dangerJS against 54f150b

[danilo-leal]

Looking great, Benny! Thanks for kick-starting this out!
Refined the component a bit and added a couple of other sections there to the docs. Looking forward to knowing what you two think about it!

Lastly, a quick question: will we support something similar to the AlertTitle component?

[hbjORbj]

@danilo-leal

It looks much much nicer! I see that you've changed the default variant to soft in the playground. I will do the same in the implementation.

Lastly, a quick question: will we support something similar to the AlertTitle component?

I will let @siriwatknp answer this.

[siriwatknp]

@hbjORbj Thanks for the hard work

Here are things I think can be improved:

HTML structure

Let's keep the rendered HTML simple. I am not sure why Material UI produces many div but I think this is simpler:

<Alert>...</Alert>

// The result should be just 1 div
<div role="alert" class="JoyAlert-root">...</div>

// not this
<div role="alert" class="JoyAlert-root">
  <div class="JoyAlert-message">...</div>
</div>

Size

It should have size prop which controls the icon and text font size. (similar to other components, e.g. Button)

Decorator

The alert should accept startDecorator and endDecorator similar to other components, e.g. Input.

You can remove the icon and action props.

The usage should be like this:

<Alert startDecorator={<Icon />} endDecorator={<IconButton><Close /></IconButton>}>
  <Typography fontWeight="lg" mb={1}>Alert title</Typography>
  <Typography level="body2">Description</Typography>
</Alert>

CSS variables

It should have:

• --Alert-radius
• --Alert-gap
• --Alert-padding

You can take a look at the Input component. It is quite similar.

AlertTitle

I don't see a need for the AlertTitle at this point. Let's try to create demos using Typography first.

Common examples

Can you add some of these to the common examples section:

• https://www.pinterest.com/pin/492649947198210/
• https://www.pinterest.com/pin/376191375137451403/
• https://www.pinterest.com/pin/223280094015936511/

[danilo-leal]

Looks great, Benny! Nice work 👌

[siriwatknp]

@hbjORbj The implementation looks good to me. What's left are:

• component tests (also add the testCustomVariant: true to the describeConformance, it ensures that the component does not break when a custom variant is provided.)
• add the AlertOwnerState to components.d.ts
• add to extendTheme.spec.ts

[hbjORbj]

Done:

• ✅ component tests (also add the testCustomVariant: true to the describeConformance, it ensures that the component does not break when a custom variant is provided.)
• ✅ add the AlertOwnerState to components.d.ts
• ✅ add to extendTheme.spec.ts

[siriwatknp]

👍 Awesome @hbjORbj