From 42d2a4d6cb142cd67e41838cd9292a2ee68b879e Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Tue, 14 Nov 2023 13:20:35 +0100
Subject: [PATCH 1/5] Add a TooltippedButton

It can conditionally work as a disabled button with tooltip
---
 src/components/dialog/TooltippedButton.tsx | 46 ++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/dialog/TooltippedButton.tsx

diff --git a/src/components/dialog/TooltippedButton.tsx b/src/components/dialog/TooltippedButton.tsx
new file mode 100644
index 000000000..84526725c
--- /dev/null
+++ b/src/components/dialog/TooltippedButton.tsx
@@ -0,0 +1,46 @@
+import Box from '../box';
+import Button from '../button';
+import Tooltip, { TooltipProps } from '../tooltip';
+import React, { ComponentProps } from 'react';
+
+const TooltippedBox = Tooltip(Box);
+
+const TooltippedButton = (props: ComponentProps<typeof Button> & Partial<TooltipProps>) => {
+  const {
+    onTooltipEntered,
+    tooltip,
+    tooltipColor,
+    tooltipHideOnClick,
+    tooltipIcon,
+    tooltipPosition,
+    tooltipShowOnClick,
+    tooltipSize,
+    tooltipShowDelay,
+    tooltipActive,
+    zIndex,
+    ...rest
+  } = props;
+
+  if (!tooltip) {
+    return <Button {...rest} />;
+  }
+
+  return (
+    <TooltippedBox
+      onTooltipEntered={onTooltipEntered}
+      tooltip={tooltip}
+      tooltipColor={tooltipColor}
+      tooltipHideOnClick={tooltipHideOnClick}
+      tooltipIcon={tooltipIcon}
+      tooltipPosition={tooltipPosition}
+      tooltipShowOnClick={tooltipShowOnClick}
+      tooltipSize={tooltipSize}
+      tooltipShowDelay={tooltipShowDelay}
+      tooltipActive={tooltipActive}
+      zIndex={zIndex}
+    >
+      <Button {...rest} disabled />
+    </TooltippedBox>
+  );
+};
+export default TooltippedButton;

From 96bdd9b1c47fd1505069a067f2bacce00132c60b Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Tue, 14 Nov 2023 13:20:51 +0100
Subject: [PATCH 2/5] Use TooltippedButton and test it

