Merge pull request #1784 from chanzuckerberg/release-v13.6.0

## [13.6.0](v13.5.0...v13.6.0) (2023-10-13) ### Features * **Menu:** allow href and onClick to co-exist on a menu item ([#1779](#1779)) ([971f189](971f189)) * **Popover:** allow focus upon popover panel open ([#1782](#1782)) ([76ddbc6](76ddbc6)) ### Bug Fixes * **Accordion:** handle multi-line text in headers ([#1783](#1783)) ([0b3c3e6](0b3c3e6)) * **Select:** expose render prop and default value param.s ([#1781](#1781)) ([f21e2b6](f21e2b6))
chanzuckerberg · Oct 13, 2023 · 609f07e · 609f07e
2 parents 194ea55 + 69d0d52
commit 609f07e
Show file tree

Hide file tree

Showing 18 changed files with 1,280 additions and 778 deletions.
diff --git a/.yarn/releases/yarn-3.6.3.cjs → .yarn/releases/yarn-3.6.4.cjs b/.yarn/releases/yarn-3.6.3.cjs → .yarn/releases/yarn-3.6.4.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,20 @@
 
 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.
 
+## [13.6.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.5.0...v13.6.0) (2023-10-13)
+
+
+### Features
+
+* **Menu:** allow href and onClick to co-exist on a menu item ([#1779](https://github.com/chanzuckerberg/edu-design-system/issues/1779)) ([971f189](https://github.com/chanzuckerberg/edu-design-system/commit/971f189aff4a8e08de7a73df4c44332e12dcd6e3))
+* **Popover:** allow focus upon popover panel open ([#1782](https://github.com/chanzuckerberg/edu-design-system/issues/1782)) ([76ddbc6](https://github.com/chanzuckerberg/edu-design-system/commit/76ddbc6447658d92219430278ac0eb0ed8d5aa91))
+
+
+### Bug Fixes
+
+* **Accordion:** handle multi-line text in headers ([#1783](https://github.com/chanzuckerberg/edu-design-system/issues/1783)) ([0b3c3e6](https://github.com/chanzuckerberg/edu-design-system/commit/0b3c3e6f3528c238e3695d55773d9b7636057f99))
+* **Select:** expose render prop and default value param.s ([#1781](https://github.com/chanzuckerberg/edu-design-system/issues/1781)) ([f21e2b6](https://github.com/chanzuckerberg/edu-design-system/commit/f21e2b686ab159b498633d8c1cad9f0028988752))
+
 ## [13.5.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.4.0...v13.5.0) (2023-10-06)
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "13.5.0",
+  "version": "13.6.0",
   "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",
@@ -119,44 +119,44 @@
     "@commitlint/cli": "^17.7.2",
     "@commitlint/config-conventional": "^17.7.0",
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
-    "@omlet/cli": "^1.0.1-beta.36",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-typescript": "^11.1.4",
+    "@omlet/cli": "^1.0.1-beta.37",
+    "@rollup/plugin-node-resolve": "^15.2.2",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-docs": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-docs": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
     "@storybook/testing-library": "^0.2.0",
     "@storybook/testing-react": "^2.0.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.5",
-    "@types/node": "^18.18.0",
-    "@types/react": "^18.2.23",
+    "@types/node": "^18.18.3",
+    "@types/react": "^18.2.25",
     "@types/react-beautiful-dnd": "^13.1.5",
-    "@types/react-dom": "^18.2.8",
+    "@types/react-dom": "^18.2.10",
     "@types/react-portal": "^4.0.4",
     "axe-core": "4.8.2",
     "chromatic": "^6.24.1",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-jest": "^27.4.0",
+    "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-testing-library": "^5.11.1",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-stylelint": "^6.2.0",
+    "jest-preset-stylelint": "^6.3.0",
     "lint-staged": "^13.3.0",
     "pascal-case": "^3.1.2",
     "plop": "^3.1.2",
@@ -174,7 +174,7 @@
     "size-limit": "^8.2.6",
     "snake-case": "^3.0.4",
     "standard-version": "^9.5.0",
-    "storybook": "^7.4.5",
+    "storybook": "^7.4.6",
     "style-dictionary": "^3.8.0",
     "stylelint": "^15.10.3",
     "stylelint-config-recommended": "^10.0.1",
@@ -191,5 +191,5 @@
       "stylelint --fix"
     ]
   },
-  "packageManager": "[email protected].3"
+  "packageManager": "[email protected].4"
 }
diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css
@@ -25,8 +25,11 @@
   border: 0;
   border-radius: 0;
 
-  padding: var(--eds-size-2) var(--eds-size-1);
-  height: 3.375rem;
+  padding: var(--eds-size-1-and-half) var(--eds-size-1);
+  height: unset;
+  min-height: 3.375rem;
+
+  text-align: left;
 }
 
 .accordion-button--empty {
@@ -37,22 +40,22 @@
  * Small variant.
  */
 .accordion-button--sm {
-  padding: var(--eds-size-1);
-  height: 2.25rem;
+  padding: var(--eds-size-half) var(--eds-size-1);
+  min-height: 2.25rem;
 }
 
 /**
  * Outline variant.
  */
 .accordion-button--outline {
-  padding: var(--eds-size-2) var(--eds-size-3);
+  padding: var(--eds-size-1-and-half) var(--eds-size-3);
 }
 
 /**
  * Small outline variant.
  */
 .accordion-button--sm.accordion-button--outline {
-  padding: var(--eds-size-1) var(--eds-size-2);
+  padding: var(--eds-size-half) var(--eds-size-2);
 }
 
 /**
@@ -73,9 +76,10 @@
 /**
  * Expand more (chevron) icon indicates open or closed status.
  *
- * This nonrotated icon points down and represents closed status.
+ * This non-rotated icon points down and represents closed status.
  */
 .accordion-button__icon {
+  flex: 0 0 content;
   transform: rotate(0);
 }
 /**

diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -2,18 +2,14 @@ import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
 import { Accordion } from './Accordion';
+import { chromaticViewports } from '../../util/viewports';
 import Icon from '../Icon';
 import NumberIcon from '../NumberIcon';
 import Text from '../Text';
 
 export default {
   title: 'Components/Accordion',
   component: Accordion,
-  subcomponents: {
-    'Accordion.Row': Accordion.Row,
-    'Accordion.Panel': Accordion.Panel,
-    'Accordion.Button': Accordion.Button,
-  },
   parameters: {
     badges: ['1.2'],
   },
@@ -305,6 +301,34 @@ export const UsingRenderProp: StoryObj<Args> = {
   },
 };
 
+/**
+ * Although headings should provide limited text, we allow for text to span multiple lines, preserving
+ * the size of the state caret.
+ */
+export const WithLargeHeader: StoryObj<Args> = {
+  parameters: {
+    chromatic: {
+      viewports: [chromaticViewports.ipadMini],
+    },
+  },
+  args: {
+    children: (
+      <Accordion.Row>
+        <Accordion.Button>
+          Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas
+          massa. Massa quam egestas massa. Massa quam egestas massa.
+        </Accordion.Button>
+        <Accordion.Panel>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
+          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
+          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
+          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+        </Accordion.Panel>
+      </Accordion.Row>
+    ),
+  },
+};
+
 export const UsingComplexHeaders: StoryObj<Args> = {
   parameters: {
     badges: ['1.2', 'implementationExample'],

diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -1732,7 +1732,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2i:"
+        id="headlessui-disclosure-button-:r2k:"
         type="button"
       >
         <h2
@@ -1784,7 +1784,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2k:"
+        id="headlessui-disclosure-button-:r2m:"
         type="button"
       >
         <h2
@@ -1847,7 +1847,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2m:"
+        id="headlessui-disclosure-button-:r2o:"
         type="button"
       >
         <h2
@@ -1896,7 +1896,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2o:"
+        id="headlessui-disclosure-button-:r2q:"
         type="button"
       >
         <h2
@@ -1988,3 +1988,48 @@ exports[`<Accordion /> UsingRenderProp story renders snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<Accordion /> WithLargeHeader story renders snapshot 1`] = `
+<div
+  style="margin: 0.5rem;"
+>
+  <div
+    class=""
+  >
+    <div
+      class="accordion-row"
+    >
+      <button
+        aria-expanded="false"
+        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        data-headlessui-state=""
+        id="headlessui-disclosure-button-:r2i:"
+        type="button"
+      >
+        <h2
+          class="heading heading--size-h2 accordion-button__heading"
+        >
+          Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa.
+        </h2>
+        <svg
+          class="icon accordion-button__icon"
+          fill="currentColor"
+          height="1.625rem"
+          role="img"
+          style="--icon-size: 1.625rem;"
+          viewBox="0 0 24 24"
+          width="1.625rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            show content
+          </title>
+          <path
+            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
@@ -55,8 +55,7 @@ export const Default: StoryObj<MenuProps> = {
           >
             MDN: Menu
           </Menu.Item>
-          {/* eslint-disable-next-line no-alert */}
-          <Menu.Item onClick={() => alert('Item clicked')}>
+          <Menu.Item href="#index" onClick={() => console.log('Item clicked')}>
             Trigger Action
           </Menu.Item>
           <Menu.Item disabled href="https://example.org/" icon="warning">

diff --git a/src/components/Menu/Menu.test.tsx b/src/components/Menu/Menu.test.tsx
@@ -13,6 +13,9 @@ const { Default } = composeStories(stories);
 const { Opened, ...staticStories } = stories;
 
 describe('<Menu />', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
   generateSnapshots(staticStories, {
     getElement: async () => {
       const user = userEvent.setup();
@@ -46,6 +49,27 @@ describe('<Menu />', () => {
     expect(menuContainer.getAttribute('aria-activedescendant')).not.toBeNull();
   });
 
+  it('handles onclick events when there is an href present', async () => {
+    // create a spy on the `log` method, and avoid calling it by setting the mock implementation to nothing
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+    const user = userEvent.setup();
+    render(<Default />);
+    const triggerButton = await screen.findByRole('button');
+    await act(async () => {
+      await user.click(triggerButton);
+    });
+
+    await act(async () => {
+      await user.keyboard('{arrowdown}{arrowdown}{arrowdown}');
+    });
+
+    await act(async () => {
+      await user.keyboard('{enter}');
+    });
+
+    expect(consoleSpy).toHaveBeenCalledTimes(1);
+  });
+
   it('should close menu on keyboard escape key', async () => {
     const user = userEvent.setup();
     render(<Default />);

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -42,7 +42,7 @@ export type MenuItemProps = ExtractProps<typeof HeadlessMenu.Item> & {
    */
   icon?: IconName;
   /**
-   * Configurable action for the menu item action. If both `href` and `onClick` are used, `onClick` takes precedent.
+   * Configurable action for the menu item upon click
    */
   onClick?: MouseEventHandler<HTMLAnchorElement>;
 };
@@ -189,8 +189,6 @@ const MenuItem = ({
   onClick,
   ...other
 }: MenuItemProps) => {
-  // If we have an event handler, avoid navigation by discarding the href
-  const destinationUrl = !onClick ? href : undefined;
   return (
     <HeadlessMenu.Item {...other}>
       {({ active, disabled }) => {
@@ -209,7 +207,7 @@ const MenuItem = ({
         ) : (
           <a
             className={clsx(styles['menu__item'])}
-            href={destinationUrl}
+            href={href}
             onClick={onClick}
           >
             {listItemView}