Skip to content

Commit

Permalink
docs(feedback): Fix migration docs and document Actor methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryan953
ryan953 committed May 14, 2024
1 parent 1390402 commit dae5915
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 13 deletions.
18 changes: 9 additions & 9 deletions docs/migration/feedback.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
23 changes: 23 additions & 0 deletions packages/feedback/src/core/components/Actor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
7 changes: 4 additions & 3 deletions packages/feedback/src/core/createMainStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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',
Expand All @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion packages/types/src/feedback/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down

0 comments on commit dae5915

Please sign in to comment.