CSS Requests for the User Feedback widget

[amitnavindgi]

Problem Statement

Thanks for giving us, Zoox, access to the alpha version of the User Feedback widget! It's working great so far. I'd love to see the following options added to the configuration and CSS variables.

• Can there be an option to turn off bold or override font style for buttonLabel ?
• Can there be a CSS variable to control the text color of the success and error messages?
• Can there be a CSS variable to control the border color of a text-field in the form when it is active? It is currently purple but I'd love for the theme to be completely configurable based on the underlying application.
• When buttonLabel is set to an empty string the widget button shows an icon following some white spaces. It'd be great to see an option to only use an icon.
• This is probably a stretch and definitely not important right now but if there's support to use a custom icon from a predefined set like MDI then that'd be sweet. Another option could be to add a few extra appropriate icons to choose from.

Solution Brainstorm

Pretty much exposing more options the same way some options are exposed right now.

[billyvg]

• Can there be a CSS variable to control the text color of the success and error messages?

This exists! (--error and --success) https://github.com/getsentry/sentry-javascript/tree/develop/packages/feedback#theme-customization

• Can there be a CSS variable to control the border color of a text-field in the form when it is active? It is currently purple but I'd love for the theme to be completely configurable based on the underlying application.

We recently added this, make sure you're on the latest version (0.0.1-alpha.9): --input-border-focus

• When buttonLabel is set to an empty string the widget button shows an icon following some white spaces. It'd be great to see an option to only use an icon.

We can take a look at this

• Can there be an option to turn off bold or override font style for buttonLabel ?
• This is probably a stretch and definitely not important right now but if there's support to use a custom icon from a predefined set like MDI then that'd be sweet. Another option could be to add a few extra appropriate icons to choose from.

It's unlikely we'd add custom icons (we can take a look at the font styling though). I'd recommend the bring your own button approach if you need a deeper level of customization.

[amitnavindgi]

@billyvg Thanks for pointing that out. Sorry, I missed the update in the doc.

A few requests after using the specified classes.

• It looks like the submit button and other input fields all get controlled via the same --input-border-focus. It'd be great to have them be two separate groups to allow better theming of the submit button on the base state as well as the hover state.
• A similar request for --submit-foreground to control the color of the text in the submit button in both the base state and the hover state. It looks like the same text color gets used in both states.

Of course, at some point, it might make more sense to just attach a custom button but thought I'd request anyway :)

[billyvg]

@amitnavindgi We've released version .10, with our first breaking change: inputBorderFocus is now inputOutlineFocus. This release also includes the foreground on hover var, as well as OutlineFocus for submit + cancel buttons, and the fix for empty buttonLabel. (Please reference the README for all of the updated values).

We won't be adding an icon library, but if you want to create a new ticket for the font-weight css, we can think about that more.

Thanks!

[amitnavindgi]

Awesome, thank you for the quick turnaround on this!

[amitnavindgi]

It looks like there may be a bug with --submit-outline-focus. The value provided via --submit-border seems to persist for both the states.

[billyvg]

@amitnavindgi can you select the submit button with dev tools and apply the :focus-visible state to it and screenshot the CSS?

e.g.

[amitnavindgi]

---

---

And here's my CSS

--input-border-focus: #3a415b;
--submit-background: #ffe180;
--submit-background-hover: #33ffc7;
--submit-border: #ffe180;
--submit-foreground: #3a415b;
--submit-foreground-hover: #3a415b;
--submit-outline-focus: #33ffc7;

It is kinda confusing now with submit-border and submit-outline variants. It might be good to use one consistent term.

I am on 0.10