feat: add Storybook stories for pure components#7100
Conversation
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.
Once credits are available, reopen this pull request to trigger a review.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 3 Skipped Deployments
|
github-actions
Bot
added
front-end
Docker builds report
|
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Failed testsfirefox › tests/environment-permission-test.pw.ts › Environment Permission Tests › Environment-level permissions control access to features, identities, and segments @enterprise
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Failed testsfirefox › tests/environment-permission-test.pw.ts › Environment Permission Tests › Environment-level permissions control access to features, identities, and segments @enterprise
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
|
github-actions
Bot
added
feature
github-actions
Bot
added
feature
github-actions
Bot
added
feature
github-actions
Bot
added
feature
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.
Once credits are available, reopen this pull request to trigger a review.
Visual Regression16 screenshots compared. See report for details. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7100 +/- ##
=======================================
Coverage 98.44% 98.44%
=======================================
Files 1398 1398
Lines 52628 52646 +18
=======================================
+ Hits 51808 51826 +18
Misses 820 820 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Wire up the missing pieces for Storybook to render real app components in isolation: - Webpack mocks for @ionic/react / ionicons/icons (legacy IonIcon consumers render a placeholder span), dompurify (CJS/ESM mismatch), code-help and _data (CommonJS modules that break the ESM bundler) - Stub helper utilities (escapeHtml, isSaas, fromParam, GUID, colour) used transitively so stories don't break on init - preview.js wires a global ReactSelect wrapper that mirrors the app's project-components.js Select shim, exposes Tooltip/Row/FormGroup as window globals (the legacy components rely on those), and enables autodocs globally so stories don't repeat the tag Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Small adjustments so components render in isolation: - IonIcon → design-system Icon in InfoMessage, AccordionCard, and IdentifierString (so they render a real icon in stories instead of the IonIcon mock placeholder) - Loader.tsx extracted from project-components.js to a standalone component (the Loader story imports it directly) - PasswordRequirements refactored to use token utility classes (text-success/text-danger, fs-small, list-unstyled) instead of inline styles - SettingRow: type relax (\`Omit<HTMLAttributes, 'onChange'>\`) so the story's \`onChange\` prop typechecks - WarningMessage: drop dead \`enabledButton\` prop and unused Constants import - Checkbox: drop unused \`react-markdown\` import - Add unit tests for the convertToPConfidence and fromParam utilities These are no-ops in the running app — same render output — but unlock isolated rendering in Storybook. (EnvironmentSettingsPage.tsx: incidental Prettier whitespace change re-applied by lint-staged on every commit; a pre-existing drift between origin/main's content and the project's current Prettier config.) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ChipInput previously used an ionicon for the chip-remove button, which doesn't follow the new design system Icon contract. Add a \`close\` icon to the design-system Icon component and update ChipInput to use it at 16px (matches the production sizing). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Banner shipped in #6883 as design-system foundation but has zero consumers, and its current shape (variant + icon + children) is too thin to replace InfoMessage / WarningMessage / ErrorMessage — those carry title, isClosable, collapseId localStorage memory, action buttons, and API-error parsing that Banner doesn't. ModalAlert was an internal modal variant with no remaining call sites. Drop both rather than carry unused primitives that would be redesigned when the migration is actually planned. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ColorSwatch and BooleanDotIndicator were rendering essentially the same primitive (a decorative coloured shape) with different implementations. Unify them: - Add \`shape: 'square' | 'circle'\` to ColorSwatch (default 'square') - Rewrite BooleanDotIndicator as a thin wrapper around ColorSwatch with \`shape='circle'\` and \`size='lg'\` - Use \`colorIconAction\` / \`colorIconDisabled\` — both mode-adaptive icon tokens — so the disabled dot stays visible against the dark- mode surface (the previous \`colorSurfaceMuted\` token resolved to slate-850 in dark mode and disappeared) Visible change: the boolean dot grows from 14px to 16px (lg) inside the two permission tooltips that use it. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add stories for 40 components across the design system, organised across 7 categories plus three top-level entries (Button, ButtonDropdown, Icons): - Data Display: BarChart, BooleanDotIndicator, ColorSwatch, DropdownMenu, IdentifierString, LabelWithTooltip, Logo, SettingTitle, StatItem, ToggleChip, Tooltip, VCSProviderTag - Forms: Checkbox, CheckboxGroup, ChipInput, GhostInput, MultiSelect, Radio, SearchableSelect, Switch - Feedback: EmptyState, ErrorMessage, InfoMessage, Loader, PasswordRequirements, Skeleton, WarningMessage - Patterns: AccordionCard, Card, PageTitle, Panel, SettingRow - Layout: Column, Flex, Row - Modals: InlineModal, Modal - Top-level: Button, ButtonDropdown, Icons Conventions used: - Args + \`component:\` for primitives so the Controls panel and autodocs props table light up; \`render:\` for stories that need state, composition, or layout demonstrations - Component descriptions on heavyweight stories explain *what* the component is for, not implementation detail - Interactive states covered with \`play\` functions on Modal, Tooltip, ButtonDropdown, DropdownMenu so Chromatic captures the open / hovered / expanded state, not just the trigger - \`parameters.chromatic.delay: 300\` on play-driven stories so Chromatic waits for portal/animation settle before snapshot - Source overrides via \`docs.source.code\` where the render function doesn't reflect the consumer call (PasswordRequirements) - Token utility classes (d-flex, gap-*, etc.) and chart palette tokens (\`colorChart*\`) instead of inline styles and hardcoded hex - Setting.stories.tsx renamed to SettingRow.stories.tsx to match the component Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The four navigation components (Breadcrumb, OverflowNav, SidebarLink, Tabs) all need a MemoryRouter context to render in isolation. Extract the wrapper as \`withRouter\` in documentation/components/_decorators.tsx so each story imports it instead of inlining the helper. Stories: - Breadcrumb: default trail, single-level - OverflowNav: ProjectNavbar layout, forced overflow trigger, and OverflowOpen with a \`play\` function that clicks the overflow trigger so Chromatic captures the popover - SidebarLink: default and AllStates list - Tabs: default theme and pill theme (uncontrolled) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tooltip + LabelWithTooltip Hovered: - userEvent.hover doesn't reliably trigger react-tooltip's pointer detection in Chromatic's headless Chrome. Switch to fireEvent and dispatch pointer/mouse enter+over so whichever the library is listening for triggers. - Bump chromatic.delay to 800ms to clear react-tooltip's 500ms delayShow plus settle. Disable Chromatic snapshots on the MDX doc pages — Introduction, Typography, DecisionFramework, TokenMaintenance. They're prose-heavy guides where snapshot diffs are noise rather than signal. The Icons catalogue stays snapshotted because it does catch new icons / regressions in the icon set. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Several layered changes get the Tooltip + LabelWithTooltip popovers into Chromatic's snapshots: - Build Storybook in dev mode for Chromatic. NODE_ENV=production strips React's act() helper, which breaks synthetic events fired from play functions on the deployed bundle (Storybook #19758). A new build-storybook:dev script wires this up via the action's buildScriptName. - Switch the play functions from raw fireEvent to userEvent.hover + waitFor on [role="tooltip"] (queried against document.body, since react-tooltip portals there). waitFor blocks chromatic from snapshotting before the popover renders. - Pad the trigger downward (pt-5) and bump story height to 200px so the place='top' popover lands inside the snapshot frame. - For LabelWithTooltip, wait one tick before hover — the nested Tooltip's useEffect needs to register the react-tooltip anchor before the synthetic hover fires. Also moves LabelWithTooltip to Components/Forms — it's a form-label primitive, not data display. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Zaimwa9
left a comment
Zaimwa9
left a comment
There was a problem hiding this comment.
Couple of comments that are not critical so approving. I leave it to you whether they are relevant
The "When to use" prose lived only in `parameters.docs.description.story`, which renders in the Docs tab — the Canvas just showed three skeleton bars and no prose. Surfacing the guidance directly in the render so the sidebar entry "When to use" actually explains when to use it. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The story had no `component`/`argTypes`/`args`, so Storybook's controls panel sat empty. Wires up the meta with controls for title, description, icon, iconColour, and docs link, makes Default args-driven, and adds a WithDocsLink variant for visual coverage of the docs-link branch. The args type is inferred via `ComponentProps<typeof EmptyState>` so prop changes flow through automatically without widening the component's public API. The narrowed icon list lives in `argTypes.options` only — that's a runtime list for the dropdown UI, not a parallel prop type. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The standalone Small story (20px loader) was redundant with Sizes, which already shows the loader at 16px/24px/40px/64px side-by-side. Loader has no `size` enum to differentiate Small meaningfully, so dropping it leaves Default + Sizes covering the cases that matter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The BooleanDot story rendered two circle ColorSwatches in action/muted colours to demo a boolean-dot use case — but BooleanDotIndicator (which wraps ColorSwatch with shape='circle') has its own dedicated stories (Enabled / Disabled / AllStates) covering exactly that. The Shapes story still covers the circle variant for visual coverage. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reverts the canvas-prose approach from 1e5c6eb. Skeleton.mdx already has a "When to use / When not to use" section that Storybook surfaces as the "Docs" sidebar entry, so the dedicated WhenToUse story was redundant — and rendering markdown into Canvas turned every prose edit into a noisy Chromatic diff. Removing the story leaves the MDX as the single source of guidance and keeps the Canvas snapshots focused on the component. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Chromatic was warning that the CI build was using CLI 11.29.0, "significantly outdated". The version is bundled inside the action, so bumping the action major bumps the CLI in lock-step. v16 still supports every input we use (workingDir, projectToken, buildScriptName, exitZeroOnChanges, exitOnceUploaded, onlyChanged, autoAcceptChanges). Leaves the local `chromatic` npm dep on its current major — that one is for `npx chromatic` invocations and isn't used by CI; bumping it in this PR would regenerate ~750 lock-file entries unrelated to the fix, which doesn't earn its keep. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 participants
docs/if required so people know about the feature.Changes
Closes #7179
Contributes to #6882
Add Storybook stories for the design system. 45 components organised across 8 categories. Two small design-system consolidations bundled in (Banner / ModalAlert removed, ColorSwatch + BooleanDotIndicator unified).
Coverage
web/components/base/have storiesPopover(blocked by FocusMonitor + jQuery); 5 react-select / routing internals not meant for direct consumer useCategories
Story conventions
component:for primitives (autodocs props table, working Controls panel)render:for stories needing state, composition, or layout demosplayfunctions on Modal, Tooltip, ButtonDropdown, DropdownMenu, OverflowNav so Chromatic captures the open / hovered / expanded statewithRouterdecorator atdocumentation/components/_decorators.tsxComponent changes (non-story)
Mostly Storybook plumbing. Two design-system consolidations.
BooleanDotIndicatorrewritten as<ColorSwatch shape='circle' size='lg' />ColorSwatchgainsshape: 'square' | 'circle'BooleanDotIndicatorBanner+ModalAlertremovedcloseicon inIconChipInputIonIcon → Iconin InfoMessage, AccordionCard, IdentifierString, ChipInputPasswordRequirementstoken utilities (text-success/text-danger/fs-small)Loader.tsxextracted fromproject-components.js@ionic/react,dompurify,code-help,_dataUtilsstub at.storybook/stubs/utils.jscommon/utils/utilshas circular dep withaccount-storethat crashes bundler. Stub may drift from prod — tracked in #7360 to drop once the cycle is broken.How did you test this code?
npm run storybook— all 45 stories render in light and dark modeplay-driven stories (Modal Open, Tooltip Hovered/Placements, ButtonDropdown Open, DropdownMenu Open, OverflowNav OverflowOpen) capture the open statenpm run test:unit -- --testPathPatterns="convertToPConfidence|fromParam"passesnpx eslint --fixclean on all touched filesQA — smoke test before merge
P1 — visual changes worth a look
isClosable; close icon should becurrentColor, not redP2 — should be no-op
Follow-ups
common/utils/utilsfrom legacy stores so Storybook can drop the Utils stub