PD-341: Button palette update fix

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>
+    );
+  });

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' : undefined}
+      {...(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.values(Variant)),
+  size: PropTypes.oneOf(Object.values(Size)),
   className: PropTypes.string,
   children: PropTypes.node,
   disabled: PropTypes.bool,