diff --git a/packages/feedback/src/constants/index.ts b/packages/feedback/src/constants/index.ts index fe4683b5ee17..a8794ed663b0 100644 --- a/packages/feedback/src/constants/index.ts +++ b/packages/feedback/src/constants/index.ts @@ -9,9 +9,10 @@ export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window; export const DOCUMENT = WINDOW.document; export const NAVIGATOR = WINDOW.navigator; -export const ACTOR_LABEL = 'Report a Bug'; +export const TRIGGER_LABEL = 'Report a Bug'; export const CANCEL_BUTTON_LABEL = 'Cancel'; export const SUBMIT_BUTTON_LABEL = 'Send Bug Report'; +export const CONFIRM_BUTTON_LABEL = 'Confirm'; export const FORM_TITLE = 'Report a Bug'; export const EMAIL_PLACEHOLDER = 'your.email@example.org'; export const EMAIL_LABEL = 'Email'; @@ -20,7 +21,9 @@ export const MESSAGE_LABEL = 'Description'; export const NAME_PLACEHOLDER = 'Your Name'; export const NAME_LABEL = 'Name'; export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!'; -export const IS_REQUIRED_TEXT = '(required)'; +export const IS_REQUIRED_LABEL = '(required)'; +export const ADD_SCREENSHOT_LABEL = 'Add a screenshot'; +export const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot'; export const FEEDBACK_WIDGET_SOURCE = 'widget'; export const FEEDBACK_API_SOURCE = 'api'; diff --git a/packages/feedback/src/core/components/Actor.ts b/packages/feedback/src/core/components/Actor.ts index ac62fad4957e..6b2469e0313c 100644 --- a/packages/feedback/src/core/components/Actor.ts +++ b/packages/feedback/src/core/components/Actor.ts @@ -3,7 +3,7 @@ import { createActorStyles } from './Actor.css'; import { FeedbackIcon } from './FeedbackIcon'; export interface ActorProps { - buttonLabel: string; + triggerLabel: string; shadow: ShadowRoot; } @@ -22,16 +22,16 @@ export interface ActorComponent { /** * The sentry-provided button to open the feedback modal */ -export function Actor({ buttonLabel, shadow }: ActorProps): ActorComponent { +export function Actor({ triggerLabel, shadow }: ActorProps): ActorComponent { const el = DOCUMENT.createElement('button'); el.type = 'button'; el.className = 'widget__actor'; el.ariaHidden = 'false'; - el.ariaLabel = buttonLabel; + el.ariaLabel = triggerLabel; el.appendChild(FeedbackIcon()); - if (buttonLabel) { + if (triggerLabel) { const label = DOCUMENT.createElement('span'); - label.appendChild(DOCUMENT.createTextNode(buttonLabel)); + label.appendChild(DOCUMENT.createTextNode(triggerLabel)); el.appendChild(label); } diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts index 32cce8b83fe7..1dace11ced6e 100644 --- a/packages/feedback/src/core/integration.ts +++ b/packages/feedback/src/core/integration.ts @@ -9,20 +9,23 @@ import type { } from '@sentry/types'; import { isBrowser, logger } from '@sentry/utils'; import { - ACTOR_LABEL, + ADD_SCREENSHOT_LABEL, CANCEL_BUTTON_LABEL, + CONFIRM_BUTTON_LABEL, DEFAULT_THEME, DOCUMENT, EMAIL_LABEL, EMAIL_PLACEHOLDER, FORM_TITLE, - IS_REQUIRED_TEXT, + IS_REQUIRED_LABEL, MESSAGE_LABEL, MESSAGE_PLACEHOLDER, NAME_LABEL, NAME_PLACEHOLDER, + REMOVE_SCREENSHOT_LABEL, SUBMIT_BUTTON_LABEL, SUCCESS_MESSAGE_TEXT, + TRIGGER_LABEL, } from '../constants'; import { DEBUG_BUILD } from '../util/debug-build'; import { isScreenshotSupported } from '../util/isScreenshotSupported'; @@ -80,18 +83,21 @@ export const buildFeedbackIntegration = ({ themeDark, // FeedbackTextConfiguration - buttonLabel = ACTOR_LABEL, + addScreenshotButtonLabel = ADD_SCREENSHOT_LABEL, + triggerLabel = TRIGGER_LABEL, cancelButtonLabel = CANCEL_BUTTON_LABEL, - submitButtonLabel = SUBMIT_BUTTON_LABEL, - formTitle = FORM_TITLE, + confirmButtonLabel = CONFIRM_BUTTON_LABEL, emailLabel = EMAIL_LABEL, emailPlaceholder = EMAIL_PLACEHOLDER, + formTitle = FORM_TITLE, + isRequiredLabel = IS_REQUIRED_LABEL, messageLabel = MESSAGE_LABEL, messagePlaceholder = MESSAGE_PLACEHOLDER, nameLabel = NAME_LABEL, namePlaceholder = NAME_PLACEHOLDER, + removeScreenshotButtonLabel = REMOVE_SCREENSHOT_LABEL, + submitButtonLabel = SUBMIT_BUTTON_LABEL, successMessageText = SUCCESS_MESSAGE_TEXT, - isRequiredText = IS_REQUIRED_TEXT, // FeedbackCallbacks onFormOpen, @@ -121,9 +127,10 @@ export const buildFeedbackIntegration = ({ ...themeLight, }, - buttonLabel, + triggerLabel, cancelButtonLabel, submitButtonLabel, + confirmButtonLabel, formTitle, emailLabel, emailPlaceholder, @@ -132,7 +139,9 @@ export const buildFeedbackIntegration = ({ nameLabel, namePlaceholder, successMessageText, - isRequiredText, + isRequiredLabel, + addScreenshotButtonLabel, + removeScreenshotButtonLabel, onFormClose, onFormOpen, @@ -250,7 +259,7 @@ export const buildFeedbackIntegration = ({ const _createActor = (optionOverrides: OverrideFeedbackConfiguration = {}): ActorComponent => { const shadow = _createShadow(_options); - const actor = Actor({ buttonLabel: _options.buttonLabel, shadow }); + const actor = Actor({ triggerLabel: _options.triggerLabel, shadow }); const mergedOptions = mergeOptions(_options, { ...optionOverrides, onFormOpen() { diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx index 15d3bcb3ef91..7e2b645c45bf 100644 --- a/packages/feedback/src/modal/components/Form.tsx +++ b/packages/feedback/src/modal/components/Form.tsx @@ -16,6 +16,8 @@ import { getMissingFields } from '../../util/validate'; export interface Props extends Pick< FeedbackInternalOptions, + | 'addScreenshotButtonLabel' + | 'removeScreenshotButtonLabel' | 'cancelButtonLabel' | 'emailLabel' | 'emailPlaceholder' @@ -28,7 +30,7 @@ export interface Props | 'showEmail' | 'showName' | 'submitButtonLabel' - | 'isRequiredText' + | 'isRequiredLabel' > { defaultEmail: string; defaultName: string; @@ -48,6 +50,8 @@ function retrieveStringValue(formData: FormData, key: string): string { } export function Form({ + addScreenshotButtonLabel, + removeScreenshotButtonLabel, cancelButtonLabel, defaultEmail, defaultName, @@ -66,7 +70,7 @@ export function Form({ showEmail, showName, submitButtonLabel, - isRequiredText, + isRequiredLabel, screenshotInput, }: Props): VNode { // TODO: set a ref on the form, and whenever an input changes call proceessForm() and setError() @@ -159,7 +163,7 @@ export function Form({ {showName ? (