Repository: uber-web/baseui
Pull request #215 (2018-09-10 22:10:52)

fix(button): use inline-flex instead of flex
By default, native `<button>` elements are `display: inline-block`. Our new Button components are `display: flex`, presumably so that the internal enhancers can be aligned properly. However, this means that two buttons next to each other will be displayed stacked instead of inline:

![image](https://user-images.githubusercontent.com/875591/45327023-bd001600-b50a-11e8-8784-c6a82ca06b76.png)

Additionally, in the example above `text-align: right;` was supposed to be applied but the buttons are aligned left, another artifact of using `display: flex`.

This PR changes button to be `display: inline-flex` by default, which should be more aligned with the behavior that users would expect from a native button.





abmai: Nice catch, thanks for the fix!

Patch:
diff --git a/src/button/styled-components.js b/src/button/styled-components.js
index 6cd683996..66b2ee0ce 100644
--- a/src/button/styled-components.js
+++ b/src/button/styled-components.js
@@ -12,7 +12,7 @@ export const BaseButton = styled(
   'button',
   ({$theme, $size, $kind, $shape}) => ({
     ...$theme.typography[$size === SIZE.compact ? 'font200' : 'font300'],
-    display: 'flex',
+    display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'space-between',
     border: 'none',


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 18016fc39..7a347e8c6 100644
--- a/src/button/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/button/__tests__/__snapshots__/styled-components.test.js.snap
@@ -20,7 +20,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -58,7 +58,7 @@ Object {
   "borderRadius": "50%",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -96,7 +96,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -134,7 +134,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -172,7 +172,7 @@ Object {
   "borderRadius": "50%",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -210,7 +210,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -248,7 +248,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.white",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -286,7 +286,7 @@ Object {
   "borderRadius": "50%",
   "color": "$theme.colors.white",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -324,7 +324,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.white",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -362,7 +362,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.white",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -400,7 +400,7 @@ Object {
   "borderRadius": "50%",
   "color": "$theme.colors.white",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -438,7 +438,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.white",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -476,7 +476,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -514,7 +514,7 @@ Object {
   "borderRadius": "50%",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -552,7 +552,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -590,7 +590,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -628,7 +628,7 @@ Object {
   "borderRadius": "50%",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -666,7 +666,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -704,7 +704,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -742,7 +742,7 @@ Object {
   "borderRadius": "50%",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -780,7 +780,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font200.fontFamily",
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
@@ -818,7 +818,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -856,7 +856,7 @@ Object {
   "borderRadius": "50%",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
@@ -894,7 +894,7 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
-  "display": "flex",
+  "display": "inline-flex",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",