ActionList: Handle long text better with inline description

[siddharthkp]

• Fixes https://github.com/github/primer/issues/6429
• Introduces accessibility bug that is fixed by Add keyboard-accessible tooltip for truncated ActionList.Description #7529

Before	After
title wraps, description wraps	title does not wrap, description truncates

Rollout strategy

• Patch release

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: ca3a025

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR attempts to fix long text handling in ActionList components with inline descriptions, specifically for SelectPanel use cases. The goal is to prevent titles from wrapping and truncate descriptions to keep items in a single row.

Changes:

• Added CSS to prevent ActionList item labels from shrinking when used with inline descriptions
• Added CSS to truncate inline descriptions
• Added a Storybook example demonstrating the fix with long usernames in SelectPanel
• Added e2e test coverage for the new story

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/react/src/ActionList/ActionList.module.css	Added flex-shrink: 0 to prevent label shrinking and overflow/text-overflow/white-space rules to truncate inline descriptions
packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx	Added WithLongTitles story demonstrating the fix with long usernames, including Avatar import
e2e/components/SelectPanel.test.ts	Added VRT test scenario for the new WithLongTitles story
.changeset/cold-parrots-trade.md	Added changeset documenting the patch-level change

Comments suppressed due to low confidence (2)

packages/react/src/ActionList/ActionList.module.css:644

• The flex-shrink: 0 property is redundantly applied to ItemLabel. It's already set at line 631 for all ItemLabel elements within ItemDescriptionWrap, so this duplicate declaration within the inline variant block is unnecessary and should be removed to reduce CSS redundancy.

    & .ItemLabel {
      word-break: normal;
      flex-shrink: 0;

.changeset/cold-parrots-trade.md:5

• The changeset description states "Description is truncated to keep in a single row" but the CSS changes will truncate ALL inline descriptions, not just those with the truncate prop. The description should clarify this breaking change affects all inline descriptions, or the implementation should be fixed to only truncate when the truncate prop is explicitly set to true.

ActionList: With inline descriptions, long titles and descriptions no longer wrap. Description is truncated to keep in a single row.

[Copilot]

These truncation styles are applied to ALL inline descriptions, not just those with the truncate prop set to true. This is a breaking change that will cause inline descriptions without the truncate prop to be truncated when they should wrap instead.

The test in Description.test.tsx line 9-23 expects descriptions without truncate to NOT have overflow: hidden, text-overflow: ellipsis, or white-space: nowrap, but this CSS change applies them unconditionally to all inline descriptions.

Additionally, the :has([data-truncate='true']) selector at line 647 can never match because the data-truncate attribute is never set on any element (neither in Description.tsx nor Truncate.tsx).

These truncation styles should either be:

1. Moved inside the :has([data-truncate='true']) block (lines 647-651), AND data-truncate="true" should be added to the Description component when truncate prop is true, OR
2. Applied conditionally based on a different selector that actually gets set when truncation is desired

There's also an existing story that demonstrates inline description without truncation wrapping (ActionList.features.stories.tsx line 605) which would break with this change.

See below for a potential fix:

      & .Description {
        /* adjust line-height for baseline alignment */

        /* line-height: calc(var(--control-medium-lineBoxHeight) - var(--base-size-2)); */
        /* stylelint-disable-next-line primer/typography */
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }