Merge pull request #2127 from chanzuckerberg/release-v15.10.0

## [15.10.0](v15.9.0...v15.10.0) (2025-01-21) [Storybook](https://61313967cde49b003ae2a860-ppfzyqbjud.chromatic.com/) ### Features * **TabGroup:** update handling for tab item hover states ([#2124](#2124)) ([8b6cb4e](8b6cb4e)) ### Bug Fixes * **ToastNotification:** fix typo in prop name ([#2122](#2122)) ([8c70d28](8c70d28))
chanzuckerberg · Jan 21, 2025 · 477545c · 477545c
2 parents bdff74d + 259034a
commit 477545c
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 133 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1,5 +1,7 @@
 # Overview: https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners
+
 # Any line with invalid syntax will invalidate the entire file.
 
-# Education Shared Infrastructure Team
-package.json @chanzuckerberg/edu-shared-infra
+# Education Admin teams
+
+package.json @chanzuckerberg/edu-shared-infra @chanzuckerberg/edu-design-system
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -86,6 +86,8 @@ export const parameters: Preview['parameters'] = {
     ...createComponentVersion('1.0'),
     ...createThemeVersion('1.0'),
     ...createThemeVersion('2.0'),
+    ...createThemeVersion('2.0.1'),
+    ...createThemeVersion('2.1'),
     implementationExample: {
       styles: {
         backgroundColor: '#ffffff',

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 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.10.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.9.0...v15.10.0) (2025-01-21)
+
+
+### Features
+
+* **TabGroup:** update handling for tab item hover states ([#2124](https://github.com/chanzuckerberg/edu-design-system/issues/2124)) ([8b6cb4e](https://github.com/chanzuckerberg/edu-design-system/commit/8b6cb4e151766ae1dbec2f098fd9407d452b1939))
+
+
+### Bug Fixes
+
+* **ToastNotification:** fix typo in prop name ([#2122](https://github.com/chanzuckerberg/edu-design-system/issues/2122)) ([8c70d28](https://github.com/chanzuckerberg/edu-design-system/commit/8c70d281a711a9c9099e56155e7023c3650caaa6))
+
 ## [15.9.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.8.0...v15.9.0) (2024-12-20)
 
 

diff --git a/docs/PUBLISHING.md b/docs/PUBLISHING.md
@@ -16,9 +16,9 @@ If you need to create a major release (e.g., one with breaking changes), it is v
 
 For an example of what this can look like, see [the release notes for EDS v13](https://github.com/chanzuckerberg/edu-design-system/releases/tag/v13.0.0).
 
-* Create a `details` block for each change, using the change text in the `summary`
-* Supply steps an engineer would take to port old code to the new format
-* If the change is very complex, link to a [codemod](https://github.com/facebook/jscodeshift) that can be run to automate the migration
+- Create a `details` block for each change, using the change text in the `summary`
+- Supply steps an engineer would take to port old code to the new format
+- If the change is very complex, link to a [codemod](https://github.com/facebook/jscodeshift) that can be run to automate the migration
 
 ---
 
@@ -89,18 +89,20 @@ Once merged, wait until the [builds complete on `main`](https://github.com/chanz
 
 To prepare the message:
 
-* Include the package name before the version number in the release name field (e.g., "@chanzuckerberg/eds@X.Y.Z")
-* Use the same text used for the pull request description above (from CHANGELOG.md).
-* Include any additional notes from the [System Designers](https://github.com/orgs/chanzuckerberg/teams/edu-systems-designers).
-* Include the link for the built storybook in the description.
+- Include the package name before the version number in the release name field (e.g., "@chanzuckerberg/eds@X.Y.Z")
+- Use the same text used for the pull request description above (from CHANGELOG.md).
+- Include any additional notes from the [System Designers](https://github.com/orgs/chanzuckerberg/teams/edu-systems-designers).
+- Include the link for the built storybook in the description.
 
 The latter will automatically post to [relevant slack channels](https://slack.github.com/). **When doing a major version release, don't forget to include notes on each breaking change**.
 
 #### Finishing the release
 
 11. Lastly, run the following to "back merge" release changes to `next`:
 
-```git checkout main && git pull origin main && git checkout next && git pull && git merge main && git push```
+`git checkout main && git pull origin main && git checkout next && git pull && git merge main && yarn install && git push`
+
+**NOTE**: We run `yarn install` here to ensure any package updates saved to `next` get applied.
 
 #### Alpha release
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "15.9.0",
+  "version": "15.10.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",
@@ -90,7 +90,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-table": "^8.20.6",
     "@tippyjs/react": "^4.2.6",
     "chalk": "^4.1.2",
     "clsx": "^2.1.1",
@@ -102,7 +102,7 @@
     "ora": "^8.1.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-children-by-type": "^1.1.0",
-    "react-focus-lock": "^2.13.2",
+    "react-focus-lock": "^2.13.5",
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
     "react-uid": "^2.3.3",
@@ -123,12 +123,12 @@
     "@chanzuckerberg/eslint-plugin-stories": "^3.2.14",
     "@chanzuckerberg/story-utils": "^4.0.8",
     "@chromatic-com/storybook": "^3",
-    "@commitlint/cli": "^19.6.0",
+    "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@geometricpanda/storybook-addon-badges": "^2.0.5",
     "@omlet/cli": "^1.12.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@size-limit/file": "^8.2.6",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
@@ -150,7 +150,7 @@
     "@types/jsonfile": "^6",
     "@types/lodash": "^4.17.13",
     "@types/node": "^20.17.10",
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.18",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.5",
     "@types/react-portal": "^4.0.7",
@@ -161,7 +161,7 @@
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-jest": "^28.10.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-storybook": "^0.11.0",
     "eslint-plugin-testing-library": "^7.1.1",
@@ -188,11 +188,11 @@
     "standard-version": "^9.5.0",
     "storybook": "^8.4.7",
     "style-dictionary": "^3.9.2",
-    "stylelint": "^16.11.0",
+    "stylelint": "^16.12.0",
     "stylelint-config-recommended": "^14.0.1",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.17",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

diff --git a/src/components/TabGroup/TabGroup.module.css b/src/components/TabGroup/TabGroup.module.css
@@ -6,7 +6,7 @@
 /**
  * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
  */
- 
+
 /**
  * List of of links where each link toggles open associated information
  */
@@ -29,11 +29,9 @@
  * The color "white" is arbitrary and any non transparent color can be used here.
  */
 .tabs--scrollable-left {
-  -webkit-mask-image: -webkit-linear-gradient(
-    left,
-    transparent,
-    white 4rem
-  );
+  -webkit-mask-image: -webkit-linear-gradient(left,
+      transparent,
+      white 4rem);
 }
 
 .tabs--scrollable-left .tabs__list--align-center,
@@ -42,21 +40,17 @@
 }
 
 .tabs--scrollable-right {
-  -webkit-mask-image: -webkit-linear-gradient(
-    right,
-    transparent,
-    white 4rem
-  );
+  -webkit-mask-image: -webkit-linear-gradient(right,
+      transparent,
+      white 4rem);
 }
 
 .tabs--scrollable-left.tabs--scrollable-right {
-  -webkit-mask-image: -webkit-linear-gradient(
-    left,
-    transparent,
-    white 4rem,
-    white calc(100% - 4rem),
-    transparent 100%
-  );
+  -webkit-mask-image: -webkit-linear-gradient(left,
+      transparent,
+      white 4rem,
+      white calc(100% - 4rem),
+      transparent 100%);
 }
 
 /**
@@ -106,8 +100,6 @@
   flex-shrink: 0;
   position: relative;
   overflow: hidden;
-  border-top-left-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
-  border-top-right-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
 
   &.eds-is-active {
     font-weight: 500;
@@ -170,13 +162,15 @@
 .tab__highlight {
   border-radius: calc(var(--eds-border-radius-full) * 1px);
   transition: bottom calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
-              width calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
+    width calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease), background-color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
 
-  .tabs__item.eds-is-active & {
+  .tabs__item & {
     position: absolute;
     bottom: 0;
     height: 0.25rem;
     width: 100%;
+
+    background-color: transparent;
   }
 
   .tabs__item .tabs__link:focus-visible & {
@@ -203,14 +197,11 @@
     &:focus-visible {
       box-shadow: inset 0 0 0 0.125rem var(--eds-theme-color-border-utility-focus);
     }
+  }
 
-    &:hover {
-      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
-    }
-
-    &:active {
-      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
-    }
+  /* add in handling of showing highlight on hover */
+  .tabs__item:hover .tab__highlight {
+    background-color: var(--eds-theme-color-text-utility-interactive-primary);
   }
 
   .tabs__item.eds-is-active .tab__highlight {
@@ -227,14 +218,11 @@
     &:focus-visible {
       box-shadow: inset 0 0 0 0.125rem var(--eds-theme-color-border-utility-inverse);
     }
+  }
 
-    &:hover {
-      background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-hover);
-    }
-
-    &:active {
-      background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-active);
-    }
+  /* add in handling of showing highlight on hover */
+  .tabs__item:hover .tab__highlight {
+    background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
   }
 
   .tabs__item.eds-is-active .tab__highlight {

diff --git a/src/components/TabGroup/TabGroup.stories.tsx b/src/components/TabGroup/TabGroup.stories.tsx
@@ -12,7 +12,7 @@ export default {
   component: TabGroup,
   parameters: {
     layout: 'centered',
-    badges: ['api-2.0', 'theme-2.0'],
+    badges: ['api-2.0', 'theme-2.0.1'],
   },
   args: {
     children: (

diff --git a/src/components/ToastNotification/ToastNotification.stories.tsx b/src/components/ToastNotification/ToastNotification.stories.tsx
@@ -62,7 +62,7 @@ export const NotDismissable: Story = {
 export const AutoDismiss: Story = {
   args: {
     ...Default.args,
-    dissmissType: 'auto',
+    dismissType: 'auto',
     timeout: 500,
     onDismiss: () => console.log('trigger onDismiss'),
   },
@@ -111,7 +111,7 @@ const ToastNotificationManager = (args: Args) => {
           >
             <ToastNotification
               {...args}
-              dissmissType="auto"
+              dismissType="auto"
               onDismiss={() => {
                 setToasts(
                   toasts.map((thisToast) => {

diff --git a/src/components/ToastNotification/ToastNotification.test.tsx b/src/components/ToastNotification/ToastNotification.test.tsx
@@ -36,10 +36,22 @@ describe('<ToastNotification />', () => {
     it('generates an error when onDissmiss and type=auto are misused', async () => {
       // One must use onDismiss if auto is used
       render(
-        <ToastNotification dissmissType="auto" timeout={50} title="test" />,
+        <ToastNotification dismissType="auto" timeout={50} title="test" />,
       );
 
       await waitFor(() => expect(consoleErrorMock).toHaveBeenCalledTimes(1));
     });
+
+    it('[EDS-1453] generates an error message when using the dissmissType prop', async () => {
+      render(<ToastNotification dissmissType="manual" title="test" />);
+
+      await waitFor(() => expect(consoleErrorMock).toHaveBeenCalledTimes(1));
+    });
+
+    it('[EDS-1453] generates no error when using the correct dismissType prop', async () => {
+      render(<ToastNotification dismissType="manual" title="test" />);
+
+      await waitFor(() => expect(consoleErrorMock).toHaveBeenCalledTimes(0));
+    });
   });
 });
diff --git a/src/components/ToastNotification/ToastNotification.tsx b/src/components/ToastNotification/ToastNotification.tsx
@@ -31,7 +31,7 @@ export type ToastNotificationProps = {
    *
    * **Default is `"manual"`**.
    */
-  dissmissType?: 'manual' | 'auto';
+  dismissType?: 'manual' | 'auto';
   /**
    * Keyword to characterize the state of the notification
    */
@@ -40,6 +40,8 @@ export type ToastNotificationProps = {
    * The title/heading of the notification
    */
   title: string;
+  /** @deprecated Please use `dismissType` instead */
+  dissmissType?: 'manual' | 'auto'; // TODO(next-major): remove this misspelled prop at next major release
 };
 
 /**
@@ -49,7 +51,8 @@ export type ToastNotificationProps = {
  */
 export const ToastNotification = ({
   className,
-  dissmissType = 'manual',
+  dismissType = 'manual',
+  dissmissType,
   onDismiss,
   status = 'favorable',
   timeout = 8000,
@@ -62,22 +65,36 @@ export const ToastNotification = ({
     className,
   );
 
+  // if both are defined, temporarily prefer the original value of dissmissType to avoid accidental overrides
+  const tempDismissType = dissmissType ?? dismissType;
+
   assertEdsUsage(
-    [!!timeout && typeof onDismiss === 'undefined' && dissmissType === 'auto'],
+    [
+      !!timeout &&
+        typeof onDismiss === 'undefined' &&
+        tempDismissType === 'auto',
+    ],
     'When using dismissType=auto, an onDismiss method must be defined',
     'error',
   );
 
+  // TODO(next-major): remove this misspelled prop at next major release
+  assertEdsUsage(
+    [typeof dissmissType !== 'undefined'],
+    '`dissmissType` should not be used. Use `dismissType` instead',
+    'error',
+  );
+
   useEffect(() => {
     const expireId =
-      dissmissType === 'auto'
+      tempDismissType === 'auto'
         ? setTimeout(() => {
             onDismiss && onDismiss();
           }, timeout)
         : undefined;
 
     return () => clearTimeout(expireId);
-  }, [onDismiss, dissmissType, timeout]);
+  }, [onDismiss, tempDismissType, timeout]);
 
   return (
     <div className={componentClassName} {...other}>