Skip to content

docs(tooltip): align previews with design system#121

Open
joshsadam wants to merge 7 commits into
mainfrom
docs/tooltip-preview-design-contract
Open

docs(tooltip): align previews with design system#121
joshsadam wants to merge 7 commits into
mainfrom
docs/tooltip-preview-design-contract

Conversation

@joshsadam

Copy link
Copy Markdown
Contributor

What does this PR do and why?

  • Replaces the old Tooltip Lookbook pages with smaller product examples.
  • Keeps placement, accessibility, context, and click-through examples in one focused preview set.

Part of #99.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other pull requests.

How to set up and validate locally

  1. pnpm run lint
  2. Open Lookbook → Pathogen Tooltip.
  3. Check Overview, In context, Accessibility patterns, and Click-through after hide in light and dark mode.
  4. Confirm every icon-only link has an accessible name.

PR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Replace gradient-heavy Lookbook pages with compact product
surfaces that match Button and Typography previews. Drop
implementation-detail pages and keep overview, in-context,
accessibility, and the click-through regression check.
Icon-only tooltip examples now pass accessible names via aria-label
and clarify that tooltips supplement, not replace, those names.
@joshsadam joshsadam self-assigned this Jul 11, 2026
@joshsadam joshsadam requested a review from ksierks July 11, 2026 03:19
@joshsadam joshsadam marked this pull request as ready for review July 11, 2026 03:19
Copilot AI review requested due to automatic review settings July 11, 2026 03:19

Copilot AI left a comment

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.

Pull request overview

Updates the Pathogen Tooltip Lookbook previews to better match the design-system “product-like” preview guidelines by replacing large, marketing-style pages with a smaller set of focused, realistic examples.

Changes:

  • Replaces the previous Tooltip preview pages (basic usage, advanced features, browser compatibility, link integration) with compact “Overview” and “In context” previews.
  • Refines existing previews to use neutral surfaces/tokens and tighter product-like layouts (including the click-through visual regression preview).
  • Streamlines Tooltip preview grouping/labels in TooltipPreview to match the new preview set.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
test/components/previews/pathogen/tooltip_preview/overview.html.erb New compact “Overview” preview covering placement, text length, and toolbar-style examples.
test/components/previews/pathogen/tooltip_preview/in_context.html.erb New “In context” preview showing icon-only actions, collapsed nav, and breadcrumbs in product-like shells.
test/components/previews/pathogen/tooltip_preview/click_through_after_hide.html.erb Restyles the click-through regression preview to match neutral design-system surfaces while keeping the repro behavior.
test/components/previews/pathogen/tooltip_preview/accessibility.html.erb Replaces the old long-form accessibility page with focused “Accessibility patterns” examples (hover/focus, ARIA wiring, keyboard).
test/components/previews/pathogen/tooltip_preview.rb Updates preview group and labels to reflect the new reduced preview set.
test/components/previews/pathogen/tooltip_preview/link_integration.html.erb Removes the old large “Link integration” page.
test/components/previews/pathogen/tooltip_preview/browser_compatibility.html.erb Removes the old large “Browser compatibility” page.
test/components/previews/pathogen/tooltip_preview/basic_usage.html.erb Removes the old large “Basic usage” page.
test/components/previews/pathogen/tooltip_preview/advanced_features.html.erb Removes the old large “Advanced features” page.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread test/components/previews/pathogen/tooltip_preview/overview.html.erb Outdated
Use inspect so placement examples show valid Ruby like :top instead of bare top.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants