Skip to content

style(menu): conform to code style guides - #6799

Merged
Rajdeepc merged 2 commits into
rajdeep/menu-migrationfrom
rajdeepchandra/style-menu-code-conformance
Sep 30, 2026
Merged

Rajdeepc merged 2 commits into
rajdeep/menu-migrationfrom
rajdeepchandra/style-menu-code-conformance

Conversation

@Rajdeepc

@Rajdeepc Rajdeepc commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Conformance pass for swc-menu against the TypeScript, CSS, testing, and Storybook style guides in CONTRIBUTOR-DOCS.

  • Menu.ts: removed the PlacementController mention from the concrete-class JSDoc. Per 11_base-vs-concrete.md, internal implementation classes belong in base-class (contributor-facing) JSDoc, not concrete-class JSDoc, which is consumer- and CEM-facing. Popover.ts already follows this.
  • menu.stories.ts: moved the shared defaultItems template (used by 7 stories) into its own HELPERS section instead of leaving it under PLAYGROUND STORY, matching the documented section order and popover.stories.ts's own layout.
  • menu.stories.ts: added the missing TriggerElement.storyName = 'Trigger element'. Without it Storybook renders the title as "Trigger Element" (title case), mismatching menu.mdx's ### Trigger element heading. Both popover.stories.ts and tooltip.stories.ts set this on their own TriggerElement stories.
  • menu.test.ts: added descriptive messages to the specific ARIA-attribute and focus-target assertions, matching the sub-pattern already used in popover.test.ts.

menu.css and menu.a11y.spec.ts were reviewed in full and found already conformant; no changes were needed there.

This branch was rebuilt on top of rajdeep/menu-migration after #6763 merged, so it now contains only the conformance commit. The earlier revision carried a stale copy of the test files that predated #6763's review fixes.

Potential guideline improvements

Each item below is a case where Menu's code is correct and consistent with real precedent, but the written guide doesn't describe the pattern:

  • CONTRIBUTOR-DOCS/02_style-guide/02_typescript/06_method-patterns.md — the documented method-ordering rule (public first, protected second, private last) doesn't describe the actual, consistent pattern used by complex, controller-composing base classes. Menu.base.ts and Popover.base.ts both group methods by topic (trigger wiring, show/hide, placement) rather than strict access-level, with lifecycle methods (connectedCallback/disconnectedCallback) positioned mid-file per Lit lifecycle order rather than always first/last by visibility. A note describing this topic-grouping exception for complex base classes would prevent a future reviewer from "fixing" working code into a worse, precedent-diverging state.
  • CONTRIBUTOR-DOCS/02_style-guide/02_typescript/01_file-organization.md — the "SWC index.ts" example embeds defineElement/global-typemap registration directly inside index.ts, but every checked component (Badge, Popover, Menu) actually uses a separate swc-<name>.ts file for registration, with index.ts as a pure export * from './Component.js'; re-export. The example should be updated to match the real, universal convention.
  • CONTRIBUTOR-DOCS/02_style-guide/04_testing/02_storybook-testing.md — the "organize tests into exactly five sections" rule (Defaults, Properties/Attributes, Slots, Variants/States, Dev mode warnings) doesn't match the real pattern for complex, behavior-heavy components. popover.test.ts uses ~19 custom section headers, tooltip.test.ts uses ~12, and menu.test.ts uses 15 (several names, e.g. "Shadow root scoping" and "PlacementController integration", are verbatim-identical across components), confirming this is a deliberate, consistent, cross-component pattern the guide doesn't document. The five-section rule should be scoped to simple components, with guidance for complex ones to use as many named sections as their behavior surface warrants.

Test plan

  • yarn eslint clean on all touched files
  • yarn prettier --check clean on all touched files
  • stylelint clean on menu.css (no changes, verified conformant)
  • yarn lint:ai and yarn lint:docs-pages clean
  • vitest --run --project storybook components/menu/ — 38/38 tests pass (3 consecutive runs)
  • playwright --config=playwright.a11y.2ndgen.config.ts menu.a11y.spec.ts — 6/6 pass

🤖 Generated with Claude Code

