From 5c0846a42fa0913a0eb8707fc27b29dbc1349751 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Thu, 16 Oct 2025 14:41:36 -0700
Subject: [PATCH 1/2] button number control

---
 .../src/ButtonGroup/ButtonGroup.stories.tsx   | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
index 27f02ba510e..5d35cbfd78a 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -23,16 +23,20 @@ export const Default = () => (
   </ButtonGroup>
 )
 
-export const Playground: StoryFn<ButtonProps> = args => (
-  <ButtonGroup>
-    <Button {...args}>Button 1</Button>
-    <Button {...args}>Button 2</Button>
-    <Button {...args}>Button 3</Button>
-  </ButtonGroup>
-)
+export const Playground: StoryFn<ButtonProps & {buttonCount: number}> = args => {
+  const {buttonCount = 3, ...buttonProps} = args
+  const buttons = Array.from({length: buttonCount}, (_, i) => (
+    <Button key={i} {...buttonProps}>
+      Button {i + 1}
+    </Button>
+  ))
+
+  return <ButtonGroup>{buttons}</ButtonGroup>
+}
 Playground.args = {
   size: 'medium',
   disabled: false,
+  buttonCount: 3,
 }
 Playground.argTypes = {
   size: {
@@ -46,4 +50,13 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
+  buttonCount: {
+    control: {
+      type: 'number',
+      min: 2,
+      max: 6,
+      step: 1,
+    },
+    description: 'Number of buttons in the group (2-6)',
+  },
 }

From 1e1491366a301bd90b928d2cbd4abecdd16a7ada Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Thu, 16 Oct 2025 15:25:07 -0700
Subject: [PATCH 2/2] button text

---
 packages/react/src/ButtonGroup/ButtonGroup.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
index 5d35cbfd78a..095ac33d9cc 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -27,7 +27,7 @@ export const Playground: StoryFn<ButtonProps & {buttonCount: number}> = args =>
   const {buttonCount = 3, ...buttonProps} = args
   const buttons = Array.from({length: buttonCount}, (_, i) => (
     <Button key={i} {...buttonProps}>
-      Button {i + 1}
+      {`Button ${i + 1}`}
     </Button>
   ))