[siddharthkp]

No linked issue.

Adds two standalone stories under Examples / Noodles page:

1. Primer noodles uses default Primer appearance and preserves the existing examples-noodles-page--default URL.
2. Noodles noodles brings in the existing fixed-theme demo from (ignore) just having fun miso ramen  #8636 as examples-noodles-page--noodles-noodles, including its counters, menus, footer and New page styling.

This PR is independently based on main (f733dcb2b), not stacked on an appearance-playground PR. Both versions share fictional fixtures but retain their distinct presentation. There are no configuration changes, extension files, appearance controls, Density controls, Seriousness controls or other new stories.

The only component-source changes are the same five optional ActionList/Button styling hooks used by #8636. Their fallback values are unchanged, preserving default Primer styling. The Noodles theme defines those values only inside its own scope; its registered portal container carries the same theme into menus and dialogs.

The Primer noodles stylesheet retains the CSS simplification: 430 to 219 lines (49% fewer) and 201 to 88 declarations (56% fewer), across 41 rules instead of 70. Stack owns row/content spacing, Heading owns typography, and Truncate handles breadcrumb titles. No theme variables are overridden in this version. The themed version keeps its existing dedicated stylesheet from #8636; it does not replace or expand the reduced Primer stylesheet.

Changelog

New

• Two explicitly named, render-only Noodles stories with local navigation, project subpages, report switching, page creation/renaming/duplication, comments, attachment-name demos, reading width, focus mode, Markdown preview, and reset.
• Optional ActionList hooks for label size, color and selected weight, and Button hooks for font size and weight. Default fallback tokens remain unchanged.
• Shared fictional fixtures; no credentials, authenticated resources, remote writes, persistence, Storybook play functions or storybook/test imports.

Changed

• The new story uses the existing PageLayout.Sidebar, PageLayout.Content, and PageLayout.Pane for navigation, document, and comments. The native sidebar resizes by dragging or keyboard from 240px to 480px, remembers its width through hiding and focus mode within the current page session, and resets to 312px on double-click or reload.
• Story-local height and responsive rules preserve independent scrolling and stacked comments on narrow screens in both versions.
• The Primer version composes Stack and Heading variants, uses ordinary book/person icons instead of custom artwork, and keeps switcher/cover/Create as separate actions. Its mobile header controls wrap instead of overlapping.
• The Noodles version retains its original prototype-oriented presentation and isolated theme/portal scope. The existing (ignore) just having fun miso ramen  #8636 and (ignore) just having fun playing in the playground #8632 branches are unchanged.

Removed

• Storybook interaction tests and their test-only imports. The page's real event handlers remain.
• In the Primer version only: custom cover gradients and overlaid controls, custom avatar styling, decorative nonfunctional block handles, unused appearance-playground variable hooks, redundant wrappers, and duplicate typography/list/layout rules. The Noodles version retains its existing prototype presentation.

Rollout strategy

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

A minor changeset is included for the five optional component styling hooks. Consumers do not need to adopt them; default appearance and existing APIs remain unchanged.

Testing & Reviewing

Latest verification

• node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-combined.mjs — passed. Both story IDs and labels are present; the themed styles match (ignore) just having fun miso ramen  #8636; default Button/ActionList/NavList appearance remains unchanged. Repeated live Storybook switching, scoped menu/dialog portals, independent page creation and absence of interaction tests also pass without JavaScript errors.
• NOODLES_PORT=6007 node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-pagelayout.mjs and NOODLES_PORT=6007 NOODLES_STORY=noodles-noodles node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-pagelayout.mjs — both passed. Real pointer dragging, keyboard resizing, 240/480px bounds, double-click reset, width retention, pinned header/footer, independent scrolling, focus mode, wide mode, comments and 320/390/767/768/1000px layouts remain working without page overflow.
• node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-reduced-css.mjs — passed. The Primer stylesheet remains 219 lines/88 declarations with no unused/missing classes, inline styles or theme hooks. Native typography, separate switcher/cover/Create actions, menus, Markdown and long-title layouts at 1440/768/390/320px also pass. All browser helpers are session-only and are not included in the PR.
• npx --no-install prettier --write packages/react/src/stories/NoodlesPage.stories.tsx packages/react/src/stories/NoodlesPage.themed.tsx packages/react/src/stories/NoodlesPage.themed.module.css packages/react/src/ActionList/ActionList.module.css packages/react/src/Button/ButtonBase.module.css .changeset/noodles-component-typography.md — passed; git diff --check — passed.
• Repository unit tests, builds, type checks, linters, accessibility/visual-regression suites, and dependency installs were not run, as requested. Browser verification is not a substitute for those checks.

Storybook remains running at http://localhost:6007:

• Primer noodles: http://localhost:6007/?path=/story/examples-noodles-page--default
• Noodles noodles: http://localhost:6007/?path=/story/examples-noodles-page--noodles-noodles

[changeset-bot]

🦋 Changeset detected

Latest commit: 8224c67

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.