From a735f09a19320c2ce3dfb91d370154e646b0443b Mon Sep 17 00:00:00 2001
From: Dave McCarthy <dave.mccarthy@mongodb.com>
Date: Thu, 25 Jul 2019 14:27:41 -0700
Subject: [PATCH 1/3] fix(button): fix text of buttons not rendered as buttons

---
 packages/button/src/Button.story.tsx | 62 ++++++++++++----------------
 packages/button/src/Button.tsx       | 43 ++++++++-----------
 2 files changed, 44 insertions(+), 61 deletions(-)

diff --git a/packages/button/src/Button.story.tsx b/packages/button/src/Button.story.tsx
index 7a2aa28795..7e21446f9a 100644
--- a/packages/button/src/Button.story.tsx
+++ b/packages/button/src/Button.story.tsx
@@ -10,20 +10,6 @@ const buttonClass = css`
   }
 `;
 
-function CustomElement({
-  customProp,
-  ...rest
-}: {
-  customProp: string;
-}): React.ReactElement {
-  return (
-    <div>
-      Lookit, {customProp}!<br />
-      <button {...rest} />
-    </div>
-  );
-}
-
 storiesOf('Buttons', module)
   .add('Default', () => (
     <Button
@@ -121,24 +107,30 @@ storiesOf('Buttons', module)
       {text('Children', 'Button')}
     </Button>
   ))
-  .add('as custom component', () => (
-    <Button
-      as={CustomElement}
-      size={select('Size', Object.values(Size) as Array<Size>, Size.Normal)}
-      variant={select(
-        'Variant',
-        Object.values(Variant) as Array<Variant>,
-        Variant.Default,
-      )}
-      title={text('Title', 'The button title')}
-      disabled={boolean('Disabled', false)}
-      href={select(
-        'Href',
-        { 'mongodb.design': 'http://mongodb.design', none: null },
-        null,
-      )}
-      className={buttonClass}
-    >
-      {text('Children', 'Button')}
-    </Button>
-  ));
+  .add('as custom component', () => {
+    const CustomRoot = select(
+      'div',
+      { div: 'div', span: 'span', button: 'button' },
+      'div',
+    );
+
+    function CustomElement(props: object): React.ReactElement {
+      return <CustomRoot {...props} />;
+    }
+
+    return (
+      <Button
+        as={CustomElement}
+        size={select('Size', Object.values(Size) as Array<Size>, Size.Normal)}
+        variant={select(
+          'Variant',
+          Object.values(Variant) as Array<Variant>,
+          Variant.Default,
+        )}
+        disabled={boolean('Disabled', false)}
+        className={buttonClass}
+      >
+        {text('Children', 'Button')}
+      </Button>
+    );
+  });
diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx
index 386ab09fb2..185fd3952c 100644
--- a/packages/button/src/Button.tsx
+++ b/packages/button/src/Button.tsx
@@ -308,29 +308,10 @@ export default function Button(props: ButtonProps) {
     'children',
   ]);
 
-  if (usesCustomElement(props)) {
-    const Root = props.as;
-
-    return (
-      <Root {...rest} {...commonProps}>
-        {children}
-      </Root>
-    );
-  }
-
-  if (usesLinkElement(props)) {
-    return (
-      <a {...(rest as HTMLElementProps<'a'>)} {...commonProps}>
-        {children}
-      </a>
-    );
-  }
-
-  // NOTE(JeT): The button's `type` will be overridden if it is in the passed-in props
-  return (
-    <button
-      type="button"
-      {...(rest as HTMLElementProps<'button'>)}
+  const renderButton = (Root: React.ElementType<any> = 'button') => (
+    <Root
+      type={Root === 'button' ? 'button' : null}
+      {...(rest as HTMLElementProps<any>)}
       {...commonProps}
     >
       <span
@@ -341,13 +322,23 @@ export default function Button(props: ButtonProps) {
       >
         {children}
       </span>
-    </button>
+    </Root>
   );
+
+  if (usesCustomElement(props)) {
+    return renderButton(props.as);
+  }
+
+  if (usesLinkElement(props)) {
+    return renderButton('a');
+  }
+
+  return renderButton();
 }
 
 Button.propTypes = {
-  variant: PropTypes.oneOf(['default', 'primary', 'info', 'danger', 'dark']),
-  size: PropTypes.oneOf(['xsmall', 'small', 'normal', 'large']),
+  variant: PropTypes.oneOf(Object.keys(Variant)),
+  size: PropTypes.oneOf(Object.keys(Size)),
   className: PropTypes.string,
   children: PropTypes.node,
   disabled: PropTypes.bool,

From 4bc48d35f875ee1084f948a822c5d3d25d78548b Mon Sep 17 00:00:00 2001
From: Dave McCarthy <dave.mccarthy@mongodb.com>
Date: Thu, 25 Jul 2019 14:43:34 -0700
Subject: [PATCH 2/3] fix(button): object.values, not keys

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

diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx
index 185fd3952c..66c2aba851 100644
--- a/packages/button/src/Button.tsx
+++ b/packages/button/src/Button.tsx
@@ -337,8 +337,8 @@ export default function Button(props: ButtonProps) {
 }
 
 Button.propTypes = {
-  variant: PropTypes.oneOf(Object.keys(Variant)),
-  size: PropTypes.oneOf(Object.keys(Size)),
+  variant: PropTypes.oneOf(Object.values(Variant)),
+  size: PropTypes.oneOf(Object.values(Size)),
   className: PropTypes.string,
   children: PropTypes.node,
   disabled: PropTypes.bool,

From 2143ef417e6a95c517fd1352712c7041458c2f53 Mon Sep 17 00:00:00 2001
From: Dave McCarthy <dave.mccarthy@mongodb.com>
Date: Thu, 25 Jul 2019 18:33:11 -0700
Subject: [PATCH 3/3] fix(button): use undefined instead of null as type
 default

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

diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx
index 66c2aba851..418d9eddc9 100644
--- a/packages/button/src/Button.tsx
+++ b/packages/button/src/Button.tsx
@@ -310,7 +310,7 @@ export default function Button(props: ButtonProps) {
 
   const renderButton = (Root: React.ElementType<any> = 'button') => (
     <Root
-      type={Root === 'button' ? 'button' : null}
+      type={Root === 'button' ? 'button' : undefined}
       {...(rest as HTMLElementProps<any>)}
       {...commonProps}
     >