EDD-31: Remove form from checkbox header

nasa · Oct 13, 2023 · e3c3685 · e3c3685
1 parent d4b79e8
commit e3c3685
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 27 deletions.
diff --git a/src/app/components/Checkbox/Checkbox.jsx b/src/app/components/Checkbox/Checkbox.jsx
@@ -44,31 +44,29 @@ const Checkbox = ({
   labelNote,
   onChange
 }) => (
-  <form>
-    <div className={styles.wrapper}>
-      <RadixCheckbox.Root
-        className={styles.checkboxRoot}
-        defaultChecked={defaultChecked}
-        id={id}
-        checked={checked}
-        onCheckedChange={onChange}
-      >
-        <RadixCheckbox.Indicator className={styles.checkboxIndicator}>
-          <FaCheck className={styles.checkIcon} />
-        </RadixCheckbox.Indicator>
-      </RadixCheckbox.Root>
-      <label className={styles.label} htmlFor={id}>
-        {label}
-        {
-          labelNote && (
-            <span className={styles.labelNote}>
-              {labelNote}
-            </span>
-          )
-        }
-      </label>
-    </div>
-  </form>
+  <div className={styles.wrapper}>
+    <RadixCheckbox.Root
+      className={styles.checkboxRoot}
+      defaultChecked={defaultChecked}
+      id={id}
+      checked={checked}
+      onCheckedChange={onChange}
+    >
+      <RadixCheckbox.Indicator className={styles.checkboxIndicator}>
+        <FaCheck className={styles.checkIcon} />
+      </RadixCheckbox.Indicator>
+    </RadixCheckbox.Root>
+    <label className={styles.label} htmlFor={id}>
+      {label}
+      {
+        labelNote && (
+          <span className={styles.labelNote}>
+            {labelNote}
+          </span>
+        )
+      }
+    </label>
+  </div>
 )
 
 Checkbox.defaultProps = {

diff --git a/src/app/components/Checkbox/Checkbox.module.scss b/src/app/components/Checkbox/Checkbox.module.scss
@@ -1,6 +1,6 @@
 .wrapper {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .checkboxRoot {
@@ -45,7 +45,7 @@
 
 .label {
   padding-left: var(--size__200);
-  color: var(--color__text--normal);
+  color: inherit;
   font-size: 0.875rem;
   line-height: 1.25;
   text-align: left;

diff --git a/src/app/components/FileDownloadsHeader/FileDownloadsHeader.jsx b/src/app/components/FileDownloadsHeader/FileDownloadsHeader.jsx
@@ -343,10 +343,21 @@ const FileDownloadsHeader = ({
           onChange={
             () => {
               setHideCompleted(!hideCompleted)
+        <div className={styles.footerSecondary}>
+          <Checkbox
+            id="hideCompleted"
+            label="Hide Completed"
+            onChange={
+              () => {
+                setHideCompleted(!hideCompleted)
+              }
             }
           }
           checked={hideCompleted}
         />
+            checked={hideCompleted}
+          />
+        </div>
       </div>
     </div>
   )

diff --git a/src/app/components/FileDownloadsHeader/FileDownloadsHeader.module.scss b/src/app/components/FileDownloadsHeader/FileDownloadsHeader.module.scss
@@ -141,6 +141,12 @@
     color: var(--color__gray);
     font-size: var(--text__smaller);
   }
+.footerSecondary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color__text--normal);
+}
 }
 
 @keyframes spinnerRotate {