UX componentization of CFR (contextual notifications)

[sblatz]

Child of #4841

Currently we have no standardization for these notifications, and we just reuse a template. Let's build what we need now (and if requirements change, we can update).

Acceptance Criteria

• There is a a context hint class engineers can utilize for contextual hints
• There is a living (and public) style guide that both engineers & UX can point to when discussing designs
• Every contextual hint in the app will adhere to a common pattern so we have consistency

Stretch goal: This style lives in a library we can import separately from Fenix (like in AC)

• Let's get as far as we can towards getting "scaffolding" for creating future componentized UI elements
• The contextual "just in time" notifications are componentized in AC (they have a generic styling with certain colors/properties that can be overridden if absolutely necessary)

General Process

• Engineer implements the style
• UX & Engineering meet to do “final approval” of the component
  1. Walk through all affected screens
  2. Chat about remaining questions
• UX & Engineering place component in the library

Terminology for component:
CFR

Example of what we're talking about

┆Issue is synchronized with this Jira Task

[sblatz]

Discussed in group triage, these types of tickets will live in the eng health backlog.

[severinrudie]

@lime124 if we have questions about what UX wants from this component, which designer should we reach out to?

[brampitoyo]

@baron-severin You can reach out to @AmyYLee, who’s now been assigned to this issue.

[apbitner]

Visual design specs for CFR's can be found in Abstract, showing how a CFR may look in different contexts and variations: https://share.goabstract.com/7cae7a97-58d9-4a3f-9098-3c242e0eef7a

We also have interaction design specs and guidelines that can be found in our UI Components deck: https://docs.google.com/presentation/d/1b7mAuUwH5e-rLOKd8dJg2lD08KSl-3hiVEesm2y1t1k/edit#slide=id.g72ea51acf8_4_89

[liuche]

@apbitner are we still using the purple popups vs the banners (like in #14920)? If so, we could pick this up.

[apbitner]

@liuche Yes to my knowledge the purple popups aren't going anywhere, the banner was just a new type of CFR that was introduced.

[liuche]

Based on #9888, the work for this issue would be

Acceptance Criteria (how do I know when I’m done?)

• There is a a context hint class engineers can utilize for contextual hints
• There is a living (and public) style guide that both engineers & UX can point to when discussing designs
• Every contextual hint in the app will adhere to a common pattern so we have consistency

Stretch goal: This style lives in a library we can import separately from Fenix (like in AC)

General Process

• Engineer implements the style
• UX & Engineering meet to do “final approval” of the component
  1. Walk through all affected screens
  2. Chat about remaining questions
• UX & Engineering place component in the library

[liuche]

I've also added this to the Design Consistency board where the rest of the style guide / ux componentization tickets live.

[stale]

See: #17373 This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.