From 6777316b10ae772fe70e4821536c6e9d8d61b30a Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Fri, 9 Aug 2024 09:55:07 -0500
Subject: [PATCH] fix(Checkbox): specify a font size for the checked glyph
 (#2030)

- add story to test layout
- update snapshots
---
 src/components/Checkbox/Checkbox.module.css   |  6 +-
 src/components/Checkbox/Checkbox.stories.tsx  | 20 +++++++
 .../__snapshots__/Checkbox.test.tsx.snap      | 57 ++++++++++++++-----
 3 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
index 92fa8d8b5..a8a89f47b 100644
--- a/src/components/Checkbox/Checkbox.module.css
+++ b/src/components/Checkbox/Checkbox.module.css
@@ -25,8 +25,7 @@
   place-content: center;
 
   border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  
+  font: var(--eds-theme-typography-body-md);
 }
 
 .checkbox__input:checked::before {
@@ -38,6 +37,9 @@
   one. In other words, the height/width here need to match the expected viewbox for the path. */
   height: calc(var(--eds-size-3) / 16 * 1rem);
   width: calc(var(--eds-size-3) / 16 * 1rem);
+
+  /* use the platform's font face, which defines the checkbox glyph to use */
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .checkbox__input:checked {
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 04ba05f87..f0e81a232 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -27,6 +27,9 @@ export const WithSublabel: Story = {
   args: { subLabel: 'Additional descriptive text' },
 };
 
+/**
+ * Checkboxes can have an error state
+ */
 export const Error: Story = {
   args: {
     isError: true,
@@ -34,6 +37,9 @@ export const Error: Story = {
   },
 };
 
+/**
+ * Checkboxes can, of course, can be checked
+ */
 export const Checked: Story = {
   ...Default,
   args: {
@@ -41,6 +47,20 @@ export const Checked: Story = {
   },
 };
 
+/**
+ * The checkbox glyph is not affected by any wrapping of font resizing
+ */
+export const GlyphIsConsistent: Story = {
+  ...Default,
+  args: {
+    defaultChecked: true,
+  },
+  decorators: [(Story) => <div style={{ fontSize: '10px' }}>{Story()}</div>],
+};
+
+/**
+ * Checkboxes can be in an indeterminate state, marking a partially checked state
+ */
 export const Indeterminate: Story = {
   args: {
     indeterminate: true,
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index a2f69fb6c..53260e4dc 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
       <input
         class="checkbox__input"
         disabled=""
-        id=":r5:"
+        id=":r6:"
         type="checkbox"
       />
       <div
@@ -75,7 +75,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
         <label
           aria-disabled="true"
           class="label label--lg label--disabled"
-          for=":r5:"
+          for=":r6:"
         >
           Disabled
         </label>
@@ -88,7 +88,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
         checked=""
         class="checkbox__input"
         disabled=""
-        id=":r6:"
+        id=":r7:"
         type="checkbox"
       />
       <div
@@ -97,7 +97,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
         <label
           aria-disabled="true"
           class="label label--lg label--disabled"
-          for=":r6:"
+          for=":r7:"
         >
           Disabled
         </label>
@@ -109,7 +109,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
       <input
         class="checkbox__input"
         disabled=""
-        id=":r7:"
+        id=":r8:"
         type="checkbox"
       />
       <div
@@ -118,7 +118,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
         <label
           aria-disabled="true"
           class="label label--lg label--disabled"
-          for=":r7:"
+          for=":r8:"
         >
           Disabled
         </label>
@@ -135,7 +135,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 2`] = `
   <input
     class="checkbox__input"
     disabled=""
-    id=":ra:"
+    id=":rb:"
     type="checkbox"
   />
   <div
@@ -144,7 +144,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 2`] = `
     <label
       aria-disabled="true"
       class="label label--lg label--disabled"
-      for=":ra:"
+      for=":rb:"
     >
       Disabled
     </label>
@@ -178,6 +178,37 @@ exports[`<Checkbox /> Error story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Checkbox /> GlyphIsConsistent story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    style="font-size: 10px;"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        checked=""
+        class="checkbox__input"
+        id=":r4:"
+        type="checkbox"
+      />
+      <div
+        class="checkbox__labels"
+      >
+        <label
+          class="label label--lg"
+          for=":r4:"
+        >
+          Checkbox
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Checkbox /> Indeterminate story renders snapshot 1`] = `
 <div
   class="p-8"
@@ -187,7 +218,7 @@ exports[`<Checkbox /> Indeterminate story renders snapshot 1`] = `
   >
     <input
       class="checkbox__input"
-      id=":r4:"
+      id=":r5:"
       type="checkbox"
     />
     <div
@@ -195,7 +226,7 @@ exports[`<Checkbox /> Indeterminate story renders snapshot 1`] = `
     >
       <label
         class="label label--lg"
-        for=":r4:"
+        for=":r5:"
       >
         Checkbox
       </label>
@@ -213,7 +244,7 @@ exports[`<Checkbox /> LongLabels story renders snapshot 1`] = `
   >
     <input
       class="checkbox__input"
-      id=":r9:"
+      id=":ra:"
       type="checkbox"
     />
     <div
@@ -221,7 +252,7 @@ exports[`<Checkbox /> LongLabels story renders snapshot 1`] = `
     >
       <label
         class="label label--lg"
-        for=":r9:"
+        for=":ra:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit
       </label>
@@ -271,7 +302,7 @@ exports[`<Checkbox /> WithoutVisibleLabel story renders snapshot 1`] = `
     <input
       aria-label="a checkbox has no name"
       class="checkbox__input"
-      id=":r8:"
+      id=":r9:"
       type="checkbox"
     />
     <div