Skip to content
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

feat(feedback): Simplify public css configuration for feedback #11985

Merged
merged 4 commits into from
May 13, 2024

Conversation

ryan953
Copy link
Member

@ryan953 ryan953 commented May 10, 2024

Simplifies the CSS config for user feedback to trim back the number of values that someone needs to set. Ideally all that's needed is something like:

    feedbackIntegration({
      themeLight: {
        accentForeground: 'white',
        accentBackground: 'red',
      },
      themeDark: {
        accentForeground: 'white',
        accentBackground: 'red',
      }
    })

or the css var version:

#sentry-feedback {
  --accent-foreground: white;
  --accent-background: red;
}

There are some internal css variables that shouldn't be overridden right now. They will not be part of the public docs.
Only packages/types/src/feedback/theme.ts is public:

  foreground
  background
  accentForeground
  accentBackground
  successColor
  errorColor
  boxShadow
  outline

@ryan953 ryan953 requested a review from a team as a code owner May 10, 2024 21:02
@@ -42,7 +42,8 @@ export function createActorStyles(): HTMLStyleElement {
}

.widget__actor:hover {
background-color: var(--trigger-background-hover);
background: var(--actor-hover-background, var(--background));
filter: var(--interactive-filter);
Copy link
Member

Choose a reason for hiding this comment

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

ooo what does filter do?

Copy link
Member Author

Choose a reason for hiding this comment

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

it creates the hover effect, the value is set to be brightness(95%).

so people only need to set one color

Copy link
Contributor

github-actions bot commented May 10, 2024

size-limit report 📦

Path Size
@sentry/browser 21.65 KB (0%)
@sentry/browser (incl. Tracing) 32.69 KB (-0.01% 🔽)
@sentry/browser (incl. Tracing, Replay) 68.03 KB (0%)
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 61.43 KB (0%)
@sentry/browser (incl. Tracing, Replay with Canvas) 72.07 KB (0%)
@sentry/browser (incl. Tracing, Replay, Feedback) 84.05 KB (-0.25% 🔽)
@sentry/browser (incl. Feedback) 37.54 KB (-0.58% 🔽)
@sentry/browser (incl. sendFeedback) 26.21 KB (0%)
@sentry/browser (incl. FeedbackAsync) 30.58 KB (-0.63% 🔽)
@sentry/react 24.33 KB (0%)
@sentry/react (incl. Tracing) 35.66 KB (0%)
@sentry/vue 25.48 KB (0%)
@sentry/vue (incl. Tracing) 34.49 KB (0%)
@sentry/svelte 21.78 KB (0%)
CDN Bundle 24.13 KB (0%)
CDN Bundle (incl. Tracing) 34.06 KB (-0.01% 🔽)
CDN Bundle (incl. Tracing, Replay) 67.73 KB (0%)
CDN Bundle (incl. Tracing, Replay, Feedback) 72.71 KB (-0.24% 🔽)
CDN Bundle - uncompressed 70.99 KB (0%)
CDN Bundle (incl. Tracing) - uncompressed 101.03 KB (0%)
CDN Bundle (incl. Tracing, Replay) - uncompressed 210.64 KB (0%)
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 222.93 KB (-0.32% 🔽)
@sentry/nextjs (client) 34.88 KB (0%)
@sentry/sveltekit (client) 33.26 KB (0%)
@sentry/node 147.43 KB (+0.01% 🔺)

@ryan953 ryan953 requested review from c298lee and a team May 10, 2024 22:04
@ryan953 ryan953 merged commit 1d2602c into develop May 13, 2024
98 checks passed
@ryan953 ryan953 deleted the ryan953/feedback-css-vars branch May 13, 2024 00:03
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.

None yet

2 participants