Remove autocheck + status-indicator styles (#2390)

* Remove autocheck styles * Remove `status-indicator` * Create beige-badgers-perform.md * Lint
primer · Feb 24, 2023 · 73ae8ec · 73ae8ec
1 parent 3ceb196
commit 73ae8ec
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 104 deletions.
diff --git a/.changeset/beige-badgers-perform.md b/.changeset/beige-badgers-perform.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Remove `autocheck` + `status-indicator` styles
diff --git a/src/forms/form-validation.scss b/src/forms/form-validation.scss
@@ -1,110 +1,6 @@
-// Needs refactoring
 // stylelint-disable selector-no-qualifying-type, selector-max-type
-dl.form-group > dd, // TODO: Deprecate
-.form-group > .form-group-body {
-  .form-control {
-    &.is-autocheck-loading,
-    &.is-autocheck-successful,
-    &.is-autocheck-errored {
-      // stylelint-disable-next-line primer/spacing
-      padding-right: 30px; // Leave some space for our validation icons
-    }
-
-    &.is-autocheck-loading {
-      background-image: url('/images/spinners/octocat-spinner-16px.gif');
-    }
-
-    &.is-autocheck-successful {
-      background-image: url('/images/modules/ajax/success.png');
-    }
-
-    &.is-autocheck-errored {
-      background-image: url('/images/modules/ajax/error.png');
-    }
-  }
-}
-
-// Retinization of form validation icons that aren't octicons yet
-@include retina-media-query {
-  dl.form-group > dd, // TODO: Deprecate
-  .form-group > .form-group-body {
-    .form-control {
-      &.is-autocheck-loading,
-      &.is-autocheck-successful,
-      &.is-autocheck-errored {
-        background-size: 16px 16px;
-      }
-
-      &.is-autocheck-loading {
-        background-image: url('/images/spinners/octocat-spinner-32.gif');
-      }
-
-      &.is-autocheck-successful {
-        background-image: url('/images/modules/ajax/success@2x.png');
-      }
-
-      &.is-autocheck-errored {
-        background-image: url('/images/modules/ajax/error@2x.png');
-      }
-    }
-  }
-}
 
 // Inline verification
-// This overrides primer's inline form stuff
-.status-indicator {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  // stylelint-disable-next-line primer/spacing
-  margin-left: 5px;
-
-  .octicon {
-    display: none;
-  }
-}
-
-.status-indicator-success {
-  // Override primer
-  &::before {
-    content: '';
-  }
-
-  .octicon-check {
-    display: inline-block;
-    color: var(--color-success-fg);
-    fill: var(--color-success-fg);
-  }
-
-  .octicon-x {
-    display: none;
-  }
-}
-
-.status-indicator-failed {
-  // Override primer
-  &::before {
-    content: '';
-  }
-
-  .octicon-check {
-    display: none;
-  }
-
-  .octicon-x {
-    display: inline-block;
-    color: var(--color-danger-fg);
-    fill: var(--color-danger-fg);
-  }
-}
-
-.status-indicator-loading {
-  width: 16px;
-  background-image: url('/images/spinners/octocat-spinner-32-EAF2F5.gif');
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-size: 16px;
-}
 
 .inline-form {
   display: inline-block;