fix(components): remove default margin on Buttons

Safari adds a 2px default margin to buttons. beta
sumup-oss · Jul 29, 2020 · b48f3ec · b48f3ec
1 parent 33696bd
commit b48f3ec
Show file tree

Hide file tree

Showing 15 changed files with 95 additions and 0 deletions.
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -88,6 +88,7 @@ const baseStyles = ({ theme }: StyleProps) => css`
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   ${textMega({ theme })};
   text-align: center;

diff --git a/src/components/Button/__snapshots__/Button.spec.tsx.snap b/src/components/Button/__snapshots__/Button.spec.tsx.snap
@@ -16,6 +16,7 @@ exports[`Button styles should render a button with icon 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -105,6 +106,7 @@ exports[`Button styles should render a disabled button 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -173,6 +175,7 @@ exports[`Button styles should render a kilo button 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -240,6 +243,7 @@ exports[`Button styles should render a mega button 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -307,6 +311,7 @@ exports[`Button styles should render a primary button by default 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -374,6 +379,7 @@ exports[`Button styles should render a secondary button 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -441,6 +447,7 @@ exports[`Button styles should render a stretched button 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -509,6 +516,7 @@ exports[`Button styles should render a tertiary button 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap b/src/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap
@@ -16,6 +16,7 @@ exports[`ButtonGroup Center aligment should render with center alignment styles
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -75,6 +76,7 @@ exports[`ButtonGroup Center aligment should render with center alignment styles
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -199,6 +201,7 @@ exports[`ButtonGroup Left aligment should render with left alignment styles 1`]
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -258,6 +261,7 @@ exports[`ButtonGroup Left aligment should render with left alignment styles 1`]
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -430,6 +434,7 @@ exports[`ButtonGroup should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -489,6 +494,7 @@ exports[`ButtonGroup should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/Carousel/__snapshots__/Carousel.spec.js.snap b/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
@@ -328,6 +328,7 @@ exports[`Carousel styles should render with children as a function 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -909,6 +910,7 @@ exports[`Carousel styles should render with children as a node 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -1448,6 +1450,7 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -2044,6 +2047,7 @@ exports[`Carousel styles should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap b/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
@@ -31,6 +31,7 @@ exports[`Buttons styles should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap b/src/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap
@@ -16,6 +16,7 @@ exports[`CloseButton should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap b/src/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap
@@ -16,6 +16,7 @@ exports[`Hamburger should render with active styles when passed the isActive pro
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -191,6 +192,7 @@ exports[`Hamburger should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/IconButton/__snapshots__/IconButton.spec.tsx.snap b/src/components/IconButton/__snapshots__/IconButton.spec.tsx.snap
@@ -16,6 +16,7 @@ exports[`IconButton should render with the default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap
@@ -30,6 +30,7 @@ exports[`LoadingButton styles should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -185,6 +186,7 @@ exports[`LoadingButton styles should render with loading styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/Pagination/__snapshots__/Pagination.spec.tsx.snap b/src/components/Pagination/__snapshots__/Pagination.spec.tsx.snap
@@ -33,6 +33,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -120,6 +121,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -179,6 +181,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -236,6 +239,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -432,6 +436,7 @@ exports[`Pagination with more than 5 pages should render with default styles 1`]
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -507,6 +512,7 @@ exports[`Pagination with more than 5 pages should render with default styles 1`]
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap b/src/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap
@@ -28,6 +28,7 @@ exports[`PageList styles should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -87,6 +88,7 @@ exports[`PageList styles should render with default styles 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap b/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap
@@ -99,6 +99,7 @@ HTMLCollection [
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -264,6 +265,7 @@ HTMLCollection [
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap b/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
@@ -16,6 +16,7 @@ exports[`CloseButton styles should render and match snapshot when not visible 1`
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;
@@ -147,6 +148,7 @@ exports[`CloseButton styles should render and match snapshot when visible 1`] =
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;

diff --git a/src/components/Tag/__snapshots__/Tag.spec.tsx.snap b/src/components/Tag/__snapshots__/Tag.spec.tsx.snap
@@ -137,6 +137,7 @@ exports[`Tag when is selected should change the close icon color 1`] = `
   justify-content: center;
   width: auto;
   height: auto;
+  margin: 0;
   cursor: pointer;
   font-size: 16px;
   line-height: 24px;