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
twilio-labs · Aug 26, 2019 · 2644657 · 2644657 · vercel · Aug 26, 2019
1 parent 05f38ae
commit 2644657
Show file tree

Hide file tree

Showing 118 changed files with 358 additions and 114 deletions.
diff --git a/packages/paste-core/components/button/src/index.tsx b/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};
diff --git a/packages/paste-core/components/button/src/styles.ts b/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 {

diff --git a/packages/paste-core/components/button/src/types.ts b/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;

diff --git a/packages/paste-icons/src/react/AccountProfileIcon.tsx b/packages/paste-icons/src/react/AccountProfileIcon.tsx
@@ -38,4 +38,6 @@ AccountProfileIcon.defaultProps = {
   decorative: true,
 };
 
+AccountProfileIcon.displayName = 'AccountProfileIcon';
+
 export {AccountProfileIcon};
diff --git a/packages/paste-icons/src/react/AddOnsIcon.tsx b/packages/paste-icons/src/react/AddOnsIcon.tsx
@@ -38,4 +38,6 @@ AddOnsIcon.defaultProps = {
   decorative: true,
 };
 
+AddOnsIcon.displayName = 'AddOnsIcon';
+
 export {AddOnsIcon};
diff --git a/packages/paste-icons/src/react/AlertTriggersIcon.tsx b/packages/paste-icons/src/react/AlertTriggersIcon.tsx
@@ -38,4 +38,6 @@ AlertTriggersIcon.defaultProps = {
   decorative: true,
 };
 
+AlertTriggersIcon.displayName = 'AlertTriggersIcon';
+
 export {AlertTriggersIcon};
diff --git a/packages/paste-icons/src/react/ApiExplorerIcon.tsx b/packages/paste-icons/src/react/ApiExplorerIcon.tsx
@@ -38,4 +38,6 @@ ApiExplorerIcon.defaultProps = {
   decorative: true,
 };
 
+ApiExplorerIcon.displayName = 'ApiExplorerIcon';
+
 export {ApiExplorerIcon};
diff --git a/packages/paste-icons/src/react/ApiKeysIcon.tsx b/packages/paste-icons/src/react/ApiKeysIcon.tsx
@@ -38,4 +38,6 @@ ApiKeysIcon.defaultProps = {
   decorative: true,
 };
 
+ApiKeysIcon.displayName = 'ApiKeysIcon';
+
 export {ApiKeysIcon};
diff --git a/packages/paste-icons/src/react/ArrowRightIcon.tsx b/packages/paste-icons/src/react/ArrowRightIcon.tsx
@@ -38,4 +38,6 @@ ArrowRightIcon.defaultProps = {
   decorative: true,
 };
 
+ArrowRightIcon.displayName = 'ArrowRightIcon';
+
 export {ArrowRightIcon};
diff --git a/packages/paste-icons/src/react/ArrowShaftDownIcon.tsx b/packages/paste-icons/src/react/ArrowShaftDownIcon.tsx
@@ -32,4 +32,6 @@ ArrowShaftDownIcon.defaultProps = {
   decorative: true,
 };
 
+ArrowShaftDownIcon.displayName = 'ArrowShaftDownIcon';
+
 export {ArrowShaftDownIcon};
diff --git a/packages/paste-icons/src/react/ArrowShaftLeftIcon.tsx b/packages/paste-icons/src/react/ArrowShaftLeftIcon.tsx
@@ -32,4 +32,6 @@ ArrowShaftLeftIcon.defaultProps = {
   decorative: true,
 };
 
+ArrowShaftLeftIcon.displayName = 'ArrowShaftLeftIcon';
+
 export {ArrowShaftLeftIcon};
diff --git a/packages/paste-icons/src/react/ArrowShaftRightIcon.tsx b/packages/paste-icons/src/react/ArrowShaftRightIcon.tsx
@@ -32,4 +32,6 @@ ArrowShaftRightIcon.defaultProps = {
   decorative: true,
 };
 
+ArrowShaftRightIcon.displayName = 'ArrowShaftRightIcon';
+
 export {ArrowShaftRightIcon};
diff --git a/packages/paste-icons/src/react/ArrowShaftUpIcon.tsx b/packages/paste-icons/src/react/ArrowShaftUpIcon.tsx
@@ -32,4 +32,6 @@ ArrowShaftUpIcon.defaultProps = {
   decorative: true,
 };
 
+ArrowShaftUpIcon.displayName = 'ArrowShaftUpIcon';
+
 export {ArrowShaftUpIcon};
diff --git a/packages/paste-icons/src/react/AssetsIcon.tsx b/packages/paste-icons/src/react/AssetsIcon.tsx
@@ -35,4 +35,6 @@ AssetsIcon.defaultProps = {
   decorative: true,
 };
 
+AssetsIcon.displayName = 'AssetsIcon';
+
 export {AssetsIcon};
diff --git a/packages/paste-icons/src/react/AuditEventsIcon.tsx b/packages/paste-icons/src/react/AuditEventsIcon.tsx
@@ -38,4 +38,6 @@ AuditEventsIcon.defaultProps = {
   decorative: true,
 };
 
+AuditEventsIcon.displayName = 'AuditEventsIcon';
+
 export {AuditEventsIcon};
diff --git a/packages/paste-icons/src/react/AuthyIcon.tsx b/packages/paste-icons/src/react/AuthyIcon.tsx
@@ -38,4 +38,6 @@ AuthyIcon.defaultProps = {
   decorative: true,
 };
 
+AuthyIcon.displayName = 'AuthyIcon';
+
 export {AuthyIcon};
diff --git a/packages/paste-icons/src/react/AutopilotIcon.tsx b/packages/paste-icons/src/react/AutopilotIcon.tsx
@@ -38,4 +38,6 @@ AutopilotIcon.defaultProps = {
   decorative: true,
 };
 
+AutopilotIcon.displayName = 'AutopilotIcon';
+
 export {AutopilotIcon};
diff --git a/packages/paste-icons/src/react/BackIcon.tsx b/packages/paste-icons/src/react/BackIcon.tsx
@@ -38,4 +38,6 @@ BackIcon.defaultProps = {
   decorative: true,
 };
 
+BackIcon.displayName = 'BackIcon';
+
 export {BackIcon};
diff --git a/packages/paste-icons/src/react/BarChartIcon.tsx b/packages/paste-icons/src/react/BarChartIcon.tsx
@@ -32,4 +32,6 @@ BarChartIcon.defaultProps = {
   decorative: true,
 };
 
+BarChartIcon.displayName = 'BarChartIcon';
+
 export {BarChartIcon};
diff --git a/packages/paste-icons/src/react/BillingIcon.tsx b/packages/paste-icons/src/react/BillingIcon.tsx
@@ -38,4 +38,6 @@ BillingIcon.defaultProps = {
   decorative: true,
 };
 
+BillingIcon.displayName = 'BillingIcon';
+
 export {BillingIcon};
diff --git a/packages/paste-icons/src/react/BuildIcon.tsx b/packages/paste-icons/src/react/BuildIcon.tsx
@@ -32,4 +32,6 @@ BuildIcon.defaultProps = {
   decorative: true,
 };
 
+BuildIcon.displayName = 'BuildIcon';
+
 export {BuildIcon};
diff --git a/packages/paste-icons/src/react/ChannelsIcon.tsx b/packages/paste-icons/src/react/ChannelsIcon.tsx
@@ -38,4 +38,6 @@ ChannelsIcon.defaultProps = {
   decorative: true,
 };
 
+ChannelsIcon.displayName = 'ChannelsIcon';
+
 export {ChannelsIcon};
diff --git a/packages/paste-icons/src/react/CheckboxCheckedIcon.tsx b/packages/paste-icons/src/react/CheckboxCheckedIcon.tsx
@@ -38,4 +38,6 @@ CheckboxCheckedIcon.defaultProps = {
   decorative: true,
 };
 
+CheckboxCheckedIcon.displayName = 'CheckboxCheckedIcon';
+
 export {CheckboxCheckedIcon};
diff --git a/packages/paste-icons/src/react/CheckboxMultiIcon.tsx b/packages/paste-icons/src/react/CheckboxMultiIcon.tsx
@@ -38,4 +38,6 @@ CheckboxMultiIcon.defaultProps = {
   decorative: true,
 };
 
+CheckboxMultiIcon.displayName = 'CheckboxMultiIcon';
+
 export {CheckboxMultiIcon};
diff --git a/packages/paste-icons/src/react/CheckboxUncheckedIcon.tsx b/packages/paste-icons/src/react/CheckboxUncheckedIcon.tsx
@@ -35,4 +35,6 @@ CheckboxUncheckedIcon.defaultProps = {
   decorative: true,
 };
 
+CheckboxUncheckedIcon.displayName = 'CheckboxUncheckedIcon';
+
 export {CheckboxUncheckedIcon};
diff --git a/packages/paste-icons/src/react/ClockRegularIcon.tsx b/packages/paste-icons/src/react/ClockRegularIcon.tsx
@@ -38,4 +38,6 @@ ClockRegularIcon.defaultProps = {
   decorative: true,
 };
 
+ClockRegularIcon.displayName = 'ClockRegularIcon';
+
 export {ClockRegularIcon};
diff --git a/packages/paste-icons/src/react/CloseIcon.tsx b/packages/paste-icons/src/react/CloseIcon.tsx
@@ -38,4 +38,6 @@ CloseIcon.defaultProps = {
   decorative: true,
 };
 
+CloseIcon.displayName = 'CloseIcon';
+
 export {CloseIcon};
diff --git a/packages/paste-icons/src/react/CollapseIcon.tsx b/packages/paste-icons/src/react/CollapseIcon.tsx
@@ -38,4 +38,6 @@ CollapseIcon.defaultProps = {
   decorative: true,
 };
 
+CollapseIcon.displayName = 'CollapseIcon';
+
 export {CollapseIcon};
diff --git a/packages/paste-icons/src/react/CollapseMenuIcon.tsx b/packages/paste-icons/src/react/CollapseMenuIcon.tsx
@@ -38,4 +38,6 @@ CollapseMenuIcon.defaultProps = {
   decorative: true,
 };
 
+CollapseMenuIcon.displayName = 'CollapseMenuIcon';
+
 export {CollapseMenuIcon};
diff --git a/packages/paste-icons/src/react/CollapsedIcon.tsx b/packages/paste-icons/src/react/CollapsedIcon.tsx
@@ -38,4 +38,6 @@ CollapsedIcon.defaultProps = {
   decorative: true,
 };
 
+CollapsedIcon.displayName = 'CollapsedIcon';
+
 export {CollapsedIcon};
diff --git a/packages/paste-icons/src/react/CommunityIcon.tsx b/packages/paste-icons/src/react/CommunityIcon.tsx
@@ -38,4 +38,6 @@ CommunityIcon.defaultProps = {
   decorative: true,
 };
 
+CommunityIcon.displayName = 'CommunityIcon';
+
 export {CommunityIcon};
diff --git a/packages/paste-icons/src/react/ConnectAppsIcon.tsx b/packages/paste-icons/src/react/ConnectAppsIcon.tsx
@@ -38,4 +38,6 @@ ConnectAppsIcon.defaultProps = {
   decorative: true,
 };
 
+ConnectAppsIcon.displayName = 'ConnectAppsIcon';
+
 export {ConnectAppsIcon};
diff --git a/packages/paste-icons/src/react/ConnectedDevicesIcon.tsx b/packages/paste-icons/src/react/ConnectedDevicesIcon.tsx
@@ -38,4 +38,6 @@ ConnectedDevicesIcon.defaultProps = {
   decorative: true,
 };
 
+ConnectedDevicesIcon.displayName = 'ConnectedDevicesIcon';
+
 export {ConnectedDevicesIcon};
diff --git a/packages/paste-icons/src/react/ConsoleDashIcon.tsx b/packages/paste-icons/src/react/ConsoleDashIcon.tsx
@@ -38,4 +38,6 @@ ConsoleDashIcon.defaultProps = {
   decorative: true,
 };
 
+ConsoleDashIcon.displayName = 'ConsoleDashIcon';
+
 export {ConsoleDashIcon};
diff --git a/packages/paste-icons/src/react/CopyIcon.tsx b/packages/paste-icons/src/react/CopyIcon.tsx
@@ -38,4 +38,6 @@ CopyIcon.defaultProps = {
   decorative: true,
 };
 
+CopyIcon.displayName = 'CopyIcon';
+
 export {CopyIcon};
diff --git a/packages/paste-icons/src/react/DebuggerIcon.tsx b/packages/paste-icons/src/react/DebuggerIcon.tsx
@@ -38,4 +38,6 @@ DebuggerIcon.defaultProps = {
   decorative: true,
 };
 
+DebuggerIcon.displayName = 'DebuggerIcon';
+
 export {DebuggerIcon};
diff --git a/packages/paste-icons/src/react/DebuggerOldIcon.tsx b/packages/paste-icons/src/react/DebuggerOldIcon.tsx
@@ -38,4 +38,6 @@ DebuggerOldIcon.defaultProps = {
   decorative: true,
 };
 
+DebuggerOldIcon.displayName = 'DebuggerOldIcon';
+
 export {DebuggerOldIcon};
diff --git a/packages/paste-icons/src/react/DevToolsIcon.tsx b/packages/paste-icons/src/react/DevToolsIcon.tsx
@@ -38,4 +38,6 @@ DevToolsIcon.defaultProps = {
   decorative: true,
 };
 
+DevToolsIcon.displayName = 'DevToolsIcon';
+
 export {DevToolsIcon};
diff --git a/packages/paste-icons/src/react/DoNotIcon.tsx b/packages/paste-icons/src/react/DoNotIcon.tsx
@@ -32,4 +32,6 @@ DoNotIcon.defaultProps = {
   decorative: true,
 };
 
+DoNotIcon.displayName = 'DoNotIcon';
+
 export {DoNotIcon};
diff --git a/packages/paste-icons/src/react/DocsIcon.tsx b/packages/paste-icons/src/react/DocsIcon.tsx
@@ -38,4 +38,6 @@ DocsIcon.defaultProps = {
   decorative: true,
 };
 
+DocsIcon.displayName = 'DocsIcon';
+
 export {DocsIcon};
diff --git a/packages/paste-icons/src/react/DownloadIcon.tsx b/packages/paste-icons/src/react/DownloadIcon.tsx
@@ -38,4 +38,6 @@ DownloadIcon.defaultProps = {
   decorative: true,
 };
 
+DownloadIcon.displayName = 'DownloadIcon';
+
 export {DownloadIcon};
diff --git a/packages/paste-icons/src/react/DropdownIcon.tsx b/packages/paste-icons/src/react/DropdownIcon.tsx
@@ -38,4 +38,6 @@ DropdownIcon.defaultProps = {
   decorative: true,
 };
 
+DropdownIcon.displayName = 'DropdownIcon';
+
 export {DropdownIcon};
diff --git a/packages/paste-icons/src/react/EmailIcon.tsx b/packages/paste-icons/src/react/EmailIcon.tsx
@@ -38,4 +38,6 @@ EmailIcon.defaultProps = {
   decorative: true,
 };
 
+EmailIcon.displayName = 'EmailIcon';
+
 export {EmailIcon};
diff --git a/packages/paste-icons/src/react/ExclamationCircleIcon.tsx b/packages/paste-icons/src/react/ExclamationCircleIcon.tsx
@@ -38,4 +38,6 @@ ExclamationCircleIcon.defaultProps = {
   decorative: true,
 };
 
+ExclamationCircleIcon.displayName = 'ExclamationCircleIcon';
+
 export {ExclamationCircleIcon};
diff --git a/packages/paste-icons/src/react/ExpandIcon.tsx b/packages/paste-icons/src/react/ExpandIcon.tsx
@@ -38,4 +38,6 @@ ExpandIcon.defaultProps = {
   decorative: true,
 };
 
+ExpandIcon.displayName = 'ExpandIcon';
+
 export {ExpandIcon};
diff --git a/packages/paste-icons/src/react/ExpandMenuIcon.tsx b/packages/paste-icons/src/react/ExpandMenuIcon.tsx
@@ -38,4 +38,6 @@ ExpandMenuIcon.defaultProps = {
   decorative: true,
 };
 
+ExpandMenuIcon.displayName = 'ExpandMenuIcon';
+
 export {ExpandMenuIcon};
diff --git a/packages/paste-icons/src/react/ExternalLinkIcon.tsx b/packages/paste-icons/src/react/ExternalLinkIcon.tsx
@@ -38,4 +38,6 @@ ExternalLinkIcon.defaultProps = {
   decorative: true,
 };
 
+ExternalLinkIcon.displayName = 'ExternalLinkIcon';
+
 export {ExternalLinkIcon};
diff --git a/packages/paste-icons/src/react/FaxEnabledIcon.tsx b/packages/paste-icons/src/react/FaxEnabledIcon.tsx
@@ -38,4 +38,6 @@ FaxEnabledIcon.defaultProps = {
   decorative: true,
 };
 
+FaxEnabledIcon.displayName = 'FaxEnabledIcon';
+
 export {FaxEnabledIcon};