Skip to content
Permalink
Browse files

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
  • Loading branch information...
TheSisb committed Aug 26, 2019
1 parent 05f38ae commit 2644657319475b8054df1c7a955b4507b5ad559d
Showing with 358 additions and 114 deletions.
  1. +27 −4 packages/paste-core/components/button/src/index.tsx
  2. +2 −0 packages/paste-core/components/button/src/styles.ts
  3. +1 −1 packages/paste-core/components/button/src/types.ts
  4. +2 −0 packages/paste-icons/src/react/AccountProfileIcon.tsx
  5. +2 −0 packages/paste-icons/src/react/AddOnsIcon.tsx
  6. +2 −0 packages/paste-icons/src/react/AlertTriggersIcon.tsx
  7. +2 −0 packages/paste-icons/src/react/ApiExplorerIcon.tsx
  8. +2 −0 packages/paste-icons/src/react/ApiKeysIcon.tsx
  9. +2 −0 packages/paste-icons/src/react/ArrowRightIcon.tsx
  10. +2 −0 packages/paste-icons/src/react/ArrowShaftDownIcon.tsx
  11. +2 −0 packages/paste-icons/src/react/ArrowShaftLeftIcon.tsx
  12. +2 −0 packages/paste-icons/src/react/ArrowShaftRightIcon.tsx
  13. +2 −0 packages/paste-icons/src/react/ArrowShaftUpIcon.tsx
  14. +2 −0 packages/paste-icons/src/react/AssetsIcon.tsx
  15. +2 −0 packages/paste-icons/src/react/AuditEventsIcon.tsx
  16. +2 −0 packages/paste-icons/src/react/AuthyIcon.tsx
  17. +2 −0 packages/paste-icons/src/react/AutopilotIcon.tsx
  18. +2 −0 packages/paste-icons/src/react/BackIcon.tsx
  19. +2 −0 packages/paste-icons/src/react/BarChartIcon.tsx
  20. +2 −0 packages/paste-icons/src/react/BillingIcon.tsx
  21. +2 −0 packages/paste-icons/src/react/BuildIcon.tsx
  22. +2 −0 packages/paste-icons/src/react/ChannelsIcon.tsx
  23. +2 −0 packages/paste-icons/src/react/CheckboxCheckedIcon.tsx
  24. +2 −0 packages/paste-icons/src/react/CheckboxMultiIcon.tsx
  25. +2 −0 packages/paste-icons/src/react/CheckboxUncheckedIcon.tsx
  26. +2 −0 packages/paste-icons/src/react/ClockRegularIcon.tsx
  27. +2 −0 packages/paste-icons/src/react/CloseIcon.tsx
  28. +2 −0 packages/paste-icons/src/react/CollapseIcon.tsx
  29. +2 −0 packages/paste-icons/src/react/CollapseMenuIcon.tsx
  30. +2 −0 packages/paste-icons/src/react/CollapsedIcon.tsx
  31. +2 −0 packages/paste-icons/src/react/CommunityIcon.tsx
  32. +2 −0 packages/paste-icons/src/react/ConnectAppsIcon.tsx
  33. +2 −0 packages/paste-icons/src/react/ConnectedDevicesIcon.tsx
  34. +2 −0 packages/paste-icons/src/react/ConsoleDashIcon.tsx
  35. +2 −0 packages/paste-icons/src/react/CopyIcon.tsx
  36. +2 −0 packages/paste-icons/src/react/DebuggerIcon.tsx
  37. +2 −0 packages/paste-icons/src/react/DebuggerOldIcon.tsx
  38. +2 −0 packages/paste-icons/src/react/DevToolsIcon.tsx
  39. +2 −0 packages/paste-icons/src/react/DoNotIcon.tsx
  40. +2 −0 packages/paste-icons/src/react/DocsIcon.tsx
  41. +2 −0 packages/paste-icons/src/react/DownloadIcon.tsx
  42. +2 −0 packages/paste-icons/src/react/DropdownIcon.tsx
  43. +2 −0 packages/paste-icons/src/react/EmailIcon.tsx
  44. +2 −0 packages/paste-icons/src/react/ExclamationCircleIcon.tsx
  45. +2 −0 packages/paste-icons/src/react/ExpandIcon.tsx
  46. +2 −0 packages/paste-icons/src/react/ExpandMenuIcon.tsx
  47. +2 −0 packages/paste-icons/src/react/ExternalLinkIcon.tsx
  48. +2 −0 packages/paste-icons/src/react/FaxEnabledIcon.tsx
  49. +2 −0 packages/paste-icons/src/react/FaxIcon.tsx
  50. +2 −0 packages/paste-icons/src/react/FilterIcon.tsx
  51. +2 −0 packages/paste-icons/src/react/FlexIcon.tsx
  52. +2 −0 packages/paste-icons/src/react/GoArrowIcon.tsx
  53. +2 −0 packages/paste-icons/src/react/HelpBookIcon.tsx
  54. +2 −0 packages/paste-icons/src/react/HelpIcon.tsx
  55. +2 −0 packages/paste-icons/src/react/HideIcon.tsx
  56. +2 −0 packages/paste-icons/src/react/HomeIcon.tsx
  57. +2 −0 packages/paste-icons/src/react/InfoIcon.tsx
  58. +2 −0 packages/paste-icons/src/react/InformationIcon.tsx
  59. +2 −0 packages/paste-icons/src/react/InspirationIcon.tsx
  60. +2 −0 packages/paste-icons/src/react/InterconnectIcon.tsx
  61. +2 −0 packages/paste-icons/src/react/IpMessagingIcon.tsx
  62. +2 −0 packages/paste-icons/src/react/KeyboardIcon.tsx
  63. +2 −0 packages/paste-icons/src/react/LearnIcon.tsx
  64. +2 −0 packages/paste-icons/src/react/LineChartIcon.tsx
  65. +2 −0 packages/paste-icons/src/react/LogoIcon.tsx
  66. +2 −0 packages/paste-icons/src/react/LookupIcon.tsx
  67. +2 −0 packages/paste-icons/src/react/MessagingIcon.tsx
  68. +2 −0 packages/paste-icons/src/react/MmsEnabledIcon.tsx
  69. +2 −0 packages/paste-icons/src/react/MoreIcon.tsx
  70. +2 −0 packages/paste-icons/src/react/MultiFactorAuthenticationIcon.tsx
  71. +2 −0 packages/paste-icons/src/react/NotifyIcon.tsx
  72. +2 −0 packages/paste-icons/src/react/OffIcon.tsx
  73. +2 −0 packages/paste-icons/src/react/OnIcon.tsx
  74. +2 −0 packages/paste-icons/src/react/PartnersIcon.tsx
  75. +2 −0 packages/paste-icons/src/react/PauseFlatIcon.tsx
  76. +2 −0 packages/paste-icons/src/react/PauseIcon.tsx
  77. +2 −0 packages/paste-icons/src/react/PencilIcon.tsx
  78. +2 −0 packages/paste-icons/src/react/PhoneNumbersIcon.tsx
  79. +2 −0 packages/paste-icons/src/react/PhoneVerificationIcon.tsx
  80. +2 −0 packages/paste-icons/src/react/PieChartIcon.tsx
  81. +2 −0 packages/paste-icons/src/react/PlayFlatIcon.tsx
  82. +2 −0 packages/paste-icons/src/react/PlayIcon.tsx
  83. +2 −0 packages/paste-icons/src/react/PluginIcon.tsx
  84. +2 −0 packages/paste-icons/src/react/PlusButtonIcon.tsx
  85. +2 −0 packages/paste-icons/src/react/ProductsIcon.tsx
  86. +2 −0 packages/paste-icons/src/react/ProxyIcon.tsx
  87. +2 −0 packages/paste-icons/src/react/QuestionIcon.tsx
  88. +2 −0 packages/paste-icons/src/react/ResetIcon.tsx
  89. +2 −0 packages/paste-icons/src/react/RuntimeIcon.tsx
  90. +2 −0 packages/paste-icons/src/react/SearchIcon.tsx
  91. +2 −0 packages/paste-icons/src/react/SettingsIcon.tsx
  92. +2 −0 packages/paste-icons/src/react/SipTrunkingIcon.tsx
  93. +2 −0 packages/paste-icons/src/react/SmsEnabledIcon.tsx
  94. +2 −0 packages/paste-icons/src/react/SpinnerIcon.tsx
  95. +2 −0 packages/paste-icons/src/react/StudioIcon.tsx
  96. +2 −0 packages/paste-icons/src/react/SuccessIcon.tsx
  97. +2 −0 packages/paste-icons/src/react/SupportIcon.tsx
  98. +2 −0 packages/paste-icons/src/react/SupportLifebuoyIcon.tsx
  99. +2 −0 packages/paste-icons/src/react/SyncIcon.tsx
  100. +2 −0 packages/paste-icons/src/react/TableViewIcon.tsx
  101. +2 −0 packages/paste-icons/src/react/TalkToSalesIcon.tsx
  102. +2 −0 packages/paste-icons/src/react/TaskrouterIcon.tsx
  103. +2 −0 packages/paste-icons/src/react/TemplatesIcon.tsx
  104. +2 −0 packages/paste-icons/src/react/ThumbTackIcon.tsx
  105. +2 −0 packages/paste-icons/src/react/TicketHistoryIcon.tsx
  106. +2 −0 packages/paste-icons/src/react/TicketIcon.tsx
  107. +2 −0 packages/paste-icons/src/react/TwimlBinsIcon.tsx
  108. +2 −0 packages/paste-icons/src/react/TwoFactorAuthenticationIcon.tsx
  109. +2 −0 packages/paste-icons/src/react/UploadIcon.tsx
  110. +2 −0 packages/paste-icons/src/react/UsersIcon.tsx
  111. +2 −0 packages/paste-icons/src/react/VideoIcon.tsx
  112. +2 −0 packages/paste-icons/src/react/ViewIcon.tsx
  113. +2 −0 packages/paste-icons/src/react/VoiceEnabledIcon.tsx
  114. +2 −0 packages/paste-icons/src/react/VoiceIcon.tsx
  115. +2 −0 packages/paste-icons/src/react/WhatsappIcon.tsx
  116. +2 −0 packages/paste-icons/src/react/WirelessIcon.tsx
  117. +2 −0 packages/paste-icons/tools/iconTemplate.js
  118. +100 −109 packages/paste-website/src/pages/components/button/index.mdx
