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.

Sign up for GitHub

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

Jump to bottom

docs(feedback): Add more themeables + improve/fix inconsistencies #9429

Merged
merged 2 commits into from
Nov 1, 2023
Merged

docs(feedback): Add more themeables + improve/fix inconsistencies #9429

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9620c87
docs(feedback): Add more themeables + improve/fix inconsistencies
billyvg Nov 1, 2023
9e80d45
missing " and removing "
billyvg Nov 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 36 additions & 21 deletions packages/feedback/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,23 +87,26 @@ Most text that you see in the default Feedback widget can be customized.

| key | default | description |
| --------- | ------- | ----------- |
| `buttonLabel` | `"Feedback"` | The label of the widget button. |
| `submitButtonLabel` | `"Send Feedback"` | The label of the submit button used in the feedback form dialog. |
| `cancelButtonLabel` | `"Cancel"` | The label of the cancel button used in the feedback form dialog. |
| `formTitle` | `"Send Feedback"` | The title at the top of the feedback form dialog. |
| `nameLabel` | `"Full Name"` | The label of the name input field. |
| `namePlaceholder` | `"Full Name"` | The placeholder for the name input field. |
| `emailLabel` | `"Email"` | The label of the email input field. ||
| `emailPlaceholder` | `"Email"` | The placeholder for the email input field. |
| `messageLabel` | `"Description"` | The label for the feedback description input field. |
| `messagePlaceholder` | `"What's the issue? What did you expect?"` | The placeholder for the feedback description input field. |
| `successMessageText` | `"Thank you for your report!"` | The message to be displayed after a succesful feedback submission. |
| `buttonLabel` | `Report a Bug` | The label of the widget button. |
| `submitButtonLabel` | `Send Bug Report` | The label of the submit button used in the feedback form dialog. |
| `cancelButtonLabel` | `Cancel` | The label of the cancel button used in the feedback form dialog. |
| `formTitle` | `Report a Bug` | The title at the top of the feedback form dialog. |
| `nameLabel` | `Name` | The label of the name input field. |
| `namePlaceholder` | `Your Name` | The placeholder for the name input field. |
| `emailLabel` | `Email` | The label of the email input field. ||
| `emailPlaceholder` | `your.email@example.org` | The placeholder for the email input field. |
| `messageLabel` | `Description` | The label for the feedback description input field. |
| `messagePlaceholder` | `What's the bug? What did you expect?` | The placeholder for the feedback description input field. |
| `successMessageText` | `Thank you for your report!` | The message to be displayed after a succesful feedback submission. |


Example of customization

```javascript
new Feedback({
buttonLabel: 'Bug Report',
submitButtonLabel: 'Send Report',
formTitle: 'Send Bug Report',
buttonLabel: 'Feedback',
submitButtonLabel: 'Send Feedback',
formTitle: 'Send Feedback',
});
```

Expand All @@ -112,13 +115,25 @@ Colors can be customized via the Feedback constructor or by defining CSS variabl

| key | css variable | light | dark | description |
| --- | --- | --- | --- | --- |
| `background` | `--bg-color` | `#ffffff` | `#29232f` | Background color of the widget actor and dialog. |
| `backgroundHover` | `--bg-hover-color` | `#f6f6f7` | `#352f3b` | The background color of widget actor when in a hover state |
| `foreground` | `--fg-color` | `#2b2233` | `#ebe6ef` | The foreground color, e.g. text color |
| `error` | `--error-color` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) |
| `success` | `--success-color` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) |
| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget actor and dialog |
| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of widget actor when in a hover state |
| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color |
| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) |
| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) |
| `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 actor and dialog |
| `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 actor and dialog |
| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button |
| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button |
| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button |
| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button |
| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button |
| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button |
| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button |
| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button |
| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs |
| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs |
| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs |
| `inputBorderFocus` | `--input-border-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border styles for form inputs when focused |

Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration.
```javascript
Expand All @@ -133,7 +148,7 @@ Or the same example above but using the CSS variables method:

```css
#sentry-feedback {
--bg-color: #cccccc;
--background: #cccccc;
}
```

Expand Down Expand Up @@ -188,7 +203,7 @@ feedback.attachTo(document.querySelector('#your-button'), {
You can also bring your own widget and UI and simply pass a feedback object to the `sendFeedback()` function.

```html
<form id="my-feedback-form>
<form id="my-feedback-form">
<input name="name" />
<input name="email" />
<textarea name="message" placeholder="What's the issue?" />
Expand Down