Skip to content

Conversation

@adierkens
Copy link
Contributor

@adierkens adierkens commented Oct 22, 2025

Changelog

Changed

Updates the active indicator lines for ActionList and FilteredActionList to follow the content size:

Before After
FilteredActionList with baseline indicator FilteredActionList with updated active indicator

The active highlight remains the same 4px offset as before, just now carries over to all content sizes.

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

@changeset-bot
Copy link

changeset-bot bot commented Oct 22, 2025

🦋 Changeset detected

Latest commit: bd543d5

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

This PR includes changesets to release 2 packages
Name Type
@primer/react Minor
@primer/styled-react Major

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 github-actions bot temporarily deployed to storybook-preview-7056 October 22, 2025 19:25 Inactive
@adierkens adierkens marked this pull request as ready for review October 22, 2025 19:26
@adierkens adierkens requested a review from a team as a code owner October 22, 2025 19:26
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR updates the active indicator lines in ActionList and FilteredActionList components to dynamically grow with content height instead of using a fixed height. The change ensures that multi-line items display the indicator line properly across their full height while maintaining the same 4px offset.

Key Changes:

  • Modified the CSS mixin to use dynamic height calculation based on content
  • Added a new Storybook example story demonstrating the behavior with long, wrapping text items

Reviewed Changes

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

File Description
packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css Changed from fixed positioning/height to dynamic height that grows with content
packages/react/src/FilteredActionList/FilteredActionList.examples.stories.tsx Added new example story showcasing the indicator with long, wrapping text items
.changeset/bright-ravens-jog.md Added changeset entry documenting the minor version update

@francinelucca francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 22, 2025
@primer primer bot requested a review from a team as a code owner October 22, 2025 19:38
@primer primer bot requested a review from mperrotti October 22, 2025 19:38
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 22, 2025
@github-actions github-actions bot temporarily deployed to storybook-preview-7056 October 22, 2025 19:54 Inactive
}
export default meta

export function WithLongItems() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's ok if we don't but it we want this to have VRT, we should add it to e2e/components/* (noticed we don't have one for FilteredActionList, might be a good time to add one)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. Added FilteredActionList to the e2e snapshots

@adierkens adierkens added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 30, 2025
@github-actions github-actions bot temporarily deployed to storybook-preview-7056 October 30, 2025 13:41 Inactive
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 30, 2025
@github-actions github-actions bot temporarily deployed to storybook-preview-7056 October 30, 2025 13:55 Inactive
@primer-integration
Copy link

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/5941

@primer-integration
Copy link

🟢 ci completed with status success.

@github-actions github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Oct 30, 2025
@adierkens adierkens added this pull request to the merge queue Oct 31, 2025
Merged via the queue into main with commit 6ff2797 Oct 31, 2025
42 checks passed
@adierkens adierkens deleted the adierkens/action-list-active branch October 31, 2025 13:20
@primer primer bot mentioned this pull request Oct 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants