feat: Action button tooltips (#1706)

Added tooltip prop to action button components resolves #1705
deephaven · Jan 4, 2024 · bff6bf9 · bff6bf9
1 parent b1bcd3a
commit bff6bf9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/packages/components/src/actions/ConfirmActionButton.tsx b/packages/components/src/actions/ConfirmActionButton.tsx
@@ -12,6 +12,7 @@ export interface ConfirmActionButtonProps {
     | ReactElement<SpectrumLabelableProps>
     | ReactElement<SpectrumLabelableProps>[];
   isHidden?: boolean;
+  tooltip?: string;
   onConfirm: () => void;
 }
 
@@ -21,6 +22,7 @@ export function ConfirmActionButton({
   confirmationButtonLabel,
   isHidden,
   children,
+  tooltip,
   onConfirm,
 }: ConfirmActionButtonProps): JSX.Element {
   const renderDialog = useCallback(
@@ -47,6 +49,7 @@ export function ConfirmActionButton({
       isHidden={isHidden}
       isQuiet
       height={ACTION_ICON_HEIGHT}
+      tooltip={tooltip}
     >
       {renderDialog}
     </ActionButtonDialogTrigger>

diff --git a/packages/components/src/actions/IconActionButton.tsx b/packages/components/src/actions/IconActionButton.tsx
@@ -7,16 +7,19 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ACTION_ICON_HEIGHT } from '@deephaven/utils';
+import { Tooltip } from '../popper';
 
 export interface IconActionButtonProps
   extends Omit<SpectrumActionButtonProps, 'aria-label' | 'isQuiet' | 'height'> {
   icon: IconProp;
   label: string;
+  tooltip?: string;
 }
 
 export function IconActionButton({
   icon,
   label,
+  tooltip,
   ...props
 }: IconActionButtonProps): JSX.Element {
   return (
@@ -26,9 +29,14 @@ export function IconActionButton({
       isQuiet
       height={ACTION_ICON_HEIGHT}
     >
-      <Icon>
+      <Icon
+        UNSAFE_className={
+          tooltip == null ? undefined : 'action-button-icon-with-tooltip'
+        }
+      >
         <FontAwesomeIcon icon={icon} />
       </Icon>
+      {tooltip == null ? null : <Tooltip>{tooltip}</Tooltip>}
     </ActionButton>
   );
 }

diff --git a/packages/components/src/dialogs/ActionButtonDialogTrigger.tsx b/packages/components/src/dialogs/ActionButtonDialogTrigger.tsx
@@ -4,12 +4,14 @@ import type { SpectrumDialogClose } from '@react-types/dialog';
 import type { StyleProps } from '@react-types/shared';
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '../popper';
 
 export interface ActionButtonDialogTriggerProps extends StyleProps {
   icon: IconDefinition;
   isQuiet?: boolean;
   labelText?: string;
   ariaLabel?: string;
+  tooltip?: string;
   children: SpectrumDialogClose | ReactElement;
   onOpenChange?: (isOpen: boolean) => void;
 }
@@ -24,8 +26,14 @@ export function ActionButtonDialogTrigger({
   labelText,
   children,
   onOpenChange,
+  tooltip,
   ...styleProps
 }: ActionButtonDialogTriggerProps): JSX.Element {
+  const iconClassName =
+    labelText == null && tooltip != null
+      ? 'action-button-icon-with-tooltip'
+      : undefined;
+
   return (
     <DialogTrigger type="popover" onOpenChange={onOpenChange}>
       <ActionButton
@@ -34,10 +42,11 @@ export function ActionButtonDialogTrigger({
         aria-label={ariaLabel ?? labelText}
         isQuiet={isQuiet}
       >
-        <Icon>
+        <Icon UNSAFE_className={iconClassName}>
           <FontAwesomeIcon icon={icon} />
         </Icon>
         {labelText == null ? null : <Text>{labelText}</Text>}
+        {tooltip == null ? null : <Tooltip>{tooltip}</Tooltip>}
       </ActionButton>
       {children}
     </DialogTrigger>

diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css
@@ -16,3 +16,15 @@ label[class^='spectrum-'] {
   */
   --spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size);
 }
+
+/** 
+ * Spectrum action button icons only include right padding if the the icon is 
+ * the only child. In cases where we add a <Tooltip>, we have to manually add 
+ * the right padding ourselves to keep the icon centered.
+ */
+.action-button-icon-with-tooltip {
+  padding-right: var(
+    --spectrum-actionbutton-icon-padding-x,
+    var(--spectrum-global-dimension-size-85)
+  );
+}