Skip to content

Commit b4fe2b5

Browse files
gawrysiaksatya164
authored andcommitted
fix: Card action buttons alignment (callstack#559)
### Motivation Fixes callstack#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="http://github.com/%3Ca%20href="https://user-images.githubusercontent.com/7827311/46172934-2a4ecd80-c2a5-11e8-9364-17911a79cce3.png" rel="nofollow">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](callstack#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="http://github.com/%3Ca%20href="https://user-images.githubusercontent.com/7827311/46173141-b95be580-c2a5-11e8-88dd-82a15f5981a5.png" rel="nofollow">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
1 parent 526b8c1 commit b4fe2b5

File tree

6 files changed

+16
-16
lines changed

6 files changed

+16
-16
lines changed

src/components/Button.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -274,11 +274,11 @@ class Button extends React.Component<Props, State> {
274274

275275
const styles = StyleSheet.create({
276276
button: {
277-
minWidth: 88,
277+
minWidth: 64,
278278
borderStyle: 'solid',
279279
},
280280
compact: {
281-
minWidth: 64,
281+
minWidth: 'auto',
282282
},
283283
content: {
284284
flexDirection: 'row',

src/components/Card/CardActions.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const styles = StyleSheet.create({
5656
flexDirection: 'row',
5757
alignItems: 'center',
5858
justifyContent: 'flex-start',
59-
padding: 4,
59+
padding: 8,
6060
},
6161
});
6262

src/components/Dialog/DialogActions.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
6868
flexDirection: 'row',
6969
alignItems: 'center',
7070
justifyContent: 'flex-end',
71-
padding: 4,
71+
padding: 8,
7272
},
7373
});
7474

src/components/__tests__/__snapshots__/Banner.test.js.snap

+3-3
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
232232
"borderWidth": 0,
233233
"elevation": 0,
234234
"margin": 4,
235-
"minWidth": 64,
235+
"minWidth": "auto",
236236
"shadowColor": "#000000",
237237
"shadowOffset": Object {
238238
"height": NaN,
@@ -439,7 +439,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
439439
"borderWidth": 0,
440440
"elevation": 0,
441441
"margin": 4,
442-
"minWidth": 64,
442+
"minWidth": "auto",
443443
"shadowColor": "#000000",
444444
"shadowOffset": Object {
445445
"height": NaN,
@@ -548,7 +548,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
548548
"borderWidth": 0,
549549
"elevation": 0,
550550
"margin": 4,
551-
"minWidth": 64,
551+
"minWidth": "auto",
552552
"shadowColor": "#000000",
553553
"shadowOffset": Object {
554554
"height": NaN,

src/components/__tests__/__snapshots__/Button.test.js.snap

+8-8
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ exports[`renders button with color 1`] = `
1010
"borderStyle": "solid",
1111
"borderWidth": 0,
1212
"elevation": 0,
13-
"minWidth": 88,
13+
"minWidth": 64,
1414
"shadowColor": "#000000",
1515
"shadowOffset": Object {
1616
"height": NaN,
@@ -119,7 +119,7 @@ exports[`renders button with icon 1`] = `
119119
"borderStyle": "solid",
120120
"borderWidth": 0,
121121
"elevation": 0,
122-
"minWidth": 88,
122+
"minWidth": 64,
123123
"shadowColor": "#000000",
124124
"shadowOffset": Object {
125125
"height": NaN,
@@ -273,7 +273,7 @@ exports[`renders contained contained with mode 1`] = `
273273
"borderStyle": "solid",
274274
"borderWidth": 0,
275275
"elevation": 2,
276-
"minWidth": 88,
276+
"minWidth": 64,
277277
"shadowColor": "#000000",
278278
"shadowOffset": Object {
279279
"height": NaN,
@@ -382,7 +382,7 @@ exports[`renders disabled button 1`] = `
382382
"borderStyle": "solid",
383383
"borderWidth": 0,
384384
"elevation": 0,
385-
"minWidth": 88,
385+
"minWidth": 64,
386386
}
387387
}
388388
>
@@ -489,7 +489,7 @@ exports[`renders loading button 1`] = `
489489
"borderStyle": "solid",
490490
"borderWidth": 0,
491491
"elevation": 0,
492-
"minWidth": 88,
492+
"minWidth": 64,
493493
"shadowColor": "#000000",
494494
"shadowOffset": Object {
495495
"height": NaN,
@@ -611,7 +611,7 @@ exports[`renders outlined button with mode 1`] = `
611611
"borderStyle": "solid",
612612
"borderWidth": 0.5,
613613
"elevation": 0,
614-
"minWidth": 88,
614+
"minWidth": 64,
615615
"shadowColor": "#000000",
616616
"shadowOffset": Object {
617617
"height": NaN,
@@ -720,7 +720,7 @@ exports[`renders text button by default 1`] = `
720720
"borderStyle": "solid",
721721
"borderWidth": 0,
722722
"elevation": 0,
723-
"minWidth": 88,
723+
"minWidth": 64,
724724
"shadowColor": "#000000",
725725
"shadowOffset": Object {
726726
"height": NaN,
@@ -829,7 +829,7 @@ exports[`renders text button with mode 1`] = `
829829
"borderStyle": "solid",
830830
"borderWidth": 0,
831831
"elevation": 0,
832-
"minWidth": 88,
832+
"minWidth": 64,
833833
"shadowColor": "#000000",
834834
"shadowOffset": Object {
835835
"height": NaN,

src/components/__tests__/__snapshots__/Snackbar.test.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ exports[`renders snackbar with action button 1`] = `
244244
"elevation": 0,
245245
"marginHorizontal": 8,
246246
"marginVertical": 6,
247-
"minWidth": 64,
247+
"minWidth": "auto",
248248
"shadowColor": "#000000",
249249
"shadowOffset": Object {
250250
"height": NaN,

0 commit comments

Comments
 (0)