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
| {F71461215} | {F71461211} |
| Desktop | Mobile |
| [[ https://www.figma.com/design/H8xtCDg3nc7rJ3XmgCKeNK/Edit-Check---features?node-id=2-18101&t=aKdGgCdIWpYYzmzJ-11 | Card's interaction states in Figma ]] |
- **Suggestion's card:**
- Default (unselected): `background-color-base` (white), `border-color-muted` (check the rest of [[ https://www.figma.com/design/H8xtCDg3nc7rJ3XmgCKeNK/Edit-Check---features?node-id=2-18101&t=aKdGgCdIWpYYzmzJ-11 | interactive states ]])
- Icon: `Lightbulb` for now
- Title: Suggestion's title will use `Regular` text in both collapsed and expanded card //(to differentiate from Checks where we use Bold)//
{F71461269}
- **Highlighted text: **
- Default: `background-color-interactive-subtle`
- Hover, Active, Selected: `background-color-progressive-subtle`
{F71461272}
===== 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.
- **Mobile:** We will use the numbered badge since the space is limited.
{F71461254}
=== Requirements
-- 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)
=== 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