FE-771 Add margin and width system props to Button

SparkPost · Jan 24, 2020 · 4d68044 · 4d68044
1 parent 677b93d
commit 4d68044
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git a/packages/matchbox/src/components/Button/Button.js b/packages/matchbox/src/components/Button/Button.js
@@ -2,17 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { deprecate } from '../../helpers/propTypes';
 import styled from 'styled-components';
+import { layout, space, compose } from 'styled-system';
 import { Box } from '../Box';
 
 import Group from './Group';
 import { base, visualSize, colorVariant, disabled, fullWidth, group } from './styles';
 
+// TODO Categorize system props and abstract
+const system = compose(space.margin, layout.width);
+
 export const StyledButton = styled(Box)`
   ${base}
   ${visualSize}
   ${colorVariant}
   ${disabled}
   ${fullWidth}
+  ${system}
 `;
 
 // Button.Group is styled here to access a classname reference to StyledButton

diff --git a/packages/matchbox/src/components/Button/styles.js b/packages/matchbox/src/components/Button/styles.js
@@ -6,6 +6,7 @@ export const base = () => `
     border-radius: ${tokens.borderRadius_100};
     user-select: none;
     font-weight: ${tokens.fontWeight_medium};
+    justify-content: center;
     text-decoration: none;
     white-space: nowrap;
     transition-property: background, color, border, outline;
@@ -116,7 +117,6 @@ export const fullWidth = props => {
     return `
       display: block;
       width: 100%;
-      text-align: center;
     `;
   }
 };

diff --git a/packages/matchbox/src/components/Button/tests/Button.test.js b/packages/matchbox/src/components/Button/tests/Button.test.js
@@ -44,6 +44,15 @@ describe('Button', () => {
       ],
     },
     { name: 'fullWidth', props: { fullWidth: true }, assert: ['width', '100%'] },
+    { name: 'system width', props: { width: 1 / 2 }, assert: ['width', '50%'] },
+    {
+      name: 'system margin',
+      props: { mx: '400', mt: '500' },
+      assert: [
+        ['margin-left', '1rem'],
+        ['margin-top', '1.5rem'],
+      ],
+    },
     {
       name: 'deprecated prop - primary',
       props: { primary: true },

diff --git a/stories/action/Button.stories.js b/stories/action/Button.stories.js
@@ -95,3 +95,17 @@ export const Group = withInfo()(() => (
     </Button>
   </Button.Group>
 ));
+
+export const SystemProps = withInfo()(() => (
+  <>
+    <Button mb="200" mr="200" width={[1, 1 / 2, 1 / 4]} color="blue">
+      Submit
+    </Button>
+    <Button mb="200" mr="200" width={['100%', 1 / 5, 1 / 6]} outline>
+      Cancel
+    </Button>
+    <Button mb="200" width={['100%', 1 / 6, 'auto']} flat>
+      Reset
+    </Button>
+  </>
+));