docs(feedback): Fix migration docs and document Actor methods

Author: ryan953

docs/migration/feedback.md

@@ -14,15 +14,15 @@ Below you can find a list of relevant feedback changes and issues that have been
 We have streamlined the interface for interacting with the Feedback widget. Below is a list of public functions that
 existed in 7.x and a description of how they have changed in v8.
 
-| Method Name                                                   | Replacement                                                    | Notes                                                                                                                                                                                                                |
-| ------------------------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Sentry.getClient<BrowserClient>()?.getIntegration(Feedback)` | `const feedback = Sentry.getFeedback()`                        | Get a type-safe reference to the configured feedbackIntegration instance.                                                                                                                                            |
-| `feedback.getWidget()`                                        | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and an `ActorComponent` returned allows you control over the lifecycle of the widget. |
-| `feedback.openDialog()`                                       | `widget.open()`                                                | Make the form inside the widget visible.                                                                                                                                                                             |
-| `feedback.closeDialog()`                                      | `widget.close()`                                               | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted.                                                       |
-| `feedback.removeWidget()`                                     | `widget.removeFromDom()`                                       | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null.                                                                                                    |
-| `feedback.attachTo()`                                         | `const unsubscribe = feedback.attachTo(myButtonElem)`          | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener.                                      |
-| -                                                             | `const form = await feedback.createForm()`                     | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise<FeedbackDialog>` so you can control showing and hiding of the feedback form directly.                          |
+| Method Name                                                   | Replacement                                                  | Notes                                                                                                                                                                                                                |
+| ------------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Sentry.getClient<BrowserClient>()?.getIntegration(Feedback)` | `const feedback = Sentry.getFeedback()`                      | Get a type-safe reference to the configured feedbackIntegration instance.                                                                                                                                            |
+| `feedback.getWidget()`                                        | `const actor = feedback.createWidget(); actor.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and an `ActorComponent` returned allows you control over the lifecycle of the widget. |
+| `feedback.removeWidget()`                                     | `actor.removeFromDom()`                                      | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null.                                                                                                    |
+| `feedback.attachTo()`                                         | `const unsubscribe = feedback.attachTo(myButtonElem)`        | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener.                                      |
+| -                                                             | `const form = await feedback.createForm()`                   | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise<FeedbackDialog>` so you can control showing and hiding of the feedback form directly.                          |
+| `feedback.openDialog()`                                       | `form.open()`                                                | Make the form inside the widget visible.                                                                                                                                                                             |
+| `feedback.closeDialog()`                                      | `form.close()`                                               | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted.                                                       |
 
 ### API Examples
 

packages/feedback/src/core/components/Actor.ts

@@ -8,14 +8,37 @@ export interface ActorProps {
 }
 
 export interface ActorComponent {
+  /**
+   * The HTMLButtonElement
+   */
   el: HTMLElement;
 
+  /**
+   * Insert the button into the Shadow DOM.
+   *
+   * The button is visible by default and will hide itself when the form is open.
+   */
   appendToDom: () => void;
 
+  /**
+   * Remove the button from the Shadow DOM.
+   *
+   * If the form has been opened by the user, but not submitted, it will remain open and in the DOM.
+   */
   removeFromDom: () => void;
 
+  /**
+   * Show the button
+   *
+   * Called automatically when the dialog is submitted or closed.
+   */
   show: () => void;
 
+  /**
+   * Hide the button
+   *
+   * Called automatically when the button is clicked and the dialog is revealed.
+   */
   hide: () => void;
 }
 

packages/feedback/src/core/createMainStyles.ts

@@ -2,6 +2,7 @@ import type { FeedbackInternalOptions } from '@sentry/types';
 import { DOCUMENT } from '../constants';
 
 const PURPLE = 'rgba(88, 74, 192, 1)';
+const WHITE = '#ffffff';
 
 interface InternalTheme extends NonNullable<FeedbackInternalOptions['themeLight']> {
   border: string;
@@ -10,8 +11,8 @@ interface InternalTheme extends NonNullable<FeedbackInternalOptions['themeLight'
 
 const DEFAULT_LIGHT: InternalTheme = {
   foreground: '#2b2233',
-  background: '#ffffff',
-  accentForeground: 'white',
+  background: WHITE,
+  accentForeground: WHITE,
   accentBackground: PURPLE,
   successColor: '#268d75',
   errorColor: '#df3338',
@@ -23,7 +24,7 @@ const DEFAULT_LIGHT: InternalTheme = {
 const DEFAULT_DARK: InternalTheme = {
   foreground: '#ebe6ef',
   background: '#29232f',
-  accentForeground: 'white',
+  accentForeground: WHITE,
   accentBackground: PURPLE,
   successColor: '#2da98c',
   errorColor: '#f55459',

packages/types/src/feedback/index.ts

@@ -25,7 +25,7 @@ export interface FeedbackInternalOptions
 type HTMLElement = unknown;
 export interface FeedbackDialog {
   /**
-   * The HTMLElement that is containing all the form content
+   * The HTMLElement that contains all the form content
    */
   el: HTMLElement;