From 5d7317ca10b91a455ae286862ed3f27455541b45 Mon Sep 17 00:00:00 2001
From: Naveen <54985099+naveen8801@users.noreply.github.com>
Date: Fri, 19 Jul 2024 17:00:10 +0530
Subject: [PATCH] fix(Button): noreferrer in rel attribute of button rendered
 as link (#2308)

* Removed: defaultRel var from BaseButton.tsx

* Update src/components/Button/Button/__tests__/Button.web.test.tsx

* Create changeset-xyz.md

---------

Co-authored-by: Saurabh Daware <saurabhdaware99@gmail.com>
---
 .changeset/changeset-xyz.md                              | 9 +++++++++
 .../src/components/Button/BaseButton/BaseButton.tsx      | 3 +--
 .../Button/Button/__tests__/Button.web.test.tsx          | 2 +-
 .../__tests__/__snapshots__/Button.ssr.test.tsx.snap     | 3 +--
 4 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/changeset-xyz.md

diff --git a/.changeset/changeset-xyz.md b/.changeset/changeset-xyz.md
new file mode 100644
index 00000000000..5a3c453d1cc
--- /dev/null
+++ b/.changeset/changeset-xyz.md
@@ -0,0 +1,9 @@
+---
+"@razorpay/blade": patch
+---
+
+fix: remove default `rel` values
+
+> [!NOTE]
+>
+> While its non-ui-breaking change, you might want to add `rel="noopener noreferrer"` to your Button if that is what you're expecting. This PR removes the defaults in-order to not break analytics that relies on referrer.
diff --git a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
index d93f89ab9bd..f1285723012 100644
--- a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
+++ b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
@@ -396,7 +396,6 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
   });
 
   const renderElement = React.useMemo(() => getRenderElement(href), [href]);
-  const defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;
   const defaultRole = isLink ? 'link' : 'button';
 
   const handlePointerPressedIn = React.useCallback(() => {
@@ -438,7 +437,7 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
       as={renderElement}
       href={href}
       target={target}
-      rel={rel ?? defaultRel}
+      rel={rel}
       accessibilityProps={{
         ...makeAccessible({
           ...accessibilityProps,
diff --git a/packages/blade/src/components/Button/Button/__tests__/Button.web.test.tsx b/packages/blade/src/components/Button/Button/__tests__/Button.web.test.tsx
index 6b092561746..e58d20465bf 100644
--- a/packages/blade/src/components/Button/Button/__tests__/Button.web.test.tsx
+++ b/packages/blade/src/components/Button/Button/__tests__/Button.web.test.tsx
@@ -157,7 +157,7 @@ describe('<Button />', () => {
 
   it('should render button as link', () => {
     const { getByRole } = renderWithTheme(
-      <Button href="https://youtu.be/iPaBUhIsslA" target="_blank">
+      <Button href="https://youtu.be/iPaBUhIsslA" target="_blank" rel="noreferrer noopener">
         I am Anchor Tag!
       </Button>,
     );
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap
index d4746dfac47..b26696c5e39 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Button /> should render button as anchor tag 1`] = `"<div id="root"><a href="https://youtu.be/iPaBUhIsslA" target="_blank" rel="noreferrer noopener" type="button" data-blade-component="button" role="link" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctKBsz"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  jPBClF"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div data-blade-component="base-box" class="BaseBox-bmPWx gQJHef"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M15.875 14.375C15.3227 14.375 14.875 14.8227 14.875 15.375C14.875 15.9273 15.3227 16.375 15.875 16.375H18.875C19.4273 16.375 19.875 15.9273 19.875 15.375C19.875 14.8227 19.4273 14.375 18.875 14.375H15.875Z" fill="hsla(0, 0%, 100%, 1)" data-blade-component="svg-path"></path><path d="M10.375 15.375C10.375 14.8227 10.8227 14.375 11.375 14.375H12.5C13.0523 14.375 13.5 14.8227 13.5 15.375C13.5 15.9273 13.0523 16.375 12.5 16.375H11.375C10.8227 16.375 10.375 15.9273 10.375 15.375Z" fill="hsla(0, 0%, 100%, 1)" data-blade-component="svg-path"></path><path d="M1.75 6C1.75 5.0335 2.5335 4.25 3.5 4.25H21.5C22.4665 4.25 23.25 5.0335 23.25 6V18C23.25 18.9665 22.4665 19.75 21.5 19.75H3.5C2.5335 19.75 1.75 18.9665 1.75 18V6ZM3.75 8.375V6.25H21.25V8.375H3.75ZM21.25 10.375V17.75H3.75V10.375H21.25Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Pay Now</div></div></div></a></div>"`;
+exports[`<Button /> should render button as anchor tag 1`] = `"<div id="root"><a href="https://youtu.be/iPaBUhIsslA" target="_blank" type="button" data-blade-component="button" role="link" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctKBsz"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  jPBClF"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div data-blade-component="base-box" class="BaseBox-bmPWx gQJHef"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M15.875 14.375C15.3227 14.375 14.875 14.8227 14.875 15.375C14.875 15.9273 15.3227 16.375 15.875 16.375H18.875C19.4273 16.375 19.875 15.9273 19.875 15.375C19.875 14.8227 19.4273 14.375 18.875 14.375H15.875Z" fill="hsla(0, 0%, 100%, 1)" data-blade-component="svg-path"></path><path d="M10.375 15.375C10.375 14.8227 10.8227 14.375 11.375 14.375H12.5C13.0523 14.375 13.5 14.8227 13.5 15.375C13.5 15.9273 13.0523 16.375 12.5 16.375H11.375C10.8227 16.375 10.375 15.9273 10.375 15.375Z" fill="hsla(0, 0%, 100%, 1)" data-blade-component="svg-path"></path><path d="M1.75 6C1.75 5.0335 2.5335 4.25 3.5 4.25H21.5C22.4665 4.25 23.25 5.0335 23.25 6V18C23.25 18.9665 22.4665 19.75 21.5 19.75H3.5C2.5335 19.75 1.75 18.9665 1.75 18V6ZM3.75 8.375V6.25H21.25V8.375H3.75ZM21.25 10.375V17.75H3.75V10.375H21.25Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Pay Now</div></div></div></a></div>"`;
 
 exports[`<Button /> should render button as anchor tag 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -143,7 +143,6 @@ exports[`<Button /> should render button as anchor tag 2`] = `
     class="c0"
     data-blade-component="button"
     href="https://youtu.be/iPaBUhIsslA"
-    rel="noreferrer noopener"
     role="link"
     target="_blank"
     type="button"