chore: Refactor FeedbackButton to accept all the feedback options

static/app/components/featureFeedback/feedbackModal.tsx

@@ -84,6 +84,11 @@ export type FeedbackModalProps<T extends Data> = (
   useNewUserFeedback?: boolean;
 };
 
+/**
+ * A modal that allows users to submit feedback to Sentry (feedbacks project).
+ *
+ * @deprecated Use `<FeedbackButton/>` instead.
+ */
 export function FeedbackModal<T extends Data>({
   Header,
   Body,

static/app/components/featureFeedback/index.tsx

@@ -12,8 +12,12 @@ type FeatureFeedbackProps<T extends Data> = FeedbackModalProps<T> & {
   secondaryAction?: React.ReactNode;
 };
 
-// Provides a button that, when clicked, opens a modal with a form that,
-// when filled and submitted, will send feedback to Sentry (feedbacks project).
+/**
+ * Provides a button that, when clicked, opens a modal with a form that,
+ * when filled and submitted, will send feedback to Sentry (feedbacks project).
+ *
+ * @deprecated Use `<FeedbackButton/>` instead.
+ */
 export function FeatureFeedback<T extends Data>({
   buttonProps = {},
   ...props

static/app/components/feedbackButton/feedbackButton.tsx

@@ -0,0 +1,79 @@
+import {useEffect, useRef} from 'react';
+
+import {Button, type ButtonProps} from 'sentry/components/core/button';
+import {
+  useFeedbackSDKIntegration,
+  type UseFeedbackOptions,
+} from 'sentry/components/feedbackButton/useFeedbackSDKIntegration';
+import {IconMegaphone} from 'sentry/icons/iconMegaphone';
+import {t} from 'sentry/locale';
+
+interface Props extends Omit<ButtonProps, 'icon'> {
+  feedbackOptions?: UseFeedbackOptions;
+}
+
+/**
+ * A button component that opens the Sentry feedback widget when clicked.
+ *
+ * Use this component to embed a feedback collection button anywhere in the UI where users
+ * might want to submit feedback, report issues, or share suggestions with your team.
+ *
+ * The component will return null when the Feedback SDK integration is not enabled,
+ * like in self-hosted environments.
+ *
+ * It's strongly recommended to add the tags: `feedback.source` and `feedback.owner`
+ * and then setup an alert rule to notify you when feedback is submitted.
+ *
+ * @example
+ * // Mix of Button and Feedback props
+ * <FeedbackButton
+ *   priority="primary"
+ *   size="lg"
+ *   feedbackOptions={{
+ *     messagePlaceholder: 'Tell us what you think...',
+ *     tags: {
+ *       ['feedback.source']: 'issue-details'
+ *       ['feedback.owner']: 'issues'
+ *     }
+ *   }}
+ * />
+ *
+ * @param feedbackOptions - Optional configuration to customize the feedback widget behavior,
+ *                          such as form labels, tags, or user metadata
+ *
+ * @param children - The content to display inside the button. If not provided, the default label 'Give Feedback' will be used.
+ *
+ * @param * - All standard Button props except `icon` (icon is fixed to megaphone).
+ *                      Includes size, priority, disabled, onClick handlers, etc.
+ *
+ * @returns A Button that opens the feedback widget on click, or null if feedback is not enabled
+ */
+export default function FeedbackButton({
+  feedbackOptions,
+  children,
+  ...buttonProps
+}: Props) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const {feedback, options} = useFeedbackSDKIntegration({
+    optionOverrides: feedbackOptions,
+  });
+
+  useEffect(() => {
+    if (feedback && buttonRef.current) {
+      return feedback.attachTo(buttonRef.current, options);
+    }
+
+    return undefined;
+  }, [buttonRef, feedback, options]);
+
+  // Do not show button if Feedback integration is not enabled
+  if (!feedback) {
+    return null;
+  }
+
+  return (
+    <Button ref={buttonRef} size="sm" {...buttonProps} icon={<IconMegaphone />}>
+      {children || t('Give Feedback')}
+    </Button>
+  );
+}

static/app/components/feedbackButton/floatingFeedbackButton.tsx

@@ -0,0 +1,43 @@
+import {useEffect} from 'react';
+import {css, Global, useTheme} from '@emotion/react';
+
+import {useFeedbackSDKIntegration} from 'sentry/components/feedbackButton/useFeedbackSDKIntegration';
+
+/**
+ * `<FloatingFeedbackButton /> renders a 'Give Feedback' button that floats in
+ * the bottom right corner of the page.
+ *
+ * This button can float overtop of content, but can also be helpful because it
+ * allows users to scroll anywhere and still be able to trigger the Feedback form
+ * which allows taking screenshots of what's visible on the page.
+ */
+export default function FloatingFeedbackButton() {
+  const theme = useTheme();
+  const {feedback, options} = useFeedbackSDKIntegration();
+
+  useEffect(() => {
+    if (!feedback) {
+      return undefined;
+    }
+
+    const widget = feedback.createWidget(options);
+    return () => {
+      widget.removeFromDom();
+    };
+  }, [feedback, options]);
+
+  if (!feedback) {
+    return null;
+  }
+
+  // z-index needs to be below our indicators which is 10001
+  return (
+    <Global
+      styles={css`
+        #sentry-feedback {
+          --z-index: ${theme.zIndex.toast - 1};
+        }
+      `}
+    />
+  );
+}

static/app/components/feedback/widget/useFeedback.tsx → static/app/components/feedbackButton/useFeedbackSDKIntegration.tsx

@@ -10,11 +10,11 @@ export type FeedbackIntegration = NonNullable<ReturnType<typeof Sentry.getFeedba
 
 export type UseFeedbackOptions = Parameters<FeedbackIntegration['createForm']>[0];
 
-export function useFeedback({
-  formTitle,
-  messagePlaceholder,
-  tags,
-}: NonNullable<UseFeedbackOptions>): {
+interface Props {
+  optionOverrides?: UseFeedbackOptions;
+}
+
+export function useFeedbackSDKIntegration({optionOverrides = {}}: Props = {}): {
   feedback: FeedbackIntegration | undefined;
   options: NonNullable<UseFeedbackOptions>;
 } {
@@ -23,16 +23,15 @@ export function useFeedback({
 
   const feedback = state.Feedback as FeedbackIntegration | undefined;
 
-  const options = useMemo(() => {
+  const options = useMemo((): NonNullable<UseFeedbackOptions> => {
     return {
       colorScheme: config.theme === 'dark' ? ('dark' as const) : ('light' as const),
-      buttonLabel: t('Give Feedback'),
       submitButtonLabel: t('Send Feedback'),
-      messagePlaceholder: messagePlaceholder ?? t('What did you expect?'),
-      formTitle: formTitle ?? t('Give Feedback'),
-      tags,
+      messagePlaceholder: t('What did you expect?'),
+      formTitle: t('Give Feedback'),
+      ...optionOverrides,
     };
-  }, [config.theme, formTitle, messagePlaceholder, tags]);
+  }, [config.theme, optionOverrides]);
 
   return {feedback, options};
 }

static/app/components/feedbackButton/useFeedbackWidget.tsx

@@ -0,0 +1,36 @@
+import type {RefObject} from 'react';
+import {useEffect} from 'react';
+
+import {useFeedbackSDKIntegration} from 'sentry/components/feedbackButton/useFeedbackSDKIntegration';
+
+interface Props {
+  buttonRef?: RefObject<HTMLButtonElement | null> | RefObject<HTMLAnchorElement | null>;
+}
+
+/**
+ * @deprecated This layer isn't needed. Call `useFeedbackSDKIntegration` or use `<FeedbackButton/>` or `<FloatingFeedbackButton/>`
+ */
+export default function useFeedbackWidget({buttonRef}: Props) {
+  const {feedback, options} = useFeedbackSDKIntegration();
+
+  useEffect(() => {
+    if (!feedback) {
+      return undefined;
+    }
+
+    if (buttonRef) {
+      if (buttonRef.current) {
+        return feedback.attachTo(buttonRef.current, options);
+      }
+    } else {
+      const widget = feedback.createWidget(options);
+      return () => {
+        widget.removeFromDom();
+      };
+    }
+
+    return undefined;
+  }, [buttonRef, feedback, options]);
+
+  return feedback;
+}

static/app/components/profiling/continuousProfileHeader.tsx

@@ -2,7 +2,7 @@ import {useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {LinkButton} from 'sentry/components/core/button/linkButton';
-import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
+import FeedbackButton from 'sentry/components/feedbackButton/feedbackButton';
 import * as Layout from 'sentry/components/layouts/thirds';
 import type {ProfilingBreadcrumbsProps} from 'sentry/components/profiling/profilingBreadcrumbs';
 import {ProfilingBreadcrumbs} from 'sentry/components/profiling/profilingBreadcrumbs';
@@ -51,7 +51,7 @@ export function ContinuousProfileHeader({transaction}: ContinuousProfileHeader)
         </SmallerProfilingBreadcrumbsWrapper>
       </SmallerHeaderContent>
       <StyledHeaderActions>
-        <FeedbackWidgetButton />
+        <FeedbackButton />
         {transactionTarget && (
           <LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
             {t('Go to Trace')}

static/app/components/profiling/profileHeader.tsx

@@ -2,7 +2,7 @@ import {useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {LinkButton} from 'sentry/components/core/button/linkButton';
-import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
+import FeedbackButton from 'sentry/components/feedbackButton/feedbackButton';
 import * as Layout from 'sentry/components/layouts/thirds';
 import type {ProfilingBreadcrumbsProps} from 'sentry/components/profiling/profilingBreadcrumbs';
 import {ProfilingBreadcrumbs} from 'sentry/components/profiling/profilingBreadcrumbs';
@@ -90,7 +90,7 @@ function ProfileHeader({transaction, projectId, eventId}: ProfileHeaderProps) {
         </SmallerProfilingBreadcrumbsWrapper>
       </SmallerHeaderContent>
       <StyledHeaderActions>
-        <FeedbackWidgetButton />
+        <FeedbackButton />
         {transactionTarget && (
           <LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
             {t('Go to Trace')}

static/app/components/replays/breadcrumbs/replayComparisonModal.tsx

@@ -7,7 +7,7 @@ import {Button} from 'sentry/components/core/button';
 import {Flex} from 'sentry/components/core/layout';
 import {ExternalLink} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
-import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
+import FeedbackButton from 'sentry/components/feedbackButton/feedbackButton';
 import {useGlobalModal} from 'sentry/components/globalModal/useGlobalModal';
 import {Hovercard} from 'sentry/components/hovercard';
 import {DiffCompareContextProvider} from 'sentry/components/replays/diff/diffCompareContext';
@@ -88,8 +88,8 @@ export default function ReplayComparisonModal({
                 </AutoWideHovercard>
               ) : null}
               {focusTrap ? (
-                <FeedbackWidgetButton
-                  optionOverrides={{
+                <FeedbackButton
+                  feedbackOptions={{
                     onFormOpen: () => {
                       focusTrap.pause();
                     },