fix(Checkbox): specify a font size for the checked glyph (#2030)

- add story to test layout
- update snapshots

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 {

src/components/Checkbox/Checkbox.stories.tsx

@@ -27,20 +27,40 @@ export const WithSublabel: Story = {
   args: { subLabel: 'Additional descriptive text' },
 };
 
+/**
+ * Checkboxes can have an error state
+ */
 export const Error: Story = {
   args: {
     isError: true,
     label: 'In error state',
   },
 };
 
+/**
+ * Checkboxes can, of course, can be checked
+ */
 export const Checked: Story = {
   ...Default,
   args: {
     defaultChecked: true,
   },
 };
 
+/**
+ * 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,

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,15 +218,15 @@ exports[`<Checkbox /> Indeterminate story renders snapshot 1`] = `
   >
     <input
       class="checkbox__input"
-      id=":r4:"
+      id=":r5:"
       type="checkbox"
     />
     <div
       class="checkbox__labels"
     >
       <label
         class="label label--lg"
-        for=":r4:"
+        for=":r5:"
       >
         Checkbox
       </label>
@@ -213,15 +244,15 @@ exports[`<Checkbox /> LongLabels story renders snapshot 1`] = `
   >
     <input
       class="checkbox__input"
-      id=":r9:"
+      id=":ra:"
       type="checkbox"
     />
     <div
       class="checkbox__labels"
     >
       <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