@boostdev/design-system-components 1.2.7 → 1.2.8

package/dist/native/index.d.ts

@@ -268,13 +268,21 @@ interface IconWrapperProps {
 }
 declare function IconWrapper({ children, style, accessibilityElementsHidden }: IconWrapperProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonGroupProps {
+interface ButtonContainerProps {
     children: ReactNode;
     variant?: 'flow' | 'card' | 'modal' | 'content';
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
 }
-declare function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ButtonContainer({ children, variant, accessibilityLabel, style }: ButtonContainerProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
+ */
+declare const ButtonGroup: typeof ButtonContainer;
+/**
+ * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
+ */
+type ButtonGroupProps = ButtonContainerProps;
 
 type ButtonVariant = 'default' | 'outline' | 'ghost';
 type ButtonSize = 'small' | 'medium' | 'large';
@@ -561,4 +569,4 @@ interface MessageProps {
 }
 declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ThemeProvider, ToastProvider, Tooltip, Typography, lineHeight, useTheme, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ThemeProvider, ToastProvider, Tooltip, Typography, lineHeight, useTheme, useToast };

package/dist/native/index.js

@@ -2045,7 +2045,7 @@ var styles23 = StyleSheet23.create({
     gap: spacing.xs
   }
 });
-function ButtonGroup({ children, variant, accessibilityLabel, style }) {
+function ButtonContainer({ children, variant, accessibilityLabel, style }) {
   const isColumn = variant === "card" || variant === "modal";
   return /* @__PURE__ */ jsx26(
     View21,
@@ -2056,6 +2056,7 @@ function ButtonGroup({ children, variant, accessibilityLabel, style }) {
     }
   );
 }
+var ButtonGroup = ButtonContainer;
 
 // src/components/interaction/Button/Button.native.tsx
 import { StyleSheet as StyleSheet24, Pressable as Pressable14, Text as Text20, View as View22 } from "react-native";
@@ -4362,6 +4363,7 @@ export {
   Badge,
   Breadcrumb,
   Button,
+  ButtonContainer,
   ButtonGroup,
   Calendar,
   Card,

package/package.json

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

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

@@ -12,7 +12,7 @@ Primary interactive element for triggering actions. Renders as `<button>` or `<a
 - Secondary or ghost actions (`ghost`)
 - Navigation that should look like an action (`href` → renders as `<a>`)
 
-> **Form actions:** When using buttons in a form (submit, reset, cancel), always wrap them in a `ButtonGroup` component. This provides consistent spacing, alignment, and responsive layout for form actions. Use `variant="flow"` for step navigation or `variant="card"` for single-form submissions.
+> **Form actions:** When using buttons in a form (submit, reset, cancel), always wrap them in a `ButtonContainer` component. This provides consistent spacing, alignment, and responsive layout for form actions. Use `variant="flow"` for step navigation or `variant="card"` for single-form submissions.
 
 ## When not to use
 - Navigation to another page when it reads naturally as a link — use `Link` instead

package/src/components/layout/ButtonGroup/ButtonGroup.mdx

@@ -3,11 +3,13 @@ import * as Stories from './ButtonGroup.stories';
 
 <Meta of={Stories} />
 
-# ButtonGroup
+# ButtonContainer
 
-Layout wrapper that arranges `Button` children according to a contextual variant. Handles spacing, alignment, and direction.
+Layout wrapper that arranges `Button` children according to a contextual variant. Handles spacing, alignment, and direction. Takes the full width of its parent container.
 
-> **Recommended:** Always wrap buttons in a `ButtonGroup` when they appear inside a form. This ensures consistent spacing and alignment for form actions like submit, cancel, and navigation.
+> **Recommended:** Always wrap buttons in a `ButtonContainer` when they appear inside a form. This ensures consistent spacing and alignment for form actions like submit, cancel, and navigation.
+
+> **Migration:** `ButtonGroup` is deprecated in favour of `ButtonContainer`. Both names work — `ButtonGroup` is an alias that will be removed in the next major version.
 
 ## Variants
 

package/src/components/layout/ButtonGroup/ButtonGroup.module.css

@@ -3,6 +3,7 @@
     container-type: inline-size;
     container-name: button-group;
     grid-column: var(--bds-grid_span-100);
+    inline-size: 100%;
   }
 
   .buttonGroup .container {

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
 import { spacing } from '../../../native/tokens';
 
-export interface ButtonGroupProps {
+export interface ButtonContainerProps {
   children: ReactNode;
   variant?: 'flow' | 'card' | 'modal' | 'content';
   accessibilityLabel?: string;
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps) {
+export function ButtonContainer({ children, variant, accessibilityLabel, style }: ButtonContainerProps) {
   const isColumn = variant === 'card' || variant === 'modal';
   return (
     <View
@@ -32,3 +32,13 @@ export function ButtonGroup({ children, variant, accessibilityLabel, style }: Bu
     </View>
   );
 }
+
+/**
+ * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
+ */
+export const ButtonGroup = ButtonContainer;
+
+/**
+ * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
+ */
+export type ButtonGroupProps = ButtonContainerProps;

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

@@ -1,20 +1,29 @@
 import { render, screen } from '@testing-library/react';
-import { ButtonGroup } from './ButtonGroup';
+import { ButtonContainer, ButtonGroup } from './ButtonGroup';
 
-describe('ButtonGroup', () => {
+describe('ButtonContainer', () => {
   it('renders children', () => {
     render(
-      <ButtonGroup>
+      <ButtonContainer>
         <button>A</button>
         <button>B</button>
-      </ButtonGroup>,
+      </ButtonContainer>,
     );
     expect(screen.getByText('A')).toBeInTheDocument();
     expect(screen.getByText('B')).toBeInTheDocument();
   });
 
   it('accepts a custom className', () => {
-    const { container } = render(<ButtonGroup className="custom"><button>X</button></ButtonGroup>);
+    const { container } = render(<ButtonContainer className="custom"><button>X</button></ButtonContainer>);
     expect(container.firstChild).toHaveClass('custom');
   });
+
+  it('fills the full width of its parent', () => {
+    const { container } = render(<ButtonContainer><button>X</button></ButtonContainer>);
+    expect(container.firstChild).toHaveClass('buttonGroup');
+  });
+
+  it('exports ButtonGroup as a deprecated alias', () => {
+    expect(ButtonGroup).toBe(ButtonContainer);
+  });
 });

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

@@ -1,27 +1,27 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ButtonGroup } from './ButtonGroup';
+import { ButtonContainer } from './ButtonGroup';
 import { Button } from '../../interaction/Button';
 
 const meta = {
-  title: 'React/Layout/ButtonGroup',
-  component: ButtonGroup,
+  title: 'React/Layout/ButtonContainer',
+  component: ButtonContainer,
   argTypes: {
     variant: { control: 'select', options: ['flow', 'card', 'modal', 'content', undefined] },
   },
-} satisfies Meta<typeof ButtonGroup>;
+} satisfies Meta<typeof ButtonContainer>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 const TwoButtons = () => (
   <>
-    <Button variant="ghost">Cancel</Button>
+    <Button variant="outline">Cancel</Button>
     <Button variant="default">Confirm</Button>
   </>
 );
 
-export const Default: Story = { render: () => <ButtonGroup><TwoButtons /></ButtonGroup> };
-export const Flow: Story = { render: () => <ButtonGroup variant="flow"><TwoButtons /></ButtonGroup> };
-export const Card: Story = { render: () => <ButtonGroup variant="card"><TwoButtons /></ButtonGroup> };
-export const Modal: Story = { render: () => <ButtonGroup variant="modal"><TwoButtons /></ButtonGroup> };
-export const Content: Story = { render: () => <ButtonGroup variant="content"><TwoButtons /></ButtonGroup> };
+export const Default: Story = { render: () => <ButtonContainer><TwoButtons /></ButtonContainer> };
+export const Flow: Story = { render: () => <ButtonContainer variant="flow"><TwoButtons /></ButtonContainer> };
+export const Card: Story = { render: () => <ButtonContainer variant="card"><TwoButtons /></ButtonContainer> };
+export const Modal: Story = { render: () => <ButtonContainer variant="modal"><TwoButtons /></ButtonContainer> };
+export const Content: Story = { render: () => <ButtonContainer variant="content"><TwoButtons /></ButtonContainer> };

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

@@ -3,11 +3,11 @@ import css from './ButtonGroup.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-export interface ButtonGroupProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
+export interface ButtonContainerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   variant?: 'flow' | 'card' | 'modal' | 'content';
 }
 
-export function ButtonGroup({ children, className, variant, ...rest }: ButtonGroupProps) {
+export function ButtonContainer({ children, className, variant, ...rest }: ButtonContainerProps) {
   return (
     <div
       {...rest}
@@ -18,3 +18,13 @@ export function ButtonGroup({ children, className, variant, ...rest }: ButtonGro
     </div>
   );
 }
+
+/**
+ * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
+ */
+export const ButtonGroup = ButtonContainer;
+
+/**
+ * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
+ */
+export type ButtonGroupProps = ButtonContainerProps;

package/src/components/layout/ButtonGroup/index.ts

@@ -1,2 +1,2 @@
-export { ButtonGroup } from './ButtonGroup';
-export type { ButtonGroupProps } from './ButtonGroup';
+export { ButtonContainer, ButtonGroup } from './ButtonGroup';
+export type { ButtonContainerProps, ButtonGroupProps } from './ButtonGroup';

package/src/index.ts

@@ -64,8 +64,8 @@ export { Switch } from './components/interaction/form/Switch';
 export { Textarea } from './components/interaction/form/Textarea';
 
 // Layout
-export { ButtonGroup } from './components/layout/ButtonGroup';
-export type { ButtonGroupProps } from './components/layout/ButtonGroup';
+export { ButtonContainer, ButtonGroup } from './components/layout/ButtonGroup';
+export type { ButtonContainerProps, ButtonGroupProps } from './components/layout/ButtonGroup';
 export { Card } from './components/layout/Card';
 export { SectionHeader } from './components/layout/SectionHeader';
 export { IconWrapper } from './components/layout/IconWrapper';

package/src/native.ts

@@ -39,8 +39,8 @@ export { Card } from './components/layout/Card/Card.native';
 export { SectionHeader } from './components/layout/SectionHeader/SectionHeader.native';
 export { IconWrapper } from './components/layout/IconWrapper/IconWrapper.native';
 export type { IconWrapperProps } from './components/layout/IconWrapper/IconWrapper.native';
-export { ButtonGroup } from './components/layout/ButtonGroup/ButtonGroup.native';
-export type { ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGroup.native';
+export { ButtonContainer, ButtonGroup } from './components/layout/ButtonGroup/ButtonGroup.native';
+export type { ButtonContainerProps, ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGroup.native';
 
 // Interaction
 export { Button } from './components/interaction/Button/Button.native';