From 22626b02a5d5f52210a989a9279481fb6c1c24b8 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 4 May 2026 10:22:23 -0300
Subject: [PATCH 1/3] fix(button): centre icons via flex gap instead of margin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `<button>` path applied `mr-2` to iconLeft and `ml-2` to iconRight
directly on the icon element. For icon-only buttons (`theme='icon'`)
this margin pushed the icon off-centre against the 32×32 button
container — the icon sat ~4px to the left of true centre because
margin-right shifts the flex item before `justify-content: center`
re-centres it.

Wraps the button content in a flex span with `gap-2`, matching the
existing `<a>` path. Gap only inserts space between siblings (not
leading/trailing), so icon-only buttons now centre cleanly while
icon+label combinations keep the same visual spacing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/web/components/base/forms/Button.tsx | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/web/components/base/forms/Button.tsx b/frontend/web/components/base/forms/Button.tsx
index 18f941483b4b..4d5d9f013260 100644
--- a/frontend/web/components/base/forms/Button.tsx
+++ b/frontend/web/components/base/forms/Button.tsx
@@ -106,23 +106,23 @@ export const Button = React.forwardRef<
         )}
         ref={ref as React.RefObject<HTMLButtonElement>}
       >
-        {!!iconLeft && (
-          <Icon
-            fill={iconLeftColour ? iconColours[iconLeftColour] : undefined}
-            className='mr-2'
-            name={iconLeft}
-            width={iconSize}
-          />
-        )}
-        {children}
-        {!!iconRight && (
-          <Icon
-            fill={iconRightColour ? iconColours[iconRightColour] : undefined}
-            className='ml-2'
-            name={iconRight}
-            width={iconSize}
-          />
-        )}
+        <span className='d-flex align-items-center justify-content-center gap-2'>
+          {!!iconLeft && (
+            <Icon
+              fill={iconLeftColour ? iconColours[iconLeftColour] : undefined}
+              name={iconLeft}
+              width={iconSize}
+            />
+          )}
+          {children}
+          {!!iconRight && (
+            <Icon
+              fill={iconRightColour ? iconColours[iconRightColour] : undefined}
+              name={iconRight}
+              width={iconSize}
+            />
+          )}
+        </span>
       </button>
     )
   },

From 7784a90be75244c48e520d9fa17c5114ade47e65 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 6 May 2026 09:02:18 -0300
Subject: [PATCH 2/3] fix(button): only wrap content in flex span when
 iconLeft/iconRight is used
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous fix wrapped the button content in a flex span unconditionally
to centre icon-only buttons (theme='icon' iconLeft='copy'). That changed
inner layout from inline (driven by line-height) to flex (driven by child
dimensions), shrinking buttons that pass the icon as children directly —
the .btn-with-icon trash/edit affordances used in table rows came out a
few pixels shorter than on main.

Make the wrapper conditional: only kicks in when the iconLeft or iconRight
props are present (the case the original fix targeted). Children-only
consumers render as before.

Adds an IconAsChildren story covering the .btn-with-icon pattern so this
class of regression is snapshotted next time.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/Button.stories.tsx             | 25 ++++++++++++
 frontend/web/components/base/forms/Button.tsx | 40 +++++++++++--------
 2 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/frontend/documentation/components/Button.stories.tsx b/frontend/documentation/components/Button.stories.tsx
index d7be200780d3..4b4423209b82 100644
--- a/frontend/documentation/components/Button.stories.tsx
+++ b/frontend/documentation/components/Button.stories.tsx
@@ -7,6 +7,7 @@ import {
   sizeClassNames,
 } from 'components/base/forms/Button'
 import type { ButtonType } from 'components/base/forms/Button'
+import Icon from 'components/icons/Icon'
 
 const themeOptions = Object.keys(themeClassNames) as Array<
   keyof typeof themeClassNames
@@ -81,6 +82,30 @@ export const Variants: Story = {
   ),
 }
 
