@oxyhq/bloom 0.9.1 → 0.11.0

package/src/__tests__/Button.web.test.tsx

@@ -0,0 +1,201 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { getByRole, getByText, getByLabelText, fireEvent } from '@testing-library/dom';
+import '@testing-library/jest-dom';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import {
+  Button,
+  OutlineButton,
+  LinkButton,
+  DestructiveButton,
+} from '../button/Button.web';
+
+// react-dom 19 logs a guard unless this flag is set in test environments.
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+function mount(ui: React.ReactElement): HTMLElement {
+  act(() => {
+    root.render(
+      <BloomThemeProvider mode="light" colorPreset="teal">
+        {ui}
+      </BloomThemeProvider>,
+    );
+  });
+  return container;
+}
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+describe('Button.web', () => {
+  it('renders a real <button> element', () => {
+    const c = mount(<Button>Click me</Button>);
+    const btn = getByRole(c, 'button', { name: 'Click me' });
+    expect(btn.tagName).toBe('BUTTON');
+  });
+
+  it('defaults to type="button"', () => {
+    const c = mount(<Button>Default</Button>);
+    expect(getByRole(c, 'button')).toHaveAttribute('type', 'button');
+  });
+
+  it('supports type="submit" for form participation', () => {
+    const onSubmit = jest.fn((e: Event) => e.preventDefault());
+    const c = mount(
+      <form onSubmit={onSubmit as unknown as React.FormEventHandler}>
+        <Button type="submit">Submit</Button>
+      </form>,
+    );
+    const btn = getByRole(c, 'button', { name: 'Submit' });
+    expect(btn).toHaveAttribute('type', 'submit');
+    act(() => {
+      fireEvent.click(btn);
+    });
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires both onClick and onPress on click', () => {
+    const onClick = jest.fn();
+    const onPress = jest.fn();
+    const c = mount(
+      <Button onClick={onClick} onPress={onPress}>
+        Go
+      </Button>,
+    );
+    act(() => {
+      fireEvent.click(getByRole(c, 'button'));
+    });
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fire handlers when disabled', () => {
+    const onPress = jest.fn();
+    const c = mount(
+      <Button disabled onPress={onPress}>
+        Nope
+      </Button>,
+    );
+    const btn = getByRole(c, 'button');
+    expect(btn).toBeDisabled();
+    act(() => {
+      fireEvent.click(btn);
+    });
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('does not fire onPress when loading and marks aria-busy', () => {
+    const onPress = jest.fn();
+    const c = mount(
+      <Button loading onPress={onPress}>
+        Saving
+      </Button>,
+    );
+    const btn = getByRole(c, 'button');
+    expect(btn).toHaveAttribute('aria-busy', 'true');
+    act(() => {
+      fireEvent.click(btn);
+    });
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('keeps children mounted while loading so width is preserved', () => {
+    const c = mount(<Button loading>Submit</Button>);
+    expect(getByText(c, 'Submit')).toBeTruthy();
+  });
+
+  it('passes className through so consumer layout classes win', () => {
+    const c = mount(<Button className="w-full custom">Wide</Button>);
+    const btn = getByRole(c, 'button');
+    expect(btn).toHaveClass('bloom-btn');
+    expect(btn).toHaveClass('w-full');
+    expect(btn).toHaveClass('custom');
+  });
+
+  it('applies aria-label from accessibilityLabel', () => {
+    const c = mount(<Button accessibilityLabel="Save changes">Save</Button>);
+    expect(getByLabelText(c, 'Save changes')).toBeTruthy();
+  });
+
+  it('exposes testID as data-testid', () => {
+    const c = mount(<Button testID="my-btn">Test</Button>);
+    expect(c.querySelector('[data-testid="my-btn"]')?.tagName).toBe('BUTTON');
+  });
+
+  describe('asChild', () => {
+    it('renders the child element (anchor) instead of a button', () => {
+      const c = mount(
+        <Button asChild>
+          <a href="/go">Go</a>
+        </Button>,
+      );
+      const link = getByRole(c, 'link', { name: 'Go' });
+      expect(link.tagName).toBe('A');
+      expect(link).toHaveAttribute('href', '/go');
+      expect(link).toHaveClass('bloom-btn');
+    });
+
+    it('merges onPress onto the child', () => {
+      const onPress = jest.fn();
+      const c = mount(
+        <Button asChild onPress={onPress}>
+          <a href="/go">Go</a>
+        </Button>,
+      );
+      act(() => {
+        fireEvent.click(getByRole(c, 'link'));
+      });
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('web variants', () => {
+    it('OutlineButton renders a button', () => {
+      const c = mount(<OutlineButton>Outline</OutlineButton>);
+      expect(getByRole(c, 'button', { name: 'Outline' }).tagName).toBe('BUTTON');
+    });
+
+    it('LinkButton renders with the link modifier class', () => {
+      const c = mount(<LinkButton>Link</LinkButton>);
+      expect(getByRole(c, 'button', { name: 'Link' })).toHaveClass('bloom-btn--link');
+    });
+
+    it('DestructiveButton renders a button', () => {
+      const c = mount(<DestructiveButton>Delete</DestructiveButton>);
+      expect(getByRole(c, 'button', { name: 'Delete' }).tagName).toBe('BUTTON');
+    });
+  });
+
+  describe('size aliases', () => {
+    it('accepts shadcn-style sm size', () => {
+      const c = mount(<Button size="sm">Small</Button>);
+      expect(getByRole(c, 'button', { name: 'Small' }).tagName).toBe('BUTTON');
+    });
+
+    it('size="icon" selects the icon variant', () => {
+      const c = mount(
+        <Button size="icon" accessibilityLabel="icon">
+          x
+        </Button>,
+      );
+      expect(getByRole(c, 'button', { name: 'icon' }).tagName).toBe('BUTTON');
+    });
+  });
+});

package/src/button/Button.tsx

@@ -14,10 +14,30 @@ import {
 import { useTheme } from '../theme/use-theme';
 import { usePressAnimation } from '../hooks/usePressAnimation';
 import { useInteractionState } from '../hooks/useInteractionState';
-import type { ButtonProps } from './types';
+import type { ButtonProps, ButtonSize, ButtonVariant } from './types';
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
 
+/**
+ * The shared {@link ButtonVariant}/{@link ButtonSize} types include web-only
+ * additions (shadcn variants + size aliases) so a single call site type-checks
+ * on both platforms. Native normalizes them to its own primitives:
+ *   - `outline → secondary`, `link → text`, `destructive → primary` (tinted)
+ *   - `sm|md|lg|icon` size aliases → `small|medium|large`
+ */
+type NativeVariant = 'primary' | 'secondary' | 'inverse' | 'icon' | 'ghost' | 'text';
+type NativeSize = 'small' | 'medium' | 'large';
+
+const SIZE_ALIAS: Record<ButtonSize, NativeSize> = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  sm: 'small',
+  md: 'medium',
+  lg: 'large',
+  icon: 'medium',
+};
+
 const SIZE_CONFIG = {
   small: {
     paddingVertical: 6,
@@ -41,6 +61,11 @@ const SIZE_CONFIG = {
 
 const ICON_HIT_SLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
 
+// Fully-rounded (pill/capsule) corner radius. Large enough to stay a perfect
+// capsule at any button height. Shared by every text button variant so they all
+// read as pills; the icon variant keeps its own large radius to stay a circle.
+const PILL_RADIUS = 999;
+
 const PRESS_SCALE = 0.97;
 const SCALE_VARIANTS = new Set<string>(['primary', 'secondary', 'inverse']);
 
@@ -48,8 +73,8 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   onPress,
   children,
   disabled = false,
-  variant = 'primary',
-  size = 'medium',
+  variant: variantProp = 'primary',
+  size: sizeProp = 'medium',
   style,
   textStyle,
   icon,
@@ -64,6 +89,23 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   className,
 }) => {
   const theme = useTheme();
+  // The shadcn `size="icon"` shorthand also selects the icon variant unless an
+  // explicit variant was given by the caller.
+  const variant: NativeVariant = useMemo(() => {
+    if (sizeProp === 'icon' && variantProp === 'primary') return 'icon';
+    switch (variantProp) {
+      case 'outline':
+        return 'secondary';
+      case 'link':
+        return 'text';
+      case 'destructive':
+        return 'primary';
+      default:
+        return variantProp;
+    }
+  }, [variantProp, sizeProp]);
+  const isDestructive = variantProp === 'destructive';
+  const size: NativeSize = SIZE_ALIAS[sizeProp];
   const hasScaleFeedback = SCALE_VARIANTS.has(variant);
   const isInteractionBlocked = disabled || loading;
   const { scaleAnim, onPressIn: onScalePressIn, onPressOut: onScalePressOut } =
@@ -112,43 +154,48 @@ const ButtonComponent: React.FC<ButtonProps> = ({
 
     switch (variant) {
       case 'primary':
-        styles.backgroundColor = theme.colors.primary;
-        styles.borderRadius = 20;
+        styles.backgroundColor = isDestructive
+          ? theme.colors.negative
+          : theme.colors.primary;
+        styles.borderRadius = PILL_RADIUS;
         break;
       case 'secondary':
         styles.backgroundColor = 'transparent';
         styles.borderWidth = 1;
         styles.borderColor = theme.colors.border;
-        styles.borderRadius = 20;
+        styles.borderRadius = PILL_RADIUS;
         break;
       case 'inverse':
         styles.backgroundColor = '#FFFFFF';
-        styles.borderRadius = 20;
+        styles.borderRadius = PILL_RADIUS;
         break;
       case 'icon':
-        styles.borderRadius = 100;
+        styles.borderRadius = PILL_RADIUS;
         styles.padding = 8;
         styles.width = sizeConfig.minHeight;
         styles.height = sizeConfig.minHeight;
         break;
       case 'ghost':
         styles.backgroundColor = 'transparent';
-        styles.borderRadius = 8;
+        styles.borderRadius = PILL_RADIUS;
         break;
       case 'text':
         styles.backgroundColor = 'transparent';
+        styles.borderRadius = PILL_RADIUS;
         styles.paddingVertical = 4;
         styles.paddingHorizontal = 8;
         break;
     }
 
     return styles;
-  }, [variant, size, theme]);
+  }, [variant, size, theme, isDestructive]);
 
   const resolvedTextColor = useMemo((): string => {
     switch (variant) {
       case 'primary':
-        return theme.colors.primaryForeground;
+        return isDestructive
+          ? theme.colors.negativeForeground
+          : theme.colors.primaryForeground;
       case 'secondary':
         return theme.colors.text;
       case 'inverse':
@@ -160,7 +207,7 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       default:
         return theme.colors.text;
     }
-  }, [variant, theme]);
+  }, [variant, theme, isDestructive]);
 
   const computedTextStyle = useMemo((): TextStyle => {
     const sizeConfig = SIZE_CONFIG[size];
@@ -275,3 +322,21 @@ export const TextButton = memo((props: Omit<ButtonProps, 'variant'>) => (
   <Button {...props} variant="text" />
 ));
 TextButton.displayName = 'TextButton';
+
+// Web/shadcn-aligned variants. On native they normalize to existing primitives
+// (`outline → secondary`, `link → text`, `destructive → primary` tinted with the
+// negative token) inside `Button`, so these stay API-parallel with the web fork.
+export const OutlineButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="outline" />
+));
+OutlineButton.displayName = 'OutlineButton';
+
+export const LinkButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="link" />
+));
+LinkButton.displayName = 'LinkButton';
+
+export const DestructiveButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="destructive" />
+));
+DestructiveButton.displayName = 'DestructiveButton';