UX-263 Adds Button variant prop

.playroom/snippets.js

@@ -3,31 +3,31 @@ export default [
     group: 'Button',
     name: 'Primary',
     code: `
-      <Button color="blue">Primary</Button>
+      <Button color="blue" variant="filled">Primary</Button>
     `,
   },
   {
     group: 'Button',
     name: 'Neutral',
     code: `
-      <Button color="default" outlineBorder>Neutral</Button>
+      <Button color="default" variant="outline">Neutral</Button>
     `,
   },
   {
     group: 'Button',
     name: 'Destructive',
     code: `
-      <Button color="red">Destructive</Button>
+      <Button variant="filled" color="red">Destructive</Button>
     `,
   },
   {
     group: 'Button',
     name: 'Button Group',
     code: `
       <Button.Group>
-        <Button outlineBorder>Button</Button>
-        <Button outlineBorder>Button</Button>
-        <Button outlineBorder>Button</Button>
+        <Button variant="outline">Button</Button>
+        <Button variant="outline">Button</Button>
+        <Button variant="outline">Button</Button>
       </Button.Group>
     `,
   },
@@ -37,7 +37,7 @@ export default [
     code: `
       <Inline>
         <Button color="blue">Primary</Button>
-        <Button color="default" outlineBorder>Neutral</Button>
+        <Button color="default" variant="outline">Neutral</Button>
       </Inline>
     `,
   },
@@ -93,7 +93,7 @@ export default [
     code: `
       <Popover
         trigger={
-          <Button outline width="2rem" size="small">
+          <Button variant="outline" width="2rem" size="small">
             <Box as="span"><MoreHoriz /></Box>
           </Button>
         }
@@ -188,8 +188,8 @@ export default [
         label="Label"
         placeholder='Type here'
         suffix={<Search/>}
-        connectLeft={<Select outline options={['Last Hour']}/>}
-        connectRight={<Button outline>Copy</Button>}
+        connectLeft={<Select options={['Last Hour']}/>}
+        connectRight={<Button variant="mutedOutline">Copy</Button>}
       />
     `,
   },
@@ -198,7 +198,7 @@ export default [
     name: 'On a button',
     code: `
       <Tooltip content="Hello I am a tooltip ama">
-        <Button outline>Hover or Focus Me</Button>
+        <Button variant="mutedOutline">Hover or Focus Me</Button>
       </Tooltip>
     `,
   },

packages/matchbox/src/components/Button/Button.js

@@ -43,6 +43,28 @@ const ChildWrapper = styled.span`
   ${childwrapper}
 `;
 
