Repository navigation
style(menu): conform to code style guides - #6799
Conversation
|
📚 Branch Preview Links🔍 Gen1 Visual Regression Test ResultsWhen 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: If the changes are expected, update the |
- 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>
d3c23cb to
41bbf60
Compare
| expect(oldTrigger.getAttribute('aria-haspopup')).toBe('menu'); | ||
| expect( | ||
| oldTrigger.getAttribute('aria-haspopup'), | ||
| 'initial trigger aria-haspopup' |
There was a problem hiding this comment.
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.
- 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>
Summary
Conformance pass for
swc-menuagainst the TypeScript, CSS, testing, and Storybook style guides inCONTRIBUTOR-DOCS.Menu.ts: removed thePlacementControllermention from the concrete-class JSDoc. Per11_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.tsalready follows this.menu.stories.ts: moved the shareddefaultItemstemplate (used by 7 stories) into its ownHELPERSsection instead of leaving it underPLAYGROUND STORY, matching the documented section order andpopover.stories.ts's own layout.menu.stories.ts: added the missingTriggerElement.storyName = 'Trigger element'. Without it Storybook renders the title as "Trigger Element" (title case), mismatchingmenu.mdx's### Trigger elementheading. Bothpopover.stories.tsandtooltip.stories.tsset this on their ownTriggerElementstories.menu.test.ts: added descriptive messages to the specific ARIA-attribute and focus-target assertions, matching the sub-pattern already used inpopover.test.ts.menu.cssandmenu.a11y.spec.tswere reviewed in full and found already conformant; no changes were needed there.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.tsandPopover.base.tsboth 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 "SWCindex.ts" example embedsdefineElement/global-typemap registration directly insideindex.ts, but every checked component (Badge, Popover, Menu) actually uses a separateswc-<name>.tsfile for registration, withindex.tsas a pureexport * 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.tsuses ~19 custom section headers,tooltip.test.tsuses ~12, andmenu.test.tsuses 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 eslintclean on all touched filesyarn prettier --checkclean on all touched filesstylelintclean onmenu.css(no changes, verified conformant)yarn lint:aiandyarn lint:docs-pagescleanvitest --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