feat(Button): rework (#923)

Author: tenphi

.changeset/fresh-pumas-knock.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Rework of Button component to align its implementation and layout with Item and ItemButton components.

.size-limit.cjs

@@ -27,7 +27,7 @@ module.exports = [
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '35 kB',
+    limit: '45 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',

src/components/actions/Button/Button.tsx

@@ -1,5 +1,13 @@
 import { FocusableRef } from '@react-types/shared';
-import { cloneElement, forwardRef, ReactElement, useMemo } from 'react';
+import {
+  forwardRef,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  RefObject,
+  useMemo,
+} from 'react';
+import { OverlayProps } from 'react-aria';
 
 import { useWarn } from '../../../_internal/hooks/use-warn';
 import {
@@ -32,10 +40,13 @@ import { LoadingIcon } from '../../../icons';
 import {
   CONTAINER_STYLES,
   extractStyles,
+  Styles,
   tasty,
   TEXT_STYLES,
 } from '../../../tasty';
-import { Text } from '../../content/Text';
+import { mergeProps } from '../../../utils/react';
+import { useAutoTooltip } from '../../content/use-auto-tooltip';
+import { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';
 import { CubeActionProps } from '../Action/Action';
 import { useAction } from '../use-action';
 
@@ -54,6 +65,22 @@ export interface CubeButtonProps extends CubeActionProps {
     | 'neutral'
     | (string & {});
   size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | (string & {});
+  /**
+   * Tooltip content and configuration:
+   * - string: simple tooltip text
+   * - true: auto tooltip on overflow (shows children as tooltip when truncated)
+   * - object: advanced configuration with optional auto property
+   */
+  tooltip?:
+    | string
+    | boolean
+    | (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });
+  /**
+   * @private
+   * Default tooltip placement for the button.
+   * @default "top"
+   */
+  defaultTooltipPlacement?: OverlayProps['placement'];
 }
 
 export type ButtonVariant =
@@ -84,18 +111,28 @@ export type ButtonVariant =
 
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
 
+const DEFAULT_ICON_STYLES: Styles = {
+  $: '>',
+  display: 'grid',
+  placeItems: 'center',
+  placeContent: 'stretch',
+  aspectRatio: '1 / 1',
+  width: '($size - 2bw)',
+};
+
 export const DEFAULT_BUTTON_STYLES = {
   display: 'inline-grid',
-  flow: 'column',
-  placeItems: 'center start',
-  placeContent: {
-    '': 'center',
-    'right-icon | suffix': 'center stretch',
+  flow: 'column dense',
+  gap: 0,
+  gridTemplate: {
+    '': '"icon label rightIcon" auto / max-content 1sf max-content',
+    'raw-children': 'initial',
   },
-  gridColumns: {
-    '': 'initial',
-    'left-icon | loading | prefix': 'max-content',
+  placeItems: {
+    '': 'stretch',
+    'raw-children': 'center stretch',
   },
+  placeContent: 'center stretch',
   position: 'relative',
   margin: 0,
   boxSizing: 'border-box',
@@ -105,10 +142,6 @@ export const DEFAULT_BUTTON_STYLES = {
     ':is(button)': '$pointer',
     disabled: 'not-allowed',
   },
-  gap: {
-    '': '.75x',
-    'size=small': '.5x',
-  },
   preset: {
     '': 't3m',
     'size=xsmall': 't4',
@@ -120,16 +153,14 @@ export const DEFAULT_BUTTON_STYLES = {
   outline: 0,
   outlineOffset: 1,
   padding: {
-    '': '.5x (1.5x - 1bw)',
-    'size=small | size=xsmall': '.5x (1.25x - 1bw)',
-    'size=medium': '.5x (1.5x - 1bw)',
-    'size=large': '.5x (1.75x - 1bw)',
-    'size=xlarge': '.5x (2x - 1bw)',
-    'single-icon | type=link': 0,
+    '': 0,
+    'raw-children':
+      '$block-padding $label-padding-right $block-padding $label-padding-left',
+    'raw-children & type=link': 0,
   },
   width: {
     '': 'min $size',
-    'left-icon & right-icon': 'min ($size * 2 - 2bw)',
+    'has-icon & has-right-icon': 'min ($size * 2 - 2bw)',
     'single-icon': 'fixed $size',
     'type=link': 'min 1ch',
   },
@@ -151,19 +182,57 @@ export const DEFAULT_BUTTON_STYLES = {
     'size=large': '$size-lg',
     'size=xlarge': '$size-xl',
   },
+  '$inline-padding': {
+    '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
+  },
+  '$block-padding': {
+    '': '.5x',
+    'size=xsmall | size=small': '.25x',
+  },
+  '$inline-compensation': '.5x',
+  '$min-inline-padding': '(1x - 1bw)',
+  '$label-padding-left': {
+    '': '$inline-padding',
+    'has-icon': 0,
+  },
+  '$label-padding-right': {
+    '': '$inline-padding',
+    'has-right-icon': 0,
+  },
 
-  ButtonIcon: {
-    width: 'min 1fs',
+  // Icon sub-element (recommended format)
+  Icon: {
+    ...DEFAULT_ICON_STYLES,
+    gridArea: 'icon',
   },
 
-  '& [data-element="ButtonIcon"]:first-child:not(:last-child)': {
-    marginLeft: '-.5x',
-    placeSelf: 'center start',
+  // RightIcon sub-element (recommended format)
+  RightIcon: {
+    ...DEFAULT_ICON_STYLES,
+    gridArea: 'rightIcon',
   },
 
-  '& [data-element="ButtonIcon"]:last-child:not(:first-child)': {
-    marginRight: '-.5x',
-    placeSelf: 'center end',
+  // Label sub-element (recommended format)
+  Label: {
+    $: '>',
+    gridArea: 'label',
+    display: 'block',
+    placeSelf: 'center stretch',
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+    textAlign: 'center',
+    padding: {
+      '': '$block-padding $label-padding-right $block-padding $label-padding-left',
+      'type=link': 0,
+    },
+  },
+
+  // ButtonIcon sub-element (backward compatibility)
+  ButtonIcon: {
+    width: 'min 1fs',
   },
 } as const;
 
@@ -219,6 +288,8 @@ export const Button = forwardRef(function Button(
     rightIcon,
     mods,
     download,
+    tooltip = true,
+    defaultTooltipPlacement = 'top',
     ...props
   } = allProps;
 
@@ -252,34 +323,30 @@ export const Button = forwardRef(function Button(
     label = 'Unnamed'; // fix to avoid warning in production
   }
 
-  if (icon) {
-    icon = cloneElement(icon, {
-      'data-element': 'ButtonIcon',
-    } as any);
-  }
-
-  if (rightIcon) {
-    rightIcon = cloneElement(rightIcon, {
-      'data-element': 'ButtonIcon',
-    } as any);
-  }
-
+  const hasLeftIcon = !!icon || isLoading;
+  const hasChildren = children != null;
   const singleIcon = !!(
-    ((icon && !rightIcon) || (rightIcon && !icon)) &&
-    !children
+    ((hasLeftIcon && !rightIcon) || (rightIcon && !hasLeftIcon)) &&
+    !hasChildren
   );
 
-  const hasIcons = !!icon || !!rightIcon;
+  const hasIcons = hasLeftIcon || !!rightIcon;
+  const rawChildren = !!(
+    hasChildren &&
+    typeof children !== 'string' &&
+    !hasIcons
+  );
 
   const modifiers = useMemo(
     () => ({
       loading: isLoading,
       selected: isSelected,
       'has-icons': hasIcons,
-      'left-icon': !!icon,
-      'right-icon': !!rightIcon,
+      'has-icon': hasLeftIcon,
+      'has-right-icon': !!rightIcon,
       'single-icon': singleIcon,
-      'text-only': !!(children && typeof children === 'string' && !hasIcons),
+      'text-only': !!(hasChildren && typeof children === 'string' && !hasIcons),
+      'raw-children': rawChildren,
       ...mods,
     }),
     [
@@ -291,6 +358,7 @@ export const Button = forwardRef(function Button(
       isSelected,
       singleIcon,
       hasIcons,
+      rawChildren,
     ],
   );
 
@@ -304,32 +372,63 @@ export const Button = forwardRef(function Button(
 
   delete actionProps.isDisabled;
 
-  return (
-    <ButtonElement
-      download={download}
-      {...actionProps}
-      disabled={isDisabledElement}
-      variant={`${theme}.${type ?? 'outline'}` as ButtonVariant}
-      data-theme={theme}
-      data-type={type ?? 'outline'}
-      data-size={size ?? 'medium'}
-      styles={styles}
-    >
-      {icon || isLoading ? (
-        !isLoading ? (
-          icon
-        ) : (
-          <LoadingIcon data-element="ButtonIcon" />
-        )
-      ) : null}
-      {typeof children === 'string' ? (
-        <Text ellipsis nowrap>
-          {children}
-        </Text>
-      ) : (
-        children
-      )}
-      {rightIcon}
-    </ButtonElement>
-  );
+  const {
+    labelProps: finalLabelProps,
+    labelRef,
+    renderWithTooltip,
+  } = useAutoTooltip({
+    tooltip,
+    children,
+    labelProps: undefined,
+  });
+
+  // Render function that creates the button element
+  const renderButtonElement = (
+    tooltipTriggerProps?: HTMLAttributes<HTMLElement>,
+    tooltipRef?: RefObject<HTMLElement>,
+  ): ReactNode => {
+    // Use callback ref to merge multiple refs without calling hooks
+    const handleRef = (element: HTMLElement | null) => {
+      // Set the component's forwarded ref from useAction
+      const domRef = actionProps.ref as any;
+      if (typeof domRef === 'function') {
+        domRef(element);
+      } else if (domRef) {
+        domRef.current = element;
+      }
+      // Set the tooltip ref if provided
+      if (tooltipRef) {
+        (tooltipRef as any).current = element;
+      }
+    };
+
+    return (
+      <ButtonElement
+        download={download}
+        {...mergeProps(actionProps, tooltipTriggerProps || {})}
+        ref={handleRef}
+        disabled={isDisabledElement}
+        variant={`${theme}.${type ?? 'outline'}` as ButtonVariant}
+        data-theme={theme}
+        data-type={type ?? 'outline'}
+        data-size={size ?? 'medium'}
+        styles={styles}
+      >
+        {(icon || isLoading) && (
+          <div data-element="Icon">{isLoading ? <LoadingIcon /> : icon}</div>
+        )}
+        {hasChildren &&
+          (rawChildren ? (
+            children
+          ) : (
+            <div data-element="Label" {...finalLabelProps} ref={labelRef}>
+              {children}
+            </div>
+          ))}
+        {rightIcon && <div data-element="RightIcon">{rightIcon}</div>}
+      </ButtonElement>
+    );
+  };
+
+  return renderWithTooltip(renderButtonElement, defaultTooltipPlacement);
 });

src/components/actions/Menu/Menu.stories.tsx

@@ -1308,7 +1308,6 @@ export const TabWithMultipleTriggers = () => {
           size="small"
           icon={<IconDotsVertical />}
           aria-label="Tab actions"
-          padding="1x"
           radius="right"
           margin="-1bw left"
           onPress={openActionsMenu}

src/components/fields/NumberInput/StepButton.tsx

@@ -14,14 +14,13 @@ const StepButtonElement = tasty(Button, {
     },
     fontSize: '12px',
     lineHeight: '12px',
-    fill: {
-      '': '#dark.0',
-      hovered: '#dark.04',
-      pressed: '#purple.10',
-      disabled: '#dark.0',
-    },
 
     '$icon-size': '1fs',
+
+    Icon: {
+      width: 'auto',
+      height: 'auto',
+    },
   },
 });