Merge pull request #2032 from chanzuckerberg/release-v15.2.1

### [15.2.1](v15.2.0...v15.2.1) (2024-08-09) [Storybook](https://61313967cde49b003ae2a860-wzpwvsymfs.chromatic.com/) ### Bug Fixes * **Button:** update button padding to match design ([#2027](#2027)) ([15644d3](15644d3)) * **Checkbox:** specify a font size for the checked glyph ([#2030](#2030)) ([6777316](6777316)) * **Menu:** remove style overrides to Menu.Button ([#2029](#2029)) ([2ad7b4c](2ad7b4c))
chanzuckerberg · Aug 12, 2024 · cbe3b68 · cbe3b68
2 parents 186a2ce + 20e0df0
commit cbe3b68
Show file tree

Hide file tree

Showing 8 changed files with 903 additions and 579 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [15.2.1](https://github.com/chanzuckerberg/edu-design-system/compare/v15.2.0...v15.2.1) (2024-08-09)
+
+
+### Bug Fixes
+
+* **Button:** update button padding to match design ([#2027](https://github.com/chanzuckerberg/edu-design-system/issues/2027)) ([15644d3](https://github.com/chanzuckerberg/edu-design-system/commit/15644d38935d32a8660fb5ed47c404d68c8f36ff))
+* **Checkbox:** specify a font size for the checked glyph ([#2030](https://github.com/chanzuckerberg/edu-design-system/issues/2030)) ([6777316](https://github.com/chanzuckerberg/edu-design-system/commit/6777316b10ae772fe70e4821536c6e9d8d61b30a))
+* **Menu:** remove style overrides to Menu.Button ([#2029](https://github.com/chanzuckerberg/edu-design-system/issues/2029)) ([2ad7b4c](https://github.com/chanzuckerberg/edu-design-system/commit/2ad7b4c3380da2e3572646c75df455d53a13e504))
+
 ## [15.2.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.1.0...v15.2.0) (2024-07-25)
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "15.2.0",
+  "version": "15.2.1",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <[email protected]>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -112,10 +112,10 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@chanzuckerberg/axe-storybook-testing": "^8.0.2",
+    "@chanzuckerberg/axe-storybook-testing": "^8.2.0",
     "@chanzuckerberg/eslint-config-edu-js": "^1.1.0",
     "@chanzuckerberg/eslint-config-edu-ts": "^1.0.9",
     "@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9",
@@ -125,37 +125,37 @@
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
     "@geometricpanda/storybook-addon-badges": "^2.0.2",
-    "@omlet/cli": "^1.9.0",
+    "@omlet/cli": "^1.10.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^8.2.4",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/addon-mdx-gfm": "^8.2.4",
+    "@storybook/addon-a11y": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/addon-mdx-gfm": "^8.2.7",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/manager-api": "^8.2.4",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-webpack5": "^8.2.4",
-    "@storybook/test": "^8.2.4",
+    "@storybook/manager-api": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-webpack5": "^8.2.7",
+    "@storybook/test": "^8.2.7",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.2.4",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@storybook/theming": "^8.2.7",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/jsonfile": "^6",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^20.14.11",
+    "@types/node": "^20.14.14",
     "@types/react": "^18.3.3",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.0",
     "@types/react-portal": "^4.0.7",
     "@types/yargs": "^17.0.32",
-    "axe-core": "4.9.1",
-    "chromatic": "^11.5.5",
+    "axe-core": "4.10.0",
+    "chromatic": "^11.7.0",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
@@ -171,27 +171,27 @@
     "jest-preset-stylelint": "^6.3.2",
     "lint-staged": "^13.3.0",
     "plop": "^4.0.1",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.40",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-mixins": "^9.0.4",
-    "postcss-nested": "^6.0.1",
+    "postcss-nested": "^6.2.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.18.1",
+    "rollup": "^4.19.2",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "standard-version": "^9.5.0",
-    "storybook": "^8.2.4",
+    "storybook": "^8.2.7",
     "style-dictionary": "^3.9.2",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
-    "tailwindcss": "^3.4.6",
-    "ts-jest": "^29.2.3",
-    "typescript": "^5.5.2"
+    "tailwindcss": "^3.4.7",
+    "ts-jest": "^29.2.4",
+    "typescript": "^5.5.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -66,7 +66,7 @@
 .button--lg {
   align-items: center;
 
-  padding: calc(var(--eds-size-1) / 16 * 1rem) 1.25rem;
+  padding: calc(var(--eds-size-1) / 16 * 1rem) calc(var(--eds-size-2-and-half) / 16 * 1rem);
   font: var(--eds-theme-typography-button-lg);
 
   min-width:calc(var(--eds-size-9) / 16 * 1rem);
@@ -86,11 +86,11 @@
 }
 
 .button--sm {
-  padding: calc(var(--eds-size-half) / 16 * 1rem) 1.33333333rem;
+  padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-1-and-half) / 16 * 1rem);
   font: var(--eds-theme-typography-button-sm);
 
   min-width: calc(var(--eds-size-6) / 16 * 1rem);
-  max-width: calc(var(--eds-size-24) / 16 * 1rem);;
+  max-width: calc(var(--eds-size-24) / 16 * 1rem);
   max-height: calc(var(--eds-size-3) / 16 * 1rem);
 }
 

diff --git 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
@@ -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,

diff --git 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,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

diff --git a/src/components/Menu/Menu.module.css b/src/components/Menu/Menu.module.css
@@ -11,19 +11,6 @@
   position: relative;
 }
 
-.menu__button {
-  font: var(--eds-theme-typography-body-md);
-
-  color: var(--eds-theme-color-text-neutral-subtle);
-  background-color: var(--eds-theme-color-form-background);
-  border-color: var(--eds-theme-color-form-border);
-  font-weight: var(--eds-font-weight-light);
-}
-
-.menu__button--with-chevron {
-  color: var(--eds-theme-color-icon-neutral-default);
-}
-
 .menu__item {
   display: block;
   text-decoration: none;