This task involves the work of designing the MVP for the Suggestion "card" component.
At a minimum, the design patterns we converge on in this task will need to:
1. Support the Suggestions we come to define in T402242
2. Adapt to support the Suggestions powered by the methods we are investigating in T404220
=== Story
As a newcomer, when I am within the visual editor and an edit suggestion is surfaced to me, I want the suggestion to be presented in a clear, non-intrusive, and trustworthy way, so that I can quickly understand **a)** the action(s) being presented to me are //optional//, **b)** what action(s) I am being asked to consider taking, and **c)** why I might consider taking this action(s), and ultimately, decide what – if any action – to take (e.g. complete the suggestion, dismiss/decline it (T401739, T404606))
NOTE: We'll become clear about what moments/action(s) create the potential for someone to see an edit suggestion in T360487. //E.g. after tapping the {nav Edit} button on article. It might instead (or also) refer to a new, dedicated button within the visual editor.//
=== Design proposal
| {F6673346771461215} | {F66733472} |71461211} |
| Desktop | Mobile |
===== Card:
- **Style:**
- Checks: `background-color-base` (white), `border-color-base`, and Bold title- **Suggestion's card:**
- Suggestions- Color: `background-color-base` (white), `border-color-subtle`, and Regular title
- **Icon:**
- Checks: status icon (`iconAlert`)- Icon: `Lightbulb` for now
- Suggestions: We will use the `iconInfo` for now, while finding other possible alternatives
===== Highlighted text:
- Default: `background-color-interactive-subtle`Title: Suggestion's title will use `Regular` text in both collapsed and expanded card //(to differentiate from Checks where we use Bold)//
- Hover, Active, Selected: it will use the status color- **Highlighted text: **
- Checks- Default: `background-color-warninginteractive-subtle`
- Suggestions- Hover, Active, Selected: `background-color-progressive-subtle`
===== Mobile
- **Title:** it will be `Bold` in both checks and suggestions.
- **Style:** `background-color-base` (white) in both checks and suggestions
- **Highlighted text:** //same behavior as on desktop//
===== Multiple checks + suggestions in the same text
- **Desktop:** All cards will be displayed in a list, without trying to merge them. That keeps the model consistent and avoids the complexity of deciding when to combine. We could potentially use more padding (16px) to separate cards that belong to different text blocks and less padding (4px) to separate cards that are related to the same text block.
- **Mobile:** We will use the numbered badge since the space is limited.
{F66733472}{F71461254}
=== Requirements
//Still being drafted...//
- Meta
-- Compliments and makes sense alongside existing Edit Check and Suggested Edit "card" designs
-- Can be effective on both mobile and desktop web
-- Design pattern(s) will accommodate the suggestions the MVP will include (being defined in T402242)
- UX
-- //TBD//
-- //TBD//
-- //TBD//
=== Done
- [x] `Requirements` are documented
- [x] `Proposal` is documented
- [x] `Proposal` is shared with Growth Team (and potentially apps) for review
- [ ] `Requirements` + `Proposal` are implemented