feat(table): migrates remaining table styles to s2 part2 #3818

marissahuysentruyt · 2025-05-21T20:48:14Z

Description

This PR is part 2 of the table's migration to S2! Table has been updated to include:

new color & typography tokens (in the table Figma token specs, only tokens for Colors & Typography have been addressed)
new sparkline cell content type and respective story

NOTE: Tokens for layout and storybook template updates were done in part 1 of the table migration here: #3799

All styles for the full migration should now be addressed with this PR.

Jira/Specs

CSS-1179
Figma token specs- colors and typography token columns only

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Please review the following table styles to ensure the color and typography tokens are used as outlined in the tokens spec Figma file:

Additional validation

All test cases are covered
I'd love feedback on the approach I took to achieving only 1px between adjacent selected rows, since I'm afraid there may be content shift. That is Stefan's preference (to only have 1px of border between adjacent selected cells). But he understands that's a complex thing to achieve without content shift, so he said that the 2px in between would be acceptable if we really needed it.

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-05-21T20:48:18Z

⚠️ No Changeset found

Latest commit: 1462fcf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

marissahuysentruyt · 2025-05-29T20:55:00Z

TODO: (from Stephanie in #3799)

For WHCM - I think there should be a difference between "Focused selected" vs. "Focused unselected" just like there is in regular mode:
#3799 (comment)

EDIT: The focused unselected ONLY has the side focus indicator, while a focused + selected has the side focus indicator AND the background color change. ✅

Possibly need a background color for the table header for "Quiet" styling to prevent this clash on scrollable tables:
#3799 (comment)

EDIT: This was a transparent background color before, but with the updates to the header cell background colors, this should be taken care of. ✅

marissahuysentruyt · 2025-06-03T14:47:49Z

tokens/custom/dark-vars.css

@@ -57,6 +57,8 @@

 	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);

+	--spectrum-table-selected-row-background-color-rgb: var(--spectrum-blue-800-rgb);


I noticed in Figma that the color for light and dark modes do vary just a bit.

marissahuysentruyt · 2025-06-03T14:48:39Z

components/table/index.css

-	&.spectrum-Table--quiet {
-		border-block-start: none;
-	}


Quiet tables still have a border-block-start for the header row.

marissahuysentruyt · 2025-06-03T14:54:51Z

components/table/index.css

+	&.is-selected {
+		.spectrum-Table-cell {
+			/* Remove bottom border by default for all selected rows to conditionally add it back. */
+			border-block-end: none;
+		}
+	}
+
+	/* Adding the bottom border only to the last selected row in a sequence achieves 1px border between adjacent selected rows */
+	&.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell {
+		border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)));
+	}


I got some help from Cursor with this, so please review and let me know if there's red flags. I'm particularly concerned with the :not(:has()) situation. In order to test this, you'll have to add the is-selected class to an adjacent row.

Basically, this is the code to produce 1px of blue border, between adjacent selected rows. I noted in the PR description that during my talks with Stefan, he said design's preference is to have only 1px of border between adjacent rows. He did say though that he understands it's quite complicated, and had already discussed the possibility of needing 2px in between adjacent selected rows. Although the 2px isn't ideal, if we decide that's probably the best route long-term, it's acceptable.

What are our thoughts on this approach to achieving the single pixel border between adjacent selected rows? I do believe there would be 1px of content shift, so does that mean we should toss this idea out? I couldn't achieve only 1px between ALL adjacent rows, when some are selected and some are not, so maybe this approach is overkill, since there's 2px borders in between other rows anyways?

I'd love to pair on this with someone if there's more ideas I haven't tried or to explain any of that ☝️ more!

marissahuysentruyt · 2025-06-03T16:53:35Z

TODO: write the changeset (maybe I can add to the part 1 changeset?)

- updates row colors for header row, summary, section header, and selected row - updates sort icon colors - updates disclosure/menu icons - fixes checkbox indeterminate icon color - adds .spectrum-Table-headCell--alignEnd class

- selected rows have a 1px border around all cells in blue - row focus should be indicated by the side-focus-indicator regardless of selection state. this means a focused+unselected row will have a 1px gray border around cells, while a focused+selected row will have a 1px blue border around cells. - adjacent selected rows have a 1px border between them in blue (avoids duplicate borders between cells)

- adds support for CJK languages for line-height - adds missing font tokens for header and body row text

- there's not really color changes specc'd out for the header table cell background states, so they're now removed

- in focused unselected rows, the text color was the same as the background color. This is now fixed, and should also distinguish the focused+selected rows from the focused+unselected rows as well.

- adds hasChartContent arg to story file and template - handles hasChaartContent in template markkup

marissahuysentruyt self-assigned this May 21, 2025

marissahuysentruyt added size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. wip This is a work in progress, don't judge. skip_vrt Add to a PR to skip running VRT (but still pass the action) S2 Spectrum 2 labels May 21, 2025

marissahuysentruyt force-pushed the marissahuysentruyt/css-1178-s2-table-migration-layout-pt1 branch 2 times, most recently from 36920dd to 490a4e9 Compare May 21, 2025 22:18

