[Project Solar / Phase 1 / Migration] `Table` & `AdvancedTable` carbonization by shleewhite · Pull Request #3988 · hashicorp/design-system

shleewhite · 2026-07-08T19:23:58Z

📌 Summary

If merged, this PR would carbonize the Table component and adds the relevant component tokens. It also adds a new state for the row that toggles the isSelected class.

Note: for reorderable columns, the HTML element to show the preview column as you're dragging is appended to the DOM so it doesn't show as themed on the carbonization page. To validate that it works correctly, check the normal AdvancedTable showcase page and change the theme.

Copilot instructions

Read through similar carbonization pages under showcase/app/components/page-carbonization and compare those to the changes made here to ensure this PR aligns with previous carbonization efforts

🔗 External links

Jira ticket: HDS-6104

👀 Component checklist

Percy was checked for any visual regression
A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
If applicable, I've worked with GRC to document the impact of any changes to security controls.
Examples of changes to controls include access controls, encryption, logging, etc.
If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

vercel · 2026-07-08T19:24:04Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hds-showcase	Ready	Preview	Aug 3, 2026 4:57pm
hds-website	Ready	Preview	Aug 3, 2026 4:57pm

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

…n themes sticky header

didoo

Pre-approving (only a minor thing to fix, and a nitpick)

Note: I have reviewed mainly the code, since @dchyun has already done a fine-combed visual review

didoo · 2026-08-03T10:37:08Z

