Use non-logical poperties for button padding (#11363)

Tested in Safari 14.1 🧭 👍 

| Before | After |
| --- | --- |
| <img width="465" alt="before"
src="https://github.com/Shopify/polaris/assets/11774595/856b3485-055b-4c39-84f8-ffe7113b92e0">
| <img width="465" alt="after"
src="https://github.com/Shopify/polaris/assets/11774595/416746c6-a4b7-471d-8d16-1d33e8b008a3">
|

Author: sam-b-rose

.changeset/hot-keys-develop.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed Button padding regression in Safari 14

polaris-react/src/components/Button/Button.module.scss

@@ -28,9 +28,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--pc-button-gap);
-  padding-block: var(--pc-button-padding-block);
-  padding-inline: var(--pc-button-padding-inline);
-
+  padding: var(--pc-button-padding-block) var(--pc-button-padding-inline);
   background: var(--pc-button-bg);
   border: none;
   border-radius: var(--p-border-radius-200);
@@ -174,8 +172,8 @@
 .variantPlain,
 .variantMonochromePlain {
   --pc-button-bg_disabled: transparent;
-  margin-block: calc(-1 * var(--pc-button-padding-block));
-  margin-inline: calc(-1 * var(--pc-button-padding-inline));
+  margin: calc(-1 * var(--pc-button-padding-block))
+    calc(-1 * var(--pc-button-padding-inline));
   font-size: var(--p-font-size-325);
   font-weight: var(--p-font-weight-regular);
   line-height: var(--p-font-line-height-400);
@@ -301,8 +299,8 @@
 }
 
 .iconOnly:is(.variantTertiary) {
-  margin-block: calc(-1 * var(--pc-button-padding-block));
-  margin-inline: calc(-1 * var(--pc-button-padding-inline));
+  margin: calc(-1 * var(--pc-button-padding-block))
+    calc(-1 * var(--pc-button-padding-inline));
 }
 
 .iconOnly:is(.variantTertiary, .variantPlain, .variantMonochromePlain):not(.toneCritical) {
@@ -351,7 +349,7 @@
 
 // ICON
 .Icon {
-  margin-block: calc(-1 * var(--p-space-050));
+  margin: calc(-1 * var(--p-space-050)) 0;
 }
 
 // SPINNER