Merge pull request #142 from JeffreyMFarley/fix-agg-checks

Fix checkbox styling for all browsers
cfpb · Apr 9, 2019 · 5d12859 · 5d12859
2 parents 79d905f + 4b8fa4a
commit 5d12859
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 18 deletions.
diff --git a/src/Filters/Aggregation.less b/src/Filters/Aggregation.less
@@ -39,7 +39,6 @@
 
         .bucket-key {
           max-width: ~"calc(100% - 95px)";  // @max-count-width + @bucket-indent
-          text-indent: -1 * @bucket-indent;
           vertical-align: top;
         }
 

diff --git a/src/Filters/AggregationItem.jsx b/src/Filters/AggregationItem.jsx
@@ -9,6 +9,10 @@ export const AggregationItem = ( { item, fieldName, active, onClick } ) => {
   const liStyle = 'layout-row m-form-field m-form-field__checkbox'
   const id = fieldName + item.key.replace( ' ', '' )
 
+  // 2019-04-09 JMF
+  // The seemingly do-nothing <label className="a-label"></label>
+  // helps maintain consistent spacing with AggBranch in IE/Chromw/Firefox
+
   return (
         <li className={liStyle}>
             <input type="checkbox" className="flex-fixed a-checkbox"
@@ -17,7 +21,8 @@ export const AggregationItem = ( { item, fieldName, active, onClick } ) => {
                    id={id}
                    onChange={onClick}
             />
-            <label className="a-label flex-all bucket-key body-copy"
+            <label className="a-label"></label>
+            <label className="flex-all bucket-key body-copy"
                    htmlFor={id}>
               {value}
             </label>

diff --git a/src/Filters/__tests__/__snapshots__/AggregationBranch.spec.jsx.snap b/src/Filters/__tests__/__snapshots__/AggregationBranch.spec.jsx.snap
@@ -54,7 +54,10 @@ exports[`component::AggregationBranch snapshots renders with all checked 1`] = `
         type="checkbox"
       />
       <label
-        className="a-label flex-all bucket-key body-copy"
+        className="a-label"
+      />
+      <label
+        className="flex-all bucket-key body-copy"
         htmlFor="issuefoo•bar"
       >
         bar
@@ -79,7 +82,10 @@ exports[`component::AggregationBranch snapshots renders with all checked 1`] = `
         type="checkbox"
       />
       <label
-        className="a-label flex-all bucket-key body-copy"
+        className="a-label"
+      />
+      <label
+        className="flex-all bucket-key body-copy"
         htmlFor="issuefoo•baz"
       >
         baz
@@ -104,7 +110,10 @@ exports[`component::AggregationBranch snapshots renders with all checked 1`] = `
         type="checkbox"
       />
       <label
-        className="a-label flex-all bucket-key body-copy"
+        className="a-label"
+      />
+      <label
+        className="flex-all bucket-key body-copy"
         htmlFor="issuefoo•qaz"
       >
         qaz
@@ -175,7 +184,10 @@ exports[`component::AggregationBranch snapshots renders with indeterminate 1`] =
         type="checkbox"
       />
       <label
-        className="a-label flex-all bucket-key body-copy"
+        className="a-label"
+      />
+      <label
+        className="flex-all bucket-key body-copy"
         htmlFor="issuefoo•bar"
       >
         bar
@@ -200,7 +212,10 @@ exports[`component::AggregationBranch snapshots renders with indeterminate 1`] =
         type="checkbox"
       />
       <label
-        className="a-label flex-all bucket-key body-copy"
+        className="a-label"
+      />
+      <label
+        className="flex-all bucket-key body-copy"
         htmlFor="issuefoo•baz"
       >
         baz
@@ -225,7 +240,10 @@ exports[`component::AggregationBranch snapshots renders with indeterminate 1`] =
         type="checkbox"
       />
       <label
-        className="a-label flex-all bucket-key body-copy"
+        className="a-label"
+      />
+      <label
+        className="flex-all bucket-key body-copy"
         htmlFor="issuefoo•qaz"
       >
         qaz

diff --git a/src/Filters/__tests__/__snapshots__/AggregationItem.spec.jsx.snap b/src/Filters/__tests__/__snapshots__/AggregationItem.spec.jsx.snap
@@ -13,7 +13,10 @@ exports[`component:AggregationItemFilter renders without crashing 1`] = `
     type="checkbox"
   />
   <label
-    className="a-label flex-all bucket-key body-copy"
+    className="a-label"
+  />
+  <label
+    className="flex-all bucket-key body-copy"
     htmlFor="fieldNamefoo"
   >
     foo

diff --git a/src/Filters/__tests__/__snapshots__/Company.spec.jsx.snap b/src/Filters/__tests__/__snapshots__/Company.spec.jsx.snap
@@ -64,7 +64,10 @@ exports[`component::Company snapshots renders without crashing 1`] = `
         type="checkbox"
       />
       <label
-        className="a-label flex-all bucket-key body-copy"
+        className="a-label"
+      />
+      <label
+        className="flex-all bucket-key body-copy"
         htmlFor="companyMonoclePopper Inc"
       >
         Monocle Popper Inc

diff --git a/src/Filters/__tests__/__snapshots__/FederalState.spec.jsx.snap b/src/Filters/__tests__/__snapshots__/FederalState.spec.jsx.snap
@@ -64,7 +64,10 @@ exports[`component::FederalState initial state renders without crashing 1`] = `
         type="checkbox"
       />
       <label
-        className="a-label flex-all bucket-key body-copy"
+        className="a-label"
+      />
+      <label
+        className="flex-all bucket-key body-copy"
         htmlFor="stateDC"
       >
         District Of Columbia (DC)

diff --git a/src/Filters/__tests__/__snapshots__/Issue.spec.jsx.snap b/src/Filters/__tests__/__snapshots__/Issue.spec.jsx.snap
@@ -143,7 +143,10 @@ exports[`component:Issue snapshots only shows the first five items 1`] = `
           type="checkbox"
         />
         <label
-          className="a-label flex-all bucket-key body-copy"
+          className="a-label"
+        />
+        <label
+          className="flex-all bucket-key body-copy"
           htmlFor="issueLoanservicing, payments, escrow account"
         >
           Loan servicing, payments, escrow account
@@ -168,7 +171,10 @@ exports[`component:Issue snapshots only shows the first five items 1`] = `
           type="checkbox"
         />
         <label
-          className="a-label flex-all bucket-key body-copy"
+          className="a-label"
+        />
+        <label
+          className="flex-all bucket-key body-copy"
           htmlFor="issueLoanmodification,collection,foreclosure"
         >
           Loan modification,collection,foreclosure
@@ -193,7 +199,10 @@ exports[`component:Issue snapshots only shows the first five items 1`] = `
           type="checkbox"
         />
         <label
-          className="a-label flex-all bucket-key body-copy"
+          className="a-label"
+        />
+        <label
+          className="flex-all bucket-key body-copy"
           htmlFor="issueDealingwith my lender or servicer"
         >
           Dealing with my lender or servicer

diff --git a/src/Filters/__tests__/__snapshots__/Product.spec.jsx.snap b/src/Filters/__tests__/__snapshots__/Product.spec.jsx.snap
@@ -130,7 +130,10 @@ exports[`component:Product snapshots only shows the first five items 1`] = `
           type="checkbox"
         />
         <label
-          className="a-label flex-all bucket-key body-copy"
+          className="a-label"
+        />
+        <label
+          className="flex-all bucket-key body-copy"
           htmlFor="productCreditreporting"
         >
           Credit reporting
@@ -155,7 +158,10 @@ exports[`component:Product snapshots only shows the first five items 1`] = `
           type="checkbox"
         />
         <label
-          className="a-label flex-all bucket-key body-copy"
+          className="a-label"
+        />
+        <label
+          className="flex-all bucket-key body-copy"
           htmlFor="productStudentloan"
         >
           Student loan
@@ -180,7 +186,10 @@ exports[`component:Product snapshots only shows the first five items 1`] = `
           type="checkbox"
         />
         <label
-          className="a-label flex-all bucket-key body-copy"
+          className="a-label"
+        />
+        <label
+          className="flex-all bucket-key body-copy"
           htmlFor="productCreditcard or prepaid card"
         >
           Credit card or prepaid card

diff --git a/src/Filters/__tests__/__snapshots__/ZipCode.spec.jsx.snap b/src/Filters/__tests__/__snapshots__/ZipCode.spec.jsx.snap
@@ -64,7 +64,10 @@ exports[`component::ZipCode snapshots renders without crashing 1`] = `
         type="checkbox"
       />
       <label
-        className="a-label flex-all bucket-key body-copy"
+        className="a-label"
+      />
+      <label
+        className="flex-all bucket-key body-copy"
         htmlFor="zip_code300XX"
       >
         300XX