Skip to content

feat: Add Tooltip recipe with arrow sub-recipe#172

Open
alexgrozav wants to merge 9 commits intomainfrom
alexgrozav/tooltip-recipe
Open

feat: Add Tooltip recipe with arrow sub-recipe#172
alexgrozav wants to merge 9 commits intomainfrom
alexgrozav/tooltip-recipe

Conversation

@alexgrozav
Copy link
Copy Markdown
Contributor

Summary

  • Add useTooltipRecipe and useTooltipArrowRecipe with light/dark/neutral colors and solid/soft/subtle variants across xs–xl sizes
  • Implement CSS border-triangle arrow technique with proper border/background color matching via compound variants and dark mode support
  • Add cross-namespace variable reference support in the utility factory for referencing variables outside their auto-detected namespace
  • Move recipe setup callback to run before recipe creation so variables are registered in time
  • Add Storybook stories and Vue component for tooltip preview

Test plan

  • Verify tooltip renders correctly in Storybook with all color/variant/size combinations
  • Verify arrow colors match tooltip background and border in both light and dark themes
  • Run useTooltipRecipe.test.ts unit tests

Add tooltip content bubble and arrow recipes with light/dark/neutral
colors, solid/soft/subtle variants, and sm/md/lg sizes. Includes
freeform slot support for rich HTML content, preview grids, and tests.
…cipe

# Conflicts:
#	theme/src/recipes/index.ts
…ace variable references

Refactor tooltip arrow from box-based to CSS border triangle technique with
proper color matching via compound variants. Add cross-namespace variable
reference support in utility factory and move recipe setup before recipe
creation for correct variable registration order.
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 6, 2026

🦋 Changeset detected

Latest commit: e7e387c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@styleframe/theme Minor
styleframe 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

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
app-styleframe-dev-production Ready Ready Preview, Comment Apr 7, 2026 4:21am
styleframe-dev-production Ready Ready Preview, Comment Apr 7, 2026 4:21am
styleframe-storybook Ready Ready Preview, Comment Apr 7, 2026 4:21am

Request Review

Update test expectations to match the new border-triangle arrow technique,
register missing borderLeft/Right/Top utilities and after modifier in test
helper, and fix zIndex reference from popover to tooltip.
@codecov
Copy link
Copy Markdown

codecov bot commented Apr 7, 2026

Codecov Report

❌ Patch coverage is 96.20253% with 15 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
engine/core/src/tokens/utility.ts 31.25% 11 Missing ⚠️
...me/src/utilities/transforms/useTransformUtility.ts 66.66% 2 Missing ⚠️
theme/src/recipes/index.ts 0.00% 1 Missing ⚠️
theme/src/recipes/tooltip/index.ts 0.00% 0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

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.

1 participant