Release v15.6.0

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.0.cjs
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

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.6.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.5.0...v15.6.0) (2024-11-05)
+
+
+### Features
+
+* **DataTable:** allow for pinning columns ([#2084](https://github.com/chanzuckerberg/edu-design-system/issues/2084)) ([86d7d07](https://github.com/chanzuckerberg/edu-design-system/commit/86d7d0716ad9dc7af6bfd56c98166b1cf931e571))
+
+
+### Bug Fixes
+
+* **deps:** update dependency lilconfig to v3 ([#2079](https://github.com/chanzuckerberg/edu-design-system/issues/2079)) ([6f720a4](https://github.com/chanzuckerberg/edu-design-system/commit/6f720a452a0c2e6982ad1f42175c4fc62a9268bc))
+* **Select:** pull z-index of select options to top ([#2081](https://github.com/chanzuckerberg/edu-design-system/issues/2081)) ([6f73cfb](https://github.com/chanzuckerberg/edu-design-system/commit/6f73cfb57dbcd95be2f62e51d463ab442a3cacb7))
+
 ## [15.5.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.4.1...v15.5.0) (2024-10-18)
 
 

docs/PUBLISHING.md

@@ -99,7 +99,8 @@ The latter will automatically post to [relevant slack channels](https://slack.gi
 #### 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 merge main && git push`
+
+```git checkout main && git pull origin main && git checkout next && git pull && git merge main && git push```
 
 #### Alpha release
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "15.5.0",
+  "version": "15.6.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",
@@ -97,7 +97,7 @@
     "enquirer": "^2.4.1",
     "graphemer": "^1.4.0",
     "jsonfile": "^6.1.0",
-    "lilconfig": "^2.1.0",
+    "lilconfig": "^3.1.2",
     "lodash": "^4.17.21",
     "ora": "^8.1.0",
     "react-beautiful-dnd": "^13.1.1",
@@ -113,10 +113,10 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.8",
-    "@babel/preset-react": "^7.25.7",
-    "@babel/preset-typescript": "^7.25.7",
-    "@chanzuckerberg/axe-storybook-testing": "^8.2.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@chanzuckerberg/axe-storybook-testing": "^8.2.1",
     "@chanzuckerberg/eslint-config-edu-js": "^1.1.0",
     "@chanzuckerberg/eslint-config-edu-ts": "^1.0.9",
     "@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9",
@@ -126,45 +126,45 @@
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
     "@geometricpanda/storybook-addon-badges": "^2.0.5",
-    "@omlet/cli": "^1.11.0",
+    "@omlet/cli": "^1.12.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-mdx-gfm": "^8.3.5",
+    "@storybook/addon-a11y": "^8.4.1",
+    "@storybook/addon-essentials": "^8.4.1",
+    "@storybook/addon-interactions": "^8.4.1",
+    "@storybook/addon-links": "^8.4.1",
+    "@storybook/addon-mdx-gfm": "^8.4.1",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/manager-api": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-webpack5": "^8.3.5",
-    "@storybook/test": "^8.3.5",
+    "@storybook/manager-api": "^8.4.1",
+    "@storybook/react": "^8.4.1",
+    "@storybook/react-webpack5": "^8.4.1",
+    "@storybook/test": "^8.4.1",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.3.5",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@storybook/theming": "^8.4.1",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
     "@types/jsonfile": "^6",
-    "@types/lodash": "^4.17.10",
-    "@types/node": "^20.16.11",
-    "@types/react": "^18.3.11",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^20.17.5",
+    "@types/react": "^18.3.12",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/react-portal": "^4.0.7",
     "@types/yargs": "^17.0.33",
-    "axe-core": "4.10.0",
-    "chromatic": "^11.12.5",
+    "axe-core": "4.10.2",
+    "chromatic": "^11.16.3",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-testing-library": "^6.3.0",
+    "eslint-plugin-testing-library": "^6.4.0",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -182,17 +182,17 @@
     "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.24.0",
+    "rollup": "^4.24.3",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "standard-version": "^9.5.0",
-    "storybook": "^8.3.5",
+    "storybook": "^8.4.1",
     "style-dictionary": "^3.9.2",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.3"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -203,5 +203,5 @@
       "stylelint --fix --allow-empty-input"
     ]
   },
-  "packageManager": "yarn@4.5.0"
+  "packageManager": "yarn@4.5.1"
 }

src/components/DataTable/DataTable.module.css

@@ -180,6 +180,9 @@
   border-bottom: calc(var(--eds-border-width-sm) * 1px) solid;
   position: sticky;
   top: -1px;
+
+  /* adding to z-index above any of the contents of tbody */
+  z-index: 2;
 }
 
 .data-table__group-row {
@@ -200,9 +203,30 @@
   }
 }
 
-.data-table--is-pinned {
+.data-table--row-is-pinned {
   box-shadow: var(--eds-box-shadow-sm);
+}
+
+.data-table--column-is-pinned {
+  /* When pinning columns, width and offset position are dynamic */
+
+  /* inherit the background color from the enclosing row */
+  background-color: inherit;
+  position: sticky;
+  z-index: 1;
+
+  &::after {
+    /* TODO: re-attach to a proper token value if possible */
+    box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.25), 2px 0 3px 0 rgba(0, 0, 0, 0.25);
+    display: block;
+    height: 100%;
+    content: ' ';
 
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1px;
+  }
 }
 
 /**

src/components/DataTable/DataTable.stories.tsx

@@ -161,11 +161,7 @@ const columnHelper = DataTableUtils.createColumnHelper<Person>();
 const columns = [
   columnHelper.accessor('firstName', {
     header: () => (
-      <DataTable.HeaderCell
-        leadingIcon="person-add"
-        sortDirection="ascending"
-        sublabel="Given Name"
-      >
+      <DataTable.HeaderCell sortDirection="ascending" sublabel="Given Name">
         First Name
       </DataTable.HeaderCell>
     ),
@@ -792,7 +788,36 @@ export const StatusRows: StoryObj<Args> = {
   },
 };
 
-// TODO: Story for sticky column pinning (https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky)
+/**
+ * Allow for fixing some columns to not scroll off the screen, like freezing a column
+ *
+ * * This first column is sticky by default
+ * * Subsequent rows can be made sticky as well
+ *
+ * See: https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky
+ * See: https://tanstack.com/table/latest/docs/guide/column-pinning
+ */
+export const HorizontalScrolling: StoryObj<Args> = {
+  args: {
+    tableStyle: 'border',
+    size: 'sm',
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const table = DataTableUtils.useReactTable({
+      data: [...defaultData, ...defaultData],
+      columns,
+      getCoreRowModel: DataTableUtils.getCoreRowModel(),
+      initialState: {
+        columnPinning: {
+          left: ['firstName'],
+        },
+      },
+    });
+
+    return <DataTable {...args} className="w-[800px]" table={table} />;
+  },
+};
 
 export const DefaultWithCustomTable: StoryObj<Args> = {
   args: {

src/components/DataTable/DataTable.tsx

@@ -172,7 +172,6 @@ export function DataTable<T>({
   ...rest
 }: DataTableProps<T>) {
   const componentClassName = clsx(styles['data-table'], className);
-
   /**
    * to handle (sub-)caption, render outside the table, but put the combined text in
    * <caption>, and set to hidden in css. that way you can control the layout of the combined
@@ -237,13 +236,23 @@ export function DataTable<T>({
                       header.getSize() !== 150
                         ? `${header.getSize()}px`
                         : undefined;
+
+                    const headerClassNames = clsx(
+                      styles['data-table__header-cell-container'],
+                      header.column.getIsPinned() === 'left' &&
+                        styles['data-table--column-is-pinned'],
+                    );
                     return (
                       <th
-                        className={styles['data-table__header-cell-container']}
+                        className={headerClassNames}
                         colSpan={header.colSpan}
                         key={header.id}
                         style={{
                           width: columnWidth,
+                          left:
+                            header.column.getIsPinned() === 'left'
+                              ? `${header.column.getStart('left')}px`
+                              : undefined,
                         }}
                       >
                         {header.isPlaceholder
@@ -270,17 +279,30 @@ export function DataTable<T>({
                         />
                         {row.getLeafRows().map((row) => (
                           <DataTableRow key={row.id}>
-                            {row.getVisibleCells().map((cell) => (
-                              <td
-                                className={styles['data-table__cell-container']}
-                                key={cell.id}
-                              >
-                                {flexRender(
-                                  cell.column.columnDef.cell,
-                                  cell.getContext(),
-                                )}
-                              </td>
-                            ))}
+                            {row.getVisibleCells().map((cell) => {
+                              const cellClassNames = clsx(
+                                styles['data-table__cell-container'],
+                                cell.column.getIsPinned() === 'left' &&
+                                  styles['data-table--column-is-pinned'],
+                              );
+                              return (
+                                <td
+                                  className={cellClassNames}
+                                  key={cell.id}
+                                  style={{
+                                    left:
+                                      cell.column.getIsPinned() === 'left'
+                                        ? `${cell.column.getStart('left')}px`
+                                        : undefined,
+                                  }}
+                                >
+                                  {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                  )}
+                                </td>
+                              );
+                            })}
                           </DataTableRow>
                         ))}
                       </>
@@ -292,17 +314,30 @@ export function DataTable<T>({
                           isStatusEligible ? row.getValue('status') : undefined
                         }
                       >
-                        {row.getVisibleCells().map((cell) => (
-                          <td
-                            className={styles['data-table__cell-container']}
-                            key={cell.id}
-                          >
-                            {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext(),
-                            )}
-                          </td>
-                        ))}
+                        {row.getVisibleCells().map((cell) => {
+                          const cellClassNames = clsx(
+                            styles['data-table__cell-container'],
+                            cell.column.getIsPinned() === 'left' &&
+                              styles['data-table--column-is-pinned'],
+                          );
+                          return (
+                            <td
+                              className={cellClassNames}
+                              key={cell.id}
+                              style={{
+                                left:
+                                  cell.column.getIsPinned() === 'left'
+                                    ? `${cell.column.getStart('left')}px`
+                                    : undefined,
+                              }}
+                            >
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext(),
+                              )}
+                            </td>
+                          );
+                        })}
                       </DataTableRow>
                     )}
                   </React.Fragment>
@@ -503,7 +538,7 @@ export const DataTableTable = ({
         observer = new IntersectionObserver(
           ([event]) => {
             return event.target.classList.toggle(
-              styles['data-table--is-pinned'],
+              styles['data-table--row-is-pinned'],
               event.intersectionRatio < 1,
             );
           },