From 5b64a4699a079a8976f2b83cfc923a77db3f5794 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 23 Dec 2019 14:56:23 +0000
Subject: [PATCH] fix(ui): margin should only be set between elements

Right now margin is set after each element rather than to enfore space between two elements
---
 .../Alert/__snapshots__/index.test.js.snap         | 14 +++++++-------
 .../Grid/AlertGrid/AlertGroup/Alert/index.js       |  2 +-
 .../Annotation/__snapshots__/index.test.js.snap    |  6 +++---
 .../Grid/AlertGrid/AlertGroup/Annotation/index.js  |  4 ++--
 .../GroupFooter/__snapshots__/index.test.js.snap   | 12 ++++++------
 .../__snapshots__/index.test.js.snap               |  2 +-
 ui/src/Styles/Components/AlertGroup.scss           |  7 +++++++
 ui/src/Styles/Components/BaseLabel.scss            |  2 --
 8 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
index cb904d652..d01292a75 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
@@ -10,7 +10,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
          aria-describedby=\\"tippy-tooltip-5\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
+      <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -41,7 +41,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
          aria-describedby=\\"tippy-tooltip-6\\"
          data-original-title=\\"Click to show annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
+      <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -88,7 +88,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
        aria-describedby=\\"tippy-tooltip-7\\"
        data-original-title=\\"This alert is inhibited by other alerts\\"
   >
-    <span class=\\"mr-1 badge badge-light components-label\\">
+    <span class=\\"badge badge-light components-label\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
@@ -138,7 +138,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
   <a href=\\"http://localhost\\"
      target=\\"_blank\\"
      rel=\\"noopener noreferrer\\"
-     class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
+     class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
   >
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
@@ -170,7 +170,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
          aria-describedby=\\"tippy-tooltip-1\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
+      <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -201,7 +201,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
          aria-describedby=\\"tippy-tooltip-2\\"
          data-original-title=\\"Click to show annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
+      <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -275,7 +275,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
   <a href=\\"http://localhost\\"
      target=\\"_blank\\"
      rel=\\"noopener noreferrer\\"
-     class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
+     class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
   >
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
index e695b7740..b336cad3d 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
@@ -103,7 +103,7 @@ const Alert = observer(
             .map(am => am.inhibitedBy.length)
             .reduce((sum, x) => sum + x) > 0 ? (
             <TooltipWrapper title="This alert is inhibited by other alerts">
-              <span className="mr-1 badge badge-light components-label">
+              <span className="badge badge-light components-label">
                 <FontAwesomeIcon className="text-success" icon={faVolumeMute} />
               </span>
             </TooltipWrapper>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
index 4df42bb40..07d01b4aa 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
@@ -5,7 +5,7 @@ exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
 <a href=\\"http://localhost/foo\\"
    target=\\"_blank\\"
    rel=\\"noopener noreferrer\\"
-   class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
+   class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
 >
   <svg aria-hidden=\\"true\\"
        focusable=\\"false\\"
@@ -32,7 +32,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
      class
      style=\\"display:inline-block;max-width:100%\\"
 >
-  <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
+  <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
          data-prefix=\\"fas\\"
@@ -59,7 +59,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
      class
      style=\\"display:inline-block;max-width:100%\\"
 >
-  <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
+  <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
          data-prefix=\\"fas\\"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
index 6a35f4b42..e22e2a1e3 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
@@ -61,7 +61,7 @@ const RenderNonLinkAnnotation = observer(
       const { name, value } = this.props;
 
       const className =
-        "mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100";
+        "mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100";
 
       if (!this.toggle.visible) {
         return (
@@ -110,7 +110,7 @@ const RenderLinkAnnotation = ({ name, value }) => {
       href={value}
       target="_blank"
       rel="noopener noreferrer"
-      className="components-label components-label-with-hover badge mr-1 components-grid-annotation-link"
+      className="components-label components-label-with-hover badge components-grid-annotation-link"
     >
       <FontAwesomeIcon icon={faExternalLinkAlt} /> {name}
     </a>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
index 527b8061b..57d660381 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -10,7 +10,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
          aria-describedby=\\"tippy-tooltip-1\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
+      <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -41,7 +41,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
          aria-describedby=\\"tippy-tooltip-2\\"
          data-original-title=\\"Click to show annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
+      <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -123,7 +123,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
   <a href=\\"http://link.example.com\\"
      target=\\"_blank\\"
      rel=\\"noopener noreferrer\\"
-     class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
+     class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
   >
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
@@ -155,7 +155,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
          aria-describedby=\\"tippy-tooltip-25\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
+      <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -186,7 +186,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
          aria-describedby=\\"tippy-tooltip-26\\"
          data-original-title=\\"Click to show annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
+      <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -268,7 +268,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
   <a href=\\"http://link.example.com\\"
      target=\\"_blank\\"
      rel=\\"noopener noreferrer\\"
-     class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
+     class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
   >
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index 5a0f71e36..6b0ae6795 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -260,7 +260,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             <a href=\\"http://example.com/#/silences/04d37636-2350-4878-b382-e0b50353230f\\"
                target=\\"_blank\\"
                rel=\\"noopener noreferrer\\"
-               class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
+               class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
             >
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
diff --git a/ui/src/Styles/Components/AlertGroup.scss b/ui/src/Styles/Components/AlertGroup.scss
index 2273ad172..674876a0a 100644
--- a/ui/src/Styles/Components/AlertGroup.scss
+++ b/ui/src/Styles/Components/AlertGroup.scss
@@ -14,3 +14,10 @@
 .card-body.components-grid-alertgrid-card {
   background-color: $alertgroup-body-bg !important;
 }
+
+.components-label:not(:last-child),
+div[data-tooltipped]:not(:last-child) > .components-label,
+.components-grid-annotation:not(:last-child),
+div[data-tooltipped]:not(:last-child) > .components-grid-annotation {
+  margin-right: 0.25rem;
+}
diff --git a/ui/src/Styles/Components/BaseLabel.scss b/ui/src/Styles/Components/BaseLabel.scss
index 701129f8b..22428dd62 100644
--- a/ui/src/Styles/Components/BaseLabel.scss
+++ b/ui/src/Styles/Components/BaseLabel.scss
@@ -6,8 +6,6 @@
 .components-label {
   border: 1px solid transparent;
 
-  margin-right: 0.25rem;
-
   overflow: hidden;
   max-width: 100%;
   text-overflow: ellipsis;