@oxyhq/bloom 0.10.0 → 0.12.0

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

@@ -0,0 +1,114 @@
+/**
+ * @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 { Fab } from '../fab/Fab.web';
+
+(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('Fab.web', () => {
+  it('renders a real <button> element', () => {
+    const c = mount(<Fab accessibilityLabel="Add" icon={<span>+</span>} />);
+    const fab = getByRole(c, 'button', { name: 'Add' });
+    expect(fab.tagName).toBe('BUTTON');
+  });
+
+  it('defaults to type="button"', () => {
+    const c = mount(<Fab accessibilityLabel="Add" icon={<span>+</span>} />);
+    expect(getByRole(c, 'button')).toHaveAttribute('type', 'button');
+  });
+
+  it('fires both onClick and onPress on click', () => {
+    const onClick = jest.fn();
+    const onPress = jest.fn();
+    const c = mount(
+      <Fab accessibilityLabel="Add" onClick={onClick} onPress={onPress} icon={<span>+</span>} />,
+    );
+    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(
+      <Fab accessibilityLabel="Add" disabled onPress={onPress} icon={<span>+</span>} />,
+    );
+    const fab = getByRole(c, 'button');
+    expect(fab).toBeDisabled();
+    act(() => {
+      fireEvent.click(fab);
+    });
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('uses position: sticky for the default bottom-right placement (NOT fixed)', () => {
+    const c = mount(<Fab accessibilityLabel="Add" icon={<span>+</span>} />);
+    const fab = getByRole(c, 'button');
+    expect(fab.style.position).toBe('sticky');
+    expect(fab.style.bottom).toBe('16px');
+    expect(fab.style.alignSelf).toBe('flex-end');
+  });
+
+  it('applies no positioning for placement="static"', () => {
+    const c = mount(<Fab accessibilityLabel="Add" placement="static" icon={<span>+</span>} />);
+    const fab = getByRole(c, 'button');
+    expect(fab.style.position).toBe('');
+  });
+
+  it('renders an extended label', () => {
+    const c = mount(<Fab label="Compose" icon={<span>+</span>} />);
+    expect(getByText(c, 'Compose')).toBeTruthy();
+  });
+
+  it('applies aria-label from accessibilityLabel', () => {
+    const c = mount(<Fab accessibilityLabel="Add post" icon={<span>+</span>} />);
+    expect(getByLabelText(c, 'Add post')).toBeTruthy();
+  });
+
+  it('passes className through so consumer layout classes win', () => {
+    const c = mount(<Fab accessibilityLabel="Add" className="my-fab" icon={<span>+</span>} />);
+    const fab = getByRole(c, 'button');
+    expect(fab).toHaveClass('bloom-fab');
+    expect(fab).toHaveClass('my-fab');
+  });
+
+  it('exposes testID as data-testid', () => {
+    const c = mount(<Fab accessibilityLabel="Add" testID="my-fab" icon={<span>+</span>} />);
+    expect(c.querySelector('[data-testid="my-fab"]')?.tagName).toBe('BUTTON');
+  });
+});

package/src/button/Button.tsx

@@ -61,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']);
 
@@ -152,30 +157,31 @@ const ButtonComponent: React.FC<ButtonProps> = ({
         styles.backgroundColor = isDestructive
           ? theme.colors.negative
           : theme.colors.primary;
-        styles.borderRadius = 20;
+        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;

package/src/button/Button.web.tsx

@@ -47,9 +47,12 @@ const SIZE_ALIAS: Record<ButtonSize, NativeSize> = {
   icon: 'medium',
 };
 
-const PILL_RADIUS = 20;
-const GHOST_RADIUS = 8;
-const ICON_RADIUS = 100;
+// Fully-rounded (pill/capsule) corner radius — large enough to stay a perfect
+// capsule at any button height. Mirrors native `PILL_RADIUS` so web and native
+// produce the SAME fully-rounded shape. The icon variant reuses it too: a square
+// button with this radius renders as a perfect circle.
+const PILL_RADIUS = 999;
+const ICON_RADIUS = PILL_RADIUS;
 const PRESS_SCALE = 0.97;
 
 /** Variants that get a tactile press-scale (matches native `SCALE_VARIANTS`). */
