ref(feedback): Rename onDialog* to onForm*, remove onActorClick (#9625)

Rename the onDialogOpen and onDialogClose callbacks to onFormOpen and
onFormClose to match our defined terminology and remove onActorClick as
it's not necessary.

Closes #9605

Author: c298lee

packages/feedback/README.md

@@ -180,9 +180,8 @@ Pass these callbacks when you initialize the Feedback integration:
 
 ```javascript
 new Feedback({
-  onActorClick: () => {},
-  onDialogOpen: () => {},
-  onDialogClose: () => {},
+  onFormOpen: () => {},
+  onFormClose: () => {},
   onSubmitSuccess: () => {},
   onSubmitError: () => {},
 });

packages/feedback/src/integration.ts

@@ -99,9 +99,8 @@ export class Feedback implements Integration {
     nameLabel = NAME_LABEL,
     successMessageText = SUCCESS_MESSAGE_TEXT,
 
-    onActorClick,
-    onDialogClose,
-    onDialogOpen,
+    onFormClose,
+    onFormOpen,
     onSubmitError,
     onSubmitSuccess,
   }: OptionalFeedbackConfiguration = {}) {
@@ -147,9 +146,8 @@ export class Feedback implements Integration {
       namePlaceholder,
       successMessageText,
 
-      onActorClick,
-      onDialogClose,
-      onDialogOpen,
+      onFormClose,
+      onFormOpen,
       onSubmitError,
       onSubmitSuccess,
     };

packages/feedback/src/types/index.ts

@@ -156,19 +156,14 @@ export interface FeedbackTextConfiguration {
  */
 export interface FeedbackCallbacks {
   /**
-   * Callback when dialog is closed
+   * Callback when form is closed
    */
-  onDialogClose?: () => void;
+  onFormClose?: () => void;
 
   /**
-   * Callback when dialog is opened
+   * Callback when form is opened
    */
-  onDialogOpen?: () => void;
-
-  /**
-   * Callback when widget actor is clicked
-   */
-  onActorClick?: () => void;
+  onFormOpen?: () => void;
 
   /**
    * Callback when feedback is successfully submitted

packages/feedback/src/widget/createWidget.ts

@@ -153,8 +153,8 @@ export function createWidget({
       if (dialog) {
         dialog.open();
         isDialogOpen = true;
-        if (options.onDialogOpen) {
-          options.onDialogOpen();
+        if (options.onFormOpen) {
+          options.onFormOpen();
         }
         return;
       }
@@ -185,8 +185,8 @@ export function createWidget({
           showActor();
           isDialogOpen = false;
 
-          if (options.onDialogClose) {
-            options.onDialogClose();
+          if (options.onFormClose) {
+            options.onFormClose();
           }
         },
         onCancel: () => {
@@ -205,8 +205,8 @@ export function createWidget({
       // Hides the default actor whenever dialog is opened
       hideActor();
 
-      if (options.onDialogOpen) {
-        options.onDialogOpen();
+      if (options.onFormOpen) {
+        options.onFormOpen();
       }
     } catch (err) {
       // TODO: Error handling?
@@ -222,8 +222,8 @@ export function createWidget({
       dialog.close();
       isDialogOpen = false;
 
-      if (options.onDialogClose) {
-        options.onDialogClose();
+      if (options.onFormClose) {
+        options.onFormClose();
       }
     }
   }
@@ -251,10 +251,6 @@ export function createWidget({
 
     // Hide actor button
     hideActor();
-
-    if (options.onActorClick) {
-      options.onActorClick();
-    }
   }
 
   if (attachTo) {

packages/feedback/test/integration.test.ts

@@ -70,7 +70,7 @@ describe('Feedback integration', () => {
   });
 
   it('attaches to a custom actor element', () => {
-    const onDialogOpen = jest.fn();
+    const onFormOpen = jest.fn();
     // This element is in the normal DOM
     const myActor = document.createElement('div');
     myActor.textContent = 'my button';
@@ -79,15 +79,15 @@ describe('Feedback integration', () => {
     let widget = feedback.getWidget();
     expect(widget).toBe(null);
 
-    feedback.attachTo(myActor, { onDialogOpen });
+    feedback.attachTo(myActor, { onFormOpen });
 
     myActor.dispatchEvent(new Event('click'));
 
     widget = feedback.getWidget();
 
     expect(widget?.dialog?.el).toBeInstanceOf(HTMLDialogElement);
     expect(widget?.dialog?.el?.open).toBe(true);
-    expect(onDialogOpen).toHaveBeenCalledTimes(1);
+    expect(onFormOpen).toHaveBeenCalledTimes(1);
     // This is all we do with `attachTo` (open dialog)
   });
 

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

@@ -49,9 +49,8 @@ const DEFAULT_OPTIONS = {
   nameLabel: NAME_LABEL,
   successMessageText: SUCCESS_MESSAGE_TEXT,
 
-  onActorClick: jest.fn(),
-  onDialogClose: jest.fn(),
-  onDialogOpen: jest.fn(),
+  onFormClose: jest.fn(),
+  onFormOpen: jest.fn(),
   onSubmitError: jest.fn(),
   onSubmitSuccess: jest.fn(),
 };
@@ -111,8 +110,8 @@ describe('createWidget', () => {
   });
 
   it('clicking on actor opens dialog and hides the actor', () => {
-    const onDialogOpen = jest.fn();
-    const { widget } = createShadowAndWidget({ onDialogOpen });
+    const onFormOpen = jest.fn();
+    const { widget } = createShadowAndWidget({ onFormOpen });
     widget.actor?.el?.dispatchEvent(new Event('click'));
 
     // Dialog is now visible
@@ -121,7 +120,7 @@ describe('createWidget', () => {
     // Actor should be hidden
     expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
 
-    expect(onDialogOpen).toHaveBeenCalledTimes(1);
+    expect(onFormOpen).toHaveBeenCalledTimes(1);
   });
 
   it('submits feedback successfully', async () => {
@@ -282,8 +281,8 @@ describe('createWidget', () => {
   });
 
   it('closes when Cancel button is clicked', () => {
-    const onDialogClose = jest.fn();
-    const { widget } = createShadowAndWidget({ onDialogClose });
+    const onFormClose = jest.fn();
+    const { widget } = createShadowAndWidget({ onFormClose });
 
     widget.actor?.el?.dispatchEvent(new Event('click'));
     expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
@@ -296,7 +295,7 @@ describe('createWidget', () => {
     // Element/component should still exist, but it will be in a closed state
     expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
     expect(widget.dialog?.el?.open).toBe(false);
-    expect(onDialogClose).toHaveBeenCalledTimes(1);
+    expect(onFormClose).toHaveBeenCalledTimes(1);
 
     // Actor should now be visible too
     expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('false');
@@ -309,8 +308,8 @@ describe('createWidget', () => {
   });
 
   it('closes when dialog (background)) is clicked', () => {
-    const onDialogClose = jest.fn();
-    const { widget } = createShadowAndWidget({ onDialogClose });
+    const onFormClose = jest.fn();
+    const { widget } = createShadowAndWidget({ onFormClose });
 
     widget.actor?.el?.dispatchEvent(new Event('click'));
     expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
@@ -323,7 +322,7 @@ describe('createWidget', () => {
     // Element/component should still exist, but it will be in a closed state
     expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
     expect(widget.dialog?.el?.open).toBe(false);
-    expect(onDialogClose).toHaveBeenCalledTimes(1);
+    expect(onFormClose).toHaveBeenCalledTimes(1);
 
     // Actor should now be visible too
     expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('false');
@@ -336,15 +335,15 @@ describe('createWidget', () => {
   });
 
   it('attaches to a custom actor element', () => {
-    const onDialogOpen = jest.fn();
+    const onFormOpen = jest.fn();
     // This element is in the normal DOM
     const myActor = document.createElement('div');
     myActor.textContent = 'my button';
 
     const { widget } = createShadowAndWidget(
       {
         autoInject: false,
-        onDialogOpen,
+        onFormOpen,
       },
       {
         attachTo: myActor,
@@ -354,7 +353,7 @@ describe('createWidget', () => {
     myActor.dispatchEvent(new Event('click'));
     expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
     expect(widget.dialog?.el?.open).toBe(true);
-    expect(onDialogOpen).toHaveBeenCalledTimes(1);
+    expect(onFormOpen).toHaveBeenCalledTimes(1);
     // This is all we do with `attachTo` (open dialog)
   });
 });