@boostdev/design-system-react-native 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.7.0] - 2026-09-29
+### Added
+- Feat(button): ghost is outline without the border
+
+`variant="ghost"` was a deprecated alias of `outline`. It is now its own
+variant: a transparent background with the outline's text and icon
+colour, and no border. For a quiet button, such as one beside a heading.
+`outline` keeps its 1 px border. ButtonGroup stories that showed a
+bordered second button now use `outline`.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`3be03dd`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/3be03dd7d56117bc37cb7d0323d1f533be7ae16f))
+
 ## [0.6.0] - 2026-09-29
 ### Added
 - Feat(theme): radius overrides for buttons and fields

package/dist/index.cjs

@@ -2284,7 +2284,6 @@ function Button({
   const primaryColor = colors2.colorInteractive;
   const onPrimaryColor = colors2.colorOnInteractive;
   const outlineTextColor = colors2.colorInteractiveOnBg;
-  const isOutline = variant === "outline" || variant === "ghost";
   const containerStyle = {
     minHeight: height,
     paddingHorizontal: isIconOnly ? import_native.spacing.xs : px,
@@ -2297,11 +2296,12 @@ function Button({
     // instead, so a wrapped label grows the button from minHeight rather than clipping.
     ...isIconOnly ? { height } : { paddingVertical: import_native.spacing.xxs },
     ...variant === "default" && { backgroundColor: primaryColor },
-    ...isOutline && {
+    ...variant === "outline" && {
       backgroundColor: "transparent",
       borderWidth: 1,
       borderColor: outlineTextColor
-    }
+    },
+    ...variant === "ghost" && { backgroundColor: "transparent" }
   };
   const textColor = variant === "default" ? onPrimaryColor : outlineTextColor;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(

package/dist/index.js

@@ -2185,7 +2185,6 @@ function Button({
   const primaryColor = colors2.colorInteractive;
   const onPrimaryColor = colors2.colorOnInteractive;
   const outlineTextColor = colors2.colorInteractiveOnBg;
-  const isOutline = variant === "outline" || variant === "ghost";
   const containerStyle = {
     minHeight: height,
     paddingHorizontal: isIconOnly ? spacing.xs : px,
@@ -2198,11 +2197,12 @@ function Button({
     // instead, so a wrapped label grows the button from minHeight rather than clipping.
     ...isIconOnly ? { height } : { paddingVertical: spacing.xxs },
     ...variant === "default" && { backgroundColor: primaryColor },
-    ...isOutline && {
+    ...variant === "outline" && {
       backgroundColor: "transparent",
       borderWidth: 1,
       borderColor: outlineTextColor
-    }
+    },
+    ...variant === "ghost" && { backgroundColor: "transparent" }
   };
   const textColor = variant === "default" ? onPrimaryColor : outlineTextColor;
   return /* @__PURE__ */ jsxs16(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "BoostDev React Native component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "react-native",

package/src/components/interaction/Button/Button.mdx

@@ -38,6 +38,7 @@ export default function App() {
 
 <Canvas of={Stories.Default} />
 <Canvas of={Stories.Outline} />
+<Canvas of={Stories.Ghost} />
 
 ## Sizes
 
@@ -68,6 +69,7 @@ Set `isIconOnly` to render a 1:1 button (round by default, see [Shape](#shape))
 
 <Canvas of={Stories.IconOnly} />
 <Canvas of={Stories.IconOnlyOutline} />
+<Canvas of={Stories.IconOnlyGhost} />
 <Canvas of={Stories.AllIconOnly} />
 
 ## All variants × sizes
@@ -86,7 +88,7 @@ Set `isIconOnly` to render a 1:1 button (round by default, see [Shape](#shape))
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `"default" \| "outline"` | `"default"` | Visual style (`"ghost"` is a deprecated alias for `"outline"`) |
+| `variant` | `"default" \| "outline" \| "ghost"` | `"default"` | Visual style: `ghost` is `outline` without the border |
 | `size` | `"small" \| "medium" \| "large"` | `"medium"` | Height and horizontal padding |
 | `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
 | `onPress` | `() => void` | — | Called when the button is pressed |

package/src/components/interaction/Button/Button.spec.tsx

@@ -72,6 +72,32 @@ describe('Button (native)', () => {
     expect(style).toMatch(/(^|[;\s])height:\s*56px/);
   });
 
+  it('draws a ghost button without a border', () => {
+    renderWithTheme(<Button variant="ghost">Meer</Button>);
+    const style = screen.getByRole('button').getAttribute('style') ?? '';
+    expect(style).not.toMatch(/border-(top-|right-|bottom-|left-)?width:\s*[1-9]/);
+    expect(style).not.toMatch(/border-(top-|right-|bottom-|left-)?color:/);
+    expect(style).toMatch(/background-color:\s*rgba\(0, 0, 0, 0\)/);
+  });
+
+  it('draws an icon-only ghost button without a border', () => {
+    renderWithTheme(
+      <Button isIconOnly variant="ghost" accessibilityLabel="Meer">
+        <span>✓</span>
+      </Button>,
+    );
+    const style = screen.getByRole('button', { name: 'Meer' }).getAttribute('style') ?? '';
+    expect(style).not.toMatch(/border-(top-|right-|bottom-|left-)?width:\s*[1-9]/);
+    expect(style).not.toMatch(/border-(top-|right-|bottom-|left-)?color:/);
+    expect(style).toMatch(/background-color:\s*rgba\(0, 0, 0, 0\)/);
+  });
+
+  it('keeps the border on an outline button', () => {
+    renderWithTheme(<Button variant="outline">Meer</Button>);
+    const style = screen.getByRole('button').getAttribute('style') ?? '';
+    expect(style).toMatch(/border-(top-|right-|bottom-|left-)?width:\s*1px/);
+  });
+
   it.each(['small', 'medium', 'large'] as const)(
     'gives a %s text button the medium border radius by default',
     (size) => {

package/src/components/interaction/Button/Button.stories.tsx

@@ -37,8 +37,8 @@ const meta: Meta<ButtonStoryArgs> = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'outline'],
-      description: 'Visual style. `default` is filled; `outline` is transparent with a border.',
+      options: ['default', 'outline', 'ghost'],
+      description: 'Visual style. `default` is filled; `outline` is transparent with a border; `ghost` is transparent without one.',
       table: { defaultValue: { summary: 'default' } },
     },
     size: {
@@ -79,6 +79,7 @@ export const Playground: Story = {
 
 export const Default: Story = { args: { children: 'Default' } };
 export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } };
+export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } };
 export const Small: Story = { args: { children: 'Small', size: 'small' } };
 export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
 export const Large: Story = { args: { children: 'Large', size: 'large' } };
@@ -104,10 +105,19 @@ export const IconOnlyOutline: Story = {
   },
 };
 
+export const IconOnlyGhost: Story = {
+  args: {
+    variant: 'ghost',
+    isIconOnly: true,
+    accessibilityLabel: 'Confirm',
+    children: CheckIcon,
+  },
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      {(['default', 'outline'] as const).map(v => (
+      {(['default', 'outline', 'ghost'] as const).map(v => (
         <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
           {(['small', 'medium', 'large'] as const).map(s => (
             <Button key={s} variant={v} size={s}>{v} {s}</Button>
@@ -121,7 +131,7 @@ export const AllVariants: Story = {
 export const AllIconOnly: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      {(['default', 'outline'] as const).map(v => (
+      {(['default', 'outline', 'ghost'] as const).map(v => (
         <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
           {(['small', 'medium', 'large'] as const).map(s => (
             <Button

package/src/components/interaction/Button/Button.tsx

@@ -4,7 +4,7 @@ import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
-type ButtonVariant = 'default' | 'outline' | 'ghost'; // 'ghost' is deprecated, use 'outline'
+type ButtonVariant = 'default' | 'outline' | 'ghost'; // 'ghost' is 'outline' without the border
 type ButtonSize = 'small' | 'medium' | 'large';
 
 export interface ButtonProps {
@@ -59,13 +59,13 @@ export function Button({
   const { colors, radius } = useTheme();
   const { height, px, fontSize } = sizeTokens[size];
 
-  // Color model: filled = interactive bg, outline = transparent bg + interactive_on-bg border/text
+  // Color model: filled = interactive bg, outline = transparent bg + interactive_on-bg border/text,
+  // ghost = outline without the border, for a quiet button such as one beside a heading
   const primaryColor = colors.colorInteractive;
   const onPrimaryColor = colors.colorOnInteractive;
   // Outline uses colorInteractiveOnBg for text/border — colorInteractive may not meet 3:1 on white
   const outlineTextColor = colors.colorInteractiveOnBg;
 
-  const isOutline = variant === 'outline' || variant === 'ghost';
   const containerStyle: ViewStyle = {
     minHeight: height,
     paddingHorizontal: isIconOnly ? spacing.xs : px,
@@ -78,11 +78,12 @@ export function Button({
     // instead, so a wrapped label grows the button from minHeight rather than clipping.
     ...(isIconOnly ? { height } : { paddingVertical: spacing.xxs }),
     ...(variant === 'default' && { backgroundColor: primaryColor }),
-    ...(isOutline && {
+    ...(variant === 'outline' && {
       backgroundColor: 'transparent',
       borderWidth: 1,
       borderColor: outlineTextColor,
     }),
+    ...(variant === 'ghost' && { backgroundColor: 'transparent' }),
   };
 
   const textColor = variant === 'default' ? onPrimaryColor : outlineTextColor;

package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx

@@ -22,7 +22,7 @@ export const Flow: Story = {
   render: (args) => (
     <ButtonGroup {...args} variant="flow">
       <Button>Primary</Button>
-      <Button variant="ghost">Secondary</Button>
+      <Button variant="outline">Secondary</Button>
     </ButtonGroup>
   ),
 };
@@ -30,7 +30,7 @@ export const Card: Story = {
   render: (args) => (
     <ButtonGroup {...args} variant="card">
       <Button>Confirm</Button>
-      <Button variant="ghost">Cancel</Button>
+      <Button variant="outline">Cancel</Button>
     </ButtonGroup>
   ),
 };
@@ -38,7 +38,7 @@ export const Modal: Story = {
   render: (args) => (
     <ButtonGroup {...args} variant="modal">
       <Button>Save</Button>
-      <Button variant="ghost">Discard</Button>
+      <Button variant="outline">Discard</Button>
     </ButtonGroup>
   ),
 };