Skip to content

Redesign macOS contextual SearchDone dialog for rebranding#4454

Open
afterxleep wants to merge 5 commits intomainfrom
daniel/macos.onboarding.2
Open

Redesign macOS contextual SearchDone dialog for rebranding#4454
afterxleep wants to merge 5 commits intomainfrom
daniel/macos.onboarding.2

Conversation

@afterxleep
Copy link
Copy Markdown
Contributor

@afterxleep afterxleep commented Apr 14, 2026

Summary

  • Add reusable CTAButtonStyle with hover/press states for macOS onboarding screens
  • Redesign the SearchDone contextual dialog using OnboardingBubbleView and rebranded ContextualDaxDialogContent components
  • Replace SearchDone background illustrations with updated macOS assets (light + dark, 1x/2x/3x)
  • Fix panel layout: move background images to .background() modifier so they don't inflate the ZStack's natural size and interfere with bubble positioning
  • Vertically center bubbles using equal spacers in both TrySearch and SearchDone panels

Test plan

  • Reset onboarding state and verify TrySearch panel displays correctly with centered bubble
  • Complete a search and verify SearchDone panel displays with correct background illustration, centered bubble, and orange CTA button
  • Verify both panels position the bubble at the same vertical center
  • Verify CTA button hover and press states on macOS
  • Verify light and dark mode for both panels
  • Verify the SearchDone → TrySite follow-up transition works correctly

Note

Medium Risk
Mostly UI/layout and theme tweaks for macOS contextual onboarding, but it changes shared theme metrics and button styles that could subtly affect other onboarding screens’ appearance and interaction states.

Overview
Redesigns the macOS rebranded contextual onboarding panels for TrySearch and SearchDone by switching dialogs to OnboardingBubbleView + rebranded ContextualDaxDialogContent, vertically centering the bubble, and rendering new illustration-based backgrounds via .background() with fixed panel heights.

Adds a reusable rebranded CTAButtonStyle (pressed/hover states) and updates the macOS rebranding theme to use new typography, colors, primary button styling, and configurable option-list padding/metrics (plumbed through OptionsListMetrics and consumed by ListButtonStyle).

Reviewed by Cursor Bugbot for commit 39f0ce1. Bugbot is set up for automated code reviews on this repo. Configure here.

Replace legacy DaxDialogView with OnboardingBubbleView for the TrySearch
dialog. Update theme with new typography, colors, pill-shaped buttons,
and bubble metrics. Add spot illustration background with fixed 208pt
panel height. All changes gated behind .onboardingRebranding feature flag.
The parameter was added but never used — the macOS factory builds its
own background ZStack instead of using the shared modifier. Also
includes SPM Package.resolved update.
Introduces custom CTA button colors and styling for the macOS contextual onboarding dialogs to match the rebranding design.
- Add reusable CTAButtonStyle with hover/press states for macOS
- Redesign SearchDone dialog using OnboardingBubbleView and rebranded components
- Replace SearchDone background illustrations with updated macOS assets
- Move background images to .background() modifier to prevent layout interference
- Vertically center bubbles using spacers in both TrySearch and SearchDone panels
@github-actions
Copy link
Copy Markdown
Contributor

Fails
🚫 Please, don't forget to add a link to the internal task

Generated by 🚫 dangerJS against 39f0ce1

Copy link
Copy Markdown
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 39f0ce1. Configure here.

)
.clipped()
.applyOnboardingTheme(.macOSRebranding2026)
)
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.

Fixed panel height clips SearchDone follow-up content

Medium Severity

The .searchDone case wraps the dialog in a VStack with .frame(height: 180) and .clipped(). When OnboardingSearchDoneDialog internally transitions to OnboardingTrySiteDialogContent (via showNextScreen = true), the TrySite content — which includes a title, message, and a list of site suggestions — remains constrained to this 180-point container. With the bubble's contentInsets consuming 48 points vertically (24 top + 24 bottom), plus the tail, border, and shadow, very little space remains for the TrySite list items. Previously, no fixed height was applied, allowing the view to expand naturally to fit the follow-up content.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 39f0ce1. Configure here.

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