1838223 - Implement different variants of the moz-message-bar custom element

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

In addition to the "informational" message bar imlemented in Bug 1838222 we need to add support for "warning", "success," and "critical" variants. This task will involve updating the message bar icon and colors based on the variant. We will also need to make sure each variant is documented in Storybook and tested.

There will likely be work here to ensure we're using design tokens as needed - in order for this work to be considered complete we need to remove all references to --in-content-* CSS variables and the link to in-content/common-shared.css from moz-message-bar.css.

There are also some style changes being made to the existing message bar in Bug 1840687. When working on the styles here we should see if we need to pull in those changes.

Comment 1

[Hanna Jones [:hjones]]

The different types/variants of the message bar are documented in Figma here: https://www.figma.com/file/zd3B9UyknB2XNZNdrYLm2W/Outreachy?type=design&node-id=59-1921&mode=design&t=ZYS4e6pAbAlXGvun-4

This bug will involve making a number of changes to our different design tokens related CSS files. The different base level tokens should be added to design-tokens-shared.css. Application level tokens should also be defined there, and given specific values in design-tokens-brand.css and design-tokens-system.css. Component level tokens that reference application level tokens can be defined in moz-message-bar.css.

As part of the work here we'll also want to check the spacing, border, etc. values against the Figma designs to ensure everything matches.

Comment 2

[Ganna]

Attachment: Bug 1838223 - Part 1: Remove infobar styles from moz-message-bar.css r=hjones

Depends on D182912

Comment 3

[Ganna]

Attachment: Bug 1838223 - Part 2: Implement layout styles of the moz-message-bar custom element. r=tgiles,hjones

Comment 4

[Ganna]

Attachment: Bug 1838223 - Part 3: Implement border-radius rules of the moz-message-bar custom element. r=tgiles,hjones

Comment 5

[Ganna]

Attachment: Bug 1838223 - Part 4: Implement new colors of the moz-message-bar custom element. r=tgiles,hjones

Depends on D183780

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8c748a803174
Part 1: Remove infobar styles from moz-message-bar.css r=tgiles
https://hg.mozilla.org/integration/autoland/rev/1668db0c1b05
Part 2: Implement layout styles of the moz-message-bar custom element. r=tgiles,hjones,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/1e562a951eb2
Part 3: Implement border-radius rules of the moz-message-bar custom element. r=desktop-theme-reviewers,hjones,dao
https://hg.mozilla.org/integration/autoland/rev/03a8e2713944
Part 4: Implement new colors of the moz-message-bar custom element. r=hjones,desktop-theme-reviewers,dao

Comment 7

[Narcis Beleuzu [:NarcisB]]

Backed out for bc failures on browser_parsable_css.js

Backout link: https://hg.mozilla.org/integration/autoland/rev/b648e162a48c2fee407bab69ee1d9112f5836272
Log link: https://treeherder.mozilla.org/logviewer?job_id=424686154&repo=autoland&lineNumber=4495

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2db5e6bf35ee
Part 1: Remove infobar styles from moz-message-bar.css r=tgiles
https://hg.mozilla.org/integration/autoland/rev/b603b7c634de
Part 2: Implement layout styles of the moz-message-bar custom element. r=tgiles,hjones,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/0bc4fd9d278a
Part 3: Implement border-radius rules of the moz-message-bar custom element. r=desktop-theme-reviewers,hjones,dao
https://hg.mozilla.org/integration/autoland/rev/c15d430012a2
Part 4: Implement new colors of the moz-message-bar custom element. r=hjones,desktop-theme-reviewers,dao

Comment 9

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/2db5e6bf35ee
https://hg.mozilla.org/mozilla-central/rev/b603b7c634de
https://hg.mozilla.org/mozilla-central/rev/0bc4fd9d278a
https://hg.mozilla.org/mozilla-central/rev/c15d430012a2