+// Handles deprecated button variant props
+// TODO Remove in 5.0
+function getVariant({ outline, outlineBorder, plain, flat, variant }) {
+  if (variant) {
+    return variant;
+  }
+
+  if (outlineBorder) {
+    return 'outline';
+  }
+
+  if (outline) {
+    return 'mutedOutline';
+  }
+
+  if (plain || flat) {
+    return 'text';
+  }
+
+  return 'filled';
+}
+
 const Button = React.forwardRef(function Button(props, ref) {
   const {
     children,
@@ -55,11 +77,12 @@ const Button = React.forwardRef(function Button(props, ref) {
     loading,
     loadingLabel,
 
-    // Below 3 props to be deprecated for a 'weight' prop
+    // Below 3 props to be deprecated for a 'variant' prop
     plain, // Deprecate in favor of flat
     flat,
     outline,
     outlineBorder,
+    variant,
 
     // Options
     // Renaming to prevent `width` and `height` pass through
@@ -92,22 +115,9 @@ const Button = React.forwardRef(function Button(props, ref) {
   // Polyfills to be deprecrated 'primary' and 'destructive' prop
   const buttonColor = primary ? 'blue' : destructive ? 'red' : color;
 
-  // Experimenting with a weight prop to replace outline, plain, and flat in the future
-  const visualWeight = React.useMemo(() => {
-    if (outlineBorder) {
-      return 'normal';
-    }
-
-    if (outline) {
-      return 'outline';
-    }
-
-    if (plain || flat) {
-      return 'weak';
-    }
-
-    return 'strong';
-  }, [outline, outlineBorder, plain, flat]);
+  const buttonVariant = React.useMemo(() => {
+    return getVariant({ variant, outline, outlineBorder, plain, flat });
+  }, [variant, outline, outlineBorder, plain, flat, getVariant]);
 
   const loadingIndicator = React.useMemo(() => {
     return (
@@ -134,7 +144,7 @@ const Button = React.forwardRef(function Button(props, ref) {
     onFocus,
     onBlur,
     buttonSize,
-    visualWeight,
+    buttonVariant,
     buttonColor,
     ref,
     loading,
@@ -187,25 +197,28 @@ Button.displayName = 'Button';
 Button.Group = Group;
 
 Button.propTypes = {
+  children: PropTypes.node,
   color: PropTypes.oneOf(['gray', 'orange', 'blue', 'navy', 'purple', 'red']),
+  component: PropTypes.elementType,
   disabled: PropTypes.bool,
-  destructive: PropTypes.bool,
-  flat: PropTypes.bool,
-  plain: deprecate(PropTypes.bool, 'Use `flat` instead'),
-  outline: PropTypes.bool,
-  outlineBorder: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'large', 'default']),
+  external: PropTypes.bool,
   fullWidth: PropTypes.bool,
+  loading: PropTypes.bool,
+  loadingLabel: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'large', 'default']),
   submit: PropTypes.bool,
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   title: PropTypes.string,
-  external: PropTypes.bool,
-  component: PropTypes.elementType,
+  variant: PropTypes.oneOf(['filled', 'outline', 'text', 'mutedOutline']),
+
+  // Deprecated props
   Component: deprecate(PropTypes.elementType, 'Use `component` instead'),
-  children: PropTypes.node,
+  destructive: deprecate(PropTypes.bool, 'Use the `color` prop instead'),
+  flat: deprecate(PropTypes.bool, 'Use `variant` instead'),
   primary: deprecate(PropTypes.bool, 'Use `color` prop instead'),
-  loading: PropTypes.bool,
-  loadingLabel: PropTypes.string,
+  outline: deprecate(PropTypes.bool, 'Use `variant` instead'),
+  outlineBorder: deprecate(PropTypes.bool, 'Use `variant` instead'),
+  plain: deprecate(PropTypes.bool, 'Use `variant` instead'),
 
   // Undocumented helper function
   // https://github.com/styled-system/styled-system/issues/618

packages/matchbox/src/components/Button/styles.js

@@ -86,51 +86,52 @@ export const colorVariant = props => {
   let darkHoverColor;
   let lightHoverColor;
   let lightActiveColor;
+  const { theme } = props;
 
   switch (props.buttonColor) {
     case 'orange': // To be deprecated
     case 'blue':
-      color = props.theme.colors.blue['700'];
-      darkHoverColor = props.theme.colors.blue['800'];
-      lightActiveColor = props.theme.colors.blue['300'];
-      lightHoverColor = props.theme.colors.blue['200'];
+      color = theme.colors.blue[700];
+      darkHoverColor = theme.colors.blue[800];
+      lightActiveColor = theme.colors.blue[300];
+      lightHoverColor = theme.colors.blue[200];
       break;
 
     case 'red':
-      color = props.theme.colors.red['700'];
-      darkHoverColor = props.theme.colors.red['800'];
-      lightActiveColor = props.theme.colors.red['300'];
-      lightHoverColor = props.theme.colors.red['200'];
+      color = theme.colors.red[700];
+      darkHoverColor = theme.colors.red[800];
+      lightActiveColor = theme.colors.red[300];
+      lightHoverColor = theme.colors.red[200];
       break;
 
     case 'gray':
     default:
-      color = props.theme.colors.gray['900'];
-      darkHoverColor = props.theme.colors.gray['1000'];
-      lightActiveColor = props.theme.colors.gray['400'];
-      lightHoverColor = props.theme.colors.gray['300'];
+      color = theme.colors.gray[900];
+      darkHoverColor = theme.colors.gray[1000];
+      lightActiveColor = theme.colors.gray[400];
+      lightHoverColor = theme.colors.gray[300];
       break;
   }
 
-  switch (props.visualWeight) {
-    case 'strong':
+  switch (props.buttonVariant) {
+    case 'filled':
       return `
         &, &:visited {
           background: ${color};
-          color: ${props.theme.colors.white};
+          color: ${theme.colors.white};
 
           &:hover {
             ${!props.disabled ? `background: ${darkHoverColor};` : ''}
           }
           &:focus, &:hover {
-            color: ${props.theme.colors.white};
+            color: ${theme.colors.white};
           }
           &:active {
             background: ${color};
           }
         }
       `;
-    case 'weak':
+    case 'text':
       return `
         &, &:visited {
           background: transparent;
@@ -146,13 +147,13 @@ export const colorVariant = props => {
           }
         }
       `;
-    case 'normal':
     case 'outline':
+    case 'mutedOutline':
     default:
       return `
         &, &:visited {
           border: 1px solid ${
-            props.visualWeight == 'outline' ? props.theme.colors.gray['400'] : color
+            props.buttonVariant == 'mutedOutline' ? theme.colors.gray[400] : color
           };
           background: transparent;
           color: ${color};

packages/matchbox/src/components/DatePicker/Navbar.js

@@ -12,7 +12,7 @@ function Navbar(props) {
     <Box display="flex" justifyContent="space-between" position="absolute" left="0" right="0">
       <Box flex="0">
         <Button
-          flat
+          variant="text"
           color="blue"
           data-id="datepicker-previous"
           disabled={!showPreviousButton}
@@ -26,7 +26,7 @@ function Navbar(props) {
       </Box>
       <Box flex="0">
         <Button
-          flat
+          variant="text"
           color="blue"
           data-id="datepicker-next"
           disabled={!showNextButton}

packages/matchbox/src/components/Drawer/Header.js

@@ -18,7 +18,7 @@ const Header = React.forwardRef(function Header(props, ref) {
           </Text>
         </Box>
         {showCloseButton && (
-          <Button flat size="small" width={tokens.spacing_600} px="0" onClick={onClose}>
+          <Button variant="text" size="small" width={tokens.spacing_600} px="0" onClick={onClose}>
             <ScreenReaderOnly>Close</ScreenReaderOnly>
             <Close size={25} />
           </Button>

packages/matchbox/src/components/Page/Page.js

@@ -61,7 +61,7 @@ function SecondaryActions({ actions = [], hasPrimaryAction }) {
     return (
       <Button
         {...action}
-        outlineBorder
+        variant="outline"
         color="blue"
         mr={hasPrimaryAction ? ['0', null, '500'] : ' 0'}
         ml={hasPrimaryAction ? ['300', null, '0'] : '0'}
@@ -89,7 +89,7 @@ function SecondaryActions({ actions = [], hasPrimaryAction }) {
             aria-expanded={isOpen}
             color="blue"
             onClick={() => setIsOpen(!isOpen)}
-            outlineBorder
+            variant="outline"
             p="0"
             width="2.5rem" // Forces a square
           >
@@ -114,7 +114,7 @@ function PrimaryAction({ area, action }) {
   }
 
   return (
-    <Button {...action} color="blue">
+    <Button {...action} color="blue" variant="filled">
       {action.content}
     </Button>
   );

packages/matchbox/src/components/Pagination/Pagination.js

@@ -104,7 +104,12 @@ function Pagination(props) {
   const firstButton =
     !marginsHidden && start > 1 ? (
       <span>
-        <Button flat width={tokens.spacing_600} size="small" onClick={() => handlePageChange(0)}>
+        <Button
+          variant="text"
+          width={tokens.spacing_600}
+          size="small"
+          onClick={() => handlePageChange(0)}
+        >
           1
         </Button>
         <Box display="inline" pl={200} pr={200}>
@@ -120,7 +125,7 @@ function Pagination(props) {
           <StyledMoreHoriz size={24} />
         </Box>
         <Button
-          flat
+          variant="text"
           size="small"
           width={pages + 1 < 100 ? tokens.spacing_600 : 'auto'}
           onClick={() => handlePageChange(pages - 1)}

packages/matchbox/src/components/Tabs/Tabs.js

@@ -134,7 +134,7 @@ const Tabs = React.forwardRef(function Tabs(props, userRef) {
                   aria-controls="tab-options"
                   aria-expanded={popoverOpen}
                   data-id="tab-options-button"
-                  flat
+                  variant="text"
                   onClick={() => setPopoverOpen(!popoverOpen)}
                 >
                   <MoreHoriz size={20} />