+        "color": {
+          "focus": {
+            "$type": "color",
+            "$value": "{core.color.blue-300}"


@jorytindall @heatherlarsen do you remember why these colors were used?

didoo · 2026-08-03T10:37:11Z

+          },
+          "hover": {
+            "$type": "color",
+            "$value": "#b1b1b5"


@jorytindall @heatherlarsen do you remember why these colors were used?

didoo · 2026-08-03T10:37:14Z

+      "surface": {
+        "color": {
+          "$type": "color",
+          "$value": "rgba(204, 227, 254, 30%)"


@jorytindall @heatherlarsen do you remember why these colors were used?

dchyun

🎉🎉🎉

jorytindall

Sorry for this barrage of comments that I wasn't really sure what to pin to. I'll try to organize them categorically.

Scroll indicator

We're losing the scroll indicator gradient in the AdvancedTable on the dark Carbon themes. There isn't really a Figma token for this, so LMK how it's best to define that.

Reordering/resizing

There may have been a few bugs introduced in the AdvancedTable:

the reordering button displays on the hover action for the column resizing feature.

- When I select "Move column" from the context menu, the drag handle displays, but is not focused (in the production branch it does do this)

Empty state

There's an issue with the empty state (either in the showcase examples, or otherwise), where hover the tooltip there's a z-index issue causing the empty state to overlap the tooltip. Additionally, the header is scrollable. However, the scroll only appears after the tooltip has been interacted with. I wasn't able to reproduce it in the main branch, but there also aren't tooltips in any of the examples.

jorytindall · 2026-08-04T04:32:36Z


    .hds-table__th {
-      padding: $hds-table-cell-padding-medium;
+      padding: var(--hds-table-header-cell-padding-vertical) var(--hds-table-cell-padding-horizontal)


[question] I'm not quite sure where to add this, but the rendered height short HDS table is a bit taller (~2px) than the Carbon table and I think it's because of a 2px difference in the line height of the text. Is this something worth indexing on, or would we consider this a bit nit-picky?

jorytindall · 2026-08-04T04:36:51Z

+
    // striped rows

+    .hds-table--striped & {


[issue] When I apply sorting to a table that is striped, the alternating striping seems to be ignored and it's possible to have two adjacent rows that are the same color.

Disregard this, it's because the selected row has a different surface color that I didn't realize 🤦

jorytindall · 2026-08-04T04:44:35Z

+  --hds-table-cell-surface-color-striped-hover: rgba(141, 141, 141, 0.12);
+  --hds-table-header-button-border-color-active: rgba(0, 0, 0, 0);
+  --hds-table-header-button-border-color-hover: rgba(0, 0, 0, 0);
+  --hds-table-header-button-foreground-color-sorted-active: #161616;


[issue] I'm seeing a slight inconsistency in the tooltip button and the sort button foreground colors. In the g0 theme:

The resting/default foreground color for the tooltip button and the indeterminate sort is #525252

The resting/default foreground color for the descending/ascending sort button is #161616

I think all of these should have the same resting/default foreground color, and this is what is reflected in Figma. Even though these interactive elements are different from how Carbon implements these features.

Actually looks like this might be an issue with the secondary-muted variant (sorry if this comment is in a weird spot, kind of hard to know where it's best to comment).

dchyun · 2026-08-04T14:19:39Z

@jorytindall

It looks like the reordering / resizing and empty state bug you caught are both ones present on main today. We could address those in a separate bug fix PR and merge it into main directly.

CC: @shleewhite

dchyun · 2026-08-04T14:28:50Z

@jorytindall

It looks like the reordering / resizing and empty state bug you caught are both ones present on main today. We could address those in a separate bug fix PR and merge it into main directly.

CC: @shleewhite

Created a JIRA ticket for this https://hashicorp.atlassian.net/browse/HDS-6573

hashibot-hds added the showcase label Jul 8, 2026

vercel Bot deployed to Preview – hds-showcase July 8, 2026 20:58 View deployment

vercel Bot deployed to Preview – hds-website July 8, 2026 21:00 View deployment

hashibot-hds added packages/components packages/tokens labels Jul 9, 2026

vercel Bot deployed to Preview – hds-showcase July 9, 2026 16:32 View deployment

vercel Bot deployed to Preview – hds-website July 9, 2026 16:34 View deployment

didoo force-pushed the project-solar/phase-1/shleewhite/table-carbonization branch from 4396ca7 to 0dce377 Compare July 9, 2026 19:14

vercel Bot deployed to Preview – hds-showcase July 9, 2026 19:16 View deployment

vercel Bot deployed to Preview – hds-website July 9, 2026 19:18 View deployment

vercel Bot deployed to Preview – hds-showcase July 10, 2026 20:32 View deployment

vercel Bot deployed to Preview – hds-website July 10, 2026 20:34 View deployment

vercel Bot deployed to Preview – hds-showcase July 10, 2026 21:00 View deployment

vercel Bot deployed to Preview – hds-website July 10, 2026 21:00 View deployment

vercel Bot deployed to Preview – hds-showcase July 13, 2026 15:09 View deployment

vercel Bot deployed to Preview – hds-website July 13, 2026 15:10 View deployment

vercel Bot deployed to Preview – hds-showcase July 13, 2026 20:26 View deployment

vercel Bot deployed to Preview – hds-website July 13, 2026 20:28 View deployment

shleewhite requested a review from Copilot July 13, 2026 20:30

Copilot started reviewing on behalf of shleewhite July 13, 2026 20:30 View session

shleewhite changed the title ~~[WIP] [Project Solar / Phase 1 / Migration] Table carbonization~~ [Project Solar / Phase 1 / Migration] Table carbonization Jul 13, 2026

vercel Bot deployed to Preview – hds-showcase July 13, 2026 20:44 View deployment

vercel Bot deployed to Preview – hds-website July 13, 2026 20:46 View deployment

shleewhite marked this pull request as ready for review July 13, 2026 20:47

shleewhite requested a review from a team as a code owner July 13, 2026 20:47

Copilot AI reviewed Jul 13, 2026

didoo added the project solar label Jul 14, 2026

shleewhite requested a review from Copilot July 14, 2026 14:05

Copilot started reviewing on behalf of shleewhite July 14, 2026 14:06 View session

Lee White and others added 22 commits July 31, 2026 16:34

fix: simplify token definitions

ad6c30b

simplify header cell padding styles

c12f5d1

address remaining feedback

4e8c651

fix: theme header buttons

bbf8689

start advanced table carbonization

aa00f76

add more work for advanced table

a2f55d2

more fixes

c765bf9

more finalized tokens

46b0054

more work

796dddd

fix: reduce number of tokens

7e733d3

fix: advanced table striped hover

2b51156

fix: header button borders

7742ddb

feat: add filter bar styling

e29f5d7

fix: header buttons + pinned borders

0ee0103

[SQUASHED] re-generated files in output

2b8f17b

wip

38f275e

fix: address feedback from reviews

f37f038

fix: address more feedback from reviews

d70fa00

fix: context menu focus state

7fe63f2

fix: more bugs from review

75b4cf5

fix: small issues with context menu

8b805ac

fix: visible content behind sticky header + incorrect border on carbo…

8ce489b

…n themes sticky header

didoo approved these changes Aug 3, 2026

View reviewed changes

fix: dropdown style specificity, token order

5915995

didoo approved these changes Aug 3, 2026

View reviewed changes

dchyun approved these changes Aug 3, 2026

View reviewed changes

fix: match drag preview token to figma

11f5899

jorytindall reviewed Aug 4, 2026

View reviewed changes

Uh oh!

Conversation

shleewhite commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

Copilot instructions

🔗 External links

👀 Component checklist

Uh oh!

vercel Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

didoo left a comment • 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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dchyun left a comment

Choose a reason for hiding this comment

Uh oh!

jorytindall left a comment

Choose a reason for hiding this comment

Scroll indicator

Reordering/resizing

Empty state

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dchyun commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dchyun commented Aug 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

shleewhite commented Jul 8, 2026 •

edited

Loading

vercel Bot commented Jul 8, 2026 •

edited

Loading

didoo left a comment •

edited

Loading

dchyun commented Aug 4, 2026 •

edited

Loading