diff --git a/.changeset/wet-cups-juggle.md b/.changeset/wet-cups-juggle.md new file mode 100644 index 0000000000..5e1185f7df --- /dev/null +++ b/.changeset/wet-cups-juggle.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Removed link styles from LinkButton to avoid styling inconsistencies related to import order. diff --git a/packages/core-components/src/components/Link/Link.tsx b/packages/core-components/src/components/Link/Link.tsx index f968d7b098..f1d0f116a9 100644 --- a/packages/core-components/src/components/Link/Link.tsx +++ b/packages/core-components/src/components/Link/Link.tsx @@ -180,11 +180,11 @@ const getNodeText = (node: ReactNode): string => { }; /** - * Thin wrapper on top of material-ui's Link component, which... - * - Makes the Link use react-router - * - Captures Link clicks as analytics events. + * Unstyled link primitive which... + * - Uses react-router for internal links. + * - Captures link clicks as analytics events. */ -export const Link = forwardRef( +export const UnstyledLink = forwardRef( ({ onClick, noTrack, externalLinkIcon, ...props }, ref) => { const classes = useStyles(); const analytics = useAnalytics(); @@ -213,7 +213,7 @@ export const Link = forwardRef( return external ? ( // External links - ( , Opens in a new window - + ) : ( // Interact with React Router for internal links - + ); }, -) as (props: LinkProps) => JSX.Element; +); + +/** + * Thin wrapper combining UnstyledLink with material-ui's Link component. + */ +export const Link = forwardRef((props, ref) => { + return ; +}) as (props: LinkProps) => JSX.Element; diff --git a/packages/core-components/src/components/LinkButton/LinkButton.test.tsx b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx index 9334bffaf8..8df0922bd7 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.test.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx @@ -38,4 +38,12 @@ describe('', () => { }); expect(screen.getByText(testString)).toBeInTheDocument(); }); + + it('should not have MuiLink class names', async () => { + await renderInTestApp(Navigate!); + + const button = await screen.findByRole('button', { name: 'Navigate!' }); + expect(button).toHaveClass(/MuiButton/); + expect(button).not.toHaveClass(/MuiLink/); + }); }); diff --git a/packages/core-components/src/components/LinkButton/LinkButton.tsx b/packages/core-components/src/components/LinkButton/LinkButton.tsx index 820a438955..e10dc7c368 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.tsx @@ -18,7 +18,7 @@ import MaterialButton, { ButtonProps as MaterialButtonProps, } from '@material-ui/core/Button'; import { forwardRef } from 'react'; -import { Link, LinkProps } from '../Link'; +import { UnstyledLink, LinkProps } from '../Link/Link'; /** * Properties for {@link LinkButton} @@ -35,7 +35,7 @@ export type LinkButtonProps = MaterialButtonProps & * This wrapper is here to reset the color of the Link and make typescript happy. */ const LinkWrapper = forwardRef((props, ref) => ( - + )); /**