fix(button): icon don't overflow and buttons are aligned

Author: tripleWdotcom

packages/core/src/Button/__snapshots__/index.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`Button primary 1`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -169,6 +170,7 @@ exports[`Button primary 2`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -333,6 +335,7 @@ exports[`Button secondary 1`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -488,6 +491,7 @@ exports[`Button secondary 2`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -653,6 +657,7 @@ exports[`Button secondary 3`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -818,6 +823,7 @@ exports[`Button secondary 4`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -983,6 +989,7 @@ exports[`Button secondary 5`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -1161,6 +1168,7 @@ exports[`IconButton primary 1`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -1324,6 +1332,7 @@ exports[`IconButton primary 2`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -1498,6 +1507,7 @@ exports[`IconButton secondary 1`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -1719,6 +1729,7 @@ exports[`IconButton secondary 2`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -1951,6 +1962,7 @@ exports[`IconButton secondary 3`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -2172,6 +2184,7 @@ exports[`IconButton secondary 4`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -2441,6 +2454,7 @@ exports[`IconTextButton primary 1`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -2494,6 +2508,7 @@ exports[`IconTextButton primary 1`] = `
 }
 
 .c6 {
+  box-sizing: border-box;
   height: 32px;
   width: 32px;
   color: rgb(255,255,255);
@@ -2660,6 +2675,7 @@ exports[`IconTextButton primary 2`] = `
 }
 
 .c2 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -2713,6 +2729,7 @@ exports[`IconTextButton primary 2`] = `
 }
 
 .c6 {
+  box-sizing: border-box;
   height: 32px;
   width: 32px;
   color: rgb(255,255,255);

packages/core/src/Button/index.tsx

@@ -10,6 +10,7 @@ const BUTTON_MIN_WIDTH = '83px'
 
 //Common CSS for NativeButton and NativeIconTextButton
 const COMMON_STYLE = css`
+  vertical-align: middle;
   white-space: nowrap;
   height: ${componentSize.small};
   outline: none;
@@ -547,6 +548,7 @@ export const NativeIconTextButton = styled.button<{
 const IconContainer = styled(Icon)`
   ${({ theme }) => {
     return css`
+      box-sizing: border-box;
       height: ${componentSize.small};
       width: ${componentSize.small};
       color: ${theme.color.text00()};

packages/core/src/DateTimePicker/__snapshots__/index.test.tsx.snap

@@ -39,6 +39,7 @@ exports[`DateTimePicker DatePicker 1`] = `
 }
 
 .c4 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -86,6 +87,7 @@ exports[`DateTimePicker DatePicker 1`] = `
 }
 
 .c16 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -127,6 +129,7 @@ exports[`DateTimePicker DatePicker 1`] = `
 }
 
 .c19 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -1143,6 +1146,7 @@ exports[`DateTimePicker DateTimePicker 1`] = `
 }
 
 .c39 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -1189,6 +1193,7 @@ exports[`DateTimePicker DateTimePicker 1`] = `
 }
 
 .c42 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -2348,6 +2353,7 @@ exports[`DateTimePicker DateTimePicker 2`] = `
 }
 
 .c51 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -2394,6 +2400,7 @@ exports[`DateTimePicker DateTimePicker 2`] = `
 }
 
 .c54 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -3739,6 +3746,7 @@ exports[`DateTimePicker TimePickers 1`] = `
 }
 
 .c21 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -3785,6 +3793,7 @@ exports[`DateTimePicker TimePickers 1`] = `
 }
 
 .c24 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;

packages/core/src/FilePicker/__snapshots__/index.test.tsx.snap

@@ -26,6 +26,7 @@ exports[`FilePicker FilePicker 1`] = `
 }
 
 .c3 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -228,6 +229,7 @@ exports[`FilePicker FilePicker 2`] = `
 }
 
 .c3 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;

packages/core/src/Stepper/__snapshots__/index.test.tsx.snap

@@ -49,6 +49,7 @@ exports[`Stepper Stepper 1`] = `
 }
 
 .c13 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -457,6 +458,7 @@ exports[`Stepper Stepper 2`] = `
 }
 
 .c13 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;
@@ -826,6 +828,7 @@ exports[`Stepper Stepper 3`] = `
 }
 
 .c12 {
+  vertical-align: middle;
   white-space: nowrap;
   height: 32px;
   outline: none;

packages/docs/src/mdx/coreComponents/Button.mdx

@@ -21,9 +21,7 @@ Buttons allow users to take actions, and make choices, with a single tap.
 
 export const Wrapper = styled.div`
   > * {
-    vertical-align: middle;
-    margin-right: 4px;
-    margin-bottom: 4px;
+    margin: 4px;
   }
 `