From b96d85199f3040f2b5d3fa6868520177b676cdcb Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 11:26:51 -0500
Subject: [PATCH] Update checkbox to fix breakage with wordwrap.

---
 src/styles/common-error-styles.scss     |  1 +
 src/ux-components/checkbox/checkbox.vue | 82 +++++++------------------
 2 files changed, 22 insertions(+), 61 deletions(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index d7d1c019d..2ca852f66 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -22,6 +22,7 @@
   }
   &.ui-radio,
   &.ui-checkbox {
+    input[type=checkbox],
     input[type=radio]+label:before,
     input[type=checkbox]+label:before {
       border: 1px solid $red;
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index d84c5b1c6..10022b438 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,15 +1,15 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-  <div class="ui-checkbox d-flex" :class="[hasError ? 'has-error' : '']">
-    <input
-      type="checkbox"
-      aria-checked="false"
-      :name="checkboxName"
-      :id="buttonID"
-      :tabindex="tabIndex"
-      :aria-required="isRequired"
+  <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
+    <input class="form-check-input"
+    type="checkbox"
+    aria-checked="false"
+    :name="checkboxName"
+    :id="buttonID"
+    :tabindex="tabIndex"
+    :aria-required="isRequired"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-start" :for="buttonID">
       <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -34,61 +34,21 @@ export default {
 </script>
 
 <style lang="scss">
-.ui-checkbox {
-  position: relative;
-  input[type="checkbox"] {
-    position: absolute !important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
-        cursor: pointer;
-      }
+.form-check {
+  .form-check-input {
+    border: 1px solid $gray-500;
+    border-radius: 2px;
+    &:checked {
+      background-size: 125%;
+      border: 1px solid $blue;
     }
-    + label::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 2px;
-      flex-shrink: 0;
-    }
-    &:checked + label::before {
-      background: $blue;
-    }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 2px;
-      border-left: 2px solid $white;
-      border-bottom: 2px solid $white;
-      height: 6px;
-      width: 12px;
-      transform: rotate(-45deg);
-    }
-    &:hover + label::before {
+    &:focus {
       box-shadow: 0 0 0 4px $blue-300;
     }
-    &:focus + label::before {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:focus:checked + label::before {
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
+  }
+  &:hover {
+    .form-check-input {
+      box-shadow: 0 0 0 4px $blue-300;
     }
   }
 }