@@ -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};
@@ -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 {
@@ -14,7 +14,7 @@ export interface ButtonProps {
tabIndex?: ButtonTabIndexes;

variant: ButtonVariants;
size: ButtonSizes;
size?: ButtonSizes;
fullWidth?: boolean;

children: React.ReactNode;
@@ -38,4 +38,6 @@ AccountProfileIcon.defaultProps = {
decorative: true,
};

AccountProfileIcon.displayName = 'AccountProfileIcon';

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

AddOnsIcon.displayName = 'AddOnsIcon';

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

AlertTriggersIcon.displayName = 'AlertTriggersIcon';

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

ApiExplorerIcon.displayName = 'ApiExplorerIcon';

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

ApiKeysIcon.displayName = 'ApiKeysIcon';

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

ArrowRightIcon.displayName = 'ArrowRightIcon';

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

ArrowShaftDownIcon.displayName = 'ArrowShaftDownIcon';

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

ArrowShaftLeftIcon.displayName = 'ArrowShaftLeftIcon';

export {ArrowShaftLeftIcon};
@@ -32,4 +32,6 @@ ArrowShaftRightIcon.defaultProps = {
decorative: true,
};

ArrowShaftRightIcon.displayName = 'ArrowShaftRightIcon';

export {ArrowShaftRightIcon};
@@ -32,4 +32,6 @@ ArrowShaftUpIcon.defaultProps = {
decorative: true,
};

ArrowShaftUpIcon.displayName = 'ArrowShaftUpIcon';

export {ArrowShaftUpIcon};
@@ -35,4 +35,6 @@ AssetsIcon.defaultProps = {
decorative: true,
};

AssetsIcon.displayName = 'AssetsIcon';

export {AssetsIcon};
@@ -38,4 +38,6 @@ AuditEventsIcon.defaultProps = {
decorative: true,
};

AuditEventsIcon.displayName = 'AuditEventsIcon';

export {AuditEventsIcon};
@@ -38,4 +38,6 @@ AuthyIcon.defaultProps = {
decorative: true,
};

AuthyIcon.displayName = 'AuthyIcon';

export {AuthyIcon};
@@ -38,4 +38,6 @@ AutopilotIcon.defaultProps = {
decorative: true,
};

AutopilotIcon.displayName = 'AutopilotIcon';

export {AutopilotIcon};
@@ -38,4 +38,6 @@ BackIcon.defaultProps = {
decorative: true,
};

BackIcon.displayName = 'BackIcon';

export {BackIcon};
@@ -32,4 +32,6 @@ BarChartIcon.defaultProps = {
decorative: true,
};

BarChartIcon.displayName = 'BarChartIcon';

export {BarChartIcon};
@@ -38,4 +38,6 @@ BillingIcon.defaultProps = {
decorative: true,
};

BillingIcon.displayName = 'BillingIcon';

export {BillingIcon};
@@ -32,4 +32,6 @@ BuildIcon.defaultProps = {
decorative: true,
};

BuildIcon.displayName = 'BuildIcon';

export {BuildIcon};
@@ -38,4 +38,6 @@ ChannelsIcon.defaultProps = {
decorative: true,
};

ChannelsIcon.displayName = 'ChannelsIcon';

export {ChannelsIcon};
@@ -38,4 +38,6 @@ CheckboxCheckedIcon.defaultProps = {
decorative: true,
};

CheckboxCheckedIcon.displayName = 'CheckboxCheckedIcon';

export {CheckboxCheckedIcon};
@@ -38,4 +38,6 @@ CheckboxMultiIcon.defaultProps = {
decorative: true,
};

CheckboxMultiIcon.displayName = 'CheckboxMultiIcon';

export {CheckboxMultiIcon};
@@ -35,4 +35,6 @@ CheckboxUncheckedIcon.defaultProps = {
decorative: true,
};

CheckboxUncheckedIcon.displayName = 'CheckboxUncheckedIcon';

export {CheckboxUncheckedIcon};
@@ -38,4 +38,6 @@ ClockRegularIcon.defaultProps = {
decorative: true,
};

ClockRegularIcon.displayName = 'ClockRegularIcon';

export {ClockRegularIcon};
@@ -38,4 +38,6 @@ CloseIcon.defaultProps = {
decorative: true,
};

CloseIcon.displayName = 'CloseIcon';

export {CloseIcon};
@@ -38,4 +38,6 @@ CollapseIcon.defaultProps = {
decorative: true,
};

CollapseIcon.displayName = 'CollapseIcon';

export {CollapseIcon};
@@ -38,4 +38,6 @@ CollapseMenuIcon.defaultProps = {
decorative: true,
};

CollapseMenuIcon.displayName = 'CollapseMenuIcon';

export {CollapseMenuIcon};
@@ -38,4 +38,6 @@ CollapsedIcon.defaultProps = {
decorative: true,
};

CollapsedIcon.displayName = 'CollapsedIcon';

export {CollapsedIcon};
@@ -38,4 +38,6 @@ CommunityIcon.defaultProps = {
decorative: true,
};

CommunityIcon.displayName = 'CommunityIcon';

export {CommunityIcon};
@@ -38,4 +38,6 @@ ConnectAppsIcon.defaultProps = {
decorative: true,
};

ConnectAppsIcon.displayName = 'ConnectAppsIcon';

export {ConnectAppsIcon};
@@ -38,4 +38,6 @@ ConnectedDevicesIcon.defaultProps = {
decorative: true,
};

ConnectedDevicesIcon.displayName = 'ConnectedDevicesIcon';

export {ConnectedDevicesIcon};
@@ -38,4 +38,6 @@ ConsoleDashIcon.defaultProps = {
decorative: true,
};

ConsoleDashIcon.displayName = 'ConsoleDashIcon';

export {ConsoleDashIcon};
@@ -38,4 +38,6 @@ CopyIcon.defaultProps = {
decorative: true,
};

CopyIcon.displayName = 'CopyIcon';

export {CopyIcon};
@@ -38,4 +38,6 @@ DebuggerIcon.defaultProps = {
decorative: true,
};

DebuggerIcon.displayName = 'DebuggerIcon';

export {DebuggerIcon};
@@ -38,4 +38,6 @@ DebuggerOldIcon.defaultProps = {
decorative: true,
};

DebuggerOldIcon.displayName = 'DebuggerOldIcon';

export {DebuggerOldIcon};
@@ -38,4 +38,6 @@ DevToolsIcon.defaultProps = {
decorative: true,
};

DevToolsIcon.displayName = 'DevToolsIcon';

export {DevToolsIcon};
@@ -32,4 +32,6 @@ DoNotIcon.defaultProps = {
decorative: true,
};

DoNotIcon.displayName = 'DoNotIcon';

export {DoNotIcon};
@@ -38,4 +38,6 @@ DocsIcon.defaultProps = {
decorative: true,
};

DocsIcon.displayName = 'DocsIcon';

export {DocsIcon};
@@ -38,4 +38,6 @@ DownloadIcon.defaultProps = {
decorative: true,
};

DownloadIcon.displayName = 'DownloadIcon';

export {DownloadIcon};
@@ -38,4 +38,6 @@ DropdownIcon.defaultProps = {
decorative: true,
};

DropdownIcon.displayName = 'DropdownIcon';

export {DropdownIcon};
@@ -38,4 +38,6 @@ EmailIcon.defaultProps = {
decorative: true,
};

EmailIcon.displayName = 'EmailIcon';

export {EmailIcon};
@@ -38,4 +38,6 @@ ExclamationCircleIcon.defaultProps = {
decorative: true,
};

ExclamationCircleIcon.displayName = 'ExclamationCircleIcon';

export {ExclamationCircleIcon};
@@ -38,4 +38,6 @@ ExpandIcon.defaultProps = {
decorative: true,
};

ExpandIcon.displayName = 'ExpandIcon';

export {ExpandIcon};
@@ -38,4 +38,6 @@ ExpandMenuIcon.defaultProps = {
decorative: true,
};

ExpandMenuIcon.displayName = 'ExpandMenuIcon';

export {ExpandMenuIcon};
@@ -38,4 +38,6 @@ ExternalLinkIcon.defaultProps = {
decorative: true,
};

ExternalLinkIcon.displayName = 'ExternalLinkIcon';

export {ExternalLinkIcon};
@@ -38,4 +38,6 @@ FaxEnabledIcon.defaultProps = {
decorative: true,
};

FaxEnabledIcon.displayName = 'FaxEnabledIcon';

export {FaxEnabledIcon};

1 comment on commit 2644657

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.