Update Circle button styles (#19)

* Update Circle button styles. * Update package version and build files.
instacart · Aug 10, 2017 · 30e136f · 30e136f
1 parent 6fa0de9
commit 30e136f
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 50 deletions.
diff --git a/dist/snacks.js b/dist/snacks.js
diff --git a/docs/build/0.e9fce5b8.js → docs/build/0.41ba67ff.js b/docs/build/0.e9fce5b8.js → docs/build/0.41ba67ff.js
diff --git a/docs/build/bundle.9ddabe48.js → docs/build/bundle.862de71f.js b/docs/build/bundle.9ddabe48.js → docs/build/bundle.862de71f.js
diff --git a/docs/index.html b/docs/index.html
@@ -7,5 +7,5 @@
 	</head>
 	<body>
 		<div id="app"></div>
-	<script type="text/javascript" src="build/bundle.9ddabe48.js"></script></body>
+	<script type="text/javascript" src="build/bundle.862de71f.js"></script></body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ic-snacks",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "The Instacart Component Library for Web",
   "main": "dist/snacks.js",
   "scripts": {

diff --git a/src/components/Buttons/CircleButton.js b/src/components/Buttons/CircleButton.js
@@ -3,10 +3,11 @@
  *
  * @author [Dominic Cocchiarella ](https://github.com/docchia)
 */
-import colors     from '../../styles/colors'
-import responsive from '../../styles/responsive'
-import themer     from '../../styles/themer'
-import zIndex     from '../../styles/zIndex'
+import colors       from '../../styles/colors'
+import responsive   from '../../styles/responsive'
+import themer       from '../../styles/themer'
+import zIndex       from '../../styles/zIndex'
+import { spacings } from '../../styles/spacing'
 
 import Radium    from 'radium'
 import React     from 'react'
@@ -15,24 +16,24 @@ import PropTypes from 'prop-types'
 const styles = {
   default: {
     ...zIndex.Z_INDEX1,
-    backgroundColor: themer.get('colors', 'primaryBackground'),
+    backgroundColor: themer.get('colors', 'primaryForeground'),
     border: '0',
-    color: themer.get('colors', 'primaryForeground'),
-    width: '40px',
-    height: '40px',
+    color: themer.get('colors', 'primaryBackground'),
+    width: `${spacings.XL}px`,
+    height: `${spacings.XL}px`,
     borderRadius: '50%',
     boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.26), 0 1px 4px 0 rgba(0, 0, 0, 0.16)',
     transition: 'background-color 150ms ease-in-out',
     textAlign: 'center',
     lineHeight: '1',
     ':hover': {
-      backgroundColor: colors.GRAY_97
+      backgroundColor: colors.GREEN_600
     },
     ':active': {
-      backgroundColor: colors.GRAY_97
+      backgroundColor: colors.GREEN_700
     },
     ':focus': {
-      backgroundColor: colors.GRAY_97,
+      backgroundColor: colors.GREEN_600,
       outline: 'none'
     },
     [responsive.xs]: {

diff --git a/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap b/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap
@@ -20,16 +20,16 @@ exports[`renders CircleButton with Icon correctly 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
-          "backgroundColor": "#FFFFFF",
+          "backgroundColor": "#43B02A",
           "border": "0",
           "borderRadius": "50%",
           "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.26), 0 1px 4px 0 rgba(0, 0, 0, 0.16)",
-          "color": "#43B02A",
-          "height": "40px",
+          "color": "#FFFFFF",
+          "height": "48px",
           "lineHeight": "1",
           "textAlign": "center",
           "transition": "background-color 150ms ease-in-out",
-          "width": "40px",
+          "width": "48px",
           "zIndex": 100,
         }
       }
@@ -88,16 +88,16 @@ exports[`renders CircleButton with passed ariaLabel correctly 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
-          "backgroundColor": "#FFFFFF",
+          "backgroundColor": "#43B02A",
           "border": "0",
           "borderRadius": "50%",
           "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.26), 0 1px 4px 0 rgba(0, 0, 0, 0.16)",
-          "color": "#43B02A",
-          "height": "40px",
+          "color": "#FFFFFF",
+          "height": "48px",
           "lineHeight": "1",
           "textAlign": "center",
           "transition": "background-color 150ms ease-in-out",
-          "width": "40px",
+          "width": "48px",
           "zIndex": 100,
         }
       }
@@ -135,16 +135,16 @@ exports[`renders CircleButton with passed disabled prop correctly 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
-          "backgroundColor": "#FFFFFF",
+          "backgroundColor": "#43B02A",
           "border": "0",
           "borderRadius": "50%",
           "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.26), 0 1px 4px 0 rgba(0, 0, 0, 0.16)",
-          "color": "#43B02A",
-          "height": "40px",
+          "color": "#FFFFFF",
+          "height": "48px",
           "lineHeight": "1",
           "textAlign": "center",
           "transition": "background-color 150ms ease-in-out",
-          "width": "40px",
+          "width": "48px",
           "zIndex": 100,
         }
       }
@@ -182,19 +182,19 @@ exports[`renders CircleButton with passed styles correctly 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
-          "backgroundColor": "#FFFFFF",
+          "backgroundColor": "#43B02A",
           "border": "0",
           "borderRadius": "50%",
           "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.26), 0 1px 4px 0 rgba(0, 0, 0, 0.16)",
-          "color": "#43B02A",
-          "height": "40px",
+          "color": "#FFFFFF",
+          "height": "48px",
           "lineHeight": "1",
           "position": "absolute",
           "right": "8px",
           "textAlign": "center",
           "top": "8px",
           "transition": "background-color 150ms ease-in-out",
-          "width": "40px",
+          "width": "48px",
           "zIndex": 100,
         }
       }
@@ -232,16 +232,16 @@ exports[`renders basic CircleButton correctly 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
-          "backgroundColor": "#FFFFFF",
+          "backgroundColor": "#43B02A",
           "border": "0",
           "borderRadius": "50%",
           "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.26), 0 1px 4px 0 rgba(0, 0, 0, 0.16)",
-          "color": "#43B02A",
-          "height": "40px",
+          "color": "#FFFFFF",
+          "height": "48px",
           "lineHeight": "1",
           "textAlign": "center",
           "transition": "background-color 150ms ease-in-out",
-          "width": "40px",
+          "width": "48px",
           "zIndex": 100,
         }
       }

diff --git a/src/components/ScrollTrack/ScrollTrack.js b/src/components/ScrollTrack/ScrollTrack.js
@@ -137,7 +137,10 @@ class ScrollTrack extends Component {
           slideButtonStyles.right
         )}
       >
-        <Icon name='arrowRightSmallBold' />
+        <Icon
+          name='arrowRightSmallBold'
+          style={{ fontSize: '20px' }}
+        />
       </CircleButton>
     )
   }
@@ -156,7 +159,10 @@ class ScrollTrack extends Component {
           slideButtonStyles.left
         )}
       >
-        <Icon name='arrowLeftSmallBold' />
+        <Icon
+          name='arrowLeftSmallBold'
+          style={{ fontSize: '20px' }}
+        />
       </CircleButton>
     )
   }

diff --git a/src/components/ScrollTrack/ScrollTrackStyles.js b/src/components/ScrollTrack/ScrollTrackStyles.js
@@ -23,7 +23,7 @@ export default {
   slideButtonStyles: {
     default: {
       position: 'absolute',
-      ...spacing.TOP_XS,
+      top: '5px',
     },
     left: spacing.LEFT_XS,
     right: spacing.RIGHT_XS