[Project Solar / Phase 1 / Cherry-pick] Cherry-pick updates to the HDS components by didoo · Pull Request #3947 · hashicorp/design-system

didoo · 2026-06-24T12:42:24Z

Note

Code cherry picked (and in some cases tweaked) from #3237

📌 Summary

There are some minor changes made to the HDS components in #3237 that can be cherry picked and imported directly and safely to the main branch.

🛠️ Detailed description

See commits descriptions for details about the changes.

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-6479

👀 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-06-24T12:42:31Z

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

Project	Deployment	Actions	Updated (UTC)
hds-showcase	Ready	Preview	Jun 29, 2026 1:05pm
hds-website	Ready	Preview	Jun 29, 2026 1:05pm

Copilot

Pull request overview

This PR cherry-picks a set of updates from the Project Solar Phase 1 work into main, spanning component styling tweaks, additional modifier classes for targeting, and integration test stabilization in the showcase app.

Changes:

Updated multiple component templates to add/adjust CSS modifier classes (Dropdown list items, Pagination variants, Tag variants).
Adjusted component SCSS (Flyout shadow token usage, LinkStandalone hover color, and substantial Badge/BadgeCount styling changes).
Stabilized Tooltip integration testing by removing timing-based waits and using waitUntil.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gts	Replaces fixed waits with `waitUntil` + disables tippy animation timing for more reliable assertions.
showcase/tests/integration/components/hds/tag/index-test.gts	Adds integration coverage for Tag “interactive vs static” rendering and classes.
packages/components/src/styles/components/link/standalone.scss	Sets an explicit secondary hover color to avoid unintended overrides.
packages/components/src/styles/components/flyout.scss	Switches Flyout box-shadow to the `--token-elevation-overlay-box-shadow` token.
packages/components/src/styles/components/badge.scss	Refactors Badge styles to use `--token-badge-*` variables for sizing and color/type combinations.
packages/components/src/styles/components/badge-count.scss	Refactors BadgeCount styles to use `--token-badge-` / `--token-badge-count-` variables.
packages/components/src/components/hds/tag/index.gts	Adds `hds-tag--is-interactive` / `hds-tag--is-static` modifier classes based on `@href`/`@route`.
packages/components/src/components/hds/pagination/size-selector/index.gts	Removes extra whitespace in the label markup.
packages/components/src/components/hds/pagination/numbered/index.gts	Adds `hds-pagination--numbered` modifier class on the root element.
packages/components/src/components/hds/pagination/compact/index.gts	Adds `hds-pagination--compact` modifier class on the root element.
packages/components/src/components/hds/dropdown/toggle/button.gts	Simplifies `badgeType` conditional logic (no functional change).
packages/components/src/components/hds/dropdown/list-item/radio.gts	Adds missing `hds-dropdown-list-item--color-action` class to the list item.
packages/components/src/components/hds/dropdown/list-item/checkbox.gts	Adds missing `hds-dropdown-list-item--color-action` class to the list item.
.changeset/rare-falcons-guess.md	Adds a changeset for the cherry-picked updates (needs formatting/content fixes).

…ify code

(no actual changes for the consumers)

…ss to `Checkbox/Radio` list items

…a HDS `Text` component with standard HTML tags and updated CSS styles to use newly added component-level design tokens

…possible overrides #3920

…`/`hds-pagination—compact` to variants

…tag--is-static` to variants

…ed `-color` icon with normal icon (dynamically tinted)

dchyun · 2026-06-25T17:28:38Z

  <template>
-    <li class="hds-dropdown-list-item hds-dropdown-list-item--variant-checkbox">
+    <li
+      class="hds-dropdown-list-item hds-dropdown-list-item--color-action hds-dropdown-list-item--variant-checkbox"


[Issue] For this class name addition to have an effect, the dropdown styles need to be adjusted for this selector. The .hds-dropdown-list-item__label selector needs to be added to the child selector list

