-
Notifications
You must be signed in to change notification settings - Fork 640
Update activeIndicatorLine to grow with content #7056
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🦋 Changeset detectedLatest commit: bd543d5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
There was a problem hiding this 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 |
packages/react/src/FilteredActionList/FilteredActionList.examples.stories.tsx
Show resolved
Hide resolved
packages/react/src/FilteredActionList/FilteredActionList.examples.stories.tsx
Show resolved
Hide resolved
| } | ||
| export default meta | ||
|
|
||
| export function WithLongItems() { |
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
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
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/5941 |
|
🟢 ci completed with status |
Changelog
Changed
Updates the active indicator lines for
ActionListandFilteredActionListto follow the content size:The active highlight remains the same
4pxoffset as before, just now carries over to all content sizes.Rollout strategy
Testing & Reviewing
Merge checklist