@@ -183,7 +186,7 @@ function resolveVariantStyle(
       };
     case 'ghost':
       return {
-        container: { backgroundColor: 'transparent', borderRadius: GHOST_RADIUS },
+        container: { backgroundColor: 'transparent', borderRadius: PILL_RADIUS },
         textColor: c.primary,
         ringColor: c.primary,
       };
@@ -206,7 +209,7 @@ function resolveVariantStyle(
     case 'link':
     default:
       return {
-        container: { backgroundColor: 'transparent', borderRadius: 0 },
+        container: { backgroundColor: 'transparent', borderRadius: PILL_RADIUS },
         textColor: c.primary,
         ringColor: c.primary,
       };

package/src/fab/Fab.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Fab } from './Fab';
+import * as Icons from '../icons';
+
+const meta: Meta<typeof Fab> = {
+  title: 'Components/Fab',
+  component: Fab,
+  args: {
+    accessibilityLabel: 'Compose',
+    icon: <Icons.PlusLarge_Stroke2_Corner0_Rounded size="lg" fill="#fff" />,
+    onPress: () => {},
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'surface'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    placement: {
+      control: 'select',
+      options: ['bottom-right', 'bottom-left', 'top-right', 'top-left', 'static'],
+    },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Fab>;
+
+/** Default circular icon FAB, anchored to the bottom-right of its container. */
+export const Default: Story = {};
+
+/** Lower-emphasis surface FAB. */
+export const Surface: Story = {
+  args: { variant: 'surface' },
+};
+
+/** Extended FAB: icon + label pill. */
+export const Extended: Story = {
+  args: { label: 'Compose' },
+};
+
+/**
+ * The FAB anchored to the bottom-right of a CONSTRAINED column. On web the FAB
+ * uses `position: sticky`, so it tracks the bottom of THIS column (not the
+ * viewport) — exactly what a multi-column app layout needs.
+ */
+export const InContainerColumn: Story = {
+  render: (args) => (
+    <View
+      style={{
+        position: 'relative',
+        width: 360,
+        height: 480,
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 12,
+        overflow: 'hidden',
+      }}
+    >
+      <Fab {...args} />
+    </View>
+  ),
+};

package/src/fab/Fab.tsx

@@ -0,0 +1,189 @@
+import React, { memo, useMemo } from 'react';
+import {
+  Animated,
+  Pressable,
+  Text,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { usePressAnimation } from '../hooks/usePressAnimation';
+import { useInteractionState } from '../hooks/useInteractionState';
+import type { FabPlacement, FabProps, FabSize, FabVariant } from './types';
+
+export type { FabProps, FabVariant, FabSize, FabPlacement } from './types';
+
+const SIZE_CONFIG: Record<FabSize, { diameter: number; iconBox: number; fontSize: number }> = {
+  small: { diameter: 40, iconBox: 20, fontSize: 14 },
+  medium: { diameter: 56, iconBox: 24, fontSize: 15 },
+  large: { diameter: 64, iconBox: 28, fontSize: 16 },
+};
+
+const PILL_RADIUS = 999;
+const PRESS_SCALE = 0.94;
+const DEFAULT_OFFSET = 16;
+const DEFAULT_Z_INDEX = 50;
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
+
+/**
+ * Compute the `position: absolute` anchoring for a placement. The FAB pins to
+ * the nearest positioned ancestor (the consumer's column container), NOT the
+ * screen — so it never escapes a constrained layout. `static` returns no
+ * positioning (consumer-controlled).
+ */
+function placementStyle(placement: FabPlacement, offset: number): ViewStyle {
+  if (placement === 'static') return {};
+  const style: ViewStyle = { position: 'absolute' };
+  if (placement === 'bottom-right' || placement === 'bottom-left') {
+    style.bottom = offset;
+  } else {
+    style.top = offset;
+  }
+  if (placement === 'bottom-right' || placement === 'top-right') {
+    style.right = offset;
+  } else {
+    style.left = offset;
+  }
+  return style;
+}
+
+const FabComponent: React.FC<FabProps> = ({
+  onPress,
+  icon,
+  children,
+  label,
+  variant = 'primary',
+  size = 'medium',
+  placement = 'bottom-right',
+  offset = DEFAULT_OFFSET,
+  disabled = false,
+  accessibilityLabel,
+  accessibilityHint,
+  style,
+  labelStyle,
+  className,
+  testID,
+  zIndex = DEFAULT_Z_INDEX,
+}) => {
+  const theme = useTheme();
+  const sizeConfig = SIZE_CONFIG[size];
+  const isExtended = label != null && label.length > 0;
+  const content = icon ?? children;
+
+  const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(
+    disabled ? undefined : PRESS_SCALE,
+  );
+  const { state: pressed, onIn: onPressedIn, onOut: onPressedOut } =
+    useInteractionState();
+
+  const resolvedColors = useMemo(() => resolveVariant(variant, theme.colors), [variant, theme.colors]);
+
+  const containerStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      backgroundColor: resolvedColors.background,
+      borderRadius: PILL_RADIUS,
+      height: sizeConfig.diameter,
+      // Elevation / shadow (native).
+      shadowColor: theme.colors.shadow,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.3,
+      shadowRadius: 8,
+      elevation: 6,
+    };
+    if (isExtended) {
+      base.paddingHorizontal = size === 'small' ? 14 : 20;
+      base.gap = 8;
+    } else {
+      base.width = sizeConfig.diameter;
+    }
+    return base;
+  }, [resolvedColors.background, sizeConfig.diameter, theme.colors.shadow, isExtended, size]);
+
+  const labelTextStyle = useMemo((): TextStyle => ({
+    fontSize: sizeConfig.fontSize,
+    fontWeight: '600',
+    color: resolvedColors.foreground,
+  }), [sizeConfig.fontSize, resolvedColors.foreground]);
+
+  const handlePressIn = disabled
+    ? undefined
+    : () => {
+        onPressIn();
+        onPressedIn();
+      };
+  const handlePressOut = disabled
+    ? undefined
+    : () => {
+        onPressOut();
+        onPressedOut();
+      };
+
+  return (
+    <Animated.View
+      style={[
+        placementStyle(placement, offset),
+        { zIndex, transform: [{ scale: scaleAnim }] },
+        style,
+      ]}
+    >
+      <Pressable
+        {...(className ? ({ className } as Record<string, string>) : {})}
+        style={[
+          containerStyle,
+          disabled && { opacity: 0.5 },
+          pressed && !disabled && { opacity: 0.9 },
+        ]}
+        onPress={disabled ? undefined : onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        hitSlop={HIT_SLOP}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ disabled }}
+        testID={testID}
+      >
+        {content != null && (
+          <View
+            style={{
+              width: sizeConfig.iconBox,
+              height: sizeConfig.iconBox,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {content}
+          </View>
+        )}
+        {isExtended && (
+          <Text style={[labelTextStyle, labelStyle]} numberOfLines={1}>
+            {label}
+          </Text>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+function resolveVariant(
+  variant: FabVariant,
+  colors: ReturnType<typeof useTheme>['colors'],
+): { background: string; foreground: string } {
+  switch (variant) {
+    case 'secondary':
+    case 'surface':
+      return { background: colors.card, foreground: colors.text };
+    case 'primary':
+    default:
+      return { background: colors.primary, foreground: colors.primaryForeground };
+  }
+}
+
+export const Fab = memo(FabComponent);
+Fab.displayName = 'Fab';