diff --git a/contributingGuides/OFFLINE_UX.md b/contributingGuides/OFFLINE_UX.md index 9fefbaeea111..47b2cf117a06 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 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 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 `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