Merge pull request #2061 from chanzuckerberg/release-v15.4.0

## [15.4.0](v15.3.1...v15.4.0) (2024-09-26) [Storybook](https://61313967cde49b003ae2a860-sdpxmjxjai.chromatic.com/) ### Features * **Button:** support for not-allowed cursor when disabled ([#2052](#2052)) ([46cb9f6](46cb9f6)) * **DataTable:** introduce 1.0 component ([#2050](#2050)) ([ffd0e82](ffd0e82)), closes [#2055](#2055) ### Bug Fixes * **Button:** apply external styles when disabled ([#2060](#2060)) ([e762d8b](e762d8b))
chanzuckerberg · Sep 27, 2024 · eadbcd0 · eadbcd0
2 parents 16c2681 + 101b154
commit eadbcd0
Show file tree

Hide file tree

Showing 30 changed files with 10,361 additions and 2,158 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -811,6 +811,7 @@
   "eds-size-20": "160",
   "eds-size-24": "192",
   "eds-size-32": "256",
+  "eds-size-34": "272",
   "eds-size-40": "320",
   "eds-size-base-unit": "8",
   "eds-size-half": "4",

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -84,6 +84,7 @@ export const parameters: Preview['parameters'] = {
     ...createInitialReleaseConfig('1.2'),
     ...createInitialReleaseConfig('1.1'),
     ...createInitialReleaseConfig('1.0'),
+    ...createCurrentReleaseConfig('1.0'),
     ...createCurrentReleaseConfig('1.3'),
     ...createCurrentReleaseConfig('2.0'),
     ...createCurrentReleaseConfig('2.1'),

diff --git a/.yarn/releases/yarn-4.4.0.cjs → .yarn/releases/yarn-4.5.0.cjs b/.yarn/releases/yarn-4.4.0.cjs → .yarn/releases/yarn-4.5.0.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.4.0.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 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.4.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.3.1...v15.4.0) (2024-09-26)
+
+
+### Features
+
+* **Button:** support for not-allowed cursor when disabled ([#2052](https://github.com/chanzuckerberg/edu-design-system/issues/2052)) ([46cb9f6](https://github.com/chanzuckerberg/edu-design-system/commit/46cb9f61b75e3fee77813e574c09bf220c625151))
+* **DataTable:** introduce 1.0 component ([#2050](https://github.com/chanzuckerberg/edu-design-system/issues/2050)) ([ffd0e82](https://github.com/chanzuckerberg/edu-design-system/commit/ffd0e82ae0baf1762888afc925d10b1201435f1e)), closes [#2055](https://github.com/chanzuckerberg/edu-design-system/issues/2055)
+
+
+### Bug Fixes
+
+* **Button:** apply external styles when disabled ([#2060](https://github.com/chanzuckerberg/edu-design-system/issues/2060)) ([e762d8b](https://github.com/chanzuckerberg/edu-design-system/commit/e762d8b5356dc5d5e2c7b4e72358c92ba5226836))
+
 ### [15.3.1](https://github.com/chanzuckerberg/edu-design-system/compare/v15.3.0...v15.3.1) (2024-08-26)
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "15.3.1",
+  "version": "15.4.0",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <edu-frontend-infra@chanzuckerberg.com>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -90,6 +90,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
+    "@tanstack/react-table": "^8.20.5",
     "@tippyjs/react": "^4.2.6",
     "chalk": "^4.1.2",
     "clsx": "^2.1.1",
@@ -98,10 +99,10 @@
     "jsonfile": "^6.1.0",
     "lilconfig": "^2.1.0",
     "lodash": "^4.17.21",
-    "ora": "^8.0.1",
+    "ora": "^8.1.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-children-by-type": "^1.1.0",
-    "react-focus-lock": "^2.12.1",
+    "react-focus-lock": "^2.13.2",
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
     "react-uid": "^2.3.3",
@@ -125,40 +126,40 @@
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
     "@geometricpanda/storybook-addon-badges": "^2.0.2",
-    "@omlet/cli": "^1.10.2",
+    "@omlet/cli": "^1.10.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/addon-a11y": "^8.3.2",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
+    "@storybook/addon-mdx-gfm": "^8.3.2",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/manager-api": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-webpack5": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/manager-api": "^8.3.2",
+    "@storybook/react": "^8.3.2",
+    "@storybook/react-webpack5": "^8.3.2",
+    "@storybook/test": "^8.3.2",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.2.9",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
+    "@storybook/theming": "^8.3.2",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/jsonfile": "^6",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^20.16.1",
-    "@types/react": "^18.3.4",
+    "@types/node": "^20.16.5",
+    "@types/react": "^18.3.8",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.0",
     "@types/react-portal": "^4.0.7",
     "@types/yargs": "^17.0.33",
     "axe-core": "4.10.0",
-    "chromatic": "^11.7.1",
+    "chromatic": "^11.10.2",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -171,7 +172,7 @@
     "jest-preset-stylelint": "^6.3.2",
     "lint-staged": "^13.3.0",
     "plop": "^4.0.1",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.47",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-mixins": "^9.0.4",
@@ -181,16 +182,16 @@
     "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.21.0",
+    "rollup": "^4.22.2",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "standard-version": "^9.5.0",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.2",
     "style-dictionary": "^3.9.2",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
-    "tailwindcss": "^3.4.10",
-    "ts-jest": "^29.2.4",
+    "tailwindcss": "^3.4.12",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.5.4"
   },
   "lint-staged": {
@@ -202,5 +203,5 @@
       "stylelint --fix --allow-empty-input"
     ]
   },
-  "packageManager": "yarn@4.4.0"
+  "packageManager": "yarn@4.5.0"
 }
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -263,23 +263,21 @@
  * Disabled
  */
 .button--disabled {
+  pointer-events: none;
+
   &.button--primary.button--variant-default,
   &.button--primary.button--variant-critical,
   &.button--primary.button--variant-neutral {
     color: var(--eds-theme-color-text-utility-disabled-primary);
     border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
     background-color:  var(--eds-theme-color-background-utility-disabled-medium-emphasis);
-
-    pointer-events: none;
   }
 
   &.button--primary.button--variant-inverse {
     color: var(--eds-theme-color-text-utility-inverse-disabled);
     /* Using transparent for border color to avoid blending opacity of border and background */
     border-color: transparent;
     background-color: var(--eds-theme-color-background-utility-inverse-disabled);
-
-    pointer-events: none;
   }
 
   &.button--secondary.button--variant-default,
@@ -288,34 +286,30 @@
     color: var(--eds-theme-color-text-utility-disabled-primary);
     border-color: var(--eds-theme-color-border-disabled);
     background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
-
-    pointer-events: none;
   }
 
   &.button--secondary.button--variant-inverse {
     color: var(--eds-theme-color-text-utility-inverse-disabled);
     border-color: var(--eds-theme-color-border-utility-inverse-disabled);
-
-    pointer-events: none;
   }
 
   &.button--tertiary.button--variant-default,
   &.button--tertiary.button--variant-critical,
   &.button--tertiary.button--variant-neutral {
     color: var(--eds-theme-color-text-utility-disabled-primary);
     background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
-
-    pointer-events: none;
   }
 
   &.button--tertiary.button--variant-inverse {
     color: var(--eds-theme-color-text-utility-disabled-primary);
     border-color: transparent;
-
-    pointer-events: none;
   }
 }
 
+.button__disabled {
+  cursor: not-allowed;
+}
+
 /**
  * Flag usages of just :disabled as erroneous
  */

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -43,13 +43,13 @@ export const DefaultRanks: Story = {
   render: (args) => {
     return (
       <div className="flex gap-1">
-        <Button {...args} rank="primary">
+        <Button {...args} className="btn-primary" rank="primary">
           Primary
         </Button>
-        <Button {...args} rank="secondary">
+        <Button {...args} className="btn-secondary" rank="secondary">
           Secondary
         </Button>
-        <Button {...args} rank="tertiary">
+        <Button {...args} className="btn-tertiary" rank="tertiary">
           Tertiary
         </Button>
       </div>

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -116,15 +116,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) => {
     const componentClassName = clsx(
       styles['button'],
-      context && clsx(styles[`button--context-${context}`]),
-      iconLayout && clsx(styles[`button--layout-${iconLayout}`]),
-      isDisabled && clsx(styles['button--disabled']),
-      isFullWidth && clsx(styles['button--full-width']),
-      isLoading && clsx(styles['button--loading']),
-      rank && clsx(styles[`button--${rank}`]),
-      size && clsx(styles[`button--${size}`]),
-      variant && clsx(styles[`button--variant-${variant}`]),
-      className,
+      context && styles[`button--context-${context}`],
+      iconLayout && styles[`button--layout-${iconLayout}`],
+      isDisabled && styles['button--disabled'],
+      isFullWidth && styles['button--full-width'],
+      isLoading && styles['button--loading'],
+      rank && styles[`button--${rank}`],
+      size && styles[`button--${size}`],
+      variant && styles[`button--variant-${variant}`],
+      !isDisabled && className,
     );
 
     const buttonContentClassName = clsx(
@@ -137,7 +137,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         typeof isDisabled === 'undefined' &&
           typeof other.disabled !== 'undefined',
       ],
-      'Use "isDisabled" instead of "disabled" on button instances',
+      'Use "isDisabled" instead of "disabled" on Button instances',
       'error',
     );
 
@@ -146,7 +146,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       'Specifying content for "children" when using icon-only layout is not required and can be removed.',
     );
 
-    return (
+    const coreButton = (
       <Component
         className={componentClassName}
         disabled={isDisabled}
@@ -183,6 +183,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
       </Component>
     );
+
+    // Wrap the button in a simple SPAN to allow for adding the not-allowed cursor
+    return isDisabled ? (
+      <span className={clsx(className, styles['button__disabled'])}>
+        {coreButton}
+      </span>
+    ) : (
+      coreButton
+    );
   },
 );