From c0767a0a25341dd0722fde8b7581267fdf6a7772 Mon Sep 17 00:00:00 2001 From: Gildas Garcia <1122076+djhi@users.noreply.github.com> Date: Mon, 10 Jul 2023 12:21:55 +0200 Subject: [PATCH 01/10] Add UpdateButton --- docs/Buttons.md | 25 ++ docs/Edit.md | 4 +- docs/Reference.md | 1 + docs/UpdateButton.md | 354 ++++++++++++++++++ docs/navigation.html | 1 + .../src/button/UpdateButton.stories.tsx | 230 ++++++++++++ .../src/button/UpdateButton.tsx | 64 ++++ .../button/UpdateWithConfirmButton.spec.tsx | 245 ++++++++++++ .../src/button/UpdateWithConfirmButton.tsx | 194 ++++++++++ .../src/button/UpdateWithUndoButton.spec.tsx | 105 ++++++ .../src/button/UpdateWithUndoButton.tsx | 143 +++++++ packages/ra-ui-materialui/src/button/index.ts | 3 + 12 files changed, 1367 insertions(+), 2 deletions(-) create mode 100644 docs/UpdateButton.md create mode 100644 packages/ra-ui-materialui/src/button/UpdateButton.stories.tsx create mode 100644 packages/ra-ui-materialui/src/button/UpdateButton.tsx create mode 100644 packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.spec.tsx create mode 100644 packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx create mode 100644 packages/ra-ui-materialui/src/button/UpdateWithUndoButton.spec.tsx create mode 100644 packages/ra-ui-materialui/src/button/UpdateWithUndoButton.tsx diff --git a/docs/Buttons.md b/docs/Buttons.md index 8542a78db90..416e93d8c8b 100644 --- a/docs/Buttons.md +++ b/docs/Buttons.md @@ -325,6 +325,31 @@ It's worth noting that removing the ripple will cause accessibility issues, incl Note: The `disableRipple` was set to `true` in React Admin for a time, but was reimplemented due to accessibility concerns. If you'd like to reimplement the static ripple colour effect, you can use the [React Admin's previous implementation](https://github.com/marmelab/react-admin/blob/994079cbca810a2e74d85329e684811645b04ae2/packages/ra-ui-materialui/src/defaultTheme.ts#L31) as a starting point. [The Material UI docs](https://mui.com/material-ui/api/button-base/#props) also gives details on how to reimplement focus styles using the `Mui-focusVisible` class. +### `` + +This component allows to create a button that updates a record by calling the [`useUpdate hook`](./useUpdate.md). + +```jsx +import { Edit, SimpleForm, TextInput, TopToolbar, UpdateButton } from 'react-admin'; + +const PostEditActions = () => ( + + + +); + +export const PostEdit = () => ( + }> + + + + + +); +``` + +See [its documentation](./UpdateButton.md) for more details. + ## Miscellaneous ### `