Skip to content

Add animation transitions and combobox option styling support #2893

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
rossnelson merged 4 commits into from
Sep 5, 2025
Merged

Add animation transitions and combobox option styling support #2893

rossnelson merged 4 commits into from
Sep 5, 2025

Conversation

@rossnelson
Copy link
Collaborator

@rossnelson rossnelson commented Sep 5, 2025 •
edited
Loading

Summary

  • Added smooth CSS transitions to menu component for open/close animations
  • Added animation classes to modal component for opening transitions
  • Added custom class prop support to combobox options for flexible item styling
menu modal
CleanShot 2025-09-05 at 11 23 23 CleanShot 2025-09-05 at 11 34 52

Changes

Combobox Component (Custom Styling Support)

  • Added optionClass prop to Combobox component to pass custom classes to all option items
  • Added class prop support to ComboboxOption component
  • Uses tailwind-merge for proper class merging with default styles
  • Use case: Allows styling individual combobox list items (e.g., custom padding, colors, hover states)

Menu Component

  • Replaced fly transition with CSS transition utilities
  • Uses visibility, scale, and opacity for smooth animations
  • 100ms duration with ease-out timing

Modal Component

  • Added scale and opacity transitions on open
  • 200ms duration for better UX on larger elements
  • Animated backdrop with bg-black/50 fade

Visual Changes

  • Menu and modal components now have smooth scale and fade animations when opening
  • Combobox options can now be styled with custom classes for better design flexibility

@rossnelson
feat(combobox): add class prop support for custom option styling
48d81b6 
- Add class prop to combobox-option component
- Add optionClass prop to combobox component to pass through custom classes
- Use tailwind-merge to properly combine classes with defaults
@rossnelson
feat(menu): add smooth animation transitions for menu open/close
460624e 
- Replace fly transition with CSS transitions for better performance
- Use visibility and transform/opacity for smooth animations
- Add transition-all with 100ms duration for opening
- Scale from 95% to 100% with opacity fade
@rossnelson
feat(modal): add smooth animation transitions for modal open
9558740 
- Add transition classes for smooth scale and opacity animations
- Use duration-200 for modal (slightly slower than menu for better UX)
- Add backdrop fade animation with bg-black/50
@vercel
Copy link

vercel bot commented Sep 5, 2025 •
edited
Loading

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

Project Deployment Preview Comments Updated (UTC)
holocene Ready Ready Preview Comment Sep 5, 2025 3:43pm

rossnelson
rossnelson commented Sep 5, 2025
View reviewed changes
@rossnelson rossnelson merged commit ebcf057 into main Sep 5, 2025
15 checks passed
@rossnelson rossnelson deleted the DT-3161-namespace-tag-filtering branch September 5, 2025 16:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rossedfort rossedfort rossedfort approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@rossnelson @rossedfort