feat(ui-pkgs): add deleteButtonProps to Show components

.changeset/yellow-chicken-notice.md

@@ -0,0 +1,12 @@
+---
+"@refinedev/chakra-ui": minor
+"@refinedev/ui-types": minor
+"@refinedev/mantine": minor
+"@refinedev/antd": minor
+"@refinedev/mui": minor
+---
+
+- Add `deleteButtonProps` prop to the `Show` component of UI packages: AntDesign, Manitine, Charka-UI, Material-UI
+- Add documenation for this addition
+
+[Resolves #6692](https://github.com/refinedev/refine/issues/6692)

documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md

@@ -359,6 +359,121 @@ render(
 
 [Refer to the `usePermissions` documentation for detailed usage. &#8594](/docs/api-reference/core/hooks/authentication/usePermissions/)
 
+### deleteButtonProps
+
+If the resource has the `canDelete` property and you want to customize this button, you can use the `deleteButtonProps` property like the code below.
+
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+const { ShowButton, Edit } = RefineAntd;
+
+const { default: simpleRest } = RefineSimpleRest;
+
+const dataProvider = simpleRest("https://api.fake-rest.refine.dev");
+
+const customDataProvider = {
+  ...dataProvider,
+  deleteOne: async ({ resource, id, variables }) => {
+    return {
+      data: {},
+    };
+  },
+};
+
+const authProvider = {
+  login: async () => {
+    return {
+      success: true,
+      redirectTo: "/",
+    };
+  },
+  register: async () => {
+    return {
+      success: true,
+    };
+  },
+  forgotPassword: async () => {
+    return {
+      success: true,
+    };
+  },
+  updatePassword: async () => {
+    return {
+      success: true,
+    };
+  },
+  logout: async () => {
+    return {
+      success: true,
+      redirectTo: "/",
+    };
+  },
+  check: () => ({
+    authenticated: true,
+  }),
+  onError: async (error) => {
+    console.error(error);
+    return { error };
+  },
+  getPermissions: async () => ["admin"],
+  getIdentity: async () => null,
+};
+
+// visible-block-start
+import { Show } from "@refinedev/antd";
+import { usePermissions } from "@refinedev/core";
+
+const PostShow: React.FC = () => {
+  const { data: permissionsData } = usePermissions();
+  return (
+    <Show
+      /* highlight-start */
+      canDelete={permissionsData?.includes("admin")}
+      deleteButtonProps={{ size: "small" }}
+      canEdit={permissionsData?.includes("admin")}
+      /* highlight-end */
+    >
+      <p>Rest of your page here</p>
+    </Show>
+  );
+};
+// visible-block-end
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      authProvider={authProvider}
+      dataProvider={customDataProvider}
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <ShowButton recordItemId="123">Show Item 123</ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+        <ReactRouter.Route
+          path="/posts/edit/:id"
+          element={<Edit>Edit Page</Edit>}
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
+);
+```
+
 ### recordItemId
 
 The `<Show>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL (when used on a custom page, modal or drawer).
@@ -897,7 +1012,6 @@ If [`canEdit`](#candelete-and-canedit) is `false`, [`<EditButton>`][edit-button]
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-
 // visible-block-start
 import { Show } from "@refinedev/antd";
 import { Button } from "antd";

documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md

@@ -229,7 +229,118 @@ render(
 );
 ```
 
-### canEdit and editButtonProps
+> For more information, refer to the [`usePermission` documentation &#8594](/docs/authentication/hooks/use-permissions)
+
+### deleteButtonProps
+
+If the resource has the `canDelete` property and you want to customize this button, you can use the `deleteButtonProps` property like the code below.
+
+```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
+setInitialRoutes(["/posts/show/123"]);
+import { Refine } from "@refinedev/core";
+import { ShowButton } from "@refinedev/chakra-ui";
+import dataProvider from "@refinedev/simple-rest";
+
+// visible-block-start
+import { Show } from "@refinedev/chakra-ui";
+import { usePermissions } from "@refinedev/core";
+
+const PostShow: React.FC = () => {
+  const { data: permissionsData } = usePermissions();
+
+  return (
+    <Show
+      /* highlight-start */
+      canDelete={permissionsData?.includes("admin")}
+      deleteButtonProps={{ size: "small" }}
+      canEdit={permissionsData?.includes("admin")}
+      /* highlight-end */
+    >
+      <p>Rest of your page here</p>
+    </Show>
+  );
+};
+// visible-block-end
+
+const App = () => {
+  const simpleRestDataProvider = dataProvider(
+    "https://api.fake-rest.refine.dev",
+  );
+
+  const customDataProvider = {
+    ...simpleRestDataProvider,
+    deleteOne: async ({ resource, id, variables }) => {
+      return {
+        data: {},
+      };
+    },
+  };
+
+  const authProvider = {
+    login: async () => {
+      return {
+        success: true,
+        redirectTo: "/",
+      };
+    },
+    register: async () => {
+      return {
+        success: true,
+      };
+    },
+    forgotPassword: async () => {
+      return {
+        success: true,
+      };
+    },
+    updatePassword: async () => {
+      return {
+        success: true,
+      };
+    },
+    logout: async () => {
+      return {
+        success: true,
+        redirectTo: "/",
+      };
+    },
+    check: async () => ({
+      authenticated: true,
+    }),
+    onError: async (error) => {
+      console.error(error);
+      return { error };
+    },
+    getPermissions: async () => ["admin"],
+    getIdentity: async () => null,
+  };
+
+  return (
+    <ReactRouter.BrowserRouter>
+      <RefineHeadlessDemo
+        notificationProvider={RefineChakra.notificationProvider()}
+        resources={[
+          {
+            name: "posts",
+            show: "/posts/show/:id",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+          <ReactRouter.Route path="/posts" element={<DummyListPage />} />
+        </ReactRouter.Routes>
+      </RefineHeadlessDemo>
+    </ReactRouter.BrowserRouter>
+  );
+};
+render(
+  <Wrapper>
+    <App />
+  </Wrapper>,
+);
+```
 
 `canEdit` allows you to add an edit button inside the `<Show>` component. If the resource has the `canEdit` property, Refine adds the edit button by default. If you want to customize this button you can use the `editButtonProps` property.
 

documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md

@@ -265,6 +265,130 @@ render(
 
 > For more information, refer to the [`usePermission` documentation &#8594](/docs/authentication/hooks/use-permissions)
 
+### deleteButtonProps
+
+If the resource has the `canDelete` property and you want to customize this button, you can use the `deleteButtonProps` property like the code below.
+
+```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
+setInitialRoutes(["/posts/show/123"]);
+import { Refine } from "@refinedev/core";
+import { ShowButton } from "@refinedev/mantine";
+import routerProvider from "@refinedev/react-router-v6/legacy";
+import dataProvider from "@refinedev/simple-rest";
+
+// visible-block-start
+import { Show } from "@refinedev/mantine";
+import { usePermissions } from "@refinedev/core";
+import { Title } from "@mantine/core";
+
+const PostShow: React.FC = () => {
+  const { data: permissionsData } = usePermissions();
+
+  return (
+    <Show
+      /* highlight-start */
+      canDelete={permissionsData?.includes("admin")}
+      deleteButtonProps={{ size: "small" }}
+      canEdit={permissionsData?.includes("admin")}
+      /* highlight-end */
+    >
+      <p>Rest of your page here</p>
+    </Show>
+  );
+};
+// visible-block-end
+
+const App = () => {
+  const simpleRestDataProvider = dataProvider(
+    "https://api.fake-rest.refine.dev",
+  );
+
+  const customDataProvider = {
+    ...simpleRestDataProvider,
+    deleteOne: async ({ resource, id, variables }) => {
+      return {
+        data: {},
+      };
+    },
+  };
+
+  const authProvider = {
+    login: async () => {
+      return {
+        success: true,
+        redirectTo: "/",
+      };
+    },
+    register: async () => {
+      return {
+        success: true,
+      };
+    },
+    forgotPassword: async () => {
+      return {
+        success: true,
+      };
+    },
+    updatePassword: async () => {
+      return {
+        success: true,
+      };
+    },
+    logout: async () => {
+      return {
+        success: true,
+        redirectTo: "/",
+      };
+    },
+    check: async () => ({
+      authenticated: true,
+    }),
+    onError: async (error) => {
+      console.error(error);
+      return { error };
+    },
+    getPermissions: async () => ["admin"],
+    getIdentity: async () => null,
+  };
+
+  return (
+    <ReactRouter.BrowserRouter>
+      <RefineMantineDemo
+        dataProvider={customDataProvider}
+        authProvider={authProvider}
+        resources={[
+          {
+            name: "posts",
+            show: "/posts/show/:id",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route
+            path="/posts"
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route element={<PostShow />} path="/posts/show/:id" />
+        </ReactRouter.Routes>
+      </RefineMantineDemo>
+    </ReactRouter.BrowserRouter>
+  );
+};
+render(
+  <Wrapper>
+    <App />
+  </Wrapper>,
+);
+```
+
 ### recordItemId
 
 The `<Show>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL, such as when it's used on a custom page, modal or drawer.