Component - Flash Message

[HauwaAguillard]

I'm submitting a ...

• bug report
• feature request
• support request

What is the current behavior?
Currently, flash message persist on screen until page is refreshed.

What is the expected behavior?

Scenario 1: Dismissible Flash message

• Given a prop has been created to apply to the component for it to be dismissible
• And the dismissible prop has been added to a flash message
• Then the flash message includes a close button
• and can be dismissed by the user

Scenario 2: Dismissible + Timer based Flash message

• Given a prop has been created to apply to the component for it to be dismissible + Timer based
• And the dismissible & Timer based prop has been added to a flash message
• Then the flash message includes a close button
• and can be dismissed by the user
• and can dismiss after timer runs out

Scenario 3: Persistent Flash message

• Given a prop has been created to apply to the component for it to be persistent
• And the persistent prop has been added to a flash message
• Then the flash message does not include a close button
• and can only be dismissed when user resolves warning/alert?

Notes from pairing with @blazebarsamian and @CheetoMao
Some Requirements:
Flash messages should be:

• Position: Relative
• Placed inside content and not in navigation
• Default flash message should

Types:
Success
Warning
Informational
Alert

States:
Persistent - e.g forms - flash message doesn't go away until problem is fixed
Timer + User based - fades away, and also allows users to dismiss
User based - flash message only goes away when user dismisses

Note: Flash messages would need some animation(ease in/out)

Note on Icons for the close button:

• Harmonium doesnt have icons working so well need to use x or - for the close button for now.
• HOWEVER, we should make it so that users could easily plug in different icons to be used as the close button (most likely using the icon component)

Check with @prehnRA for Harmonium status before implementation.

[blazebarsamian]

I think What is the expected behavior needs to be updated with scenarios for each "state" of flash message so thats its clear.

Example:

Scenario 1: Dismissible Flash message

• Given a prop has been created to apply to the component for it to be dismissible
• And the dismissible prop has been added to a flash message
• Then the flash messsage includes a close button
• and can be dissmissed by the user

^ might have to include something about creating the props?

We also need to add ACs to set up props and var tables for the flash messages and include them at the bottom of the pages. For reference theres many other tickets in this repo for adding props and vars tables to the components so you can look at those to see what I'm talking about (the Buttons page has this implemented)

[HauwaAguillard]

Got it! will do just that

[HauwaAguillard]

@blazebarsamian I have updated the ticket with the following scenarios. Please review and let me know if it looks good.

Scenario 1: Dismissible Flash message

• Given a prop has been created to apply to the component for it to be dismissible
• And the dismissible prop has been added to a flash message
• Then the flash message includes a close button
• and can be dismissed by the user

Scenario 2: Dismissible + Timer based Flash message

• Given a prop has been created to apply to the component for it to be dismissible + Timer based
• And the dismissible & Timer based prop has been added to a flash message
• Then the flash message includes a close button
• and can be dismissed by the user
• and can dismiss after timer runs out

Scenario 3: Persistent Flash message

• Given a prop has been created to apply to the component for it to be persistent
• And the persistent prop has been added to a flash message
• Then the flash message does not include a close button
• and can only be dismissed when user resolves warning/alert?

Also, I will need to pair on props

[HauwaAguillard]

@prehnRA just checking to see if we have any harmonium updates and If I can proceed to start implementing this feature request

[blazebarsamian]

@HauwaAguillard I checked in with robert and he said we should be good to go to work on things

https://revelrylabs.slack.com/archives/C045BEDQS/p1565635277226500?thread_ts=1565624721.208700&cid=C045BEDQS

But the doc site should work again in the lately version of the code
it'll take installing a new node version and going through the process of doing npm install etc again, but should work

[HauwaAguillard]

Awesome! I am available to pair whenever

[blazebarsamian]

adding a note to the description regarding icons for the close button

[HauwaAguillard]

Pushed up PR #417 and assigned @CheetoMao for review.

Notes:
Flash-that-fades-out successfully removes the flash from the content flow, however the rest of the page's content jumps up and doesn't seem to have a smooth transition. It seems to be a problem with how transitions work? and we may need to add a backface-visibility: hidden to the rest of the content's body? I am sure there is a better way to resolve this using javaScript but not sure how that would work with Phoenix and Elixir versus React.

Dismissible flash will need engineering assistance to add some functionality so that when the user clicks on X the flash is dismissed from the page. The question is do we want to add it to harmonium so it is consistent on every project? or do we want to resolve it on individual project.
Again, I am not sure how these decisions would affect Phoenix and Elixir projects versus React.

I would love some suggestions on how well to go about resolving these issues. Thank you!

cc: @blazebarsamian

Screenshot: