Merge pull request #23735 from storybookjs/charles-update-button-types

UI: Update Button types to allow for no children on iconOnly buttons
storybookjs · Aug 7, 2023 · f21fde3 · f21fde3
2 parents 3627472 + 8fda868
commit f21fde3
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 46 deletions.
diff --git 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
@@ -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>