fix(button): adding some polish (#67)

* fix: add transitions test

* chore(website): add space between buttons

* fix(button): less transition time on focus

* fix(button): link variant font-size should behave like anchro

* fix(website): pass Box into scope

* fix(button): remove outline transition

* fix(button): many improvements

- fix thrown error message typo
- pick the correct default 'size=icon' prop if there's only 1 icon child
- make size prop optionable
- add a displayName

* feat(icon): add displayName to all icons

* fix(website): button preview spacing

* fix(website): remove extra semicolon on button page

* fix(button): also set size for destructive_link variant

Author: TheSisb

packages/paste-core/components/button/src/index.tsx

@@ -18,7 +18,7 @@ const handlePropValidation = (props: ButtonProps): void => {
     throw new Error(`[Paste: Button] This should be a link. Use the [Paste: Anchor] component.`);
   }
   if (variant === 'reset' && size !== 'reset') {
-    throw new Error('[Paste: Button] The "RESET" variant can only be used with the "NONE" size.');
+    throw new Error('[Paste: Button] The "RESET" variant can only be used with the "RESET" size.');
   }
   if (size === 'icon' && fullWidth) {
     throw new Error('[Paste: Button] Icon buttons should not be fullWidth.');
@@ -46,6 +46,28 @@ const Button: React.FC<ButtonProps> = props => {
   const showLoading = buttonState === 'loading';
   const disabled = buttonState !== 'default';
 
+  // If size isn't passed, come up with a smart default:
+  // - 'reset' for variant 'link'
+  // - 'icon' if there's 1 child that's an icon
+  // - 'default' otherwise
+  let defaultSize = props.size;
+  if (defaultSize == null) {
+    defaultSize = 'default';
+
+    if (props.variant === 'link' || props.variant === 'destructive_link') {
+      defaultSize = 'reset';
+    } else if (React.Children.count(props.children) === 1) {
+      React.Children.forEach(props.children, child => {
+        if (React.isValidElement(child)) {
+          // @ts-ignore
+          if (typeof child.type.displayName === 'string' && child.type.displayName.includes('Icon')) {
+            defaultSize = 'icon';
+          }
+        }
+      });
+    }
+  }
+
   handlePropValidation(props);
 
   return (
@@ -59,10 +81,10 @@ const Button: React.FC<ButtonProps> = props => {
       onBlur={props.onBlur}
       onClick={props.onClick}
       onFocus={props.onFocus}
-      size={props.size}
+      variant={props.variant}
+      size={defaultSize}
       tabIndex={props.tabIndex}
       type={props.type}
-      variant={props.variant}
     >
       <ButtonChildren buttonState={buttonState}>{props.children}</ButtonChildren>
       {showLoading ? (
@@ -78,10 +100,11 @@ Button.defaultProps = {
   as: 'button',
   type: 'button',
   variant: 'primary',
-  size: 'default',
   disabled: false,
   loading: false,
   fullWidth: false,
 };
 
+Button.displayName = 'Button';
+
 export {Button};

packages/paste-core/components/button/src/styles.ts

@@ -41,6 +41,8 @@ const baseButtonWrapper = css`
   display: inline-block;
   outline: none;
   background: none;
+  font-size: 100%;
+  transition: background-color 100ms ease-in;
 
   /* Remove extra black dotted border FF adds */
   &::-moz-focus-inner {

packages/paste-core/components/button/src/types.ts

@@ -14,7 +14,7 @@ export interface ButtonProps {
   tabIndex?: ButtonTabIndexes;
 
   variant: ButtonVariants;
-  size: ButtonSizes;
+  size?: ButtonSizes;
   fullWidth?: boolean;
 
   children: React.ReactNode;

packages/paste-icons/src/react/AccountProfileIcon.tsx

@@ -38,4 +38,6 @@ AccountProfileIcon.defaultProps = {
   decorative: true,
 };
 
+AccountProfileIcon.displayName = 'AccountProfileIcon';
+
 export {AccountProfileIcon};

packages/paste-icons/src/react/AddOnsIcon.tsx

@@ -38,4 +38,6 @@ AddOnsIcon.defaultProps = {
   decorative: true,
 };
 
+AddOnsIcon.displayName = 'AddOnsIcon';
+
 export {AddOnsIcon};

packages/paste-icons/src/react/AlertTriggersIcon.tsx

@@ -38,4 +38,6 @@ AlertTriggersIcon.defaultProps = {
   decorative: true,
 };
 
+AlertTriggersIcon.displayName = 'AlertTriggersIcon';
+
 export {AlertTriggersIcon};

packages/paste-icons/src/react/ApiExplorerIcon.tsx

@@ -38,4 +38,6 @@ ApiExplorerIcon.defaultProps = {
   decorative: true,
 };
 
+ApiExplorerIcon.displayName = 'ApiExplorerIcon';
+
 export {ApiExplorerIcon};

packages/paste-icons/src/react/ApiKeysIcon.tsx

@@ -38,4 +38,6 @@ ApiKeysIcon.defaultProps = {
   decorative: true,
 };
 
+ApiKeysIcon.displayName = 'ApiKeysIcon';
+
 export {ApiKeysIcon};

packages/paste-icons/src/react/ArrowRightIcon.tsx

@@ -38,4 +38,6 @@ ArrowRightIcon.defaultProps = {
   decorative: true,
 };
 
+ArrowRightIcon.displayName = 'ArrowRightIcon';
+
 export {ArrowRightIcon};

packages/paste-icons/src/react/ArrowShaftDownIcon.tsx

@@ -32,4 +32,6 @@ ArrowShaftDownIcon.defaultProps = {
   decorative: true,
 };
 
+ArrowShaftDownIcon.displayName = 'ArrowShaftDownIcon';
+
 export {ArrowShaftDownIcon};