---
 src/components/dialog/Dialog.tsx              | 11 ++++----
 .../dialog/__tests__/Dialog.spec.tsx          | 25 +++++++++++++++++++
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/dialog/Dialog.tsx b/src/components/dialog/Dialog.tsx
index a69f13fb6..4ad0a128a 100644
--- a/src/components/dialog/Dialog.tsx
+++ b/src/components/dialog/Dialog.tsx
@@ -4,10 +4,11 @@ import omit from 'lodash.omit';
 import React, { MutableRefObject, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 import { GenericComponent } from '../../@types/types';
-import { Button, ButtonGroup, DialogBase, Heading3 } from '../../index';
+import { ButtonGroup, DialogBase, Heading3 } from '../../index';
 import { DialogBaseProps } from './DialogBase';
 import theme from './theme.css';
 import { SIZES } from '../../constants';
+import TooltippedButton from './TooltippedButton';
 
 export interface DialogProps extends Omit<DialogBaseProps, 'ref'> {
   /** If true, the dialog will show on screen. */
@@ -96,11 +97,11 @@ const Dialog: GenericComponent<DialogProps> = ({
         justifyContent={leftAction ? 'space-between' : 'flex-end'}
         className={cx({ [theme['scroll-shadow']]: !reachedScrollEnd && showScrollShadow })}
       >
-        {leftAction && <Button {...leftAction} />}
+        {leftAction && <TooltippedButton {...leftAction} />}
         <ButtonGroup justifyContent="flex-end">
-          {tertiaryAction && <Button {...tertiaryAction} level="link" />}
-          {secondaryAction && <Button {...secondaryAction} />}
-          <Button level="primary" {...primaryAction} />
+          {tertiaryAction && <TooltippedButton {...tertiaryAction} level="link" />}
+          {secondaryAction && <TooltippedButton {...secondaryAction} />}
+          <TooltippedButton level="primary" {...primaryAction} />
         </ButtonGroup>
       </DialogBase.Footer>
     );
diff --git a/src/components/dialog/__tests__/Dialog.spec.tsx b/src/components/dialog/__tests__/Dialog.spec.tsx
index ce63cccd6..7a1ca98aa 100644
--- a/src/components/dialog/__tests__/Dialog.spec.tsx
+++ b/src/components/dialog/__tests__/Dialog.spec.tsx
@@ -132,4 +132,29 @@ describe('Component - Dialog', () => {
 
     expect(handleSubmit).toBeCalled();
   });
+
+  it.only('shows a tooltip', async () => {
+    const user = userEvent.setup();
+
+    const screen = render(
+      <Dialog
+        active
+        title="Foobar"
+        primaryAction={{
+          label: 'Confirm',
+          type: 'submit',
+          tooltip: 'Submit disabled',
+        }}
+        form
+      >
+        Foobar
+      </Dialog>,
+    );
+
+    const submitButton = screen.getByRole('button', { name: 'Confirm' });
+    await user.hover(submitButton);
+
+    expect(submitButton).toBeDisabled();
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Submit disabled');
+  });
 });

From e1769762ec121a5eb298a1696afa600620d0d6ea Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Tue, 14 Nov 2023 13:22:24 +0100
Subject: [PATCH 3/5] Add an example to storybook

---
 src/components/dialog/dialog.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/dialog/dialog.stories.tsx b/src/components/dialog/dialog.stories.tsx
index 4042da2e4..55c5b29f4 100644
--- a/src/components/dialog/dialog.stories.tsx
+++ b/src/components/dialog/dialog.stories.tsx
@@ -47,6 +47,7 @@ DefaultStory.args = {
     label: 'Remove',
     level: 'destructive',
     onClick: () => console.log('leftAction.onClick'),
+    tooltip: <TextBody>Removing is not allowed!</TextBody>,
   },
   primaryAction: {
     label: 'Confirm',

From 493b5a9f5df0fe5cd5e6c5a688c94f52559dcbc6 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Tue, 14 Nov 2023 13:26:12 +0100
Subject: [PATCH 4/5] Update changelog

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f8811c80..12e8d1b25 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,12 @@
 
 ### Removed
 
+## [23.2.0] - 2023-11-14
+
+### Added
+
+`Dialog`: Support disabling footer buttons with a tooltip. ([@lorgan3](https://https://github.com/lorgan3) in [#2807](https://github.com/teamleadercrm/ui/pull/2807))
+
 ## [23.1.0] - 2023-11-06
 
 ### Changed
diff --git a/package.json b/package.json
index f15baebe6..c82d3a4d7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "23.1.0",
+  "version": "23.2.0",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

From 5f64701778841b4f6b1bb8c577c4fad79c02ef93 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Tue, 14 Nov 2023 13:27:32 +0100
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=90=9B=20Run=20all=20tests=20again?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dialog/__tests__/Dialog.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialog/__tests__/Dialog.spec.tsx b/src/components/dialog/__tests__/Dialog.spec.tsx
index 7a1ca98aa..92c7029eb 100644
--- a/src/components/dialog/__tests__/Dialog.spec.tsx
+++ b/src/components/dialog/__tests__/Dialog.spec.tsx
@@ -133,7 +133,7 @@ describe('Component - Dialog', () => {
     expect(handleSubmit).toBeCalled();
   });
 
-  it.only('shows a tooltip', async () => {
+  it('shows a tooltip', async () => {
     const user = userEvent.setup();
 
     const screen = render(