Skip to content

Commit a3289ba

Browse files
c298leebillyvggetsantry[bot]
authored
feat(feedback): User feedback border radius configurations (#8918)
* border radius configurations * update option * fix spacing * Update src/platforms/javascript/common/user-feedback/configuration/index.mdx Co-authored-by: Billy Vong <[email protected]> * [getsentry/action-github-commit] Auto commit --------- Co-authored-by: Billy Vong <[email protected]> Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
1 parent c8a1cc1 commit a3289ba

File tree

2 files changed

+56
-50
lines changed
  • src/platforms
    • javascript/common/user-feedback/configuration
    • node/common/user-feedback/configuration

2 files changed

+56
-50
lines changed

‎src/platforms/javascript/common/user-feedback/configuration/index.mdx

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -80,31 +80,34 @@ new Feedback({
8080

8181
Colors can be customized via the Feedback class constructor or by defining CSS variables on the injected button. If you use the default button it will have a property `id="sentry-feedback`, meaning you can use the `#sentry-feedback` selector to define CSS variables to override.
8282

83-
| key | css variable | light | dark | description |
84-
| ----------------------- | --------------------------- | ----------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------- |
85-
| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget (injected button and form) |
86-
| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of the injected button when in a hover state |
87-
| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color |
88-
| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) |
89-
| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) |
90-
| `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget (injected button and form) |
91-
| `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget (injected button and form) |
92-
| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button |
93-
| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button |
94-
| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button |
95-
| `submitOutlineFocus` | `--submit-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for the submit button, in the focused state |
96-
| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button |
97-
| `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button when hovering |
98-
| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button |
99-
| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button |
100-
| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button |
101-
| `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state |
102-
| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button |
103-
| `cancelForegroundHover` | `--cancel-foreground-hover` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button when hovering |
104-
| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs |
105-
| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs |
106-
| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs |
107-
| `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused |
83+
| key | css variable | light | dark | description |
84+
| ------------------------- | ------------------------------ | ----------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------- |
85+
| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget (injected button and form) |
86+
| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of the injected button when in a hover state |
87+
| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color |
88+
| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) |
89+
| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) |
90+
| `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget (injected button and form) |
91+
| `borderRadius` | `--border-radius` | `12px` | `12px` | Border radius style used for the widget (injected button and success message) |
92+
| `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget (injected button and form) |
93+
| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button |
94+
| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button |
95+
| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button |
96+
| `submitOutlineFocus` | `--submit-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for the submit button, in the focused state |
97+
| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button |
98+
| `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button when hovering |
99+
| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button |
100+
| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button |
101+
| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button |
102+
| `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state |
103+
| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button |
104+
| `cancelForegroundHover` | `--cancel-foreground-hover` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button when hovering |
105+
| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs |
106+
| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs |
107+
| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs |
108+
| `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused |
109+
| `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form |
110+
| `formContentBorderRadius` | `--form-content-border-radius` | `6px` | `6px` | Border radius style for form content (for example: inputs, buttons) |
108111

109112
Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration:
110113

0 commit comments

Comments
 (0)