[siddharthkp]

No linked issue.

Adds one standalone Examples / Noodles page / Default story with the fixed Noodles theme.

This PR is independently based on main (f733dcb2b), not stacked on the default-Primer story PR or any appearance-playground PR. It includes the same standalone workspace and fictional fixtures, a page-scoped theme, and only the component changes required for its typography: six CSS declaration replacements across ActionList and Button, exposing five optional hooks.

There are no other new stories, configuration changes, appearance-playground providers, token engines, theme catalogs, extension files, appearance controls, Density controls, or Seriousness controls. Portal uses its existing public registration/context APIs and is not modified.

The story is render-only, without a Storybook play function or storybook/test imports. The page's real interactions remain available.

Changelog

New

• One standalone, interactive Noodles-inspired workspace with original fictional fixtures and a fixed, page-scoped theme. Navigation, project subpages, report switching, page creation/renaming/duplication, comments, attachment-name demos, reading width, focus mode, Markdown preview, and reset run locally without credentials, remote writes, or persistence.

• Five optional component typography hooks, each falling back to the exact existing value:

  Component	CSS custom property	Existing fallback
  ActionList	--ActionList--label-fontSize-medium	--text-body-size-medium
  ActionList	--ActionList--label-fontWeight-selected	--base-text-weight-semibold
  ActionList	--ActionList--label-fgColor	--fgColor-default
  Button	--Button--fontSize-medium	--text-body-size-medium
  Button	--Button--fontWeight	--base-text-weight-medium

Changed

• Use 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, retains its width through hiding and focus mode for the current page session, and resets to 312px on double-click or reload. Story-local height and responsive rules preserve independent scrolling and narrow-screen stacking. No PageLayout component-source changes or additional styling hooks are required.
• ActionList and Button read the optional hooks above. The selected-label weight hook covers both directly active navigation items and collapsed parents containing the current page.
• In this story only, existing semantic tokens provide neutral selection, no navigation accent stripe, system typography, lighter label weights, white default buttons, and dark primary buttons. Menus and dialogs inherit the same scoped theme through a registered portal container.
• Unscoped component appearance and behavior remain unchanged. Includes a minor changeset for the additive styling hooks.
• Match the prototype's story-local details: 11px tabular pill counters, compact white menus with icons and 28px rows, a 13px sidebar footer with a 28px demo-account row, and a muted New page control with full-opacity hover and keyboard-focus states. No additional component-source changes are required.

Removed

Storybook interaction tests and their test-only imports were removed. The page's real interactions, layout and styling remain unchanged.

Rollout strategy

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

New styling hooks are opt-in and retain existing semantic-token fallbacks. The theme is confined to the story, not applied globally.

Testing & Reviewing

Latest verification

• node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-render-only.mjs — passed. Session-only browser smoke check confirms that neither standalone story has a play function or storybook/test import, both load without automatic demo mutations, and manual resizing, page creation, comments and reset still work without JavaScript errors.

Earlier verification, before removing the Storybook interaction tests

• PageLayout follow-up: NOODLES_PORT=6008 node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-pagelayout.mjs — passed. Session-only Playwright harness, not included in the PR: real pointer dragging, keyboard resizing, 240/480px bounds, double-click reset, width retention through sidebar toggles and focus mode, pinned header/footer during document scrolling, navigation scrolling, wide mode, desktop/stacked comments, and 320/390/767/768/1000px layouts. The story's interaction play also passed, including its new keyboard-resize assertions. No horizontal or vertical page overflow or JavaScript errors were observed.
• STORYBOOK=true npm run storybook --workspace @primer/react -- dev --port 6008 --no-open --ci — running successfully; /index.json returns HTTP 200 and discovers exactly one new Noodles story.
• Open /?path=/story/examples-noodles-page--default. The story's interaction assertions passed in Chrome, including muted 13px navigation labels, 400-weight selected labels on collapsed parents, and 13px/400-weight dark primary buttons.
• node ../verify-noodles-prs.mjs — passed. This is a local, session-only Playwright harness, intentionally not included in the PR. It checked the story's final interaction state, navigation, report switching, rename/duplicate, attachments, reading width, focus mode, themed menu/dialog portals, and layouts at 1440 × 1100 and 390 × 844, with no horizontal overflow or JavaScript errors.
• node ../verify-noodles-prototype-styles.mjs — passed against both the standalone themed story and the live Noodles-theme preview. Verified the reference's measured 24 × 18px two-digit counters, 28px menu rows, 4px menu padding, white popup with 12px corners, 109px footer, 28px account row, 32px New page control, and 16px bottom inset. Keyboard menu navigation, focus restoration, New page activation, account/settings actions, and the existing narrow-screen behavior also passed. This focused browser harness is session-only and not included in the PR.
• The same browser harness compared the existing default ActionList, NavList, and Button stories against the unchanged main-based worktree: unscoped component styles matched exactly, including label typography and navigation indicators.
• git diff --cached --check — passed. Changed files were formatted using the existing Prettier.
• 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.

[changeset-bot]

🦋 Changeset detected

Latest commit: a67085e

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.