marissahuysentruyt mentioned this pull request May 22, 2025

feat(table): s2 table migration layout part-1 #3799

Open

35 tasks

marissahuysentruyt force-pushed the marissahuysentruyt/css-1179-s2-table-migration-layout-pt2 branch 2 times, most recently from 57cdc81 to f9f4cd3 Compare May 27, 2025 22:16

marissahuysentruyt force-pushed the marissahuysentruyt/css-1178-s2-table-migration-layout-pt1 branch from 4b76b0c to 85d324a Compare May 28, 2025 13:54

marissahuysentruyt force-pushed the marissahuysentruyt/css-1179-s2-table-migration-layout-pt2 branch 2 times, most recently from 58bd149 to 870191b Compare May 29, 2025 19:39

marissahuysentruyt force-pushed the marissahuysentruyt/css-1179-s2-table-migration-layout-pt2 branch from 870191b to 73ee64e Compare June 2, 2025 15:43

marissahuysentruyt force-pushed the marissahuysentruyt/css-1178-s2-table-migration-layout-pt1 branch from b746cdf to 1641315 Compare June 2, 2025 15:48

marissahuysentruyt marked this pull request as ready for review June 3, 2025 12:10

marissahuysentruyt force-pushed the marissahuysentruyt/css-1179-s2-table-migration-layout-pt2 branch 2 times, most recently from 41a351d to e8478ca Compare June 3, 2025 14:36

marissahuysentruyt commented Jun 3, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-1179-s2-table-migration-layout-pt2 branch from e8478ca to 64338cd Compare June 3, 2025 14:55

marissahuysentruyt added ready-for-review and removed wip This is a work in progress, don't judge. labels Jun 3, 2025

marissahuysentruyt force-pushed the marissahuysentruyt/css-1178-s2-table-migration-layout-pt1 branch from 781d447 to 6cf3b05 Compare June 3, 2025 18:36

marissahuysentruyt added 2 commits June 4, 2025 09:16

feat(table): adds light/dark custom vars for selected row

eb1f200

feat(table): update tokens to s2 colors

30a6ff7

- updates row colors for header row, summary, section header, and selected row - updates sort icon colors - updates disclosure/menu icons - fixes checkbox indeterminate icon color - adds .spectrum-Table-headCell--alignEnd class

marissahuysentruyt added 14 commits June 4, 2025 09:22

chore(table): update metadata

7cadc8a

chore(table): add sparkline svg

29786cd

docs(table): add focused cell to table states story

a8e83a8

fix(table): adds missing font tokens

540f769

- adds support for CJK languages for line-height - adds missing font tokens for header and body row text

chore(table): update metadata

12049aa

fix(table): remove quiet table cell background colors lines

64abef7

fix(table): remove header table cell background states

06609a5

- there's not really color changes specc'd out for the header table cell background states, so they're now removed

fix(table): quiet and scroller styles fixed up

855e814

fix(table): correct the WHCM text color

ce8a3fc

- in focused unselected rows, the text color was the same as the background color. This is now fixed, and should also distinguish the focused+selected rows from the focused+unselected rows as well.

docs(table): add sparkline chart story

1f8f0fd

- adds hasChartContent arg to story file and template - handles hasChaartContent in template markkup

feat(table): add sparkline chart styles

06f12fa

chore(table): update metadata

aa6aa58

test(table): add sparkline test case

1462fcf

marissahuysentruyt force-pushed the marissahuysentruyt/css-1179-s2-table-migration-layout-pt2 branch from 64338cd to 1462fcf Compare June 4, 2025 13:28

marissahuysentruyt requested review from rise-erpelding, 5t3ph and saashapina June 4, 2025 21:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(table): migrates remaining table styles to s2 part2 #3818

feat(table): migrates remaining table styles to s2 part2 #3818

Uh oh!

marissahuysentruyt commented May 21, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented May 21, 2025 •

edited

Loading

Uh oh!

marissahuysentruyt commented May 29, 2025 •

edited

Loading

Uh oh!

marissahuysentruyt Jun 3, 2025

Uh oh!

marissahuysentruyt Jun 3, 2025

Uh oh!

marissahuysentruyt Jun 3, 2025 •

edited

Loading

Uh oh!

marissahuysentruyt commented Jun 3, 2025

Uh oh!

Uh oh!

		@@ -57,6 +57,8 @@

		--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);

		--spectrum-table-selected-row-background-color-rgb: var(--spectrum-blue-800-rgb);

feat(table): migrates remaining table styles to s2 part2 #3818

Are you sure you want to change the base?

feat(table): migrates remaining table styles to s2 part2 #3818

Uh oh!

Conversation

marissahuysentruyt commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Jira/Specs

How and where has this been tested?

Validation steps

Additional validation

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

marissahuysentruyt commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marissahuysentruyt Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt commented Jun 3, 2025

Uh oh!

Uh oh!

marissahuysentruyt commented May 21, 2025 •

edited

Loading

changeset-bot bot commented May 21, 2025 •

edited

Loading

marissahuysentruyt commented May 29, 2025 •

edited

Loading

marissahuysentruyt Jun 3, 2025 •

edited

Loading