fix(Button): adjust padding for icon-only buttons (#19991)

* fix(Button): adjust padding for icon-only buttons

* fix(button): update icon-only button style for better alignment in react

* fix(button): remove unnecessary empty lines

---------

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

Author: Nozziel

packages/styles/scss/components/button/_button.scss

@@ -150,17 +150,12 @@
   }
 
   .#{$prefix}--btn--icon-only {
+    align-items: center;
     justify-content: center;
     padding: 0;
     block-size: layout.size('height');
     inline-size: layout.size('height');
-    // -1px to compensate for border width
-    padding-block-start: min(
-      calc(
-        (layout.size('height') - convert.to-rem(16px)) / 2 - convert.to-rem(1px)
-      ),
-      var(--temp-padding-block-max)
-    );
+    padding-block-start: 0;
 
     > :first-child {
       min-inline-size: convert.to-rem(16px);

packages/web-components/src/components/button/button.scss

@@ -100,22 +100,25 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-button) {
+  .#{$prefix}--btn--icon-only {
+    align-items: center;
+    padding-block-start: 0;
+
+    &.#{$prefix}--btn--selected,
+    &.#{$prefix}--btn--expressive {
+      padding: $spacing-03;
+    }
+  }
+}
+
 :host(#{$prefix}-button[kind='ghost']) {
   .#{$prefix}--btn--ghost {
     &:hover,
     &:active {
       outline: none;
     }
 
-    &.#{$prefix}--btn--icon-only {
-      padding-block-start: 0;
-
-      &.#{$prefix}--btn--selected,
-      &.#{$prefix}--btn--expressive {
-        padding: $spacing-03;
-      }
-    }
-
     &:not(:focus) {
       box-shadow: none;
     }