fix: Remove margin Safari sets on buttons (#1529)

Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · Aug 26, 2024 · 2ccc1bc · 2ccc1bc
1 parent 302ae75
commit 2ccc1bc
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 4 deletions.
diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
@@ -19,9 +19,16 @@
   margin-inline: 0;
 }
 
+@mixin reset-button {
+  border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+
+  // [1] Remove the margin in older Safari.
+}
+
 .ams-accordion__button {
   background-color: transparent;
-  border: 0;
   color: var(--ams-accordion-button-color);
   cursor: pointer;
   display: flex;
@@ -35,6 +42,8 @@
   padding-inline: var(--ams-accordion-button-padding-inline);
   text-align: start;
 
+  @include reset-button;
+
   &:focus {
     outline-offset: var(--ams-accordion-button-focus-outline-offset);
   }

diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
@@ -7,6 +7,10 @@
 
 @mixin reset-button {
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-button {

diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
@@ -79,6 +79,7 @@
   font-weight: var(--ams-page-menu-item-font-weight);
   line-height: var(--ams-page-menu-item-line-height);
   margin-block: 0;
+  margin-inline: 0;
   padding-inline: 0 1.875rem;
   text-align: center;
   touch-action: manipulation;

diff --git a/packages/css/src/components/icon-button/icon-button.scss b/packages/css/src/components/icon-button/icon-button.scss
@@ -5,8 +5,12 @@
 
 @mixin reset {
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
   padding-block: 0;
   padding-inline: 0;
+
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-icon-button {

diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
@@ -71,10 +71,10 @@
 
 @mixin reset-button {
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
 
-  // Reset margins added by Safari on iOS
-  margin-block: 0;
-  margin-inline: 0;
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-search-field__button {

diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
@@ -8,6 +8,10 @@
 @mixin reset-button {
   background-color: transparent;
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-tabs {