diff --git a/.changeset/tidy-hounds-change.md b/.changeset/tidy-hounds-change.md new file mode 100644 index 00000000000..66c310e5a84 --- /dev/null +++ b/.changeset/tidy-hounds-change.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fix LinkButton types and stories diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index eb214607125..74c520b8195 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -1,4 +1,3 @@ -import type {ComponentPropsWithRef} from 'react' import React, {forwardRef} from 'react' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import Box from '../Box' @@ -320,6 +319,4 @@ const ButtonBase = forwardRef( }, ) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps> -export type ButtonBaseProps = ComponentPropsWithRef - export {ButtonBase} diff --git a/packages/react/src/Button/LinkButton.features.stories.tsx b/packages/react/src/Button/LinkButton.features.stories.tsx index 97c2c69fcac..85a347a50b7 100644 --- a/packages/react/src/Button/LinkButton.features.stories.tsx +++ b/packages/react/src/Button/LinkButton.features.stories.tsx @@ -1,69 +1,69 @@ import {EyeIcon, ChevronRightIcon, HeartIcon, DownloadIcon} from '@primer/octicons-react' import React, {forwardRef} from 'react' -import {Button} from '.' +import {LinkButton} from '.' export default { title: 'Components/LinkButton/Features', } export const Primary = () => ( - + ) export const Danger = () => ( - + ) export const Invisible = () => ( - + ) export const LeadingVisual = () => ( - + ) export const TrailingVisual = () => ( - + ) export const TrailingAction = () => ( - + ) export const Block = () => ( - + ) export const Small = () => ( - + ) export const Medium = () => ( - + ) export const Large = () => ( - + ) type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} @@ -78,27 +78,27 @@ const ReactRouterLikeLink = forwardRef ( - + ) -export const Loading = () => +export const Loading = () => Default export const LoadingCustomAnnouncement = () => ( - + ) export const LoadingWithLeadingVisual = () => ( - + ) export const LoadingWithTrailingVisual = () => ( - + ) diff --git a/packages/react/src/Button/LinkButton.stories.tsx b/packages/react/src/Button/LinkButton.stories.tsx index 0a4c6828a3d..e8cd8390b03 100644 --- a/packages/react/src/Button/LinkButton.stories.tsx +++ b/packages/react/src/Button/LinkButton.stories.tsx @@ -1,18 +1,14 @@ import React from 'react' import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon, ChevronRightIcon} from '@primer/octicons-react' import type {Meta, StoryFn} from '@storybook/react' -import {Button} from '.' +import {LinkButton} from '.' import {OcticonArgType} from '../utils/story-helpers' export default { title: 'Components/LinkButton', -} as Meta +} as Meta -export const Playground: StoryFn = args => ( - -) +export const Playground: StoryFn = args => Default Playground.argTypes = { size: { control: { @@ -54,12 +50,8 @@ Playground.args = { alignContent: 'center', trailingIcon: null, leadingIcon: null, - href: '/', + href: '#', loading: false, } -export const Default = () => ( - -) +export const Default = () => Default diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx index c3872835c88..def2278e734 100644 --- a/packages/react/src/Button/LinkButton.tsx +++ b/packages/react/src/Button/LinkButton.tsx @@ -1,22 +1,15 @@ import React, {forwardRef} from 'react' -import type {LinkButtonProps} from './types' -import type {ButtonBaseProps} from './ButtonBase' +import type {LinkButtonProps, ButtonProps} from './types' import {ButtonBase} from './ButtonBase' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import {defaultSxProp} from '../utils/defaultSxProp' -type MyProps = LinkButtonProps & ButtonBaseProps +type MyProps = LinkButtonProps & ButtonProps const LinkButton = forwardRef( ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => { return ( - + {children} ) diff --git a/packages/react/src/Button/index.ts b/packages/react/src/Button/index.ts index 7545aa6e576..d831b306ce5 100644 --- a/packages/react/src/Button/index.ts +++ b/packages/react/src/Button/index.ts @@ -1,7 +1,6 @@ import {IconButton} from './IconButton' import {LinkButton} from './LinkButton' -export type {ButtonProps, IconButtonProps} from './types' +export type {ButtonProps, IconButtonProps, ButtonBaseProps} from './types' export {IconButton, LinkButton} export {ButtonComponent as Button} from './Button' export {ButtonBase} from './ButtonBase' -export type {ButtonBaseProps} from './ButtonBase'