feat(feedback/v7): Make "required" text for input elements configurable (#11287)

Backport of #11153

From the OP (h/t @soerface):

This introduces an option `isRequiredLabel`, and I planned to also add
`errorMessageText`.

However, this PR is branched off from a version that is a couple days
old. Right now, @c298lee is currently working on getsentry/sentry#63749,
which is causing major changes and the current version on master doesn't
work yet. Therefore, I didn't yet implement `errorMessageText`.

So consider this PR as a PoC, and either feel free to tag me when the
screenshot changes are done – then I'll redo the changes based on the
version that supports screenshots – or add the option on your own;
however you prefer 🙂

---------

Co-authored-by: Soeren Wegener <[email protected]>

Author: billyvg

packages/feedback/src/constants.ts

@@ -70,6 +70,7 @@ export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
 export const MESSAGE_LABEL = 'Description';
 export const NAME_PLACEHOLDER = 'Your Name';
 export const NAME_LABEL = 'Name';
+export const IS_REQUIRED_LABEL = '(required)';
 export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
 
 export const FEEDBACK_WIDGET_SOURCE = 'widget';

packages/feedback/src/integration.ts

@@ -8,6 +8,7 @@ import {
   EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
   FORM_TITLE,
+  IS_REQUIRED_LABEL,
   MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
   NAME_LABEL,
@@ -105,6 +106,7 @@ export class Feedback implements Integration {
     messageLabel = MESSAGE_LABEL,
     namePlaceholder = NAME_PLACEHOLDER,
     nameLabel = NAME_LABEL,
+    isRequiredLabel = IS_REQUIRED_LABEL,
     successMessageText = SUCCESS_MESSAGE_TEXT,
 
     onFormClose,
@@ -152,6 +154,7 @@ export class Feedback implements Integration {
       messagePlaceholder,
       nameLabel,
       namePlaceholder,
+      isRequiredLabel,
       successMessageText,
 
       onFormClose,

packages/feedback/src/types/index.ts

@@ -149,6 +149,11 @@ export interface FeedbackTextConfiguration {
    * Message after feedback was sent successfully
    */
   successMessageText: string;
+
+  /**
+   * Label shown when an input field is required
+   */
+  isRequiredLabel: string;
 }
 
 /**

packages/feedback/src/widget/Form.ts

@@ -53,6 +53,7 @@ export function Form({
   emailPlaceholder,
   messageLabel,
   messagePlaceholder,
+  isRequiredLabel,
   cancelButtonLabel,
   submitButtonLabel,
 
@@ -176,7 +177,8 @@ export function Form({
               'span',
               { className: 'form__label__text' },
               nameLabel,
-              isNameRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+              isNameRequired &&
+                createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`),
             ),
             nameEl,
           ],
@@ -195,7 +197,8 @@ export function Form({
               'span',
               { className: 'form__label__text' },
               emailLabel,
-              isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+              isEmailRequired &&
+                createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`),
             ),
             emailEl,
           ],
@@ -213,7 +216,7 @@ export function Form({
             'span',
             { className: 'form__label__text' },
             messageLabel,
-            createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+            createElement('span', { className: 'form__label__text--required' }, ` ${isRequiredLabel}`),
           ),
           messageEl,
         ],

packages/feedback/src/widget/createWidget.ts

@@ -200,6 +200,7 @@ export function createWidget({
         messagePlaceholder: options.messagePlaceholder,
         nameLabel: options.nameLabel,
         namePlaceholder: options.namePlaceholder,
+        isRequiredLabel: options.isRequiredLabel,
         defaultName: (userKey && user && user[userKey.name]) || '',
         defaultEmail: (userKey && user && user[userKey.email]) || '',
         onClosed: () => {

packages/feedback/test/widget/Dialog.test.ts

@@ -23,6 +23,7 @@ function renderDialog({
   messagePlaceholder = 'What is the issue?',
   cancelButtonLabel = 'Cancel!',
   submitButtonLabel = 'Submit!',
+  isRequiredLabel = '(needed!)',
   ...rest
 }: Partial<DialogProps> = {}) {
   return Dialog({
@@ -44,6 +45,7 @@ function renderDialog({
     messagePlaceholder,
     cancelButtonLabel,
     submitButtonLabel,
+    isRequiredLabel,
     ...rest,
   }) as NonNullableFields<ReturnType<typeof Dialog>>;
 }

packages/feedback/test/widget/Form.test.ts

@@ -20,6 +20,7 @@ function renderForm({
   messagePlaceholder = 'What is the issue?',
   cancelButtonLabel = 'Cancel!',
   submitButtonLabel = 'Submit!',
+  isRequiredLabel = '(needed!)',
   ...rest
 }: Partial<FormComponentProps> = {}) {
   return Form({
@@ -37,6 +38,7 @@ function renderForm({
     messagePlaceholder,
     cancelButtonLabel,
     submitButtonLabel,
+    isRequiredLabel,
     ...rest,
   }) as NonNullableFields<ReturnType<typeof Form>>;
 }
@@ -89,9 +91,9 @@ describe('Form', () => {
     const nameLabel = formComponent.el.querySelector('label[htmlFor="name"]') as HTMLLabelElement;
     const emailLabel = formComponent.el.querySelector('label[htmlFor="email"]') as HTMLLabelElement;
     const messageLabel = formComponent.el.querySelector('label[htmlFor="message"]') as HTMLLabelElement;
-    expect(nameLabel.textContent).toBe('Name! (required)');
-    expect(emailLabel.textContent).toBe('Email! (required)');
-    expect(messageLabel.textContent).toBe('Description! (required)');
+    expect(nameLabel.textContent).toBe('Name! (needed!)');
+    expect(emailLabel.textContent).toBe('Email! (needed!)');
+    expect(messageLabel.textContent).toBe('Description! (needed!)');
 
     const nameInput = formComponent.el.querySelector('[name="name"]') as HTMLInputElement;
     const emailInput = formComponent.el.querySelector('[name="email"]') as HTMLInputElement;

packages/feedback/test/widget/createWidget.test.ts

@@ -5,6 +5,7 @@ import {
   EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
   FORM_TITLE,
+  IS_REQUIRED_LABEL,
   MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
   NAME_LABEL,
@@ -47,6 +48,7 @@ const DEFAULT_OPTIONS = {
   messageLabel: MESSAGE_LABEL,
   namePlaceholder: NAME_PLACEHOLDER,
   nameLabel: NAME_LABEL,
+  isRequiredLabel: IS_REQUIRED_LABEL,
   successMessageText: SUCCESS_MESSAGE_TEXT,
 
   onFormClose: jest.fn(),