Merge pull request #2807 from teamleadercrm/TIDAL-6229-tooltipped-dia…

…log-buttons

Add support for tooltips in dialogs

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "23.1.0",
+  "version": "23.2.0",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

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>
     );

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;

src/components/dialog/__tests__/Dialog.spec.tsx

@@ -132,4 +132,29 @@ describe('Component - Dialog', () => {
 
     expect(handleSubmit).toBeCalled();
   });
+
+  it('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');
+  });
 });

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',