🐛 fix active/checked state on mobile

owid · Dec 13, 2024 · 64f4747 · 64f4747
1 parent 28ba2e4
commit 64f4747
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -40,24 +40,21 @@
         svg {
             font-size: 10px;
             padding-left: 0.75px;
+            display: none;
         }
     }
 
     input:focus-visible + .custom {
         outline: 2px solid $controls-color;
     }
 
-    input:active + .custom {
-        background: $active-fill;
-    }
-
     input:checked + .custom {
         background: $active-fill;
         border-color: $active-fill;
-    }
 
-    input:checked:active + .custom {
-        background: white;
+        svg {
+            display: block;
+        }
     }
 
     .label {

diff --git a/packages/@ourworldindata/components/src/Checkbox.tsx b/packages/@ourworldindata/components/src/Checkbox.tsx
@@ -19,7 +19,7 @@ export class Checkbox extends React.Component<{
                         onChange={onChange}
                     />
                     <div className="custom">
-                        {checked && <FontAwesomeIcon icon={faCheck} />}
+                        <FontAwesomeIcon icon={faCheck} />
                     </div>
                     <div className="label">{label}</div>
                 </label>

diff --git a/packages/@ourworldindata/components/src/RadioButton.scss b/packages/@ourworldindata/components/src/RadioButton.scss
@@ -41,13 +41,19 @@
             height: math.div($radio-size, 2);
             background-color: $active-fill;
             border-radius: 50%;
+            display: none;
         }
     }
 
     input:focus-visible + .outer {
         outline: 2px solid $controls-color;
     }
 
+    input:active + .outer .inner,
+    input:checked + .outer .inner {
+        display: block;
+    }
+
     .label {
         @include grapher_label-2-regular;
         padding-left: $radio-size + 8px;

diff --git a/packages/@ourworldindata/components/src/RadioButton.tsx b/packages/@ourworldindata/components/src/RadioButton.tsx
@@ -19,7 +19,7 @@ export class RadioButton extends React.Component<{
                         onChange={onChange}
                     />
                     <div className="outer">
-                        {checked && <div className="inner" />}
+                        <div className="inner" />
                     </div>
                     <div className="label">{label}</div>
                 </label>