From 8398f2cee65ce244af65bf580ae5537a28ab8580 Mon Sep 17 00:00:00 2001
From: "Matt Condon (shrugs)" <mattgcondon@gmail.com>
Date: Thu, 23 Jul 2020 16:56:18 -0400
Subject: [PATCH] fix: story for LinkButton, add temp rel prop to ButtonProps

---
 src/components/Button/Button.stories.tsx | 15 ++++++++++
 src/components/Button/Button.tsx         | 35 ++++++++++++++++--------
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 6a39753..324a488 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -118,6 +118,7 @@ export const Secondary = () => (
     </div>
   </div>
 );
+
 export const Tertiary = () => (
   <div className={cn('space-y-4')}>
     <H3>Default / Idle</H3>
@@ -137,3 +138,17 @@ export const Tertiary = () => (
     </Button>
   </div>
 );
+
+export const LinkButton = () => (
+  <div className={cn('space-y-4')}>
+    <H3>Link Button</H3>
+    <Button
+      elementType="a"
+      target="_blank"
+      href="https://softspot.art"
+      rel="noopenner noreferrer nofollow"
+    >
+      Open Softspot in New Tab
+    </Button>
+  </div>
+);
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 5b04534..6b0ff54 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -16,6 +16,9 @@ interface ButtonProps extends AriaButtonProps, WithClassName {
   active?: boolean;
   icon?: boolean;
   danger?: boolean;
+  // TODO: remove when AriaButtonProps supports rel attribute
+  // https://github.com/adobe/react-spectrum/issues/833
+  rel?: string;
 }
 
 interface ButtonState {
@@ -150,18 +153,26 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(props
     <FocusRing autoFocus={props.autoFocus}>
       <ElementType
         ref={ref}
-        {...mergeProps(buttonProps, hoverProps, focusableProps, filterComponentProps(props), {
-          className: buttonStyles({
-            secondary: props.secondary,
-            tertiary: props.tertiary,
-            icon: props.icon,
-            danger: props.danger,
-            disabled: props.isDisabled,
-            pressed: isPressed,
-            focused: props.active || isFocused,
-            hovered: isHovered,
-          }),
-        })}
+        {...mergeProps(
+          buttonProps,
+          hoverProps,
+          focusableProps,
+          // TODO: remove when useButton supports rel passthrough
+          { rel: props.elementType === 'a' ? props.rel : undefined },
+          filterComponentProps(props),
+          {
+            className: buttonStyles({
+              secondary: props.secondary,
+              tertiary: props.tertiary,
+              icon: props.icon,
+              danger: props.danger,
+              disabled: props.isDisabled,
+              pressed: isPressed,
+              focused: props.active || isFocused,
+              hovered: isHovered,
+            }),
+          },
+        )}
       />
     </FocusRing>
   );