@Rajdeepc
Rajdeepc requested a review from a team as a code owner September 24, 2026 13:49
@changeset-bot

changeset-bot Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 0094699

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@Rajdeepc
Rajdeepc changed the base branch from rajdeepchandra/test-menu-suite to rajdeep/menu-migration September 24, 2026 13:50
@github-actions

Copy link
Copy Markdown
Contributor

📚 Branch Preview Links

🔍 Gen1 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6799

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

@Rajdeepc
Rajdeepc marked this pull request as draft September 25, 2026 07:43
- Menu.ts: drop the PlacementController mention from the concrete class
  JSDoc. Per the base-vs-concrete guide, internal implementation classes
  belong in base-class (contributor-facing) JSDoc, not concrete-class
  JSDoc, which is consumer- and CEM-facing. Popover.ts already follows
  this.
- menu.stories.ts: move the shared defaultItems template into its own
  HELPERS section rather than leaving it under PLAYGROUND STORY, matching
  the documented section order and popover.stories.ts's own layout.
- menu.stories.ts: add the missing TriggerElement.storyName override.
  Without it Storybook renders the title as "Trigger Element" (title
  case), mismatching menu.mdx's "### Trigger element" heading. Both
  popover.stories.ts and tooltip.stories.ts set this on their own
  TriggerElement stories.
- menu.test.ts: add descriptive messages to the specific ARIA-attribute
  and focus-target assertions, matching the sub-pattern already used in
  popover.test.ts.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@Rajdeepc
Rajdeepc force-pushed the rajdeepchandra/style-menu-code-conformance branch from d3c23cb to 41bbf60 Compare September 29, 2026 16:21
@Rajdeepc Rajdeepc self-assigned this Sep 29, 2026
@Rajdeepc Rajdeepc added Component:Menu gen2 These issues or PRs map to our 2nd generation work to modernizing infrastructure. labels Sep 29, 2026
@Rajdeepc
Rajdeepc marked this pull request as ready for review September 29, 2026 16:32
@Rajdeepc Rajdeepc added the Status:Ready for review PR ready for review or re-review. label Sep 29, 2026
Rajdeepc

This comment was marked as off-topic.

expect(oldTrigger.getAttribute('aria-haspopup')).toBe('menu');
expect(
oldTrigger.getAttribute('aria-haspopup'),
'initial trigger aria-haspopup'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i dont see a reason not to include the expect messages so it helps with debugging if that were to ever throw an error. I would add them since its only two in the entire file that doesnt follow the pattern.

Comment thread 2nd-gen/packages/swc/components/menu/test/menu.test.ts Outdated
- Menu.ts: add the missing `@since 2.0.0-beta.4` tag, matching the
  convention every other migrated concrete class already follows
  (Popover, Tooltip, Badge). The newest release tag is gen2-2.0.0-beta.3,
  so the next cut is beta.4.
- menu.test.ts: message the last two ARIA assertions that were still
  bare, so the whole file follows one pattern rather than most of it.
- menu.test.ts: drop the redundant `{ timeout: 1000 }` from all 35
  waitFor calls. 1000ms is already testing-library's `asyncUtilTimeout`
  default and vitest.config.js does not override it, so these restated
  the default as noise; popover.test.ts passes no explicit timeout on
  any of its 32 waitFor calls. The single `{ timeout: 2000 }` is kept,
  since that one genuinely doubles the default while waiting on the exit
  transition to clear `actual-placement`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@Rajdeepc Rajdeepc added Status:Ready for re-review PR has had its feedback addressed and is once again ready for review. and removed Status:Ready for review PR ready for review or re-review. labels Sep 30, 2026
@Rajdeepc
Rajdeepc merged commit 2bc4cf0 into rajdeep/menu-migration Sep 30, 2026
30 checks passed
@Rajdeepc
Rajdeepc deleted the rajdeepchandra/style-menu-code-conformance branch September 30, 2026 11:18
@Rajdeepc Rajdeepc mentioned this pull request Oct 1, 2026
4 of 7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Component:Menu gen2 These issues or PRs map to our 2nd generation work to modernizing infrastructure. Status:Ready for re-review PR has had its feedback addressed and is once again ready for review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants