From 5b9806b6ff6f7e2f1353ddb3292595e77534b43a Mon Sep 17 00:00:00 2001 From: Ionatan Wiznia Date: Mon, 12 Aug 2024 12:22:54 +0200 Subject: [PATCH 1/4] Clarify pattern B errors behavior --- contributingGuides/OFFLINE_UX.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/contributingGuides/OFFLINE_UX.md b/contributingGuides/OFFLINE_UX.md index 9fefbaeea111..eec692c361fd 100644 --- a/contributingGuides/OFFLINE_UX.md +++ b/contributingGuides/OFFLINE_UX.md @@ -86,8 +86,12 @@ When the user is offline: **Handling errors:** - The [OfflineWithFeedback component](https://github.com/Expensify/App/blob/main/src/components/OfflineWithFeedback.js) already handles showing errors too, as long as you pass the error field in the [errors prop](https://github.com/Expensify/App/blob/128ea378f2e1418140325c02f0b894ee60a8e53f/src/components/OfflineWithFeedback.js#L29-L31) +- The behavior for when something fails is: + - If you were adding new data, the failed to add data is displayed greyed out and with the button to dismiss it + - If you were deleting data, the failed data is displayed regularly with the button to dismiss it + - If you are updating data, the original data is displayed regulary with the button to dismiss it - When dismissing the error, the `onClose` prop will be called, there we need to call an action that either: - - If the pendingAction was `delete`, it removes the data altogether + - If the pendingAction was `add`, it removes the data altogether - Otherwise, it would clear the errors and `pendingAction` properties from the data - We also need to show a Red Brick Road (RBR) guiding the user to the error. We need to manually do this for each piece of data using pattern B Optimistic WITH Feedback. Some common components like `MenuItem` already have a prop for it (`brickRoadIndicator`) - A Brick Road is the pattern of guiding members towards places that require their attention by following a series of UI elements that have the same color From ee2203698c7ac30c05faa0f54964501f1834267c Mon Sep 17 00:00:00 2001 From: Ionatan Wiznia Date: Wed, 14 Aug 2024 13:34:09 +0200 Subject: [PATCH 2/4] Update contributingGuides/OFFLINE_UX.md Co-authored-by: Tom Rhys Jones --- contributingGuides/OFFLINE_UX.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributingGuides/OFFLINE_UX.md b/contributingGuides/OFFLINE_UX.md index eec692c361fd..56a190d3417b 100644 --- a/contributingGuides/OFFLINE_UX.md +++ b/contributingGuides/OFFLINE_UX.md @@ -87,7 +87,7 @@ When the user is offline: **Handling errors:** - The [OfflineWithFeedback component](https://github.com/Expensify/App/blob/main/src/components/OfflineWithFeedback.js) already handles showing errors too, as long as you pass the error field in the [errors prop](https://github.com/Expensify/App/blob/128ea378f2e1418140325c02f0b894ee60a8e53f/src/components/OfflineWithFeedback.js#L29-L31) - The behavior for when something fails is: - - If you were adding new data, the failed to add data is displayed greyed out and with the button to dismiss it + - If you were adding new data, the failed to add data is displayed greyed out and with the button to dismiss the error - If you were deleting data, the failed data is displayed regularly with the button to dismiss it - If you are updating data, the original data is displayed regulary with the button to dismiss it - When dismissing the error, the `onClose` prop will be called, there we need to call an action that either: From 1c59e19dd0a9eb3616a973e5f72b1e7c3547bdba Mon Sep 17 00:00:00 2001 From: Ionatan Wiznia Date: Wed, 14 Aug 2024 13:34:14 +0200 Subject: [PATCH 3/4] Update contributingGuides/OFFLINE_UX.md Co-authored-by: Tom Rhys Jones --- contributingGuides/OFFLINE_UX.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributingGuides/OFFLINE_UX.md b/contributingGuides/OFFLINE_UX.md index 56a190d3417b..e4d56712469a 100644 --- a/contributingGuides/OFFLINE_UX.md +++ b/contributingGuides/OFFLINE_UX.md @@ -88,7 +88,7 @@ When the user is offline: - The [OfflineWithFeedback component](https://github.com/Expensify/App/blob/main/src/components/OfflineWithFeedback.js) already handles showing errors too, as long as you pass the error field in the [errors prop](https://github.com/Expensify/App/blob/128ea378f2e1418140325c02f0b894ee60a8e53f/src/components/OfflineWithFeedback.js#L29-L31) - The behavior for when something fails is: - If you were adding new data, the failed to add data is displayed greyed out and with the button to dismiss the error - - If you were deleting data, the failed data is displayed regularly with the button to dismiss it + - If you were deleting data, the failed data is displayed regularly with the button to dismiss the error - If you are updating data, the original data is displayed regulary with the button to dismiss it - When dismissing the error, the `onClose` prop will be called, there we need to call an action that either: - If the pendingAction was `add`, it removes the data altogether From c967255120d0dad511b5394567c57a6bd1fc152d Mon Sep 17 00:00:00 2001 From: Ionatan Wiznia Date: Wed, 14 Aug 2024 13:34:19 +0200 Subject: [PATCH 4/4] Update contributingGuides/OFFLINE_UX.md Co-authored-by: Tom Rhys Jones --- contributingGuides/OFFLINE_UX.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributingGuides/OFFLINE_UX.md b/contributingGuides/OFFLINE_UX.md index e4d56712469a..47b2cf117a06 100644 --- a/contributingGuides/OFFLINE_UX.md +++ b/contributingGuides/OFFLINE_UX.md @@ -89,7 +89,7 @@ When the user is offline: - The behavior for when something fails is: - If you were adding new data, the failed to add data is displayed greyed out and with the button to dismiss the error - If you were deleting data, the failed data is displayed regularly with the button to dismiss the error - - If you are updating data, the original data is displayed regulary with the button to dismiss it + - If you are updating data, the original data is displayed regulary with the button to dismiss the error - When dismissing the error, the `onClose` prop will be called, there we need to call an action that either: - If the pendingAction was `add`, it removes the data altogether - Otherwise, it would clear the errors and `pendingAction` properties from the data