Skip to content

Commit 4345133

Browse files
booc0mtacobooc0mtaco
authored
Merge pull request #2074 from chanzuckerberg/release-v15.5.0
## [15.5.0](v15.4.1...v15.5.0) (2024-10-18) [Storybook](https://61313967cde49b003ae2a860-gtyxxzokxd.chromatic.com/) ### Features * **DataTable:** add support for table row statuses ([#2073](#2073)) ([c109f52](c109f52)) * re-export HeadlessUI's Transition component ([#2069](#2069)) ([a4a5fc8](a4a5fc8)) ### Bug Fixes * **DataTable:** fix cell size and border in FF ([#2072](#2072)) ([7ffbd56](7ffbd56)) * **Select:** remove label checks from component ([#2068](#2068)) ([8ede09d](8ede09d))
2 parents aeffbe0 + 7852943 commit 4345133

File tree

11 files changed

+3854
-1942
lines changed

11 files changed

+3854
-1942
lines changed

‎CHANGELOG.md

+14
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,20 @@
22

33
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.
44

5+
## [15.5.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.4.1...v15.5.0) (2024-10-18)
6+
7+
8+
### Features
9+
10+
* **DataTable:** add support for table row statuses ([#2073](https://github.com/chanzuckerberg/edu-design-system/issues/2073)) ([c109f52](https://github.com/chanzuckerberg/edu-design-system/commit/c109f52e3f0f3c1aaa16a1cfd698a649aa962290))
11+
* re-export HeadlessUI's Transition component ([#2069](https://github.com/chanzuckerberg/edu-design-system/issues/2069)) ([a4a5fc8](https://github.com/chanzuckerberg/edu-design-system/commit/a4a5fc825f876c8e2e63f1c2bc1952976b949575))
12+
13+
14+
### Bug Fixes
15+
16+
* **DataTable:** fix cell size and border in FF ([#2072](https://github.com/chanzuckerberg/edu-design-system/issues/2072)) ([7ffbd56](https://github.com/chanzuckerberg/edu-design-system/commit/7ffbd5631b86b137aabe4d91284cb5e230297b85))
17+
* **Select:** remove label checks from component ([#2068](https://github.com/chanzuckerberg/edu-design-system/issues/2068)) ([8ede09d](https://github.com/chanzuckerberg/edu-design-system/commit/8ede09d24cccc9fdd2a1824a3142b630d10cedc0))
18+
519
### [15.4.1](https://github.com/chanzuckerberg/edu-design-system/compare/v15.4.0...v15.4.1) (2024-10-04)
620

721

‎package.json

+22-22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@chanzuckerberg/eds",
3-
"version": "15.4.1",
3+
"version": "15.5.0",
44
"description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
55
"author": "CZI <[email protected]>",
66
"homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -113,9 +113,9 @@
113113
"yargs": "^17.7.2"
114114
},
115115
"devDependencies": {
116-
"@babel/preset-env": "^7.25.4",
117-
"@babel/preset-react": "^7.24.7",
118-
"@babel/preset-typescript": "^7.24.7",
116+
"@babel/preset-env": "^7.25.8",
117+
"@babel/preset-react": "^7.25.7",
118+
"@babel/preset-typescript": "^7.25.7",
119119
"@chanzuckerberg/axe-storybook-testing": "^8.2.0",
120120
"@chanzuckerberg/eslint-config-edu-js": "^1.1.0",
121121
"@chanzuckerberg/eslint-config-edu-ts": "^1.0.9",
@@ -125,38 +125,38 @@
125125
"@chromatic-com/storybook": "^1",
126126
"@commitlint/cli": "^18.6.1",
127127
"@commitlint/config-conventional": "^18.6.3",
128-
"@geometricpanda/storybook-addon-badges": "^2.0.2",
129-
"@omlet/cli": "^1.10.4",
128+
"@geometricpanda/storybook-addon-badges": "^2.0.5",
129+
"@omlet/cli": "^1.11.0",
130130
"@rollup/plugin-node-resolve": "^15.3.0",
131131
"@rollup/plugin-typescript": "^11.1.6",
132132
"@size-limit/file": "^8.2.6",
133-
"@storybook/addon-a11y": "^8.3.3",
134-
"@storybook/addon-essentials": "^8.3.3",
135-
"@storybook/addon-interactions": "^8.3.3",
136-
"@storybook/addon-links": "^8.3.3",
137-
"@storybook/addon-mdx-gfm": "^8.3.3",
133+
"@storybook/addon-a11y": "^8.3.5",
134+
"@storybook/addon-essentials": "^8.3.5",
135+
"@storybook/addon-interactions": "^8.3.5",
136+
"@storybook/addon-links": "^8.3.5",
137+
"@storybook/addon-mdx-gfm": "^8.3.5",
138138
"@storybook/addon-styling": "^1.3.7",
139139
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
140-
"@storybook/manager-api": "^8.3.3",
141-
"@storybook/react": "^8.3.3",
142-
"@storybook/react-webpack5": "^8.3.3",
143-
"@storybook/test": "^8.3.3",
140+
"@storybook/manager-api": "^8.3.5",
141+
"@storybook/react": "^8.3.5",
142+
"@storybook/react-webpack5": "^8.3.5",
143+
"@storybook/test": "^8.3.5",
144144
"@storybook/testing-library": "^0.2.2",
145-
"@storybook/theming": "^8.3.3",
145+
"@storybook/theming": "^8.3.5",
146146
"@testing-library/jest-dom": "^6.5.0",
147147
"@testing-library/react": "^16.0.1",
148148
"@testing-library/user-event": "^14.5.2",
149149
"@types/jest": "^29.5.13",
150150
"@types/jsonfile": "^6",
151-
"@types/lodash": "^4.17.9",
152-
"@types/node": "^20.16.9",
153-
"@types/react": "^18.3.9",
151+
"@types/lodash": "^4.17.10",
152+
"@types/node": "^20.16.11",
153+
"@types/react": "^18.3.11",
154154
"@types/react-beautiful-dnd": "^13.1.8",
155155
"@types/react-dom": "^18.3.0",
156156
"@types/react-portal": "^4.0.7",
157157
"@types/yargs": "^17.0.33",
158158
"axe-core": "4.10.0",
159-
"chromatic": "^11.10.4",
159+
"chromatic": "^11.12.5",
160160
"codecov": "^3.8.3",
161161
"copyfiles": "^2.4.1",
162162
"eslint": "^8.57.1",
@@ -182,11 +182,11 @@
182182
"prettier-plugin-tailwindcss": "^0.5.7",
183183
"react": "^18.2.0",
184184
"react-dom": "^18.2.0",
185-
"rollup": "^4.22.5",
185+
"rollup": "^4.24.0",
186186
"rollup-plugin-postcss": "^4.0.2",
187187
"size-limit": "^8.2.6",
188188
"standard-version": "^9.5.0",
189-
"storybook": "^8.3.3",
189+
"storybook": "^8.3.5",
190190
"style-dictionary": "^3.9.2",
191191
"stylelint": "^15.11.0",
192192
"stylelint-config-recommended": "^13.0.0",

‎src/components/DataTable/DataTable.module.css

+58-14
Original file line numberDiff line numberDiff line change
@@ -36,27 +36,27 @@
3636
}
3737

3838
.data-table__table {
39+
height: fit-content;
3940
table-layout: fixed;
4041
width: 100%;
4142

42-
/* add class instead of tag for styles? */
43-
th,
44-
td {
45-
padding: 0;
46-
vertical-align: top;
47-
/**
48-
* inherit height from 1px size of table rows. This allows height: 100% on cells containers
49-
* to affect full height of cell
50-
*/
51-
height: inherit;
52-
}
53-
5443
.data-table__caption + &,
5544
.data-table__subcaption + & {
5645
margin-top: calc(var(--eds-size-4) / 16 * 1rem);
5746
}
5847
}
5948

49+
.data-table__cell-container, .data-table__header-cell-container {
50+
padding: 0;
51+
vertical-align: top;
52+
53+
&:last-child {
54+
.data-table__cell, .data-table__header-cell {
55+
border-width: 0;
56+
}
57+
}
58+
}
59+
6060
.data-table__search {
6161
width: calc(var(--eds-size-34) / 16 * 1rem);
6262
}
@@ -96,6 +96,7 @@
9696
align-items: flex-start;
9797
font: var(--eds-theme-typography-title-md);
9898
height: 100%;
99+
overflow: hidden;
99100

100101
border-right: calc(var(--eds-border-width-sm) * 1px) solid transparent;
101102

@@ -127,12 +128,28 @@
127128
}
128129
}
129130

131+
.data-table__status-cell {
132+
height: 100%;
133+
134+
display: flex;
135+
align-items: center;
136+
justify-content: center;
137+
}
138+
139+
.data-table__status-header-cell {
140+
height: 1px;
141+
width: 1px;
142+
overflow: hidden;
143+
text-indent: 9999;
144+
}
145+
130146
.data-table__cell {
131147
display: flex;
132148
gap: calc(var(--eds-size-1) / 16 * 1rem);
133149
align-items: flex-start;
134150
font: var(--eds-theme-typography-body-md);
135151
height: 100%;
152+
overflow: hidden;
136153

137154
border-right: calc(var(--eds-border-width-sm) * 1px) solid transparent;
138155

@@ -193,8 +210,7 @@
193210
*/
194211

195212
.data-table__row {
196-
/* setting the height to 1px so that later, table cell containers can take up 100% of height */
197-
height: 1px;
213+
height: 100%;
198214

199215
&.data-table__row--is-selected {
200216
background-color: var(--eds-theme-color-background-table-row-selected);
@@ -289,3 +305,31 @@
289305
background-color: var(--eds-theme-color-background-utility-interactive-low-emphasis);
290306
}
291307
}
308+
309+
.data-table .data-table__status-cell {
310+
&.data-table--status-critical {
311+
color: var(--eds-theme-color-icon-utility-critical)
312+
}
313+
314+
&.data-table--status-favorable {
315+
color: var(--eds-theme-color-icon-utility-favorable);
316+
}
317+
318+
&.data-table--status-warning {
319+
color: var(--eds-theme-color-icon-utility-warning);
320+
}
321+
}
322+
323+
.data-table .data-table__row {
324+
&.data-table--status-critical {
325+
background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
326+
}
327+
328+
&.data-table--status-favorable {
329+
background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
330+
}
331+
332+
&.data-table--status-warning {
333+
background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
334+
}
335+
}

‎src/components/DataTable/DataTable.stories.tsx

+95-3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
DataTableRow,
1212
DataTableHeader,
1313
type DataTableProps,
14+
type DataTableWithStatus,
1415
} from './DataTable';
1516

1617
// We import all of the utilities from tanstack here, and this can contain other custom utilities
@@ -53,13 +54,14 @@ export default {
5354
type Args = DataTableProps;
5455

5556
// Specifying an example data type for the rows of a table
56-
type Person = {
57+
// This column is used for tables that are eligible for status
58+
type Person = DataTableWithStatus<{
5759
firstName: string;
5860
lastName: string;
5961
age: number;
6062
visits: number;
6163
progress: number;
62-
};
64+
}>;
6365

6466
// Specifying the example (static) data for the table to use with tanstack primitives
6567
const defaultData: Person[] = [
@@ -76,6 +78,7 @@ const defaultData: Person[] = [
7678
age: 40,
7779
visits: 40,
7880
progress: 80,
81+
status: 'warning',
7982
},
8083
{
8184
firstName: 'Tanner',
@@ -90,6 +93,7 @@ const defaultData: Person[] = [
9093
age: 45,
9194
visits: 20,
9295
progress: 10,
96+
status: 'critical',
9397
},
9498
{
9599
firstName: 'Tandy',
@@ -111,6 +115,7 @@ const defaultData: Person[] = [
111115
age: 45,
112116
visits: 20,
113117
progress: 10,
118+
status: 'favorable',
114119
},
115120
{
116121
firstName: 'Tandy',
@@ -700,6 +705,93 @@ export const Grouping: StoryObj<Args> = {
700705
},
701706
};
702707

708+
/**
709+
* You can specify detailed statuses for each row in a table, matching a few common options.
710+
* Extend the data type to include `status` which maps to the internal type
711+
*
712+
* Use `DataTableWithStatus` on your data type model to add in the column handler. this
713+
* will add add a `status` item, to be used with a column with header name `DataTable.__StatusColumnId__`.
714+
*/
715+
export const StatusRows: StoryObj<Args> = {
716+
args: {
717+
caption: 'Test table',
718+
subcaption: 'Additional Subcaption',
719+
isStatusEligible: true,
720+
tableStyle: 'border',
721+
rowStyle: 'lined',
722+
size: 'sm',
723+
},
724+
render: (args) => {
725+
const columns = [
726+
columnHelper.accessor(DataTable.__StatusColumnId__, {
727+
header: () => <DataTable.StatusHeaderCell />,
728+
cell: (info) => <DataTable.StatusCell status={info.getValue()} />,
729+
size: 32,
730+
}),
731+
columnHelper.accessor('firstName', {
732+
header: () => (
733+
<DataTable.HeaderCell sortDirection="ascending">
734+
First Name
735+
</DataTable.HeaderCell>
736+
),
737+
cell: (info) => (
738+
<DataTable.DataCell>{info.getValue()}</DataTable.DataCell>
739+
),
740+
}),
741+
columnHelper.accessor((row) => row.lastName, {
742+
id: 'lastName',
743+
header: () => <DataTable.HeaderCell>Last Name</DataTable.HeaderCell>,
744+
cell: (info) => (
745+
<DataTable.DataCell>{info.getValue()}</DataTable.DataCell>
746+
),
747+
}),
748+
columnHelper.accessor('age', {
749+
header: () => (
750+
<DataTable.HeaderCell alignment="trailing">Age</DataTable.HeaderCell>
751+
),
752+
cell: (info) => (
753+
<DataTable.DataCell alignment="trailing">
754+
{info.renderValue()}
755+
</DataTable.DataCell>
756+
),
757+
}),
758+
columnHelper.accessor('visits', {
759+
header: () => (
760+
<DataTable.HeaderCell alignment="trailing">
761+
Visits
762+
</DataTable.HeaderCell>
763+
),
764+
cell: (info) => (
765+
<DataTable.DataCell alignment="trailing">
766+
{info.renderValue()}
767+
</DataTable.DataCell>
768+
),
769+
}),
770+
columnHelper.accessor('progress', {
771+
header: () => (
772+
<DataTable.HeaderCell alignment="trailing">
773+
Profile Progress
774+
</DataTable.HeaderCell>
775+
),
776+
cell: (info) => (
777+
<DataTable.DataCell alignment="trailing">
778+
{info.renderValue()}
779+
</DataTable.DataCell>
780+
),
781+
}),
782+
];
783+
784+
// eslint-disable-next-line react-hooks/rules-of-hooks
785+
const table = DataTableUtils.useReactTable({
786+
data: defaultData,
787+
columns,
788+
getCoreRowModel: DataTableUtils.getCoreRowModel(),
789+
});
790+
791+
return <DataTable {...args} table={table} />;
792+
},
793+
};
794+
703795
// TODO: Story for sticky column pinning (https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky)
704796

705797
export const DefaultWithCustomTable: StoryObj<Args> = {
@@ -708,7 +800,7 @@ export const DefaultWithCustomTable: StoryObj<Args> = {
708800
<table>
709801
<tbody className="border-2 border-utility-default-lowEmphasis-hover">
710802
<tr>
711-
<td>TODO: Custom table rows/cells here</td>
803+
<td>Custom or standard table rows/cells here</td>
712804
</tr>
713805
</tbody>
714806
</table>

0 commit comments

Comments
 (0)