Change Details

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.// === Proposal === 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 - [ ] `Requirements` are documented - [ ] `Proposal` is documented - [ ] `Proposal` is shared with Growth Team (and potentially apps) for review - [ ] `Requirements` + `Proposal` are implemented --- i.

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 | {F66717100} {F66717102} | {F66717105} | | Desktop | Mobile | ===== Card: - **Style:** - Checks: `background-color-base` (white) and `border-color-base` - Suggestions: `background-color-progressive-subtle` (blue) and `border-color-subtle` - **Title:** - Checks: `Bold` - Suggestions: `Regular` on desktop and Bold on mobile. //We considered adding a question mark at the end of each suggestion title, but decided against it as it could cause issues with translations.// - **Icon:** - Checks: status icon (`iconAlert`) - Suggestions: TO DECIDE (once decided on icon, we will share in this task. For now, we can use e.g the info icon). ===== Highlighted text: - Default: `background-color-interactive-subtle` - Hover, Active, Selected: it will use the status color - Checks: `background-color-warning-subtle` - Suggestions: `background-color-progressive-subtle` ===== Mobile - **Title:** it will be `Bold` in both checks and suggestions. - **Style:** - Checks: `background-color-base` (white) - Suggestions: `background-color-progressive-subtle` (blue) - **Highlighted text:** //same behavior as on desktop// === 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 - [ ] `Requirements` are documented - [ ] `Proposal` is documented - [ ] `Proposal` is shared with Growth Team (and potentially apps) for review - [ ] `Requirements` + `Proposal` are implemented --- i.

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.// === ProposalDesign proposal | {F66717100} {F66717102} | {F66717105} | | Desktop | Mobile | ===== Card: - **Style:** - Checks: `background-color-base` (white) and `border-color-base` - Suggestions: `background-color-progressive-subtle` (blue) and `border-color-subtle` - **Title:** - Checks: `Bold` - Suggestions: `Regular` on desktop and Bold on mobile. //We considered adding a question mark at the end of each suggestion title, but decided against it as it could cause issues with translations.// - **Icon:** - Checks: status icon (`iconAlert`) - Suggestions: TO DECIDE (once decided on icon, we will share in this task. For now, we can use e.g the info icon). ===== Highlighted text: - Default: `background-color-interactive-subtle` - Hover, Active, Selected: it will use the status color - Checks: `background-color-warning-subtle` - Suggestions: `background-color-progressive-subtle` ===== Mobile - **Title:** it will be `Bold` in both checks and suggestions. - **Style:** - Checks: `background-color-base` (white) - Suggestions: `background-color-progressive-subtle` (blue) - **Highlighted text:** //same behavior as on desktop// === 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 - [ ] `Requirements` are documented - [ ] `Proposal` is documented - [ ] `Proposal` is shared with Growth Team (and potentially apps) for review - [ ] `Requirements` + `Proposal` are implemented --- i.