fix(bui): Enable tooltips on disabled buttons

Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>

.changeset/moody-singers-deny.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Enable tooltips on disabled buttons with automatic wrapper

packages/ui/src/components/Button/Button.stories.tsx

@@ -19,6 +19,7 @@ import { Button } from './Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
+import { Tooltip, TooltipTrigger } from '../Tooltip';
 
 const meta = {
   title: 'Backstage UI/Button',
@@ -216,3 +217,12 @@ export const Playground: Story = {
     </Flex>
   ),
 };
+
+export const DisabledWithTooltips: Story = {
+  render: () => (
+    <TooltipTrigger>
+      <Button isDisabled>Save</Button>
+      <Tooltip>Why this is disabled</Tooltip>
+    </TooltipTrigger>
+  ),
+};

packages/ui/src/components/Button/Button.tsx

@@ -16,7 +16,7 @@
 
 import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
-import { Button as RAButton } from 'react-aria-components';
+import { Button as RAButton, Focusable } from 'react-aria-components';
 import type { ButtonProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 
@@ -30,6 +30,7 @@ export const Button = forwardRef(
       iconEnd,
       children,
       className,
+      isDisabled,
       ...rest
     } = props;
 
@@ -38,18 +39,29 @@ export const Button = forwardRef(
       variant,
     });
 
-    return (
+    const btn = (
       <RAButton
         className={clsx(classNames.root, className)}
         ref={ref}
         {...dataAttributes}
         {...rest}
+        isDisabled={!!isDisabled}
       >
         {iconStart}
         {children}
         {iconEnd}
       </RAButton>
     );
+
+    return isDisabled ? (
+      <Focusable>
+        <span role="button" tabIndex={0} style={{ display: 'inline-flex' }}>
+          {btn}
+        </span>
+      </Focusable>
+    ) : (
+      btn
+    );
   },
 );