Add Integrated Component - Dialog

[cwpeng]

Element Structure: `

`

Custom Event:

• confirm event
• cancel event

[yakkowu]

Working on how to make shadow effects of the box-shadow CSS property look more naturally, and define it.

[yakkowu]

TASK COMPLETED!

In the last meeting, @cwpeng suggested that there should be a general style and an alert style, but I think it is enough to directly share the same set of components. Here I would like to propose that in addition to the user can customise the desired alert what the message is (like the Preview, you can check the last title of this comment, it's just changes color or add some emoji), it would be better to categorize it more formally in a common set of components called "Alerts" (Like MUI and Bootstrap.)

If you still need to split the Dialog into "Warning", "General", "Successful", etc. into independent types, we can discuss it again 🙂

⤷ Here's the currently file in Figma

Overview

Types

Three of types:

• Standard
  • With all of these modules, Header and Footer.
• With Header
  • Only with Header module.
• With Footer
  • Only with Footer module.

By the way, the Dialog does not have only one Body module as any cases. Therefore, it is not included in this types, just only three of them.

On the background

• Background without overlay
• Background with overlay
  • Overlay color is used the Grayscale 100
  • CSS: background: rgba(34, 36, 38, 0.2); backdrop-filter: blur(5px);

Preview

[yakkowu]

Update the Default sets

According to @cwpeng suggestion, here needs a default types: Confirm Dialog and Alert Dialog for this Dialog component. ⤷ Here's the currently file in Figma.

[yakkowu]

Update the Default sets

According to @cwpeng suggestion, here needs a default types: Confirm Dialog and Alert Dialog for this Dialog component. ⤷ Here's the currently file in Figma.

According to the previous comment, the default sets style are all added the view height and the background with overlay.

[cwpeng]

Add attributes:

• color: primary, critical and gray
• backdrop: normal, no-action and none.

Attributes stand for default settings for dialog, when open dialog by open method, user can pass settings to overwrite defaults dynamically.

[nizniz187]

Is this issue done and reviewed and ok to be closed?

[cwpeng]

I think it's done.