From 9659b95f8c060b7546c7b3d387ee6e7bfa0abebd Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Fri, 1 Nov 2024 12:52:02 +0100
Subject: [PATCH 1/8] Always give icon a key

---
 packages/react/src/Button/Button.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index e9f9461062..0113756f35 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -48,7 +48,7 @@ export const Button = forwardRef(
         case !icon:
           return children
         case iconBefore:
-          return [<Icon svg={icon} size="level-5" />, children]
+          return [<Icon key={1} svg={icon} size="level-5" />, children]
         case iconOnly:
           return [
             <Icon key={1} svg={icon} size="level-5" square={true} />,
@@ -57,7 +57,7 @@ export const Button = forwardRef(
             </span>,
           ]
         default:
-          return [children, <Icon svg={icon} size="level-5" />]
+          return [children, <Icon key={2} svg={icon} size="level-5" />]
       }
     }
 

From ae2da8248accf5b36647d61a4508d019f5136b77 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 4 Nov 2024 12:35:23 +0100
Subject: [PATCH 2/8] Update packages/react/src/Button/Button.tsx

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

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 0113756f35..17980780f3 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -57,7 +57,7 @@ export const Button = forwardRef(
             </span>,
           ]
         default:
-          return [children, <Icon key={2} svg={icon} size="level-5" />]
+          return [children, <Icon key={1} svg={icon} size="level-5" />]
       }
     }
 

From 1a0106dec30c75e02ec5db56d9110e728d413364 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 4 Nov 2024 15:03:41 +0100
Subject: [PATCH 3/8] Choose fragments over arrays and keys

---
 packages/react/src/Button/Button.tsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 17980780f3..d9bbc1b497 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -48,16 +48,28 @@ export const Button = forwardRef(
         case !icon:
           return children
         case iconBefore:
-          return [<Icon key={1} svg={icon} size="level-5" />, children]
-        case iconOnly:
-          return [
-            <Icon key={1} svg={icon} size="level-5" square={true} />,
-            <span className="ams-visually-hidden" key={2}>
+          return (
+            <>
+              <Icon svg={icon} size="level-5" />
               {children}
-            </span>,
-          ]
+            </>
+          )
+        case iconOnly:
+          return (
+            <>
+              <Icon svg={icon} size="level-5" square={true} />
+              <span className="ams-visually-hidden" key={2}>
+                {children}
+              </span>
+            </>
+          )
         default:
-          return [children, <Icon key={1} svg={icon} size="level-5" />]
+          return (
+            <>
+              {children}
+              <Icon svg={icon} size="level-5" />
+            </>
+          )
       }
     }
 

From 193b25716e60727075a112f9bee8b670b2622a54 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 4 Nov 2024 15:04:53 +0100
Subject: [PATCH 4/8] Remove another key

---
 packages/react/src/Button/Button.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index d9bbc1b497..1a02bf29ad 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -58,9 +58,7 @@ export const Button = forwardRef(
           return (
             <>
               <Icon svg={icon} size="level-5" square={true} />
-              <span className="ams-visually-hidden" key={2}>
-                {children}
-              </span>
+              <span className="ams-visually-hidden">{children}</span>
             </>
           )
         default:

From bd7fd386731f4ad0ccff2800b50707bbb16a71f1 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 4 Nov 2024 15:06:15 +0100
Subject: [PATCH 5/8] =?UTF-8?q?Remove=20explicit=20=E2=80=98true=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 1a02bf29ad..d2539b149c 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -57,7 +57,7 @@ export const Button = forwardRef(
         case iconOnly:
           return (
             <>
-              <Icon svg={icon} size="level-5" square={true} />
+              <Icon svg={icon} size="level-5" square />
               <span className="ams-visually-hidden">{children}</span>
             </>
           )

From f79b546ff3e4c53ccc383b0a62e7807739a41c6a Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 4 Nov 2024 15:33:34 +0100
Subject: [PATCH 6/8] Conclude that inline conditions are simplest anyway

---
 packages/react/src/Button/Button.tsx | 66 ++++++++--------------------
 1 file changed, 19 insertions(+), 47 deletions(-)

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index d2539b149c..ae835f5dae 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -5,7 +5,7 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren, ReactNode } from 'react'
+import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 import { Icon } from '../Icon'
 import type { IconProps } from '../Icon'
 
@@ -42,52 +42,24 @@ export const Button = forwardRef(
   (
     { children, className, disabled, icon, iconBefore, iconOnly, type, variant = 'primary', ...restProps }: ButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
-  ) => {
-    const content = (): ReactNode => {
-      switch (true) {
-        case !icon:
-          return children
-        case iconBefore:
-          return (
-            <>
-              <Icon svg={icon} size="level-5" />
-              {children}
-            </>
-          )
-        case iconOnly:
-          return (
-            <>
-              <Icon svg={icon} size="level-5" square />
-              <span className="ams-visually-hidden">{children}</span>
-            </>
-          )
-        default:
-          return (
-            <>
-              {children}
-              <Icon svg={icon} size="level-5" />
-            </>
-          )
-      }
-    }
-
-    return (
-      <button
-        {...restProps}
-        className={clsx(
-          'ams-button',
-          `ams-button--${variant}`,
-          icon && iconOnly && !iconBefore && `ams-button--icon-only`,
-          className,
-        )}
-        disabled={disabled}
-        ref={ref}
-        type={type || 'button'}
-      >
-        {content()}
-      </button>
-    )
-  },
+  ) => (
+    <button
+      {...restProps}
+      className={clsx(
+        'ams-button',
+        `ams-button--${variant}`,
+        icon && iconOnly && !iconBefore && `ams-button--icon-only`,
+        className,
+      )}
+      disabled={disabled}
+      ref={ref}
+      type={type || 'button'}
+    >
+      {icon && (iconBefore || iconOnly) && <Icon svg={icon} size="level-5" square={iconOnly} />}
+      {icon && iconOnly ? <span className="ams-visually-hidden">{children}</span> : children}
+      {icon && !iconBefore && <Icon svg={icon} size="level-5" />}
+    </button>
+  ),
 )
 
 Button.displayName = 'Button'

From 711b1be6ecc7951253898160328b25a03a7cfbbf Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 4 Nov 2024 15:50:51 +0100
Subject: [PATCH 7/8] Fix condition

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

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index ae835f5dae..1d3fc1e6c3 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -57,7 +57,7 @@ export const Button = forwardRef(
     >
       {icon && (iconBefore || iconOnly) && <Icon svg={icon} size="level-5" square={iconOnly} />}
       {icon && iconOnly ? <span className="ams-visually-hidden">{children}</span> : children}
-      {icon && !iconBefore && <Icon svg={icon} size="level-5" />}
+      {icon && !iconBefore && !iconOnly && <Icon svg={icon} size="level-5" />}
     </button>
   ),
 )

From 1ffb676d71939bb78ce0821a2ddc04b0e4e782aa Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 4 Nov 2024 15:56:49 +0100
Subject: [PATCH 8/8] Fix another condition

---
 packages/react/src/Button/Button.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 1d3fc1e6c3..cbba51c985 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -45,12 +45,7 @@ export const Button = forwardRef(
   ) => (
     <button
       {...restProps}
-      className={clsx(
-        'ams-button',
-        `ams-button--${variant}`,
-        icon && iconOnly && !iconBefore && `ams-button--icon-only`,
-        className,
-      )}
+      className={clsx('ams-button', `ams-button--${variant}`, icon && iconOnly && `ams-button--icon-only`, className)}
       disabled={disabled}
       ref={ref}
       type={type || 'button'}