Skip to content

Commit

Permalink
Add isExternal to LinkButton
Browse files Browse the repository at this point in the history
  • Loading branch information
victortrinh2 committed Dec 20, 2024
1 parent 13e2086 commit 16ca6cc
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 18 deletions.
6 changes: 6 additions & 0 deletions .changeset/calm-donkeys-deny.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@hopper-ui/components": patch
"docs": patch
---

Add isExternal prop to LinkButton to simplify opening a LinkButton to an external tab
2 changes: 1 addition & 1 deletion apps/docs/content/components/buttons/LinkButton.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ A link button can be disabled.
<Example src="buttons/docs/linkButton/state" />

### External
Add `rel="noopener noreferrer"` and `target="_blank"` attributes to render and external link button.
Add isExternal attributes to render an external link button.

<Example src="buttons/docs/linkButton/external" />

Expand Down
30 changes: 15 additions & 15 deletions apps/docs/examples/Preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -491,15 +491,6 @@ export const Previews: Record<string, Preview> = {
"checkbox/docs/checkboxgroup/itemsDescription": {
component: lazy(() => import("@/../../packages/components/src/checkbox/docs/checkboxgroup/itemsDescription.tsx"))
},
"ErrorMessage/docs/preview": {
component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/preview.tsx"))
},
"ErrorMessage/docs/noicon": {
component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/noicon.tsx"))
},
"ErrorMessage/docs/multipleerrors": {
component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/multipleerrors.tsx"))
},
"Form/docs/preview": {
component: lazy(() => import("@/../../packages/components/src/Form/docs/preview.tsx"))
},
Expand All @@ -521,12 +512,6 @@ export const Previews: Record<string, Preview> = {
"Form/docs/fluid": {
component: lazy(() => import("@/../../packages/components/src/Form/docs/fluid.tsx"))
},
"HelperMessage/docs/preview": {
component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/preview.tsx"))
},
"HelperMessage/docs/noicon": {
component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/noicon.tsx"))
},
"inputs/docs/numberField/preview": {
component: lazy(() => import("@/../../packages/components/src/inputs/docs/numberField/preview.tsx"))
},
Expand Down Expand Up @@ -761,6 +746,21 @@ export const Previews: Record<string, Preview> = {
"IconList/docs/size": {
component: lazy(() => import("@/../../packages/components/src/IconList/docs/size.tsx"))
},
"ErrorMessage/docs/preview": {
component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/preview.tsx"))
},
"ErrorMessage/docs/noicon": {
component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/noicon.tsx"))
},
"ErrorMessage/docs/multipleerrors": {
component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/multipleerrors.tsx"))
},
"HelperMessage/docs/preview": {
component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/preview.tsx"))
},
"HelperMessage/docs/noicon": {
component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/noicon.tsx"))
},
"layout/docs/flex/preview": {
component: lazy(() => import("@/../../packages/components/src/layout/docs/flex/preview.tsx"))
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { NewTabIcon } from "@hopper-ui/icons";

export default function Example() {
return (
<LinkButton href="https://www.google.com" target="_blank" rel="noopener noreferrer" >
<LinkButton href="https://www.google.com" isExternal>
<Text>Learn more</Text>
<NewTabIcon />
</LinkButton>
Expand Down
10 changes: 10 additions & 0 deletions packages/components/src/buttons/src/LinkButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ export interface LinkButtonProps extends StyledComponentProps<RACLinkProps> {
* Whether or not the button takes up the width of its container.
*/
isFluid?: ResponsiveProp<boolean>;

/**
* Whether the button should open in a new tab.
*/
isExternal?: boolean;
}

function LinkButton(props: LinkButtonProps, ref: ForwardedRef<HTMLAnchorElement>) {
Expand All @@ -62,6 +67,9 @@ function LinkButton(props: LinkButtonProps, ref: ForwardedRef<HTMLAnchorElement>
className,
children: childrenProp,
size: sizeProp,
isExternal,
rel,
target,
isFluid: isFluidProp,
variant = "primary",
style: styleProp,
Expand Down Expand Up @@ -134,6 +142,8 @@ function LinkButton(props: LinkButtonProps, ref: ForwardedRef<HTMLAnchorElement>
>
<RACLink
ref={ref}
rel={rel ?? (isExternal ? "noopener noreferrer" : undefined)}
target={target ?? (isExternal ? "_blank" : undefined)}
className={classNames}
style={style}
slot={props.slot || undefined}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const meta = {
component: LinkButton,
args: {
children: "Click me!",
target: "_blank"
isExternal: true
}
} satisfies Meta<typeof LinkButton>;

Expand Down

0 comments on commit 16ca6cc

Please sign in to comment.