From 9620c87a68c7f190ea5375eaaf7c544e5430419c Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Wed, 1 Nov 2023 12:00:40 -0400 Subject: [PATCH 1/2] docs(feedback): Add more themeables + improve/fix inconsistencies * Adds themeable options for submit/cancel/input * Make css vars + theme vars consistent * Fix incorrect defaults --- packages/feedback/README.md | 47 ++++++++++++++++++++++++------------- 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/packages/feedback/README.md b/packages/feedback/README.md index d81275cdb67c..f1b3404320b3 100644 --- a/packages/feedback/README.md +++ b/packages/feedback/README.md @@ -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. | +| `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` | `"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. | +| `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` | `"Email"` | The placeholder for 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 issue? What did you expect?"` | The placeholder 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', }); ``` @@ -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 @@ -133,7 +148,7 @@ Or the same example above but using the CSS variables method: ```css #sentry-feedback { - --bg-color: #cccccc; + --background: #cccccc; } ``` From 9e80d45ab2318e49a85a7cf3792bd9430060f633 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Wed, 1 Nov 2023 12:21:44 -0400 Subject: [PATCH 2/2] missing " and removing " --- packages/feedback/README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/feedback/README.md b/packages/feedback/README.md index f1b3404320b3..56be5e23ee7c 100644 --- a/packages/feedback/README.md +++ b/packages/feedback/README.md @@ -87,17 +87,17 @@ Most text that you see in the default Feedback widget can be customized. | key | default | description | | --------- | ------- | ----------- | -| `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. | +| `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 @@ -203,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 -