From 3054679411dc648386603aa292af3ea81a9c8355 Mon Sep 17 00:00:00 2001
From: williamjusticedavis
 <168731237+williamjusticedavis@users.noreply.github.com>
Date: Fri, 13 Mar 2026 18:19:30 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20add=20missing=20React=20key=20props=20to?=
 =?UTF-8?q?=20ButtonGroup=20and=20FloatingButtonGro=E2=80=A6=20(#18615)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix missing React key props on ButtonGroup and FloatingButtonGroup story
children

JSX element arrays defined in Storybook args require explicit key props,
otherwise React emits a "missing key" warning in development. This adds
keys to the children arrays in ButtonGroup.stories.tsx and
FloatingButtonGroup.stories.tsx.
---
 .../components/__stories__/ButtonGroup.stories.tsx   | 12 ++++++------
 .../__stories__/FloatingButtonGroup.stories.tsx      | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx
index 0c7f1e599a..a54c97bf42 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx
@@ -27,9 +27,9 @@ export const Default: Story = {
     variant: 'primary',
     accent: 'danger',
     children: [
-      <Button Icon={IconNotes} title="Note" />,
-      <Button Icon={IconCheckbox} title="Task" />,
-      <Button Icon={IconTimelineEvent} title="Activity" />,
+      <Button key="note" Icon={IconNotes} title="Note" />,
+      <Button key="task" Icon={IconCheckbox} title="Task" />,
+      <Button key="activity" Icon={IconTimelineEvent} title="Activity" />,
     ],
   },
   argTypes: {
@@ -41,9 +41,9 @@ export const Default: Story = {
 export const Catalog: CatalogStory<Story, typeof ButtonGroup> = {
   args: {
     children: [
-      <Button Icon={IconNotes} title="Note" />,
-      <Button Icon={IconCheckbox} title="Task" />,
-      <Button Icon={IconTimelineEvent} title="Activity" />,
+      <Button key="note" Icon={IconNotes} title="Note" />,
+      <Button key="task" Icon={IconCheckbox} title="Task" />,
+      <Button key="activity" Icon={IconTimelineEvent} title="Activity" />,
     ],
   },
   argTypes: {
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/FloatingButtonGroup.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/FloatingButtonGroup.stories.tsx
index 4fe2b69e89..9e5adb4af0 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/FloatingButtonGroup.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/FloatingButtonGroup.stories.tsx
@@ -20,9 +20,9 @@ export const Default: Story = {
   args: {
     size: 'small',
     children: [
-      <FloatingButton Icon={IconNotes} />,
-      <FloatingButton Icon={IconCheckbox} />,
-      <FloatingButton Icon={IconTimelineEvent} />,
+      <FloatingButton key="notes" Icon={IconNotes} />,
+      <FloatingButton key="checkbox" Icon={IconCheckbox} />,
+      <FloatingButton key="timeline" Icon={IconTimelineEvent} />,
     ],
   },
   argTypes: {
@@ -34,9 +34,9 @@ export const Default: Story = {
 export const Catalog: CatalogStory<Story, typeof FloatingButtonGroup> = {
   args: {
     children: [
-      <FloatingButton Icon={IconNotes} />,
-      <FloatingButton Icon={IconCheckbox} />,
-      <FloatingButton Icon={IconTimelineEvent} />,
+      <FloatingButton key="notes" Icon={IconNotes} />,
+      <FloatingButton key="checkbox" Icon={IconCheckbox} />,
+      <FloatingButton key="timeline" Icon={IconTimelineEvent} />,
     ],
   },
   argTypes: {