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:

[blazebarsamian]

@HauwaAguillard you still need to set up the props and vars tables at the bottom of the examples page
#415 (comment)

[HauwaAguillard]

@blazebarsamian looking into this now. May grab you for some pairing time incase I get stuck on props setup

[HauwaAguillard]

@blazebarsamian props and vars are setup.

[blazebarsamian]

created #418 to add the dismissbile state flash message

[HauwaAguillard]

Picking this up to work on change request by Blaze on PR #417

[HauwaAguillard]

PR #417 has been updated with latest Feedback and it's ready for review.

[HauwaAguillard]

checking to see if there is any update on PR #417 @blazebarsamian

[blazebarsamian]

@HauwaAguillard I dont have any Harmonium time this week to work on the transitions :(

[HauwaAguillard]

@Dacello pushed up PR #428 and added the dismissible state to the flash component. Most of my PR #417 is done and should be ready to be merged, oh except maybe for the jolting. Looking for reviews so we can merge our updated flash component. 🎉

cc: @CheetoMao

[DejaTrudeaux]

perusing Harmonium during working session, I think we can close this issue right? @HauwaAguillard

[Dacello]

@DejaTrudeaux I think the issue is that #417 never got merged, so we cant close this out yet. But yea, we should probably see if we can get that merged