+export const IconAsChildren: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Pattern used by `btn-with-icon` consumers (e.g. table-row delete affordances): the icon is passed as `children`, not via the `iconLeft`/`iconRight` props. Layout must match the iconLeft/iconRight rendering for visual consistency. Snapshotted to catch wrapper-introduced height/width drift.',
+      },
+    },
+  },
+  render: () => (
+    <div className='d-flex align-items-center flex-wrap gap-2'>
+      <Button className='btn btn-with-icon' type='button'>
+        <Icon name='trash-2' width={20} fill='#656D7B' />
+      </Button>
+      <Button className='btn btn-with-icon' type='button'>
+        <Icon name='edit' width={20} fill='#656D7B' />
+      </Button>
+      <Button className='btn btn-with-icon' type='button'>
+        <Icon name='copy' width={20} fill='#656D7B' />
+      </Button>
+    </div>
+  ),
+}
+
 export const Sizes: Story = {
   parameters: {
     docs: {
diff --git a/frontend/web/components/base/forms/Button.tsx b/frontend/web/components/base/forms/Button.tsx
index 4d5d9f013260..8170218d01b9 100644
--- a/frontend/web/components/base/forms/Button.tsx
+++ b/frontend/web/components/base/forms/Button.tsx
@@ -106,23 +106,29 @@ export const Button = React.forwardRef<
         )}
         ref={ref as React.RefObject<HTMLButtonElement>}
       >
-        <span className='d-flex align-items-center justify-content-center gap-2'>
-          {!!iconLeft && (
-            <Icon
-              fill={iconLeftColour ? iconColours[iconLeftColour] : undefined}
-              name={iconLeft}
-              width={iconSize}
-            />
-          )}
-          {children}
-          {!!iconRight && (
-            <Icon
-              fill={iconRightColour ? iconColours[iconRightColour] : undefined}
-              name={iconRight}
-              width={iconSize}
-            />
-          )}
-        </span>
+        {iconLeft || iconRight ? (
+          <span className='d-flex align-items-center justify-content-center gap-2'>
+            {!!iconLeft && (
+              <Icon
+                fill={iconLeftColour ? iconColours[iconLeftColour] : undefined}
+                name={iconLeft}
+                width={iconSize}
+              />
+            )}
+            {children}
+            {!!iconRight && (
+              <Icon
+                fill={
+                  iconRightColour ? iconColours[iconRightColour] : undefined
+                }
+                name={iconRight}
+                width={iconSize}
+              />
+            )}
+          </span>
+        ) : (
+          children
+        )}
       </button>
     )
   },

From e4b242d6331e338be3844ba17aa7ed2e99711867 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 6 May 2026 09:10:52 -0300
Subject: [PATCH 3/3] docs(button): add IconAndLabel and AsAnchor stories
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes the two coverage gaps that let #7402's children-rendering regression
slip through Chromatic:

- **IconAndLabel** — dedicated snapshot for `iconLeft`/`iconRight` paired
  with a text label. The most common real-world icon-button shape, but
  previously only visible inside the Themes story where spacing
  regressions on the icon-label gap would drown in the wider diff.

- **AsAnchor** — covers the `<a>` rendering branch (`href` prop).
  Button has two render paths; before this story, every snapshot
  exercised only the `<button>` branch. Three real callers use `href`,
  so divergence in the anchor branch could regress silently.

The wider lesson: snapshot coverage should track real-world usage
patterns, not just prop API shape. Adding these two plus IconAsChildren
brings the stories in line with how Button is actually called across
the codebase.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/Button.stories.tsx             | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/frontend/documentation/components/Button.stories.tsx b/frontend/documentation/components/Button.stories.tsx
index 4b4423209b82..d4c6bda043a0 100644
--- a/frontend/documentation/components/Button.stories.tsx
+++ b/frontend/documentation/components/Button.stories.tsx
@@ -106,6 +106,48 @@ export const IconAsChildren: Story = {
   ),
 }
 
+export const IconAndLabel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The most common icon usage in real code: `iconLeft` or `iconRight` paired with a text label. Dedicated snapshot so spacing regressions between the icon and the label are caught independently of the Themes story.',
+      },
+    },
+  },
+  render: () => (
+    <div className='d-flex align-items-center flex-wrap gap-2'>
+      <Button iconLeft='plus'>Add new</Button>
+      <Button iconRight='chevron-down'>Options</Button>
+      <Button iconLeft='copy' iconRight='chevron-down'>
+        Both icons
+      </Button>
+    </div>
+  ),
+}
+
+export const AsAnchor: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Button renders as an `<a>` element when `href` is set — a separate code path from the `<button>` branch with its own content wrapper. Snapshotted so changes to the anchor branch can't regress without showing up.",
+      },
+    },
+  },
+  render: () => (
+    <div className='d-flex align-items-center flex-wrap gap-2'>
+      <Button href='https://docs.flagsmith.com'>Docs</Button>
+      <Button href='https://docs.flagsmith.com' iconLeft='plus'>
+        Add new
+      </Button>
+      <Button href='https://docs.flagsmith.com' theme='secondary'>
+        Cancel
+      </Button>
+    </div>
+  ),
+}
+
 export const Sizes: Story = {
   parameters: {
     docs: {