Skip to content

feat(feedback): Theming #4677

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.

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

Merged
merged 166 commits into from
Apr 14, 2025
Merged

feat(feedback): Theming #4677

merged 166 commits into from
Apr 14, 2025

Conversation

antonis
Copy link
Collaborator

@antonis antonis commented Mar 21, 2025

📢 Type of change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring

Based on feat(feedback): Report a Bug button

PR Chain:

📜 Description

Adds theming options similar to JS

      Sentry.feedbackIntegration({
        colorScheme: 'system',
        themeLight: {
          foreground: '#ff0000',
          background: '#00ff00',
        },
        themeDark: {
          foreground: '#00ff00',
          background: '#ff0000',
        },
      }),
Demo Video

web

Screen.Recording.2025-03-28.at.3.42.32.PM.mov

Light Dark
Simulator Screenshot - iPhone 16 Pro - 2025-03-27 at 12 03 19 Simulator Screenshot - iPhone 16 Pro - 2025-03-27 at 12 03 43

💡 Motivation and Context

💚 How did you test it?

Sample app

📝 Checklist

  • I added tests to verify changes
  • No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
  • I updated the docs if needed.
  • I updated the wizard if needed.
  • All tests passing
  • No breaking changes

🔮 Next steps

@krystofwoldrich
Copy link
Member

Overall, it's looking good, but I've noticed some issues with customizing the theme.

We should add tests to ensure that the correct values are applied when using custom styles and custom themes.

@antonis
Copy link
Collaborator Author

antonis commented Mar 28, 2025

Thank you for all your feedback @krystofwoldrich 🙇

This should be ready for another go. Note that I now also cover the dynamic theme changes on this PR with 7a331b6 as part of the refactoring discussed above.

We should add tests to ensure that the correct values are applied when using custom styles and custom themes.

I've added snapshot tests to cover this with 6c63d03

@antonis antonis requested a review from krystofwoldrich March 28, 2025 14:13
@antonis antonis changed the title feat(feedback): Add theming feat(feedback): Theming Apr 3, 2025
@krystofwoldrich
Copy link
Member

Looks and works great! Reacts to the changes live.

However, in the tests, only the custom dark and light scheme is checked.

Can you also add a test for the system theme option, to check that the correct scheme is used, and a test for the live change if possible?

Base automatically changed from antonis/4358-Feedback-Form-Autoinject-Button to feedback-ui-2 April 7, 2025 10:01
antonis added 3 commits April 7, 2025 13:25
# Conflicts:
#	CHANGELOG.md
#	packages/core/src/js/feedback/FeedbackButton.tsx
#	packages/core/src/js/feedback/FeedbackWidget.styles.ts
#	packages/core/src/js/feedback/FeedbackWidgetManager.tsx
#	packages/core/src/js/feedback/integration.ts
#	packages/core/test/feedback/FeedbackButton.test.tsx
#	packages/core/test/feedback/FeedbackWidgetManager.test.tsx
#	packages/core/test/feedback/__snapshots__/FeedbackButton.test.tsx.snap
@antonis
Copy link
Collaborator Author

antonis commented Apr 7, 2025

Thank you for your feedback @krystofwoldrich 🙇

Can you also add a test for the system theme option, to check that the correct scheme is used, and a test for the live change if possible?

Added test for the system theme option with ba98685
and tests for a 'live' change with 3b4a1de

Copy link
Member

@krystofwoldrich krystofwoldrich left a comment

Choose a reason for hiding this comment

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

Thank you for adding the extra tests!

@antonis antonis merged commit 9a0ab61 into feedback-ui-2 Apr 14, 2025
70 checks passed
@antonis antonis deleted the antonis/feedback-theme branch April 14, 2025 12:30
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