From a2d5ce9cf7275b0bff9cad3e6c165b1262ee547f Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 7 Aug 2023 08:14:24 +0200
Subject: [PATCH 1/4] Update Button.tsx

---
 code/ui/components/src/new/Button/Button.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/code/ui/components/src/new/Button/Button.tsx b/code/ui/components/src/new/Button/Button.tsx
index a769bdf079e2..360068cbb023 100644
--- a/code/ui/components/src/new/Button/Button.tsx
+++ b/code/ui/components/src/new/Button/Button.tsx
@@ -4,18 +4,30 @@ import { styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
 import type { PropsOf } from '../utils/types';
 
-export interface ButtonProps<T extends React.ElementType = React.ElementType> {
+interface CommonProps<T extends React.ElementType = React.ElementType> {
   as?: T;
-  children: string;
   size?: 'small' | 'medium';
   variant?: 'primary' | 'secondary' | 'tertiary';
-  icon?: ReactNode;
-  iconOnly?: boolean;
   onClick?: () => void;
   disabled?: boolean;
   active?: boolean;
 }
 
+type ButtonIconOnlyProps = {
+  iconOnly?: true;
+  icon: ReactNode;
+  children?: never;
+};
+
+type ButtonWithTextProps = {
+  iconOnly?: false;
+  icon?: ReactNode;
+  children: string;
+};
+
+type ButtonProps<T extends React.ElementType = React.ElementType> = CommonProps<T> &
+  (ButtonIconOnlyProps | ButtonWithTextProps);
+
 export const Button: {
   <E extends React.ElementType = 'button'>(
     props: ButtonProps<E> & Omit<PropsOf<E>, keyof ButtonProps>

From 147e87820de7dbaf3e2de9815168358aee71c80d Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 7 Aug 2023 09:08:09 +0200
Subject: [PATCH 2/4] Update Button.tsx

---
 code/ui/components/src/new/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/ui/components/src/new/Button/Button.tsx b/code/ui/components/src/new/Button/Button.tsx
index 360068cbb023..204d99180652 100644
--- a/code/ui/components/src/new/Button/Button.tsx
+++ b/code/ui/components/src/new/Button/Button.tsx
@@ -14,7 +14,7 @@ interface CommonProps<T extends React.ElementType = React.ElementType> {
 }
 
 type ButtonIconOnlyProps = {
-  iconOnly?: true;
+  iconOnly: true;
   icon: ReactNode;
   children?: never;
 };

From 36f7014d81305d0eaf95d1b0fe683e0df4d21d0b Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 7 Aug 2023 09:57:57 +0200
Subject: [PATCH 3/4] Update Button.tsx

---
 code/ui/components/src/new/Button/Button.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/code/ui/components/src/new/Button/Button.tsx b/code/ui/components/src/new/Button/Button.tsx
index 204d99180652..aac6cdd49d82 100644
--- a/code/ui/components/src/new/Button/Button.tsx
+++ b/code/ui/components/src/new/Button/Button.tsx
@@ -14,19 +14,18 @@ interface CommonProps<T extends React.ElementType = React.ElementType> {
 }
 
 type ButtonIconOnlyProps = {
-  iconOnly: true;
   icon: ReactNode;
-  children?: never;
+  children?: string;
 };
 
 type ButtonWithTextProps = {
-  iconOnly?: false;
   icon?: ReactNode;
   children: string;
 };
 
-type ButtonProps<T extends React.ElementType = React.ElementType> = CommonProps<T> &
-  (ButtonIconOnlyProps | ButtonWithTextProps);
+type ButtonProps<T extends React.ElementType = React.ElementType> =
+  | ({ iconOnly: true } & CommonProps<T> & ButtonIconOnlyProps)
+  | ({ iconOnly?: false } & CommonProps<T> & ButtonWithTextProps);
 
 export const Button: {
   <E extends React.ElementType = 'button'>(

From 8fda8689643c1d70f03bb99712844639d92baf38 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 7 Aug 2023 10:10:21 +0200
Subject: [PATCH 4/4] Fix stories

---
 .../src/new/Button/Button.stories.tsx         | 56 +++++--------------
 code/ui/components/src/new/Button/Button.tsx  |  9 +--
 2 files changed, 19 insertions(+), 46 deletions(-)

diff --git a/code/ui/components/src/new/Button/Button.stories.tsx b/code/ui/components/src/new/Button/Button.stories.tsx
index 443d62d53839..e318d2e26bac 100644
--- a/code/ui/components/src/new/Button/Button.stories.tsx
+++ b/code/ui/components/src/new/Button/Button.stories.tsx
@@ -65,15 +65,11 @@ export const Sizes: Story = {
       <Button size="small" icon={<Icon.FaceHappy />}>
         Small Button
       </Button>
-      <Button size="small" icon={<Icon.FaceHappy />} iconOnly>
-        Small Button
-      </Button>
+      <Button size="small" icon={<Icon.FaceHappy />} iconOnly />
       <Button size="medium" icon={<Icon.FaceHappy />}>
         Medium Button
       </Button>
-      <Button size="medium" icon={<Icon.FaceHappy />} iconOnly>
-        Medium Button
-      </Button>
+      <Button size="medium" icon={<Icon.FaceHappy />} iconOnly />
     </div>
   ),
 };
@@ -91,24 +87,12 @@ export const IconOnly: Story = {
   },
   render: () => (
     <>
-      <Button size="small" variant="primary" iconOnly icon={<Icon.FaceHappy />}>
-        Primary
-      </Button>
-      <Button size="small" variant="secondary" iconOnly icon={<Icon.FaceHappy />}>
-        Secondary
-      </Button>
-      <Button size="small" variant="tertiary" iconOnly icon={<Icon.FaceHappy />}>
-        Tertiary
-      </Button>
-      <Button size="medium" variant="primary" iconOnly icon={<Icon.FaceHappy />}>
-        Primary
-      </Button>
-      <Button size="medium" variant="secondary" iconOnly icon={<Icon.FaceHappy />}>
-        Secondary
-      </Button>
-      <Button size="medium" variant="tertiary" iconOnly icon={<Icon.FaceHappy />}>
-        Tertiary
-      </Button>
+      <Button size="small" variant="primary" iconOnly icon={<Icon.FaceHappy />} />
+      <Button size="small" variant="secondary" iconOnly icon={<Icon.FaceHappy />} />
+      <Button size="small" variant="tertiary" iconOnly icon={<Icon.FaceHappy />} />
+      <Button size="medium" variant="primary" iconOnly icon={<Icon.FaceHappy />} />
+      <Button size="medium" variant="secondary" iconOnly icon={<Icon.FaceHappy />} />
+      <Button size="medium" variant="tertiary" iconOnly icon={<Icon.FaceHappy />} />
     </>
   ),
   decorators: [
@@ -119,24 +103,12 @@ export const IconOnly: Story = {
 export const IconOnlyActive: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Button size="small" variant="primary" iconOnly icon={<Icon.FaceHappy />} active>
-        Primary
-      </Button>
-      <Button size="small" variant="secondary" iconOnly icon={<Icon.FaceHappy />} active>
-        Secondary
-      </Button>
-      <Button size="small" variant="tertiary" iconOnly icon={<Icon.FaceHappy />} active>
-        Tertiary
-      </Button>
-      <Button size="medium" variant="primary" iconOnly icon={<Icon.FaceHappy />} active>
-        Primary
-      </Button>
-      <Button size="medium" variant="secondary" iconOnly icon={<Icon.FaceHappy />} active>
-        Secondary
-      </Button>
-      <Button size="medium" variant="tertiary" iconOnly icon={<Icon.FaceHappy />} active>
-        Tertiary
-      </Button>
+      <Button size="small" variant="primary" iconOnly icon={<Icon.FaceHappy />} active />
+      <Button size="small" variant="secondary" iconOnly icon={<Icon.FaceHappy />} active />
+      <Button size="small" variant="tertiary" iconOnly icon={<Icon.FaceHappy />} active />
+      <Button size="medium" variant="primary" iconOnly icon={<Icon.FaceHappy />} active />
+      <Button size="medium" variant="secondary" iconOnly icon={<Icon.FaceHappy />} active />
+      <Button size="medium" variant="tertiary" iconOnly icon={<Icon.FaceHappy />} active />
     </div>
   ),
 };
diff --git a/code/ui/components/src/new/Button/Button.tsx b/code/ui/components/src/new/Button/Button.tsx
index aac6cdd49d82..204d99180652 100644
--- a/code/ui/components/src/new/Button/Button.tsx
+++ b/code/ui/components/src/new/Button/Button.tsx
@@ -14,18 +14,19 @@ interface CommonProps<T extends React.ElementType = React.ElementType> {
 }
 
 type ButtonIconOnlyProps = {
+  iconOnly: true;
   icon: ReactNode;
-  children?: string;
+  children?: never;
 };
 
 type ButtonWithTextProps = {
+  iconOnly?: false;
   icon?: ReactNode;
   children: string;
 };
 
-type ButtonProps<T extends React.ElementType = React.ElementType> =
-  | ({ iconOnly: true } & CommonProps<T> & ButtonIconOnlyProps)
-  | ({ iconOnly?: false } & CommonProps<T> & ButtonWithTextProps);
+type ButtonProps<T extends React.ElementType = React.ElementType> = CommonProps<T> &
+  (ButtonIconOnlyProps | ButtonWithTextProps);
 
 export const Button: {
   <E extends React.ElementType = 'button'>(