Skip to content

Conversation

@blockbtheriault
Copy link
Contributor

Summary

This PR adds a close button (X) to Goose's toast notifications to improve user experience.

Changes Made

  • Enable closeButton in react-toastify commonToastOptions in ui/desktop/src/toasts.tsx
  • Add custom CSS styling for close button with hover/focus states in ui/desktop/src/styles/main.css
  • Ensure consistent theming with Goose's design system using CSS custom properties
  • Maintain compatibility with existing 'Copy error' buttons

Problem Solved

Previously, users had to click anywhere on the toast notification to close it, which wasn't intuitive UX. Now users have a clear X button in the top-right corner of each notification.

Technical Details

  • Leverages react-toastify's built-in close button functionality
  • Custom CSS ensures the close button matches Goose's visual design
  • Uses Goose's existing CSS custom properties for consistent theming
  • Close button works across all toast types (success, error, info, loading)
  • Includes proper accessibility features with focus states

Testing

  • Created comprehensive test files demonstrating functionality
  • Verified compatibility with all toast types
  • Ensured proper styling and accessibility features
  • Maintains full backward compatibility

Files Modified

  • ui/desktop/src/toasts.tsx - Changed closeButton: false to closeButton: true
  • ui/desktop/src/styles/main.css - Added custom styling for close button

This is a small but impactful UX improvement that makes toast notifications more intuitive to dismiss.

- Enable closeButton in react-toastify commonToastOptions
- Add custom CSS styling for close button with hover/focus states
- Ensure consistent theming with Goose's design system
- Maintain compatibility with existing 'Copy error' buttons
- Improve UX by allowing users to dismiss notifications easily

Fixes the issue where users had to click anywhere on the toast
to close it, now they have an intuitive X button in the top-right.
@angiejones angiejones merged commit 4b63ee7 into block:main Jul 3, 2025
6 checks passed
@angiejones
Copy link
Collaborator

thank you!

lifeizhou-ap added a commit that referenced this pull request Jul 3, 2025
* main:
  feat: Add close button (X) to toast notifications (#3197)
  Adds json schema validation to goose recipe validate cli (#3234)
lifeizhou-ap added a commit that referenced this pull request Jul 4, 2025
* main:
  feat(goose-cli): theme persistence & selection (#1693)
  chore(release): release version 1.0.32 (#3248)
  Add fuzzy file search functionality (#3240)
  update styling of user messages (#3247)
  Add support for escape key to dismiss settings menu (#3225)
  fix: Refactor string truncation logic into reusable utility function to avoid panic (#2818) (#2819)
  fix: Prevent modal from closing on text select. (#3127)
  fix: Add back lazy_static (#3243)
  chore: remove unused dependencies (#3049)
  feat: Add close button (X) to toast notifications (#3197)
  Adds json schema validation to goose recipe validate cli (#3234)
atarantino pushed a commit to atarantino/goose that referenced this pull request Jul 14, 2025
s-soroosh pushed a commit to s-soroosh/goose that referenced this pull request Jul 18, 2025
kwsantiago pushed a commit to kwsantiago/goose that referenced this pull request Jul 19, 2025
cbruyndoncx pushed a commit to cbruyndoncx/goose that referenced this pull request Jul 20, 2025
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