[siddharthkp]

No linked issue.

Exploring what would it be like to build Noodles with primer and a custom noodles theme.

The standalone story separates two concerns:

• NoodlesPage.theme.module.css: Noodles theme variables and component overrides, including the hidden sidebar divider, menus, counters, buttons and headings.
• NoodlesPage.stories.module.css: Story structure, artwork, layout, scrolling, reading width and responsive regions. It consumes tokens but defines no theme variables.

The story imports both CSS Modules explicitly. Menus and dialogs remain inside the themed portal scope. This split preserves every original CSS declaration and does not change appearance or interactions.

Changelog

New

• A standalone Noodles story with fictional fixtures and local interactions, without appearance-playground controls or Storybook interaction tests.
• Five optional ActionList/Button typography hooks with unchanged defaults, covered by the existing minor changeset.

Changed

• Separate Noodles theme tokens and component overrides from the CSS required to lay out the story.
• Keep the transparent sidebar-divider override in the theme, including its narrow-screen treatment. Native pointer/keyboard resizing and hover/focus feedback remain unchanged.

Removed

No functionality removed by this refactor.

Rollout strategy

• No changes needed in github/github-ui
• Needs changes in github/github-ui
• Ships with feature flag(s)
• Not sure
• None

The theme is story-scoped. The existing minor changeset remains accurate for the optional component typography hooks; this story-only split needs no additional changeset.

Testing & Reviewing

• node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-css-split.mjs before and node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-css-split.mjs — passed. Compared desktop, menu, dialog and mobile computed styles and geometry against the pre-split baseline. Only browser-dependent resolved insets on visually clipped dialog focus guards are excluded; their geometry is still checked.
• node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-sidebar-divider.mjs — passed. The permanent line remains hidden; resize geometry, hover feedback and visible keyboard focus remain unchanged.
• NOODLES_PORT=6008 node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-pagelayout.mjs and NOODLES_PORT=6008 node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-render-only.mjs — both passed. Native resize/bounds/reset, scrolling, focus mode, wide mode, comments, responsive layouts and manual page creation/reset remain working without JavaScript errors. Browser helpers are session-only, not included in the PR.
• npx --no-install prettier --write packages/react/src/stories/NoodlesPage.stories.tsx packages/react/src/stories/NoodlesPage.stories.module.css packages/react/src/stories/NoodlesPage.theme.module.css — passed; git diff --cached --check — passed. A local PostCSS/source check also confirmed exact declaration preservation, no missing/unused CSS Module references, no theme-variable definitions in the story stylesheet and no added play functions.
• Repository unit tests, builds, type checks, linters, accessibility/visual-regression suites and dependency installs were not run, as requested.

Preview: http://localhost:6008/?path=/story/examples-noodles-page--default

[changeset-bot]

🦋 Changeset detected

Latest commit: 3e24575

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]

⚠️ Action required

👋 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. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.