fix: Card action buttons alignment (#559)

### Motivation Fixes #556. It appears like the default card actions padding is slightly wrong. The issue affects buttons as well. This is somehow a possibly minor, but breaking change for existing projects, so I'll try to explain what's going on. ### Resources Cards ![screen shot 2018-09-27 at 22 50 47](https://user-images.githubusercontent.com/7827311/46173876-d2659600-c2a7-11e8-8506-1b95d17a58c2.png) According to MD guidelines the card actions padding is 8. The content's padding is 16. Cards use the "compact" buttons with smaller padding - 8 instead of standard 16. Buttons ![screen shot 2018-09-27 at 22 09 27](https://user-images.githubusercontent.com/7827311/46172613-3d14d280-c2a4-11e8-8f7d-502c4f007cf8.png) The standard horizontal padding is 16. Although it's different for card action buttons. Notice the min-width value, which is 64, but the buttons section doesn't really describe the compact buttons. ### Solution The example provided by @brunohkbx presented a case where it got caught into the min-width trap. The text was too small and caused a larger button padding. If you run this [expo snack](https://snack.expo.io/HyqcT35KX), it presents the same case, just with different button text. First goes too far to the right, second goes too far to the left. The first thing to fix was the card actions padding - switch from 4 to 8. It results in: <img width="377" alt="screen shot 2018-09-27 at 22 21 01" src="https://user-images.githubusercontent.com/7827311/46172934-2a4ecd80-c2a5-11e8-9364-17911a79cce3.png"> So it works for the expo examples case, but not really for the [mentioned issue](#556). It still gives an extra button padding due to too short text (min-width). After removing the min-width from compact buttons, it seems like it's finally there: <img width="376" alt="screen shot 2018-09-27 at 22 13 03" src="https://user-images.githubusercontent.com/7827311/46173141-b95be580-c2a5-11e8-88dd-82a15f5981a5.png"> Finally, it also switches the dialog actions to 8 padding, since that's basically the same thing. ### Test plan https://snack.expo.io/HydBnn5t7 Snapshot tests updated
callstack · Oct 4, 2018 · b4fe2b5 · b4fe2b5
1 parent 526b8c1
commit b4fe2b5
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 16 deletions.
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -274,11 +274,11 @@ class Button extends React.Component<Props, State> {
 
 const styles = StyleSheet.create({
   button: {
-    minWidth: 88,
+    minWidth: 64,
     borderStyle: 'solid',
   },
   compact: {
-    minWidth: 64,
+    minWidth: 'auto',
   },
   content: {
     flexDirection: 'row',

diff --git a/src/components/Card/CardActions.js b/src/components/Card/CardActions.js
@@ -56,7 +56,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    padding: 4,
+    padding: 8,
   },
 });
 

diff --git a/src/components/Dialog/DialogActions.js b/src/components/Dialog/DialogActions.js
@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    padding: 4,
+    padding: 8,
   },
 });
 

diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -232,7 +232,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
             "borderWidth": 0,
             "elevation": 0,
             "margin": 4,
-            "minWidth": 64,
+            "minWidth": "auto",
             "shadowColor": "#000000",
             "shadowOffset": Object {
               "height": NaN,
@@ -439,7 +439,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
             "borderWidth": 0,
             "elevation": 0,
             "margin": 4,
-            "minWidth": 64,
+            "minWidth": "auto",
             "shadowColor": "#000000",
             "shadowOffset": Object {
               "height": NaN,
@@ -548,7 +548,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
             "borderWidth": 0,
             "elevation": 0,
             "margin": 4,
-            "minWidth": 64,
+            "minWidth": "auto",
             "shadowColor": "#000000",
             "shadowOffset": Object {
               "height": NaN,

diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -10,7 +10,7 @@ exports[`renders button with color 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0,
       "elevation": 0,
-      "minWidth": 88,
+      "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
         "height": NaN,
@@ -119,7 +119,7 @@ exports[`renders button with icon 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0,
       "elevation": 0,
-      "minWidth": 88,
+      "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
         "height": NaN,
@@ -273,7 +273,7 @@ exports[`renders contained contained with mode 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0,
       "elevation": 2,
-      "minWidth": 88,
+      "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
         "height": NaN,
@@ -382,7 +382,7 @@ exports[`renders disabled button 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0,
       "elevation": 0,
-      "minWidth": 88,
+      "minWidth": 64,
     }
   }
 >
@@ -489,7 +489,7 @@ exports[`renders loading button 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0,
       "elevation": 0,
-      "minWidth": 88,
+      "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
         "height": NaN,
@@ -611,7 +611,7 @@ exports[`renders outlined button with mode 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
-      "minWidth": 88,
+      "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
         "height": NaN,
@@ -720,7 +720,7 @@ exports[`renders text button by default 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0,
       "elevation": 0,
-      "minWidth": 88,
+      "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
         "height": NaN,
@@ -829,7 +829,7 @@ exports[`renders text button with mode 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0,
       "elevation": 0,
-      "minWidth": 88,
+      "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
         "height": NaN,

diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -244,7 +244,7 @@ exports[`renders snackbar with action button 1`] = `
             "elevation": 0,
             "marginHorizontal": 8,
             "marginVertical": 6,
-            "minWidth": 64,
+            "minWidth": "auto",
             "shadowColor": "#000000",
             "shadowOffset": Object {
               "height": NaN,