.hds-dropdown-list-item--color-action { a, button, .hds-dropdown-list-item__label {

dchyun · 2026-06-25T17:35:00Z

  <template>
-    <li class="hds-dropdown-list-item hds-dropdown-list-item--variant-checkbox">
+    <li
+      class="hds-dropdown-list-item hds-dropdown-list-item--color-action hds-dropdown-list-item--variant-checkbox"


[Note][Non-blocker] Not for this PR, but an improvement could be made to the showcase page to show the hover/active states on the label as well. Right now the mock hover is only applied to the checkbox input, not the label. So there is no way to see the label interactive states besides manually triggering them.

(From the carbonization main feature branch)
Existing mock hover view

Actual hover state (triggered via mouse)

dchyun · 2026-06-25T17:41:35Z

+---
+
+<!-- START components/dropdown -->
+`Dropdown` - Added missing `hds-dropdown-list-item--color-action` class to `DropdownListItemCheckbox/Radio` list items.


[Suggestion] Once implemented correctly (see previous comment) this will result in a visual change to the hover state for the checkbox and radio. That could be worth mentioning.

dchyun · 2026-06-25T18:06:12Z

  <template>
-    <li class="hds-dropdown-list-item hds-dropdown-list-item--variant-checkbox">
+    <li
+      class="hds-dropdown-list-item hds-dropdown-list-item--color-action hds-dropdown-list-item--variant-checkbox"


[Question][Design] Does this update to the hover color need to be made in Figma as well?

dchyun · 2026-06-25T18:13:12Z

[todo] Add changeset for icon tile about changing color argument classes and border radii

dchyun · 2026-06-25T18:17:54Z

+<!-- END -->
+
+<!-- START components/pagination -->
+`Pagination`


[Suggestion] I think the script may get hung up with this format since there isn't a - after the component name. Recommended formatting from confluence is more like this

 `{component-name}` - Changed {...additional details}, including: - {change 1} - {change 2} 

Could also split these into two entries

 `Pagination` - Added extra modifier classes `hds-pagination--numbered`/`hds-pagination—compact` to variants.   `Pagination` - Removed extra whitespace in label for `PaginationSizeSelector`.

dchyun · 2026-06-25T18:19:50Z


  <template>
-    <div class="hds-pagination" ...attributes>
+    <div class="hds-pagination hds-pagination--compact" ...attributes>


[Suggestion] Is it worth updating the tests to use the more specific class name for each component?

test('it should render the component with a CSS class that matches the component name', async function (assert) { await render( <template> <HdsPaginationCompact id="test-pagination-compact" /> </template>, ); assert.dom('#test-pagination-compact').hasClass('hds-pagination'); });

dchyun · 2026-06-25T18:22:10Z

[Note] These changes will fix the issues I raised with #3946 for the showcase updates.

dchyun · 2026-06-25T18:23:33Z

[todo] Add changeset for badge and badge count style changes

shleewhite · 2026-06-25T18:29:25Z

    if (this.args.logo) {
-      // for the logo version we use the colored versions directly
-      return `${this.args.logo}-color`;
+      return this.args.logo;


I noticed theres no changelog entry for icon tile, does this not change anything for the consumer?

shleewhite · 2026-06-25T18:34:56Z

+    assert.dom('#test-tag').doesNotHaveClass('hds-tag--is-static');
+    assert.dom('#test-tag').hasClass('hds-tag--is-interactive');
+    assert.dom('#test-tag .hds-tag__text').doesNotExist();
+    assert.dom('#test-tag .hds-tag__link').exists();


Suggestion: also check that the element with .hds-tag__link is actually an anchor

didoo requested a review from a team as a code owner June 24, 2026 12:42

didoo requested a review from Copilot June 24, 2026 12:42

hashibot-hds added packages/components showcase labels Jun 24, 2026

didoo added project solar and removed packages/components showcase labels Jun 24, 2026

Copilot started reviewing on behalf of didoo June 24, 2026 12:43 View session

vercel Bot deployed to Preview – hds-showcase June 24, 2026 12:43 View deployment

didoo marked this pull request as draft June 24, 2026 12:44

vercel Bot deployed to Preview – hds-website June 24, 2026 12:46 View deployment

Copilot AI reviewed Jun 24, 2026

View reviewed changes

Comment thread packages/components/src/styles/components/badge.scss

Comment thread packages/components/src/styles/components/badge-count.scss

Comment thread .changeset/rare-falcons-guess.md

didoo force-pushed the project-solar/phase-1/HDS-6479/cherry-pick-component-updates branch from 42ca5ff to 3383d0d Compare June 24, 2026 15:34

hashibot-hds added packages/components packages/tokens showcase labels Jun 24, 2026

didoo changed the base branch from main to project-solar/phase-1/HDS-6480/cherry-pick-tokens-updates June 24, 2026 15:35

vercel Bot deployed to Preview – hds-showcase June 24, 2026 15:36 View deployment

didoo force-pushed the project-solar/phase-1/HDS-6480/cherry-pick-tokens-updates branch from db5282c to 1f353a6 Compare June 24, 2026 15:36

didoo force-pushed the project-solar/phase-1/HDS-6479/cherry-pick-component-updates branch from 3383d0d to d995067 Compare June 24, 2026 15:37

hashibot-hds removed the packages/tokens label Jun 24, 2026

vercel Bot deployed to Preview – hds-showcase June 24, 2026 15:39 View deployment

vercel Bot deployed to Preview – hds-website June 24, 2026 15:41 View deployment

didoo force-pushed the project-solar/phase-1/HDS-6479/cherry-pick-component-updates branch from d995067 to 8f01e6f Compare June 24, 2026 17:54

vercel Bot deployed to Preview – hds-showcase June 24, 2026 17:56 View deployment

vercel Bot deployed to Preview – hds-website June 24, 2026 17:58 View deployment

dchyun added this to the design-system-components@6.3.0 milestone Jun 24, 2026

didoo force-pushed the project-solar/phase-1/HDS-6480/cherry-pick-tokens-updates branch from e90162e to 20078d4 Compare June 24, 2026 18:43

didoo force-pushed the project-solar/phase-1/HDS-6479/cherry-pick-component-updates branch from 8f01e6f to 7cbff96 Compare June 24, 2026 19:54

vercel Bot deployed to Preview – hds-showcase June 24, 2026 21:04 View deployment

vercel Bot deployed to Preview – hds-website June 24, 2026 21:07 View deployment

didoo marked this pull request as ready for review June 24, 2026 21:34

didoo requested review from KristinLBradley, dchyun and shleewhite June 24, 2026 21:35

didoo force-pushed the project-solar/phase-1/HDS-6480/cherry-pick-tokens-updates branch from 20078d4 to 7683c64 Compare June 25, 2026 09:36

didoo and others added 14 commits June 25, 2026 10:40

Bagde/BadgeCount - used loops in Sass styles definitions to simpl…

75a596f

…ify code

CodeEditor - Fixed issue with icon colors in different states

fd71e56

(no actual changes for the consumers)

Dropdown - inverted internal boolean logic for badgeType

c18681e

Dropdown - added missing hds-dropdown-list-item--color-action cla…

21824e8

…ss to `Checkbox/Radio` list items

Flyout - applied standard box shadow

faef2f6

Form/Base Elements - replaced rendering of text in base elements vi…

de5a179

…a HDS `Text` component with standard HTML tags and updated CSS styles to use newly added component-level design tokens

LinkStandalone - set explicit secondary hover state color to avoid …

07dc3ff

…possible overrides #3920

Pagination - added extra modifier classes `hds-pagination--numbered…

5b5b1b1

…`/`hds-pagination—compact` to variants

Pagination - removed extra whitespace in label for SizeSelector

2d93f73

Tag - added extra modifiers classes hds-tag--is-interactive/`hds-…

b260595

…tag--is-static` to variants

updated integration test for tag

690df27

updated integration test for tooltip-button

edc78ff

IconTile - Updated how colors are applied to the element and replac…

053dbc4

…ed `-color` icon with normal icon (dynamically tinted)

changeset

bf14a68

didoo force-pushed the project-solar/phase-1/HDS-6479/cherry-pick-component-updates branch from e04d7de to bf14a68 Compare June 25, 2026 09:40

vercel Bot deployed to Preview – hds-showcase June 25, 2026 09:41 View deployment

vercel Bot deployed to Preview – hds-website June 25, 2026 09:44 View deployment

dchyun reviewed Jun 25, 2026

View reviewed changes

shleewhite reviewed Jun 25, 2026

View reviewed changes

dchyun mentioned this pull request Jun 25, 2026

[Project Solar / Phase 1 / Cherry-pick] Cherry-pick updates to the standard Showcase pages #3946

Open

4 tasks

Tag - fix classes selectors for “focus” state

2fdcdb9

vercel Bot deployed to Preview – hds-showcase June 29, 2026 13:02 View deployment

vercel Bot deployed to Preview – hds-website June 29, 2026 13:05 View deployment

Uh oh!

Conversation

didoo commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

🛠️ Detailed description

🔗 External links

👀 Component checklist

Uh oh!

vercel Bot commented Jun 24, 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

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

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!

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

didoo commented Jun 24, 2026 •

edited

Loading

vercel Bot commented Jun 24, 2026 •

edited

Loading