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

package/CHANGELOG.md

@@ -1,6 +1,35 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.8.0] - 2026-10-01
+### Added
+- Feat(textarea): height follows numberOfLines
+
+React Native on iOS gives a multiline TextInput no height from
+numberOfLines (Android does), so the field only had the fixed
+minHeight of 100, about 3 lines at body size. The minimum height is now
+numberOfLines * lineHeight.body + 2 * paddingVertical + 2 * border:
+122 points for the default 4 lines, 148 for 5, 226 for 8, the same on
+both platforms. The fixed 100 is gone.
+
+The lines grow with the OS text size up to the ceiling of the input's
+own text (maxFontScaleFor of the body font, 2), so 5 lines stay 5 lines
+at large text. The padding and the border do not scale.
+
+Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> ([`b81043e`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/b81043e3f6eb3c0c5cc7bf4c41934e513a580de5))
+
+## [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)(
@@ -3188,6 +3188,13 @@ function FormInput({
 var import_react13 = require("react");
 var import_react_native41 = require("react-native");
 var import_jsx_runtime42 = require("react/jsx-runtime");
+var PADDING_VERTICAL = import_native.spacing.xs;
+var BORDER_WIDTH = 1;
+var FONT_SCALE_CEILING = maxFontScaleFor(import_native.font.size.body);
+function heightOfLines(numberOfLines, fontScale) {
+  const lineScale = Math.min(fontScale, FONT_SCALE_CEILING);
+  return numberOfLines * lineHeight.body * lineScale + 2 * PADDING_VERTICAL + 2 * BORDER_WIDTH;
+}
 var styles37 = import_react_native41.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
@@ -3197,9 +3204,8 @@ var styles37 = import_react_native41.StyleSheet.create({
     fontSize: import_native.font.size.body,
     lineHeight: lineHeight.body,
     paddingHorizontal: import_native.spacing.s,
-    paddingVertical: import_native.spacing.xs,
-    borderWidth: 1,
-    minHeight: 100,
+    paddingVertical: PADDING_VERTICAL,
+    borderWidth: BORDER_WIDTH,
     textAlignVertical: "top"
   }
 });
@@ -3219,6 +3225,7 @@ function Textarea({
   style
 }) {
   const { colors: colors2, radius } = useTheme();
+  const { fontScale } = (0, import_react_native41.useWindowDimensions)();
   const [focused, setFocused] = (0, import_react13.useState)(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: [styles37.container, style], children: [
@@ -3248,6 +3255,7 @@ function Textarea({
         style: [
           styles37.textarea,
           {
+            minHeight: heightOfLines(numberOfLines, fontScale),
             borderColor,
             borderRadius: radius.field,
             color: colors2.colorOnBg,

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(
@@ -3087,8 +3087,15 @@ function FormInput({
 
 // src/components/interaction/form/Textarea/Textarea.tsx
 import { useState as useState9 } from "react";
-import { StyleSheet as StyleSheet38, View as View33 } from "react-native";
+import { StyleSheet as StyleSheet38, View as View33, useWindowDimensions } from "react-native";
 import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+var PADDING_VERTICAL = spacing.xs;
+var BORDER_WIDTH = 1;
+var FONT_SCALE_CEILING = maxFontScaleFor(font.size.body);
+function heightOfLines(numberOfLines, fontScale) {
+  const lineScale = Math.min(fontScale, FONT_SCALE_CEILING);
+  return numberOfLines * lineHeight.body * lineScale + 2 * PADDING_VERTICAL + 2 * BORDER_WIDTH;
+}
 var styles37 = StyleSheet38.create({
   container: {
     gap: spacing.xxs
@@ -3098,9 +3105,8 @@ var styles37 = StyleSheet38.create({
     fontSize: font.size.body,
     lineHeight: lineHeight.body,
     paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    minHeight: 100,
+    paddingVertical: PADDING_VERTICAL,
+    borderWidth: BORDER_WIDTH,
     textAlignVertical: "top"
   }
 });
@@ -3120,6 +3126,7 @@ function Textarea({
   style
 }) {
   const { colors: colors2, radius } = useTheme();
+  const { fontScale } = useWindowDimensions();
   const [focused, setFocused] = useState9(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ jsxs25(View33, { style: [styles37.container, style], children: [
@@ -3149,6 +3156,7 @@ function Textarea({
         style: [
           styles37.textarea,
           {
+            minHeight: heightOfLines(numberOfLines, fontScale),
             borderColor,
             borderRadius: radius.field,
             color: colors2.colorOnBg,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.6.0",
+  "version": "0.8.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/interaction/form/Textarea/Textarea.mdx

@@ -37,6 +37,12 @@ function Example() {
 ### With placeholder
 <Canvas of={Stories.WithPlaceholder} />
 
+### Five lines
+<Canvas of={Stories.FiveLines} />
+
+### Eight lines
+<Canvas of={Stories.EightLines} />
+
 ### With error
 <Canvas of={Stories.WithError} />
 
@@ -62,13 +68,17 @@ function Example() {
 | `value` | string | — | Controlled value |
 | `defaultValue` | string | — | Uncontrolled default value |
 | `placeholder` | string | — | Placeholder text |
-| `numberOfLines` | number | `4` | Number of visible lines |
+| `numberOfLines` | number | `4` | Height of the field in lines of text, the same on iOS and Android. It is the minimum height: the field still grows with longer text |
 | `error` | string | — | Error message displayed below the input |
 | `hint` | string | — | Hint text displayed below the input |
 | `required` | boolean | `false` | Marks the field as required |
 | `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
 | `onChange` | `(value: string) => void` | — | Called with the new text value |
 
+## Height
+
+The field is `numberOfLines` body lines tall, plus its vertical padding and border (at body size 4 lines are 122 points, 5 lines 148, 8 lines 226). The lines follow the OS text size up to the same ceiling as the text itself (`maxFontScaleFor`, 2 for body text), so 5 lines stay 5 lines at large text. The padding and the border do not scale.
+
 ## Accessibility
 
 - The label is announced by screen readers via `accessibilityLabel`

package/src/components/interaction/form/Textarea/Textarea.spec.tsx

@@ -3,6 +3,19 @@ import { ThemeProvider } from '../../../../native/ThemeContext';
 import type { ThemeRadius } from '../../../../native/ThemeContext';
 import { Textarea } from './Textarea';
 import { cornerRadii } from '../../../../test/cornerRadii';
+import { font, lineHeight, spacing } from '../../../../native/tokens';
+import { maxFontScaleFor } from '../../../../native/fontScale';
+
+// The OS text size, as `useWindowDimensions().fontScale` reports it; react-native-web always says 1.
+const osText = vi.hoisted(() => ({ fontScale: 1 }));
+
+vi.mock('react-native', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-native')>();
+  return {
+    ...actual,
+    useWindowDimensions: () => ({ ...actual.useWindowDimensions(), fontScale: osText.fontScale }),
+  };
+});
 
 const radius12: ThemeRadius = { button: 12, iconButton: 12, field: 12 };
 
@@ -10,7 +23,23 @@ function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
 
+const BORDER = 1;
+
+/** `lines` body lines at the OS text size (capped like the input's own text), plus padding and border. */
+function heightOfLines(lines: number, fontScale = 1): number {
+  const scale = Math.min(fontScale, maxFontScaleFor(font.size.body));
+  return lines * lineHeight.body * scale + 2 * spacing.xs + 2 * BORDER;
+}
+
+function minHeightOfInput(): number {
+  return Number.parseFloat(getComputedStyle(screen.getByRole('textbox')).minHeight);
+}
+
 describe('Textarea (native)', () => {
+  beforeEach(() => {
+    osText.fontScale = 1;
+  });
+
   it('renders the label', () => {
     renderWithTheme(<Textarea label="Message" name="message" />);
     expect(screen.getByText('Message')).toBeInTheDocument();
@@ -65,4 +94,56 @@ describe('Textarea (native)', () => {
     );
     expect(cornerRadii(screen.getByRole('textbox'))).toEqual(['12px', '12px', '12px', '12px']);
   });
+
+  describe('height', () => {
+    it('is 4 lines tall by default', () => {
+      renderWithTheme(<Textarea label="Message" name="message" />);
+      expect(minHeightOfInput()).toBe(heightOfLines(4));
+    });
+
+    it('is 148 points tall for 5 lines at body size', () => {
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBe(148);
+    });
+
+    it('is as tall as the lines it shows, for 5 lines', () => {
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBe(heightOfLines(5));
+    });
+
+    it('is as tall as the lines it shows, for 8 lines', () => {
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={8} />);
+      expect(minHeightOfInput()).toBe(heightOfLines(8));
+    });
+
+    it('has no fixed floor, so a single line is one line tall', () => {
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={1} />);
+      expect(minHeightOfInput()).toBe(heightOfLines(1));
+    });
+
+    it('grows with the OS text size, so 5 lines stay 5 lines', () => {
+      osText.fontScale = 1.5;
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBe(213);
+    });
+
+    it('stops growing where the text stops, at the ceiling of the body font', () => {
+      osText.fontScale = 3;
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBe(278);
+      expect(minHeightOfInput()).toBe(heightOfLines(5, maxFontScaleFor(font.size.body)));
+    });
+
+    it('shrinks with a reduced OS text size', () => {
+      osText.fontScale = 0.8;
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBeCloseTo(heightOfLines(5, 0.8), 5);
+    });
+
+    it('does not scale the padding and the border', () => {
+      osText.fontScale = 2;
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={1} />);
+      expect(minHeightOfInput()).toBe(lineHeight.body * 2 + 2 * spacing.xs + 2 * BORDER);
+    });
+  });
 });

package/src/components/interaction/form/Textarea/Textarea.stories.tsx

@@ -22,6 +22,14 @@ export const WithPlaceholder: Story = {
   args: { label: 'Bio', name: 'bio', placeholder: 'Tell us about yourself...' },
 };
 
+export const FiveLines: Story = {
+  args: { label: 'Reason', name: 'reason', numberOfLines: 5 },
+};
+
+export const EightLines: Story = {
+  args: { label: 'Notes', name: 'notes', numberOfLines: 8 },
+};
+
 export const WithError: Story = {
   args: { label: 'Message', name: 'message', error: 'Message is required.' },
 };

package/src/components/interaction/form/Textarea/Textarea.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useState } from 'react';
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle, useWindowDimensions } from 'react-native';
 import { ScaledTextInput as TextInput } from '../../../../native/ScaledText';
+import { maxFontScaleFor } from '../../../../native/fontScale';
 import { spacing, font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
@@ -22,6 +23,22 @@ interface TextareaProps {
   style?: StyleProp<ViewStyle>;
 }
 
+const PADDING_VERTICAL = spacing.xs;
+const BORDER_WIDTH = 1;
+/** The ceiling the input's own text gets (`ScaledTextInput`), from its font size. */
+const FONT_SCALE_CEILING = maxFontScaleFor(font.size.body);
+
+/**
+ * The height of `numberOfLines` lines in the field. React Native on iOS gives a multiline
+ * `TextInput` no height from `numberOfLines` (Android does), so the field sets it itself. The
+ * lines grow with the OS text size up to the same ceiling as the text, so they stay that many
+ * lines at large text; the padding and the border do not scale.
+ */
+function heightOfLines(numberOfLines: number, fontScale: number): number {
+  const lineScale = Math.min(fontScale, FONT_SCALE_CEILING);
+  return numberOfLines * lineHeight.body * lineScale + 2 * PADDING_VERTICAL + 2 * BORDER_WIDTH;
+}
+
 const styles = StyleSheet.create({
   container: {
     gap: spacing.xxs,
@@ -31,9 +48,8 @@ const styles = StyleSheet.create({
     fontSize: font.size.body,
     lineHeight: lineHeight.body,
     paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    minHeight: 100,
+    paddingVertical: PADDING_VERTICAL,
+    borderWidth: BORDER_WIDTH,
     textAlignVertical: 'top',
   },
 });
@@ -54,6 +70,7 @@ export function Textarea({
   style,
 }: Readonly<TextareaProps>) {
   const { colors, radius } = useTheme();
+  const { fontScale } = useWindowDimensions();
   const [focused, setFocused] = useState(false);
 
   const borderColor = error
@@ -88,6 +105,7 @@ export function Textarea({
         style={[
           styles.textarea,
           {
+            minHeight: heightOfLines(numberOfLines, fontScale),
             borderColor,
             borderRadius: radius.field,
             color: colors.colorOnBg,

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>
   ),
 };