Closed Bug 1838223 Opened 9 months ago Closed 7 months ago

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

Categories

(Toolkit :: UI Widgets, task)

task

Tracking

()

RESOLVED FIXED
118 Branch
Tracking Status
firefox118 --- fixed

People

(Reporter: hjones, Assigned: annhermy)

References

(Blocks 3 open bugs)

Details

(Whiteboard: [recomp])

Attachments

(4 files)

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.

See Also: → 1840687
Whiteboard: [fidefe-reusable-components]

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.

Blocks: 1841870
Blocks: 1841872
Assignee: nobody → annhermy
Status: NEW → ASSIGNED
Attachment #9343127 - Attachment description: WIP: Bug 1838223 - Part 2: Implement layout styles of the moz-message-bar custom element. r=tgiles,hjones → Bug 1838223 - Part 2: Implement layout styles of the moz-message-bar custom element. r=tgiles,hjones
Attachment #9344260 - Attachment description: WIP: Bug 1838223 - Part 3: Implement border-radius rules of the moz-message-bar custom element. r=tgiles,hjones → Bug 1838223 - Part 3: Implement border-radius rules of the moz-message-bar custom element. r=tgiles,hjones
Blocks: 1844783
Blocks: 1845151
Pushed by hjones@mozilla.com:
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
Pushed by hjones@mozilla.com:
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
Flags: needinfo?(annhermy)
Whiteboard: [fidefe-reusable-components] → [recomp]
You need to log in before you can comment on or make changes to this bug.