Repository: uber-web/baseui
Pull request #253 (2018-09-14 23:21:48)

fix(button): refactor tests; more correct types


Patch:
diff --git a/src/button/button.js b/src/button/button.js
index 0f74aa2e3..91648425b 100644
--- a/src/button/button.js
+++ b/src/button/button.js
@@ -1,3 +1,9 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
 // @flow
 import * as React from 'react';
 import {
@@ -15,7 +21,7 @@ export default function Button({
   disabled,
   startEnhancer,
   endEnhancer,
-  overrides = {},
+  overrides,
   size,
   kind,
   shape,
@@ -68,4 +74,5 @@ Button.defaultProps = {
   size: SIZE.default,
   kind: KIND.primary,
   shape: SHAPE.default,
+  disabled: false,
 };
diff --git a/src/button/constants.js b/src/button/constants.js
index ada64a2bf..f578b2904 100644
--- a/src/button/constants.js
+++ b/src/button/constants.js
@@ -1,4 +1,10 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
 
 export const KIND = {
   primary: 'primary',
diff --git a/src/button/styled-components.js b/src/button/styled-components.js
index c3e7145fe..43b3695d4 100644
--- a/src/button/styled-components.js
+++ b/src/button/styled-components.js
@@ -7,10 +7,18 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import {styled} from '../styles';
 import {KIND, SIZE, SHAPE} from './constants';
+import type {ThemeT} from '../styles';
+
+type StylePropsT = {
+  $theme: ThemeT,
+  $size?: $Keys<typeof SIZE>,
+  $kind?: $Keys<typeof KIND>,
+  $shape?: $Keys<typeof SHAPE>,
+};
 
 export const BaseButton = styled(
   'button',
-  ({$theme, $size, $kind, $shape}) => ({
+  ({$theme, $size, $kind, $shape}: StylePropsT) => ({
     ...$theme.typography[$size === SIZE.compact ? 'font200' : 'font300'],
     display: 'inline-flex',
     alignItems: 'center',
@@ -29,42 +37,50 @@ export const BaseButton = styled(
       backgroundColor: $theme.colors.mono300,
       color: $theme.colors.mono600,
     },
-    // Padding
-    ...($shape === SHAPE.round || $shape === SHAPE.square
-      ? {
-          paddingTop:
-            $theme.sizing[$size === SIZE.compact ? 'scale400' : 'scale500'],
-          paddingBottom:
-            $theme.sizing[$size === SIZE.compact ? 'scale400' : 'scale500'],
-          paddingLeft:
-            $theme.sizing[$size === SIZE.compact ? 'scale400' : 'scale500'],
-          paddingRight:
-            $theme.sizing[$size === SIZE.compact ? 'scale400' : 'scale500'],
-        }
-      : {
-          paddingTop:
-            $theme.sizing[$size === SIZE.compact ? 'scale200' : 'scale300'],
-          paddingBottom:
-            $theme.sizing[$size === SIZE.compact ? 'scale200' : 'scale300'],
-          paddingLeft: $theme.sizing.scale600,
-          paddingRight: $theme.sizing.scale600,
-        }),
+    // Padding For Shape and Size
+    ...getStyleForShape({$theme, $shape, $size}),
     // Kind style override
     ...getStyleForKind({$theme, $kind}),
   }),
 );
 
-export const EndEnhancer = styled('div', ({$theme}) => ({
+export const EndEnhancer = styled('div', ({$theme}: StylePropsT) => ({
   display: 'flex',
   marginLeft: $theme.sizing.scale500,
 }));
 
-export const StartEnhancer = styled('div', ({$theme}) => ({
+export const StartEnhancer = styled('div', ({$theme}: StylePropsT) => ({
   display: 'flex',
   marginRight: $theme.sizing.scale500,
 }));
 
-function getStyleForKind({$theme, $kind}) {
+export function getStyleForShape({$theme, $shape, $size}: StylePropsT) {
+  switch ($shape) {
+    case SHAPE.round:
+    case SHAPE.square:
+      return {
+        paddingTop:
+          $theme.sizing[$size === SIZE.compact ? 'scale400' : 'scale500'],
+        paddingBottom:
+          $theme.sizing[$size === SIZE.compact ? 'scale400' : 'scale500'],
+        paddingLeft:
+          $theme.sizing[$size === SIZE.compact ? 'scale400' : 'scale500'],
+        paddingRight:
+          $theme.sizing[$size === SIZE.compact ? 'scale400' : 'scale500'],
+      };
+    default:
+      return {
+        paddingTop:
+          $theme.sizing[$size === SIZE.compact ? 'scale200' : 'scale300'],
+        paddingBottom:
+          $theme.sizing[$size === SIZE.compact ? 'scale200' : 'scale300'],
+        paddingLeft: $theme.sizing.scale600,
+        paddingRight: $theme.sizing.scale600,
+      };
+  }
+}
+
+export function getStyleForKind({$theme, $kind}: StylePropsT) {
   switch ($kind) {
     case KIND.primary:
       return {
diff --git a/src/button/types.js b/src/button/types.js
index db2916497..c9c079b7f 100644
--- a/src/button/types.js
+++ b/src/button/types.js
@@ -15,12 +15,12 @@ export type OverridesT = {
 };
 
 export type ButtonPropsT = {
+  overrides: OverridesT,
+  size: $Keys<typeof SIZE>,
+  kind: $Keys<typeof KIND>,
+  shape: $Keys<typeof SHAPE>,
+  disabled: boolean,
   startEnhancer?: () => React$Node | React$Node,
   endEnhancer?: () => React$Node | React$Node,
-  disabled?: boolean,
-  overrides?: OverridesT,
-  size?: $Keys<typeof SIZE>,
-  kind?: $Keys<typeof KIND>,
-  shape?: $Keys<typeof SHAPE>,
   children?: React$Node,
 };


Test patch:
diff --git a/src/button/__tests__/__snapshots__/styled-components.test.js.snap b/src/button/__tests__/__snapshots__/styled-components.test.js.snap
index 5327f053e..a821e4a52 100644
--- a/src/button/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/button/__tests__/__snapshots__/styled-components.test.js.snap
@@ -1,642 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button Styled Components BaseButton - minimal compact default: correct styles 1`] = `
+exports[`Button Styled Components BaseButton - basic render: correct styles 1`] = `
 Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "transparent",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale200",
-  "paddingLeft": "$theme.sizing.scale600",
-  "paddingRight": "$theme.sizing.scale600",
-  "paddingTop": "$theme.sizing.scale200",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - minimal compact round: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "transparent",
-  "border": "none",
-  "borderRadius": "50%",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale400",
-  "paddingLeft": "$theme.sizing.scale400",
-  "paddingRight": "$theme.sizing.scale400",
-  "paddingTop": "$theme.sizing.scale400",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - minimal compact square: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "transparent",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale400",
-  "paddingLeft": "$theme.sizing.scale400",
-  "paddingRight": "$theme.sizing.scale400",
-  "paddingTop": "$theme.sizing.scale400",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - minimal default default: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "transparent",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale300",
-  "paddingLeft": "$theme.sizing.scale600",
-  "paddingRight": "$theme.sizing.scale600",
-  "paddingTop": "$theme.sizing.scale300",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - minimal default round: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "transparent",
-  "border": "none",
-  "borderRadius": "50%",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale500",
-  "paddingLeft": "$theme.sizing.scale500",
-  "paddingRight": "$theme.sizing.scale500",
-  "paddingTop": "$theme.sizing.scale500",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - minimal default square: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono200",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "transparent",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale500",
-  "paddingLeft": "$theme.sizing.scale500",
-  "paddingRight": "$theme.sizing.scale500",
-  "paddingTop": "$theme.sizing.scale500",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - primary compact default: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary600",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.white",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale200",
-  "paddingLeft": "$theme.sizing.scale600",
-  "paddingRight": "$theme.sizing.scale600",
-  "paddingTop": "$theme.sizing.scale200",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - primary compact round: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary600",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary",
-  "border": "none",
-  "borderRadius": "50%",
-  "color": "$theme.colors.white",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale400",
-  "paddingLeft": "$theme.sizing.scale400",
-  "paddingRight": "$theme.sizing.scale400",
-  "paddingTop": "$theme.sizing.scale400",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - primary compact square: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary600",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.white",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale400",
-  "paddingLeft": "$theme.sizing.scale400",
-  "paddingRight": "$theme.sizing.scale400",
-  "paddingTop": "$theme.sizing.scale400",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - primary default default: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary600",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.white",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale300",
-  "paddingLeft": "$theme.sizing.scale600",
-  "paddingRight": "$theme.sizing.scale600",
-  "paddingTop": "$theme.sizing.scale300",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - primary default round: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary600",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary",
-  "border": "none",
-  "borderRadius": "50%",
-  "color": "$theme.colors.white",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale500",
-  "paddingLeft": "$theme.sizing.scale500",
-  "paddingRight": "$theme.sizing.scale500",
-  "paddingTop": "$theme.sizing.scale500",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - primary default square: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary600",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary500",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.white",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale500",
-  "paddingLeft": "$theme.sizing.scale500",
-  "paddingRight": "$theme.sizing.scale500",
-  "paddingTop": "$theme.sizing.scale500",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - secondary compact default: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary200",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary50",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale200",
-  "paddingLeft": "$theme.sizing.scale600",
-  "paddingRight": "$theme.sizing.scale600",
-  "paddingTop": "$theme.sizing.scale200",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - secondary compact round: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary200",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary50",
-  "border": "none",
-  "borderRadius": "50%",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale400",
-  "paddingLeft": "$theme.sizing.scale400",
-  "paddingRight": "$theme.sizing.scale400",
-  "paddingTop": "$theme.sizing.scale400",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - secondary compact square: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary200",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary50",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale400",
-  "paddingLeft": "$theme.sizing.scale400",
-  "paddingRight": "$theme.sizing.scale400",
-  "paddingTop": "$theme.sizing.scale400",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-}
-`;
-
-exports[`Button Styled Components BaseButton - secondary default default: correct styles 1`] = `
-Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary200",
-  },
   ":disabled": Object {
     "backgroundColor": "$theme.colors.mono300",
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
   "WebkitAppearance": "none",
   "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary50",
   "border": "none",
   "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
   "cursor": "pointer",
   "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
@@ -656,28 +30,17 @@ Object {
 }
 `;
 
-exports[`Button Styled Components BaseButton - secondary default round: correct styles 1`] = `
+exports[`Button Styled Components BaseButton - basic render: correct styles 2`] = `
 Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary200",
-  },
   ":disabled": Object {
     "backgroundColor": "$theme.colors.mono300",
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
   "WebkitAppearance": "none",
   "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary50",
   "border": "none",
-  "borderRadius": "50%",
-  "color": "$theme.colors.primary",
+  "borderRadius": "$theme.borders.radius200",
   "cursor": "pointer",
   "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
@@ -686,10 +49,10 @@ Object {
   "justifyContent": "space-between",
   "lineHeight": "$theme.typography.font300.lineHeight",
   "outline": "none",
-  "paddingBottom": "$theme.sizing.scale500",
-  "paddingLeft": "$theme.sizing.scale500",
-  "paddingRight": "$theme.sizing.scale500",
-  "paddingTop": "$theme.sizing.scale500",
+  "paddingBottom": "$theme.sizing.scale300",
+  "paddingLeft": "$theme.sizing.scale600",
+  "paddingRight": "$theme.sizing.scale600",
+  "paddingTop": "$theme.sizing.scale300",
   "textDecoration": "none",
   "transitionDuration": "$theme.animation.timing100",
   "transitionProperty": "background",
@@ -697,28 +60,17 @@ Object {
 }
 `;
 
-exports[`Button Styled Components BaseButton - secondary default square: correct styles 1`] = `
+exports[`Button Styled Components BaseButton - basic render: correct styles 3`] = `
 Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.primary200",
-  },
   ":disabled": Object {
     "backgroundColor": "$theme.colors.mono300",
     "color": "$theme.colors.mono600",
     "cursor": "not-allowed",
   },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.primary100",
-  },
   "WebkitAppearance": "none",
   "alignItems": "center",
-  "backgroundColor": "$theme.colors.primary50",
   "border": "none",
   "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
   "cursor": "pointer",
   "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
@@ -727,10 +79,10 @@ Object {
   "justifyContent": "space-between",
   "lineHeight": "$theme.typography.font300.lineHeight",
   "outline": "none",
-  "paddingBottom": "$theme.sizing.scale500",
-  "paddingLeft": "$theme.sizing.scale500",
-  "paddingRight": "$theme.sizing.scale500",
-  "paddingTop": "$theme.sizing.scale500",
+  "paddingBottom": "$theme.sizing.scale300",
+  "paddingLeft": "$theme.sizing.scale600",
+  "paddingRight": "$theme.sizing.scale600",
+  "paddingTop": "$theme.sizing.scale300",
   "textDecoration": "none",
   "transitionDuration": "$theme.animation.timing100",
   "transitionProperty": "background",
@@ -738,262 +90,134 @@ Object {
 }
 `;
 
-exports[`Button Styled Components BaseButton - tertiary compact default: correct styles 1`] = `
+exports[`Button Styled Components EndEnhancer - basic render: correct styles 1`] = `
 Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono500",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.mono200",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale200",
-  "paddingLeft": "$theme.sizing.scale600",
-  "paddingRight": "$theme.sizing.scale600",
-  "paddingTop": "$theme.sizing.scale200",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "display": "flex",
+  "marginLeft": "$theme.sizing.scale500",
 }
 `;
 
-exports[`Button Styled Components BaseButton - tertiary compact round: correct styles 1`] = `
+exports[`Button Styled Components StartEnhancer - basic render: correct styles 1`] = `
 Object {
-  ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono500",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
-  },
-  ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
-  },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.mono200",
-  "border": "none",
-  "borderRadius": "50%",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale400",
-  "paddingLeft": "$theme.sizing.scale400",
-  "paddingRight": "$theme.sizing.scale400",
-  "paddingTop": "$theme.sizing.scale400",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "display": "flex",
+  "marginRight": "$theme.sizing.scale500",
 }
 `;
 
-exports[`Button Styled Components BaseButton - tertiary compact square: correct styles 1`] = `
+exports[`Button Styled Components getStyleForKind minimal 1`] = `
 Object {
   ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono500",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
+    "backgroundColor": "#E5E5E5",
   },
   ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
+    "backgroundColor": "#F7F7F7",
   },
   ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
+    "backgroundColor": "#F7F7F7",
   },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.mono200",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "$theme.typography.font200.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale400",
-  "paddingLeft": "$theme.sizing.scale400",
-  "paddingRight": "$theme.sizing.scale400",
-  "paddingTop": "$theme.sizing.scale400",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "backgroundColor": "transparent",
+  "color": "#1E66F0",
 }
 `;
 
-exports[`Button Styled Components BaseButton - tertiary default default: correct styles 1`] = `
+exports[`Button Styled Components getStyleForKind primary 1`] = `
 Object {
   ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono500",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
+    "backgroundColor": "#123D90",
   },
   ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
+    "backgroundColor": "#174EB6",
   },
   ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
+    "backgroundColor": "#174EB6",
   },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.mono200",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale300",
-  "paddingLeft": "$theme.sizing.scale600",
-  "paddingRight": "$theme.sizing.scale600",
-  "paddingTop": "$theme.sizing.scale300",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "backgroundColor": "#1E66F0",
+  "color": "#FFFFFF",
 }
 `;
 
-exports[`Button Styled Components BaseButton - tertiary default round: correct styles 1`] = `
+exports[`Button Styled Components getStyleForKind secondary 1`] = `
 Object {
   ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono500",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
+    "backgroundColor": "#9CBCF8",
   },
   ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
+    "backgroundColor": "#D2E0FC",
   },
   ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
+    "backgroundColor": "#D2E0FC",
   },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.mono200",
-  "border": "none",
-  "borderRadius": "50%",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale500",
-  "paddingLeft": "$theme.sizing.scale500",
-  "paddingRight": "$theme.sizing.scale500",
-  "paddingTop": "$theme.sizing.scale500",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "backgroundColor": "#EDF3FE",
+  "color": "#1E66F0",
 }
 `;
 
-exports[`Button Styled Components BaseButton - tertiary default square: correct styles 1`] = `
+exports[`Button Styled Components getStyleForKind tertiary 1`] = `
 Object {
   ":active:enabled": Object {
-    "backgroundColor": "$theme.colors.mono500",
-  },
-  ":disabled": Object {
-    "backgroundColor": "$theme.colors.mono300",
-    "color": "$theme.colors.mono600",
-    "cursor": "not-allowed",
+    "backgroundColor": "#CCCCCC",
   },
   ":focus:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
+    "backgroundColor": "#E5E5E5",
   },
   ":hover:enabled": Object {
-    "backgroundColor": "$theme.colors.mono400",
+    "backgroundColor": "#E5E5E5",
   },
-  "WebkitAppearance": "none",
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.mono200",
-  "border": "none",
-  "borderRadius": "$theme.borders.radius200",
-  "color": "$theme.colors.primary",
-  "cursor": "pointer",
-  "display": "inline-flex",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale500",
-  "paddingLeft": "$theme.sizing.scale500",
-  "paddingRight": "$theme.sizing.scale500",
-  "paddingTop": "$theme.sizing.scale500",
-  "textDecoration": "none",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "background",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "backgroundColor": "#F7F7F7",
+  "color": "#1E66F0",
 }
 `;
 
-exports[`Button Styled Components EndEnhancer - basic render: correct styles 1`] = `
+exports[`Button Styled Components getStyleForShape default compact 1`] = `
 Object {
-  "display": "flex",
-  "marginLeft": "$theme.sizing.scale500",
+  "paddingBottom": "6px",
+  "paddingLeft": "16px",
+  "paddingRight": "16px",
+  "paddingTop": "6px",
 }
 `;
 
-exports[`Button Styled Components StartEnhancer - basic render: correct styles 1`] = `
+exports[`Button Styled Components getStyleForShape default default 1`] = `
 Object {
-  "display": "flex",
-  "marginRight": "$theme.sizing.scale500",
+  "paddingBottom": "8px",
+  "paddingLeft": "16px",
+  "paddingRight": "16px",
+  "paddingTop": "8px",
+}
+`;
+
+exports[`Button Styled Components getStyleForShape round compact 1`] = `
+Object {
+  "paddingBottom": "10px",
+  "paddingLeft": "10px",
+  "paddingRight": "10px",
+  "paddingTop": "10px",
+}
+`;
+
+exports[`Button Styled Components getStyleForShape round default 1`] = `
+Object {
+  "paddingBottom": "12px",
+  "paddingLeft": "12px",
+  "paddingRight": "12px",
+  "paddingTop": "12px",
+}
+`;
+
+exports[`Button Styled Components getStyleForShape square compact 1`] = `
+Object {
+  "paddingBottom": "10px",
+  "paddingLeft": "10px",
+  "paddingRight": "10px",
+  "paddingTop": "10px",
+}
+`;
+
+exports[`Button Styled Components getStyleForShape square default 1`] = `
+Object {
+  "paddingBottom": "12px",
+  "paddingLeft": "12px",
+  "paddingRight": "12px",
+  "paddingTop": "12px",
 }
 `;
diff --git a/src/button/__tests__/button.test.js b/src/button/__tests__/button.test.js
index 9cde1609e..45df1c80b 100644
--- a/src/button/__tests__/button.test.js
+++ b/src/button/__tests__/button.test.js
@@ -1,4 +1,10 @@
-/* eslint-disable flowtype/require-valid-file-annotation, react/prop-types */
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
 import React from 'react';
 import {mount} from 'enzyme';
 import {StartEnhancer, EndEnhancer} from '../styled-components';
@@ -24,7 +30,7 @@ describe('Button Component', () => {
     const NewStartEnhancer = () => <div />;
 
     const props = {
-      startEnhancer: 'start',
+      startEnhancer: () => null,
       overrides: {
         StartEnhancer: NewStartEnhancer,
       },
diff --git a/src/button/__tests__/styled-components.test.js b/src/button/__tests__/styled-components.test.js
index 8377ed4ec..b813b00ef 100644
--- a/src/button/__tests__/styled-components.test.js
+++ b/src/button/__tests__/styled-components.test.js
@@ -1,7 +1,20 @@
-/* eslint-disable flowtype/require-valid-file-annotation, react/prop-types */
-import React from 'react';
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import * as React from 'react';
 import {shallow} from 'enzyme';
-import {BaseButton, StartEnhancer, EndEnhancer} from '../styled-components';
+import {LightTheme} from '../../themes';
+import {
+  BaseButton,
+  StartEnhancer,
+  EndEnhancer,
+  getStyleForKind,
+  getStyleForShape,
+} from '../styled-components';
 import {KIND, SIZE, SHAPE} from '../constants';
 
 function makeTest({
@@ -10,8 +23,16 @@ function makeTest({
   props = {},
   children = null,
   snapshotName = 'correct styles',
+}: {
+  title?: string,
+  component?: React.ComponentType<*>,
+  props?: {},
+  children?: *,
+  snapshotName?: string,
 }) {
+  // $FlowFixMe
   test(title, () => {
+    // $FlowFixMe
     const shallowed = shallow(<Component {...props}>{children}</Component>);
     expect(shallowed.instance().getStyles()).toMatchSnapshot(snapshotName);
   });
@@ -22,22 +43,35 @@ const allSizes = Object.values(SIZE);
 const allShapes = Object.values(SHAPE);
 
 describe('Button Styled Components', () => {
-  allKinds.forEach(kind => {
-    allSizes.forEach(size => {
-      allShapes.forEach(shape => {
-        makeTest({
-          title: `BaseButton - ${kind} ${size} ${shape}`,
-          component: BaseButton,
-          props: {
-            $kind: kind,
-            $shape: shape,
-            $size: size,
-          },
-        });
+  allKinds.forEach($kind => {
+    // $FlowFixMe
+    test(`getStyleForKind ${$kind}`, () => {
+      expect(
+        // $FlowFixMe
+        getStyleForKind({$theme: LightTheme, $kind}),
+      ).toMatchSnapshot();
+    });
+  });
+
+  allShapes.forEach($shape => {
+    allSizes.forEach($size => {
+      // $FlowFixMe
+      test(`getStyleForShape ${$shape} ${$size}`, () => {
+        expect(
+          // $FlowFixMe
+          getStyleForShape({$theme: LightTheme, $shape, $size}),
+        ).toMatchSnapshot();
       });
     });
   });
 
+  allShapes.forEach(shape => {
+    makeTest({
+      title: `BaseButton - basic render`,
+      component: BaseButton,
+    });
+  });
+
   makeTest({
     title: 'StartEnhancer - basic render',
     component: StartEnhancer,