chore(ActionList): Remove the CSS modules feature flag from the ActionList/List component #6019

jonrohan · 2025-05-07T17:52:51Z

Part of https://github.com/github/primer/issues/3961

I'm going to attempt to break ActionList up into smaller chunks because of the complexity of the component.

Changelog

New

Changed

Removed

Remove the CSS modules feature flag from the ActionList/List component

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

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 (Learn more about how to run integration tests)

changeset-bot · 2025-05-07T17:52:55Z

🦋 Changeset detected

Latest commit: fc1926e

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	Minor

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 · 2025-05-07T17:53:23Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-05-07T17:56:13Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	97.03 KB (-0.11% 🔽)
packages/react/dist/browser.umd.js	97.49 KB (-0.06% 🔽)

primer-integration · 2025-05-07T18:18:02Z

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

primer-integration · 2025-05-07T19:12:45Z

🟢 golden-jobs completed with status success.

Copilot

Pull Request Overview

This PR removes the CSS modules feature flag from the ActionList/List component and simplifies its rendering by consolidating styled variants into a single BoxWithFallback wrapper.

Eliminated styled-components and manual sx merging in favor of BoxWithFallback.
Removed feature-flag logic around CSS modules and cleaned up related imports.
Updated tests to drop feature-flag scenarios and added a changeset entry.

Reviewed Changes

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

File	Description
packages/react/src/ActionList/List.tsx	Replaced conditional styled/ul branches with `BoxWithFallback` and removed feature-flag code
packages/react/src/ActionList/ActionList.test.tsx	Deleted tests specific to the removed CSS modules feature flag
.changeset/shaggy-states-travel.md	Added a changeset to document the removal of the feature flag

Comments suppressed due to low confidence (1)

packages/react/src/ActionList/List.tsx:60

Add tests for the new BoxWithFallback implementation to verify that default styling resets are applied and that the component correctly handles ref forwarding.

<BoxWithFallback

Copilot · 2025-05-07T19:19:29Z

packages/react/src/ActionList/List.tsx

-        )}
+        <BoxWithFallback
+          as="ul"
+          sx={sxProp}


Default list styles (margin reset, paddingInlineStart reset, and paddingY for the inset variant) were removed when replacing ListBox. Consider merging the original styles object with sxProp (e.g., sx={merge(styles, sxProp)}) to maintain the intended resets.

Suggested change

sx={sxProp}

sx={merge(

{

margin: 0,

paddingInlineStart: 0,

...(variant === 'inset' && {paddingY: 2}),

},

sxProp,

)}

Copilot · 2025-05-07T19:19:29Z

packages/react/src/ActionList/List.tsx

-            {childrenWithoutSlots}
-          </ListBox>
-        )}
+        <BoxWithFallback


The forwarded ref (forwardedRef or listRef) is no longer passed to BoxWithFallback, which may break focus management and other ref-dependent logic. Pass ref={listRef} (or forwardedRef) to ensure ref forwarding works correctly.

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

…#6018)

…nList.Divider component (#6022) Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

…nList.TrailingAction component (#6021) Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

…onent (#6014) Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Jamie Shark <5520141+jamieshark@users.noreply.github.com> Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

github-actions · 2025-05-09T16:29:43Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

…nList/List component (#6019) Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Jamie Shark <5520141+jamieshark@users.noreply.github.com>

Remove the CSS modules feature flag from the ActionList/List component

790fdd0

github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 7, 2025

jonrohan deployed to github-pages May 7, 2025 18:06 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6019 May 7, 2025 18:06 Inactive

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 7, 2025

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 May 7, 2025

jonrohan marked this pull request as ready for review May 7, 2025 19:18

Copilot AI review requested due to automatic review settings May 7, 2025 19:18

jonrohan requested a review from a team as a code owner May 7, 2025 19:18

jonrohan requested a review from francinelucca May 7, 2025 19:18

Copilot AI reviewed May 7, 2025

View reviewed changes

francinelucca approved these changes May 8, 2025

View reviewed changes

jonrohan and others added 9 commits May 9, 2025 16:27

Remove the extra VRT runs with the CSS module flags enabled (#6016)

251601f

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

primer_react_select_panel_order_selected_at_top off by default (#6024)

7601861

Release tracking (#6011)

d2eda00

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Fix extra padding on SelectPanel with groups (#6009)

dd71678

refactor: update tests to vitest, move all component tests to folders (…

95035a2

…#6018)

chore(ActionList): Remove the CSS modules feature flag from the Actio…

776de1b

…nList.Divider component (#6022) Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

chore(ActionList): Remove the CSS modules feature flag from the Actio…

dfa203d

…nList.TrailingAction component (#6021) Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

Remove the CSS modules feature flag from Pagination component (#5997)

00d9b1d

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

jonrohan requested a review from a team as a code owner May 9, 2025 16:28

jonrohan requested a review from maximedegreve May 9, 2025 16:28

Merge branch 'main' into css_modules_remove_flag/actionlist_list

fc1926e

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 9, 2025

jonrohan enabled auto-merge May 9, 2025 16:30

jonrohan added this pull request to the merge queue May 9, 2025

jonrohan deployed to github-pages May 9, 2025 16:42 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6019 May 9, 2025 16:42 View deployment

Merged via the queue into main with commit 6c2c999 May 9, 2025
35 checks passed

jonrohan deleted the css_modules_remove_flag/actionlist_list branch May 9, 2025 16:52

primer bot mentioned this pull request May 9, 2025

Release tracking (37.24.0) #6029

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(ActionList): Remove the CSS modules feature flag from the ActionList/List component #6019

chore(ActionList): Remove the CSS modules feature flag from the ActionList/List component #6019

Uh oh!

jonrohan commented May 7, 2025

Uh oh!

changeset-bot bot commented May 7, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 7, 2025

Uh oh!

github-actions bot commented May 7, 2025 •

edited

Loading

Uh oh!

primer-integration bot commented May 7, 2025

Uh oh!

primer-integration bot commented May 7, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI May 7, 2025

Uh oh!

Copilot AI May 7, 2025

Uh oh!

github-actions bot commented May 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

-          sx={sxProp}
+          sx={merge(
+            {
+              margin: 0,
+              paddingInlineStart: 0,
+              ...(variant === 'inset' && {paddingY: 2}),
+            },
+            sxProp,
+          )}

chore(ActionList): Remove the CSS modules feature flag from the ActionList/List component #6019

chore(ActionList): Remove the CSS modules feature flag from the ActionList/List component #6019

Uh oh!

Conversation

jonrohan commented May 7, 2025

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented May 7, 2025

Uh oh!

github-actions bot commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

primer-integration bot commented May 7, 2025

Uh oh!

primer-integration bot commented May 7, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

changeset-bot bot commented May 7, 2025 •

edited

Loading

github-actions bot commented May 7, 2025 •

edited

Loading