Repository: uber-web/baseui
Pull request #255 (2018-09-15 23:48:44)

fix(button): change content to justify center
### Button Component

Style fix for the issue outlined in https://github.com/uber-web/baseui/issues/207#issuecomment-421639678

Changing to `center` justify will put us closer to native behavior.


Patch:
diff --git a/src/button/index.js b/src/button/index.js
index 8856f9f6e..7b0de8a73 100644
--- a/src/button/index.js
+++ b/src/button/index.js
@@ -1,4 +1,4 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
+// @flow
 export {default as Button} from './button';
 // Constants
 export {KIND, SIZE, SHAPE} from './constants';
diff --git a/src/button/styled-components.js b/src/button/styled-components.js
index 43b3695d4..9320fff56 100644
--- a/src/button/styled-components.js
+++ b/src/button/styled-components.js
@@ -22,7 +22,7 @@ export const BaseButton = styled(
     ...$theme.typography[$size === SIZE.compact ? 'font200' : 'font300'],
     display: 'inline-flex',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
     border: 'none',
     borderRadius: $shape === SHAPE.round ? '50%' : $theme.borders.radius200,
     textDecoration: 'none',
diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js
index 432504702..2a127fa0a 100644
--- a/src/pagination/pagination.js
+++ b/src/pagination/pagination.js
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import memoize from 'memoize-one';
 // Files
-import {Button, StyledBaseButton, KIND, SIZE} from '../button';
+import {Button, StyledBaseButton, KIND} from '../button';
 import {StatefulMenu as Menu} from '../menu';
 import {
   Root as StyledRoot,
@@ -137,7 +137,6 @@ export default class Pagination extends React.PureComponent<
           onClick={this.onPrevClick}
           startEnhancer={ArrowLeft}
           kind={KIND.tertiary}
-          size={SIZE.condensed}
           overrides={{
             BaseButton: PrevButton,
           }}
@@ -153,7 +152,6 @@ export default class Pagination extends React.PureComponent<
             onClick={this.onDropdownButtonClick}
             endEnhancer={ArrowDown}
             kind={KIND.tertiary}
-            size={SIZE.condensed}
             overrides={{
               BaseButton: DropdownButton,
             }}
@@ -181,7 +179,6 @@ export default class Pagination extends React.PureComponent<
           onClick={this.onNextClick}
           endEnhancer={ArrowRight}
           kind={KIND.tertiary}
-          size={SIZE.condensed}
           overrides={{
             BaseButton: NextButton,
           }}


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 a821e4a52..6d102577b 100644
--- a/src/button/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/button/__tests__/__snapshots__/styled-components.test.js.snap
@@ -16,7 +16,7 @@ Object {
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
+  "justifyContent": "center",
   "lineHeight": "$theme.typography.font300.lineHeight",
   "outline": "none",
   "paddingBottom": "$theme.sizing.scale300",
@@ -46,7 +46,7 @@ Object {
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
+  "justifyContent": "center",
   "lineHeight": "$theme.typography.font300.lineHeight",
   "outline": "none",
   "paddingBottom": "$theme.sizing.scale300",
@@ -76,7 +76,7 @@ Object {
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
-  "justifyContent": "space-between",
+  "justifyContent": "center",
   "lineHeight": "$theme.typography.font300.lineHeight",
   "outline": "none",
   "paddingBottom": "$theme.sizing.scale300",