chore(core): Deprecate FeedbackButton FAB APIs

CHANGELOG.md

@@ -8,6 +8,12 @@
 
 ## Unreleased
 
+### Features
+
+- Rename `FeedbackWidget` to `FeedbackForm` and `showFeedbackWidget` to `showFeedbackForm` ([#5931](https://github.com/getsentry/sentry-react-native/pull/5931))
+  - The old names are deprecated but still work
+- Deprecate `FeedbackButton`, `showFeedbackButton`, and `hideFeedbackButton` ([#5933](https://github.com/getsentry/sentry-react-native/pull/5933))
+
 ### Fixes
 
 - Fix iOS crash (EXC_BAD_ACCESS) in time-to-initial-display when navigating between screens ([#5887](https://github.com/getsentry/sentry-react-native/pull/5887))

packages/core/src/js/feedback/FeedbackButton.tsx

@@ -3,21 +3,18 @@ import type { NativeEventSubscription } from 'react-native';
 import * as React from 'react';
 import { Appearance, Image, Text, TouchableOpacity } from 'react-native';
 
-import type {
-  FeedbackButtonProps,
-  FeedbackButtonStyles,
-  FeedbackButtonTextConfiguration,
-} from './FeedbackWidget.types';
+import type { FeedbackButtonProps, FeedbackButtonStyles, FeedbackButtonTextConfiguration } from './FeedbackForm.types';
 
 import { defaultButtonConfiguration } from './defaults';
-import { defaultButtonStyles } from './FeedbackWidget.styles';
-import { getTheme } from './FeedbackWidget.theme';
-import { showFeedbackWidget } from './FeedbackWidgetManager';
+import { defaultButtonStyles } from './FeedbackForm.styles';
+import { getTheme } from './FeedbackForm.theme';
+import { showFeedbackForm } from './FeedbackFormManager';
 import { feedbackIcon } from './icons';
 import { lazyLoadFeedbackIntegration } from './lazy';
 
 /**
  * @beta
+ * @deprecated The `FeedbackButton` component will be removed in a future major version.
  * Implements a feedback button that opens the FeedbackForm.
  */
 export class FeedbackButton extends React.Component<FeedbackButtonProps> {
@@ -61,7 +58,7 @@ export class FeedbackButton extends React.Component<FeedbackButtonProps> {
     return (
       <TouchableOpacity
         style={styles.triggerButton}
-        onPress={showFeedbackWidget}
+        onPress={showFeedbackForm}
         accessibilityLabel={text.triggerAriaLabel}
       >
         <Image source={{ uri: feedbackIcon }} style={styles.triggerIcon} />

packages/core/src/js/feedback/FeedbackWidget.styles.ts → packages/core/src/js/feedback/FeedbackForm.styles.ts

@@ -1,9 +1,9 @@
 import type { ViewStyle } from 'react-native';
 
-import type { FeedbackWidgetTheme } from './FeedbackWidget.theme';
-import type { FeedbackButtonStyles, FeedbackWidgetStyles } from './FeedbackWidget.types';
+import type { FeedbackFormTheme } from './FeedbackForm.theme';
+import type { FeedbackButtonStyles, FeedbackFormStyles } from './FeedbackForm.types';
 
-const defaultStyles = (theme: FeedbackWidgetTheme): FeedbackWidgetStyles => {
+const defaultStyles = (theme: FeedbackFormTheme): FeedbackFormStyles => {
   return {
     container: {
       flex: 1,
@@ -112,7 +112,7 @@ const defaultStyles = (theme: FeedbackWidgetTheme): FeedbackWidgetStyles => {
   };
 };
 
-export const defaultButtonStyles = (theme: FeedbackWidgetTheme): FeedbackButtonStyles => {
+export const defaultButtonStyles = (theme: FeedbackFormTheme): FeedbackButtonStyles => {
   return {
     triggerButton: {
       position: 'absolute',
@@ -156,7 +156,7 @@ export const modalWrapper: ViewStyle = {
   bottom: 0,
 };
 
-export const modalSheetContainer = (theme: FeedbackWidgetTheme): ViewStyle => {
+export const modalSheetContainer = (theme: FeedbackFormTheme): ViewStyle => {
   return {
     backgroundColor: theme.background,
     borderTopLeftRadius: 16,

packages/core/src/js/feedback/FeedbackWidget.theme.ts → packages/core/src/js/feedback/FeedbackForm.theme.ts

@@ -5,15 +5,15 @@ import { getColorScheme, getFeedbackDarkTheme, getFeedbackLightTheme } from './i
 /**
  * Get the theme for the feedback widget based on the current color scheme
  */
-export function getTheme(): FeedbackWidgetTheme {
+export function getTheme(): FeedbackFormTheme {
   const userTheme = getColorScheme();
   const colorScheme = userTheme === 'system' ? Appearance.getColorScheme() : userTheme;
   const lightTheme = { ...LightTheme, ...getFeedbackLightTheme() };
   const darkTheme = { ...DarkTheme, ...getFeedbackDarkTheme() };
   return colorScheme === 'dark' ? darkTheme : lightTheme;
 }
 
-export interface FeedbackWidgetTheme {
+export interface FeedbackFormTheme {
   /**
    * Background color for surfaces
    */
@@ -50,7 +50,7 @@ export interface FeedbackWidgetTheme {
   sentryLogo?: string;
 }
 
-export const LightTheme: FeedbackWidgetTheme = {
+export const LightTheme: FeedbackFormTheme = {
   accentBackground: 'rgba(88, 74, 192, 1)',
   accentForeground: '#ffffff',
   foreground: '#2b2233',
@@ -60,7 +60,7 @@ export const LightTheme: FeedbackWidgetTheme = {
   sentryLogo: 'rgba(54, 45, 89, 1)',
 };
 
-export const DarkTheme: FeedbackWidgetTheme = {
+export const DarkTheme: FeedbackFormTheme = {
   accentBackground: 'rgba(88, 74, 192, 1)',
   accentForeground: '#ffffff',
   foreground: '#ebe6ef',
@@ -69,3 +69,6 @@ export const DarkTheme: FeedbackWidgetTheme = {
   feedbackIcon: '#ffffff',
   sentryLogo: '#ffffff',
 };
+
+/** @deprecated Use `FeedbackFormTheme` instead. */
+export type FeedbackWidgetTheme = FeedbackFormTheme;

packages/core/src/js/feedback/FeedbackWidget.tsx → packages/core/src/js/feedback/FeedbackForm.tsx

@@ -19,19 +19,19 @@ import type { Screenshot } from '../wrapper';
 import type {
   FeedbackGeneralConfiguration,
   FeedbackTextConfiguration,
-  FeedbackWidgetProps,
-  FeedbackWidgetState,
-  FeedbackWidgetStyles,
+  FeedbackFormProps,
+  FeedbackFormState,
+  FeedbackFormStyles,
   ImagePickerConfiguration,
-} from './FeedbackWidget.types';
+} from './FeedbackForm.types';
 
 import { isExpoGo, isWeb, notWeb } from '../utils/environment';
 import { getDataFromUri, NATIVE } from '../wrapper';
 import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
-import defaultStyles from './FeedbackWidget.styles';
-import { getTheme } from './FeedbackWidget.theme';
-import { hideFeedbackButton, showScreenshotButton } from './FeedbackWidgetManager';
+import defaultStyles from './FeedbackForm.styles';
+import { getTheme } from './FeedbackForm.theme';
+import { hideFeedbackButton, showScreenshotButton } from './FeedbackFormManager';
 import { lazyLoadFeedbackIntegration } from './lazy';
 import { getCapturedScreenshot } from './ScreenshotButton';
 import { base64ToUint8Array, feedbackAlertDialog, isValidEmail } from './utils';
@@ -40,10 +40,10 @@ import { base64ToUint8Array, feedbackAlertDialog, isValidEmail } from './utils';
  * @beta
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
  */
-export class FeedbackWidget extends React.Component<FeedbackWidgetProps, FeedbackWidgetState> {
+export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {
   public static defaultProps = defaultConfiguration;
 
-  private static _savedState: Omit<FeedbackWidgetState, 'isVisible'> = {
+  private static _savedState: Omit<FeedbackFormState, 'isVisible'> = {
     name: '',
     email: '',
     description: '',
@@ -56,7 +56,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
 
   private _didSubmitForm: boolean = false;
 
-  public constructor(props: FeedbackWidgetProps) {
+  public constructor(props: FeedbackFormProps) {
     super(props);
 
     const currentUser = {
@@ -68,12 +68,12 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
 
     this.state = {
       isVisible: true,
-      name: FeedbackWidget._savedState.name || currentUser.useSentryUser.name,
-      email: FeedbackWidget._savedState.email || currentUser.useSentryUser.email,
-      description: FeedbackWidget._savedState.description || '',
-      filename: FeedbackWidget._savedState.filename || undefined,
-      attachment: FeedbackWidget._savedState.attachment || undefined,
-      attachmentUri: FeedbackWidget._savedState.attachmentUri || undefined,
+      name: FeedbackForm._savedState.name || currentUser.useSentryUser.name,
+      email: FeedbackForm._savedState.email || currentUser.useSentryUser.email,
+      description: FeedbackForm._savedState.description || '',
+      filename: FeedbackForm._savedState.filename || undefined,
+      attachment: FeedbackForm._savedState.attachment || undefined,
+      attachmentUri: FeedbackForm._savedState.attachmentUri || undefined,
     };
 
     lazyLoadFeedbackIntegration();
@@ -83,7 +83,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
    * For testing purposes only.
    */
   public static reset(): void {
-    FeedbackWidget._savedState = {
+    FeedbackForm._savedState = {
       name: '',
       email: '',
       description: '',
@@ -275,7 +275,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     const _propStyles = this.props.styles || {};
     const autoCorrect = config.autoCorrect !== false;
     const spellCheck = config.spellCheck !== false;
-    const styles = (Object.keys(_defaultStyles) as Array<keyof FeedbackWidgetStyles>).reduce<FeedbackWidgetStyles>(
+    const styles = (Object.keys(_defaultStyles) as Array<keyof FeedbackFormStyles>).reduce<FeedbackFormStyles>(
       (merged, key) => {
         (merged as Record<string, unknown>)[key] = {
           ...(_defaultStyles[key] as object),
@@ -435,11 +435,11 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
   };
 
   private _saveFormState = (): void => {
-    FeedbackWidget._savedState = { ...this.state };
+    FeedbackForm._savedState = { ...this.state };
   };
 
   private _clearFormState = (): void => {
-    FeedbackWidget._savedState = {
+    FeedbackForm._savedState = {
       name: '',
       email: '',
       description: '',

packages/core/src/js/feedback/FeedbackWidget.types.ts → packages/core/src/js/feedback/FeedbackForm.types.ts

@@ -4,9 +4,9 @@ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 /**
  * The props for the feedback form
  */
-export interface FeedbackWidgetProps
+export interface FeedbackFormProps
   extends FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackCallbacks, ImagePickerConfiguration {
-  styles?: FeedbackWidgetStyles;
+  styles?: FeedbackFormStyles;
 }
 
 /**
@@ -286,7 +286,7 @@ export interface ImagePicker {
 /**
  * The styles for the feedback form
  */
-export interface FeedbackWidgetStyles {
+export interface FeedbackFormStyles {
   container?: ViewStyle;
   title?: TextStyle;
   label?: TextStyle;
@@ -341,7 +341,7 @@ export interface ScreenshotButtonStyles {
 /**
  * The state of the feedback form
  */
-export interface FeedbackWidgetState {
+export interface FeedbackFormState {
   isVisible: boolean;
   name: string;
   email: string;
@@ -350,3 +350,12 @@ export interface FeedbackWidgetState {
   attachment?: string | Uint8Array;
   attachmentUri?: string;
 }
+
+/** @deprecated Use `FeedbackFormProps` instead. */
+export type FeedbackWidgetProps = FeedbackFormProps;
+
+/** @deprecated Use `FeedbackFormStyles` instead. */
+export type FeedbackWidgetStyles = FeedbackFormStyles;
+
+/** @deprecated Use `FeedbackFormState` instead. */
+export type FeedbackWidgetState = FeedbackFormState;

packages/core/src/js/feedback/FeedbackWidgetManager.tsx → packages/core/src/js/feedback/FeedbackFormManager.tsx

@@ -69,17 +69,20 @@ abstract class FeedbackManager {
 }
 
 /**
- * Provides functionality to show and hide the feedback widget.
+ * Provides functionality to show and hide the feedback form.
  */
-export class FeedbackWidgetManager extends FeedbackManager {
+export class FeedbackFormManager extends FeedbackManager {
   /**
    * Returns the name of the feedback component.
    */
   protected static get _feedbackComponentName(): string {
-    return 'FeedbackWidget';
+    return 'FeedbackForm';
   }
 }
 
+/** @deprecated Use `FeedbackFormManager` instead. */
+export const FeedbackWidgetManager = FeedbackFormManager;
+
 /**
  * Provides functionality to show and hide the feedback button.
  */
@@ -104,20 +107,28 @@ export class ScreenshotButtonManager extends FeedbackManager {
   }
 }
 
-const showFeedbackWidget = (): void => {
+const showFeedbackForm = (): void => {
   lazyLoadAutoInjectFeedbackIntegration();
-  FeedbackWidgetManager.show();
+  FeedbackFormManager.show();
 };
 
-const resetFeedbackWidgetManager = (): void => {
-  FeedbackWidgetManager.reset();
+const resetFeedbackFormManager = (): void => {
+  FeedbackFormManager.reset();
 };
 
+/** @deprecated Use `showFeedbackForm` instead. */
+const showFeedbackWidget = showFeedbackForm;
+
+/** @deprecated Use `resetFeedbackFormManager` instead. */
+const resetFeedbackWidgetManager = resetFeedbackFormManager;
+
+/** @deprecated `showFeedbackButton` will be removed in a future major version. */
 const showFeedbackButton = (): void => {
   lazyLoadAutoInjectFeedbackButtonIntegration();
   FeedbackButtonManager.show();
 };
 
+/** @deprecated `hideFeedbackButton` will be removed in a future major version. */
 const hideFeedbackButton = (): void => {
   FeedbackButtonManager.hide();
 };
@@ -149,7 +160,7 @@ const enableFeedbackOnShake = (): void => {
   lazyLoadAutoInjectFeedbackIntegration();
   lazyLoadShakeToReportIntegration();
   if (!_imperativeShakeListenerStarted) {
-    _imperativeShakeListenerStarted = startShakeListener(showFeedbackWidget);
+    _imperativeShakeListenerStarted = startShakeListener(showFeedbackForm);
   }
 };
 
@@ -163,12 +174,14 @@ const disableFeedbackOnShake = (): void => {
 export {
   showFeedbackButton,
   hideFeedbackButton,
+  showFeedbackForm,
   showFeedbackWidget,
   enableFeedbackOnShake,
   disableFeedbackOnShake,
   showScreenshotButton,
   hideScreenshotButton,
   resetFeedbackButtonManager,
+  resetFeedbackFormManager,
   resetFeedbackWidgetManager,
   resetScreenshotButtonManager,
 };