[UPDATE] pfe-toast (alert variant?)

[coreyvickery]

Alert - Toast

Usage

Inline style differences

Example

Toasts are not located inline, they float and stick to the upper right corner of a page or window above content and the grid to alert users of information or actions.

Desktop

Tablet, landscape

Tablet, portrait

Guidelines

• Desktop and Tablet Toasts have a fixed width
• Max width is always 4 columns wide or 32% of the layout
• Copy that flows beyond 4 columns or 32% of the layout will break to a second line
• When Toasts stack, the distance between is 8px

Mobile, landscape

Mobile, portrait

Guidelines

• The width of Mobile Toasts are 100% of the layout up to 767px
• Copy that flows beyond 100% will break to a second line
• When Toasts stack, the distance between is 8px

Types

https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/e0be63a2-893e-41eb-96b1-ba9bee4ede0d/Toast

Styles

Success

Styles

• Top line/Border: $pf-color-green-500 (#3e8635)
• Icon: $pf-color-green-500 (#3e8635)
• Title: RH Text, Medium, 14pt / 21 (1.5), $pf-color-green-600 (#1e4f18)
• Copy: RH Text, Regular, 14pt / 21 (1.5), $pf-color-black-900 (#151515)
• Links: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-400 (#06c)
• Close button: $pf-color-black-600 (#6a6e73)
• Background: $pf-color-green-50 (#f3faf2)

Danger

Styles

• Top line/Border: $pf-color-red-100 (#c9190b)
• Icon: $pf-color-red-100 (#c9190b)
• Title: RH Text, Medium, 14pt / 21 (1.5), $pf-color-red-300 (#7d1007)
• Copy: RH Text, Regular, 14pt / 21 (1.5), $pf-color-black-900 (#151515)
• Links: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-400 (#06c)
• Close button: $pf-color-black-600 (#6a6e73)
• Background: $pf-color-red-50 (#faeae8)

Warning

Styles

• Top line/Border: $pf-color-gold-400 (#f0ab00)
• Icon: $pf-color-gold-400 (#f0ab00)
• Title: RH Text, Medium, 14pt / 21 (1.5), $pf-color-gold-600 (#795600)
• Copy: RH Text, Regular, 14pt / 21 (1.5), $pf-color-black-900 (#151515)
• Links: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-400 (#06c)
• Close button: $pf-color-black-600 (#6a6e73)
• Background: $pf-color-gold-50 (#fdf7e7)

Default

Styles

• Top line/Border: $pf-color-cyan-300 (#009596)
• Icon: $pf-color-cyan-300 (#009596)
• Title: RH Text, Medium, 14pt / 21 (1.5), $pf-color-cyan-500 (#003737)
• Copy: RH Text, Regular, 14pt / 21 (1.5), $pf-color-black-900 (#151515)
• Links: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-400 (#06c)
• Close button: $pf-color-black-600 (#6a6e73)
• Background: $pf-color-cyan-50 (#f2f9f9)

Info

Styles

• Top line/Border: $pf-color-blue-300 (#2b9af3)
• Icon: $pf-color-blue-300 (#2b9af3)
• Title: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-600 (#004368)
• Copy: RH Text, Regular, 14pt / 21 (1.5), $pf-color-black-900 (#151515)
• Links: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-400 (#06c)
• Close button: $pf-color-black-600 (#6a6e73)
• Background: $pf-color-blue-50 (#e7f1fa)

Spacing

Spacing legend https://www.patternfly.org/v4/design-guidelines/styles/spacers

[coreyvickery]

Alert - Inline story is below.

https://github.com/patternfly/patternfly-elements/issues/215

[starryeyez024]

@coreyvickery do toasts always have a color, and is the default blue? currently the toast has no color, so I just wanted to confirm. Thanks!

[coreyvickery]

@starryeyez024 Yes, Toast alerts always have a color bar at the top and the Default style can be used as the default.

[castastrophe]

@starryeyez024 Should we tackle this as a variant of pfe-toast or as a pfe-alert variant that displays using toast in the shadow DOM?

[starryeyez024]

@castastrophe My 2 cents at a high-level is that we should make this a design option within pfe-toast, either by making the styles from pfe-alert a mixin, or by leveraging pfe-toast within the shadow dom 👍

Including the alert demo link here that @heyMP is working on: https://deploy-preview-1406--patternfly-elements.netlify.app/elements/pfe-alert/demo/