fix: story for LinkButton, add temp rel prop to ButtonProps

XLNT · Jul 23, 2020 · 8398f2c · 8398f2c
1 parent c65cc9a
commit 8398f2c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 deletions.
diff --git 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
@@ -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>
   );