From 60e7c77b04a89fd605d566063c14a839a4988e47 Mon Sep 17 00:00:00 2001
From: Zach Waterfield <zlwaterfield@gmail.com>
Date: Thu, 1 Aug 2024 18:57:30 -0400
Subject: [PATCH] Update UnsubscribeSurveyModal.tsx

---
 frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx | 3 +++
 frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx    | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx
index cdf71e6c2d8f9..a5a373f1668f8 100644
--- a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx
@@ -22,6 +22,7 @@ export interface LemonCheckboxProps {
     bordered?: boolean
     /** @deprecated See https://github.com/PostHog/posthog/pull/9357#pullrequestreview-933783868. */
     color?: string
+    dataAttr?: string
 }
 
 export interface BoxCSSProperties extends React.CSSProperties {
@@ -49,6 +50,7 @@ export function LemonCheckbox({
     bordered,
     color,
     size,
+    dataAttr,
 }: LemonCheckboxProps): JSX.Element {
     const indeterminate = checked === 'indeterminate'
     disabled = disabled || !!disabledReason
@@ -82,6 +84,7 @@ export function LemonCheckbox({
                     size && `LemonCheckbox--${size}`,
                     className
                 )}
+                data-attr={dataAttr}
             >
                 <input
                     className="LemonCheckbox__input"
diff --git a/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx b/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
index 86670177f6973..8f70ba49ed506 100644
--- a/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
+++ b/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
@@ -115,7 +115,7 @@ export const UnsubscribeSurveyModal = ({
                             bordered
                             key={reason}
                             label={reason}
-                            data-attr={`unsubscribe-reason-${reason.toLowerCase().replace(' ', '-')}`}
+                            dataAttr={`unsubscribe-reason-${reason.toLowerCase().replace(' ', '-')}`}
                             checked={surveyResponse['$survey_reasons'].includes(reason)}
                             onChange={() => toggleSurveyReason(reason)}
                             className="w-full"