Notification dot badge design

[bhoppers2008]

Design spec required for dot badge.

### Tasks
- [x] Characteristic spec: Salt 1
- [x] Characteristic spec: Salt Next
- [x] Site Examples
- [x] Accessibility spec
- [x] Interactions spec
- [x] Figma Components: Salt 1 Light
- [x] Figma Components: Salt 1 Dark
- [x] Figma Components: Salt Next
- [x] Figma componrnt guide

[yunjungyeh]

Kick-off scheduled on Thursday 27 June

[mark-tate]

Kickoff on Thur Goal: M(5) ready for Dev by ?

[yunjungyeh]

Dot Badge KO notes:

Team

1. Core design: Yun
2. Dev reference point (during dev): Josh
3. Development: Pepper devs (Thushara/ Vineet)

Size/Delivery

1. To core by end of Americano.

   What is the capacity of the team (design/developers) picking up the issue. i. Pepper devs busy for remainder of Zazu. ii. Preheader design (update preheader spec + add to component) – @bhoppers2008 to start iii. Preheader dev (identify bug fix and add to backlog).

2. Do we have a reviewer (in Pepper/CB) that could feedback (Asmita to clarify).

   Additional feature to something we know works already/in core – RC not essential.

What is a Dot Badge?

1. Initial problem statement: Notifies application users of… changes in state that user needs to be aware of (where a count or notation may not be possible/necessary).

   • (What is it about dot badge that makes it distinct from badge?)
   • Dot Badge is not for status/ categorisation/ presence – would be an alternative component variant.

2. Pepper badge red – is it wired up to the accent/brand color? Does it need to be red (atm Pepper semantically tie it to error-red) Asmita to clarify?
3. Neutral variant is out of scope (for a later PR).

Tech expectation

1. Badge without content

   • Note: This could affect delivery teams using a badge with no content – Salt to test.

2. Possible animation when displayed

Examples

1. Surface examples from Pepper that we can design/build/test/document around

[yunjungyeh]

Tue 2 Jul - Reached out to LOB team, discussed size with @joshwooding (--salt-size-adornment), characteristic spec WIP

[yunjungyeh]

Wed 3 Jul - Discussed Positioning Options for both Badge and Badge Dot with @joshwooding @bhoppers2008 @dplsek, WIP

[mark-tate]

Goal: ready for dev by EOS

[yunjungyeh]

Thu 11 Jul - Characteristics/Interaction specs, component sets for both Salt 1 and Salt Next waiting to be reviewed

[yunjungyeh]

Fri 12 Jul

Reviewed with @joshwooding

• Would Notification Dot badge be with Badge on site? -> Yes
• Are we able to show the animation like what Story does? -> we don’t show it but pepper can add it

Reviewed with @bhoppers2008

• Add Inline Navigation example as what tabs has
• Add Button example to site examples

[yunjungyeh]

Wed 17 Jul - Component sets in Salt 1 Light/Dark, Salt Next, and Component Guide are done and ready for Peer Review

[yunjungyeh]

Fri 19 July - @ivan-calderon Peer reviewed, Figma branches to be merged

[yunjungyeh]

Ready for merge, Design QA for another issue #3787