From 6ceec99f419cfc51f42252d4d420a102dd85b14f Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 28 Oct 2021 02:07:17 -0600
Subject: [PATCH] Buttons: Improves button styles to make them perfectly
 symmetrical (#40977) (#41021)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Buttons: Improves button styles to make them perfectly symmetrical

* Fixed icon vertical centering

(cherry picked from commit 6a2dc115451548ebd6dba58bd7a7daf6b770064d)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 .../grafana-ui/src/components/Button/Button.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index ea4896a7346..714808d9b88 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -115,8 +115,8 @@ export const getButtonStyles = (props: StyleProps) => {
   const { height, padding, fontSize } = getPropertiesForButtonSize(size, theme);
   const variantStyles = getPropertiesForVariant(theme, variant, fill);
   const disabledStyles = getPropertiesForDisabled(theme, variant, fill);
-
   const focusStyle = getFocusStyles(theme);
+  const paddingMinusBorder = theme.spacing.gridSize * padding - 1;
 
   return {
     button: css({
@@ -126,7 +126,7 @@ export const getButtonStyles = (props: StyleProps) => {
       fontSize: fontSize,
       fontWeight: theme.typography.fontWeightMedium,
       fontFamily: theme.typography.fontFamily,
-      padding: theme.spacing(0, padding),
+      padding: `0 ${paddingMinusBorder}px`,
       height: theme.spacing(height),
       // Deduct border from line-height for perfect vertical centering on windows and linux
       lineHeight: `${theme.spacing.gridSize * height - 2}px`,
@@ -150,10 +150,15 @@ export const getButtonStyles = (props: StyleProps) => {
       height: 16px;
       margin: ${theme.spacing(0, 1, 0, 0.5)};
     `,
-    icon: css`
-      margin-right: ${theme.spacing((iconOnly ? -padding : padding) / 2)};
-      margin-left: ${theme.spacing(-padding / 2)};
-    `,
+    icon: iconOnly
+      ? css({
+          // Important not to set margin bottom here as it would override internal icon bottom margin
+          marginRight: theme.spacing(-padding / 2),
+          marginLeft: theme.spacing(-padding / 2),
+        })
+      : css({
+          marginRight: theme.spacing(padding / 2),
+        }),
     content: css`
       display: flex;
       flex-direction: row;