From 5cd63425fca5fc267d96e4232f328b76a4667023 Mon Sep 17 00:00:00 2001
From: DorijanH <dhaspl@gmail.com>
Date: Tue, 16 Jan 2024 10:01:27 +0100
Subject: [PATCH] feat(react-ui/confirm-button): iconButton optional prop

---
 apps/docs/components/ExampleConfirmButton.tsx |  7 +++--
 .../components/ExampleConfirmButtonIcon.tsx   | 19 ++++++++++++
 .../react-ui/components/confirm-button.mdx    |  5 ++++
 .../react-ui/ConfirmButton/ConfirmButton.tsx  | 29 +++++++++++++++++--
 ...[ConfirmButton] `iconButton` optional prop |  0
 packages/react-ui/temp/react-ui.api.md        |  3 +-
 6 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 apps/docs/components/ExampleConfirmButtonIcon.tsx
 create mode 100644 packages/react-ui/changes/Added [ConfirmButton] `iconButton` optional prop

diff --git a/apps/docs/components/ExampleConfirmButton.tsx b/apps/docs/components/ExampleConfirmButton.tsx
index 6601676c..77df1b97 100644
--- a/apps/docs/components/ExampleConfirmButton.tsx
+++ b/apps/docs/components/ExampleConfirmButton.tsx
@@ -4,11 +4,12 @@ export function ExampleConfirmButton() {
     return (
         // @highlight-start
         <ConfirmButton
-            header={'Potvrdite brisanje'}
-            message='Jeste li sigurni da želite obrisati ovaj zapis?'
             color="error"
             variant='contained'
-            onConfirm={() => { }}>
+            onConfirm={() => { }}
+            header={'Potvrdite brisanje'}
+            message='Jeste li sigurni da želite obrisati ovaj zapis?'
+        >
             Obriši
         </ConfirmButton>
         // @highlight-end
diff --git a/apps/docs/components/ExampleConfirmButtonIcon.tsx b/apps/docs/components/ExampleConfirmButtonIcon.tsx
new file mode 100644
index 00000000..1e1eab93
--- /dev/null
+++ b/apps/docs/components/ExampleConfirmButtonIcon.tsx
@@ -0,0 +1,19 @@
+import { ConfirmButton } from '@enterwell/react-ui';
+import { Delete } from '@mui/icons-material';
+
+export function ExampleConfirmButtonIcon() {
+    return (
+        // @highlight-start
+        <ConfirmButton
+            iconButton
+            color="error"
+            variant='contained'
+            onConfirm={() => { }}
+            header={'Potvrdite brisanje'}
+            message='Jeste li sigurni da želite obrisati ovaj zapis?'
+        >
+            <Delete />
+        </ConfirmButton>
+        // @highlight-end
+    )
+}
\ No newline at end of file
diff --git a/apps/docs/pages/react-ui/components/confirm-button.mdx b/apps/docs/pages/react-ui/components/confirm-button.mdx
index 4a216a8d..f97befae 100644
--- a/apps/docs/pages/react-ui/components/confirm-button.mdx
+++ b/apps/docs/pages/react-ui/components/confirm-button.mdx
@@ -5,6 +5,7 @@ title: ConfirmButton
 import { ConfirmButton } from '@enterwell/react-ui';
 import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
 import { ExampleConfirmButton } from '../../../components/ExampleConfirmButton.tsx';
+import { ExampleConfirmButtonIcon } from '../../../components/ExampleConfirmButtonIcon.tsx';
 import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';
 
 # ConfirmButton
@@ -21,6 +22,10 @@ import { ComponentDescription, ComponentParameters, ComponentSource } from '../.
 
 <ComponentWithSource component={ ExampleConfirmButton } centered />
 
+## As icon button
+
+<ComponentWithSource component={ ExampleConfirmButtonIcon } centered />
+
 ## Inspect
 
 <details>
diff --git a/packages/react-ui/ConfirmButton/ConfirmButton.tsx b/packages/react-ui/ConfirmButton/ConfirmButton.tsx
index 482ad452..e48b37fd 100644
--- a/packages/react-ui/ConfirmButton/ConfirmButton.tsx
+++ b/packages/react-ui/ConfirmButton/ConfirmButton.tsx
@@ -1,6 +1,6 @@
 import { ConfirmDialog, type ConfirmDialogProps } from '../ConfirmDialog';
 import { useState } from 'react';
-import { Button, type ButtonProps } from '@mui/material';
+import { Button, IconButton, type ButtonProps } from '@mui/material';
 
 /**
  * The keys of the {@link ConfirmDialog} props that are destructured from shared props.
@@ -16,6 +16,10 @@ export type ConfirmButtonProps =
   Omit<ButtonProps, "onClick"> &
   Pick<ConfirmDialogProps, DialogDestructuredPropKeys> &
   {
+    /**
+     * @defaultValue `false`
+     */
+    iconButton?: boolean;
     onConfirm?: () => void;
     slots?: {
       // Omit already used props and shared props, re-add color so we can 
@@ -31,7 +35,14 @@ export type ConfirmButtonProps =
  * @public
  */
 export function ConfirmButton({
-  header, message, confirmButtonText, color, onConfirm, slots, ...rest
+  header,
+  message,
+  confirmButtonText,
+  color,
+  iconButton = false,
+  onConfirm,
+  slots,
+  ...rest
 }: ConfirmButtonProps) {
   const [open, setOpen] = useState(false);
 
@@ -42,7 +53,19 @@ export function ConfirmButton({
 
   return (
     <>
-      <Button color={color} {...rest} onClick={() => setOpen(true)} />
+      {iconButton ? (
+        <IconButton
+          color={color}
+          {...rest}
+          onClick={() => setOpen(true)}
+        />
+      ) : (
+        <Button
+          color={color}
+          {...rest}
+          onClick={() => setOpen(true)}
+        />
+      )}
       <ConfirmDialog
         isOpen={open}
         onConfirm={handleConfirm}
diff --git a/packages/react-ui/changes/Added [ConfirmButton] `iconButton` optional prop b/packages/react-ui/changes/Added [ConfirmButton] `iconButton` optional prop
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/react-ui/temp/react-ui.api.md b/packages/react-ui/temp/react-ui.api.md
index 38f5d835..782b6a81 100644
--- a/packages/react-ui/temp/react-ui.api.md
+++ b/packages/react-ui/temp/react-ui.api.md
@@ -27,10 +27,11 @@ import { TextFieldProps } from '@mui/material';
 import { Variant } from '@mui/material/styles/createTypography';
 
 // @public
-export function ConfirmButton({ header, message, confirmButtonText, color, onConfirm, slots, ...rest }: ConfirmButtonProps): react_jsx_runtime.JSX.Element;
+export function ConfirmButton({ header, message, confirmButtonText, color, iconButton, onConfirm, slots, ...rest }: ConfirmButtonProps): react_jsx_runtime.JSX.Element;
 
 // @public
 export type ConfirmButtonProps = Omit<ButtonProps, "onClick"> & Pick<ConfirmDialogProps, DialogDestructuredPropKeys> & {
+    iconButton?: boolean;
     onConfirm?: () => void;
     slots?: {
         dialog?: Omit<ConfirmDialogProps, "isOpen" | "onCancel" | DialogDestructuredPropKeys> & {