From e559604058532add18959521060e6d71ce63b096 Mon Sep 17 00:00:00 2001
From: Ben Scott <ben.scott@shopify.com>
Date: Fri, 29 Jan 2021 17:24:54 -0800
Subject: [PATCH] Refactor and simplify Badge css

- By using a css variable we can remove the usage a mixin that added
  additional selectors
- Simplify print style for progressPartiallyComplete by using a really
  large spread and an offset to make it look like half of the box has
  been colored in. Thus avoiding needing a pseudo-element
- Use regular selector chaining instead of nesting
---
 UNRELEASED.md                   |  1 +
 src/components/Badge/Badge.scss | 89 ++++++++++++++-------------------
 2 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 83c9c2d41e5..b6e00a21126 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -9,6 +9,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Bug fixes
 
 - Fixed virtual cursor leaving dialog in `Modal`, `Navigation` and `Sheet` ([#3931](https://github.com/Shopify/polaris-react/pull/3931))
+- Simplified output of `Badge`'s css ([#3950](https://github.com/Shopify/polaris-react/pull/3950))
 
 ### Documentation
 
diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss
index 241f0a3f5f0..e21eaff5069 100644
--- a/src/components/Badge/Badge.scss
+++ b/src/components/Badge/Badge.scss
@@ -9,14 +9,8 @@ $vertical-padding: rem(3px);
 $pip-size: rem(10px);
 $pip-spacing: ($height - $pip-size) / 2;
 
-@mixin pip-color($color) {
-  .Pip {
-    color: $color;
-  }
-}
-
 .Badge {
-  @include pip-color(var(--p-icon));
+  --p-component-badge-pip-color: var(--p-icon);
   display: inline-flex;
   align-items: center;
   padding: $vertical-padding $horizontal-padding;
@@ -40,31 +34,31 @@ $pip-spacing: ($height - $pip-size) / 2;
 }
 
 .statusSuccess {
-  @include pip-color(var(--p-icon-success));
+  --p-component-badge-pip-color: var(--p-icon-success);
   background-color: var(--p-surface-success);
   color: var(--p-text);
 }
 
 .statusInfo {
-  @include pip-color(var(--p-icon-highlight));
+  --p-component-badge-pip-color: var(--p-icon-highlight);
   background-color: var(--p-surface-highlight);
   color: var(--p-text);
 }
 
 .statusAttention {
-  @include pip-color(color('yellow', 'dark'));
+  --p-component-badge-pip-color: color('yellow', 'dark');
   background-color: color('yellow', 'light');
   color: var(--p-text);
 }
 
 .statusWarning {
-  @include pip-color(var(--p-icon-warning));
+  --p-component-badge-pip-color: var(--p-icon-warning);
   background-color: var(--p-surface-warning);
   color: var(--p-text, color('orange', 'text'));
 }
 
 .statusCritical {
-  @include pip-color(var(--p-icon-critical));
+  --p-component-badge-pip-color: var(--p-icon-critical);
   background-color: var(--p-surface-critical);
   color: var(--p-text);
 }
@@ -77,6 +71,7 @@ $pip-spacing: ($height - $pip-size) / 2;
 }
 
 .Pip {
+  color: var(--p-component-badge-pip-color);
   height: $pip-size;
   width: $pip-size;
   margin: 0 spacing(extra-tight) 0 ($pip-spacing - $horizontal-padding);
@@ -85,50 +80,42 @@ $pip-spacing: ($height - $pip-size) / 2;
   flex-shrink: 0;
 }
 
-.progressIncomplete {
-  .Pip {
-    background: transparent;
-  }
+.progressIncomplete .Pip {
+  background: transparent;
 }
 
-.progressPartiallyComplete {
-  .Pip {
-    background: linear-gradient(
-      to top,
-      currentColor,
-      currentColor 50%,
-      transparent 50%,
-      transparent
-    );
-
-    @media print {
-      position: relative;
-      overflow: hidden;
-
-      &::before {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 50%;
-        transform: translateY(100%);
-        box-shadow: 0 0 0 $pip-size currentColor inset;
-      }
-    }
+.progressPartiallyComplete .Pip {
+  background: linear-gradient(
+    to top,
+    currentColor,
+    currentColor 50%,
+    transparent 50%,
+    transparent
+  );
+
+  // Background colors may be stripped when printing, but box-shadow is not.
+  // We don't want to use box-shadow as the screen style as it gives a very
+  // slight halo effect
+  @media print {
+    background: none;
+    // 100px is an arbitrarily large number so that you can't see the curvature
+    // of the box shadow. y-offset is 3px larger than the spread to make it look
+    // like it is half-way down the pip (which is 6px tall)
+    box-shadow: 0 -103px 0 -100px currentColor inset;
   }
 }
 
-.progressComplete {
-  .Pip {
-    background: linear-gradient(
-      to top,
-      currentColor,
-      currentColor 50%,
-      currentColor 50%
-    );
-
-    @media print {
-      box-shadow: 0 0 0 $pip-size currentColor inset;
-    }
+.progressComplete .Pip {
+  background: currentColor;
+
+  // Background colors may be stripped when printing, but box-shadow is not.
+  // We don't want to use box-shadow as the screen style as it gives a very
+  // slight halo effect
+  @media print {
+    background: none;
+    // 100px is an arbitrarily large number so that you can't see the curvature
+    // of the box shadow.
+    box-shadow: 0 0 0 100px currentColor inset;
   }
 }