refactor(theme): extend Button with tooltip

jsapp/js/components/common/ButtonNew.tsx

@@ -0,0 +1,27 @@
+import {Button as ButtonMantine, createPolymorphicComponent, Tooltip} from '@mantine/core';
+import type {ButtonProps as ButtonPropsMantine, TooltipProps} from '@mantine/core/lib/components';
+import {forwardRef} from 'react';
+
+// See boilerpate at: https://mantine.dev/guides/polymorphic/#wrapping-polymorphic-components
+
+export interface ButtonProps extends ButtonPropsMantine {
+  tooltip?: React.ReactNode;
+  tooltipProps?: Partial<Omit<TooltipProps, 'label'>>;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(({tooltip, tooltipProps, ...others}, ref) => {
+  if (!tooltip) {
+    return (
+      <ButtonMantine {...others} ref={ref} />
+    );
+  }
+
+  return (
+    <Tooltip label={tooltip} {...tooltipProps}>
+      <ButtonMantine {...others} ref={ref} />
+    </Tooltip>
+  );
+});
+Button.displayName = 'Button';
+
+export default createPolymorphicComponent<'button', ButtonProps>(Button);

jsapp/js/components/common/button.stories.tsx

@@ -3,11 +3,12 @@ import type {ComponentStory, ComponentMeta} from '@storybook/react';
 import type {TooltipAlignment} from './tooltip';
 import {IconNames} from 'jsapp/fonts/k-icons';
 import type {IconName} from 'jsapp/fonts/k-icons';
-import type {ButtonProps, MantineSize, PolymorphicComponentProps} from '@mantine/core';
-import {Button, MantineProvider} from '@mantine/core';
+import type {MantineSize, PolymorphicComponentProps, TooltipProps} from '@mantine/core';
+import {MantineProvider} from '@mantine/core';
 import Icon from './icon';
 import '@mantine/core/styles.css';
 import {themeKobo} from 'jsapp/js/theme';
+import Button, {type ButtonProps} from './ButtonNew';
 
 const buttonVariants: Array<ButtonProps['variant']> = [
   'filled',
@@ -33,7 +34,7 @@ const buttonSizes: MantineSize[] = [
   // 'xl',
 ];
 
-const tooltipPositions: TooltipAlignment[] = ['right', 'left', 'center'];
+const tooltipPositions: Array<NonNullable<TooltipProps['position']>> = ['top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'] as const;
 
 export default {
   title: 'common/Button',
@@ -91,15 +92,16 @@ export default {
       control: {type: 'select'},
       if: {arg: 'size', eq: 'lg'},
     },
-    // tooltip: {
-    //   description: 'Tooltip text',
-    //   control: 'text',
-    // },
-    // tooltipPosition: {
-    //   description: 'Position of the tooltip (optional)',
-    //   options: tooltipPositions,
-    //   control: 'radio',
-    // },
+    tooltip: {
+      description: 'Tooltip text',
+      control: 'text',
+    },
+    tooltipProps: {
+      description: 'Position of the tooltip (optional)',
+      options: tooltipPositions,
+      mapping: tooltipPositions.map((position) => [position, {position}] as const).reduce((o, [k, v]) => {return {...o, [k]: v};}, {}),
+      control: 'radio',
+    },
     disabled: {control: 'boolean'},
     loading: {control: 'boolean'},
     fullWidth: {
@@ -189,6 +191,7 @@ export const AllButtons = () => (
               size: size,
               leftSection: leftSectionName ? <Icon name={leftSectionName} size={size[0] as any} /> : undefined,
               onClick: () => console.info('Clicked!', variant, size, label, leftSectionName),
+              tooltip: label,
             };
             return (
               <>

jsapp/js/theme/kobo/Tooltip.ts

@@ -0,0 +1,21 @@
+import {Tooltip} from '@mantine/core';
+
+export const TooltipThemeKobo = Tooltip.extend({
+  defaultProps: {
+    offset: {mainAxis: -4},
+    position: 'bottom',
+    withArrow: true,
+    arrowSize: 8,
+    // arrowPosition: 'center',
+  },
+  vars: (theme, props) => {
+    return {
+      tooltip: {
+        '--tooltip-bg': theme.colors.gray[2],
+        '--tooltip-color': 'var(--mantine-color-white)',
+        '--tooltip-radius': theme.radius.xs,
+      },
+    };
+  },
+
+});

jsapp/js/theme/kobo/index.ts

@@ -1,5 +1,6 @@
 import {createTheme, rem} from '@mantine/core';
 import {ButtonThemeKobo} from './Button';
+import {TooltipThemeKobo} from './Tooltip';
 
 export const themeKobo = createTheme({
   primaryColor: 'blue',
@@ -85,5 +86,6 @@ export const themeKobo = createTheme({
 
   components: {
     Button: ButtonThemeKobo,
+    Tooltip: TooltipThemeKobo,
   },
 });