diff --git a/packages/grafana-ui/src/components/Button/Button.test.tsx b/packages/grafana-ui/src/components/Button/Button.test.tsx index 52589d67196..b78b9aafe5d 100644 --- a/packages/grafana-ui/src/components/Button/Button.test.tsx +++ b/packages/grafana-ui/src/components/Button/Button.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { Button } from './Button'; +import { Button, LinkButton } from './Button'; const setup = (jsx: JSX.Element) => { return { @@ -64,3 +64,37 @@ describe('Button', () => { expect(screen.getByRole('button', { name: 'Aria label' })).toBeInTheDocument(); }); }); + +describe('LinkButton', () => { + it('should place the icon on the right when iconPlacement is "right"', () => { + setup( + + Click me + + ); + + const link = screen.getByRole('link'); + const icon = screen.getByTitle(''); + const textSpan = link.querySelector('span'); + + // Assert that the text span comes before the icon in the DOM + expect(link.childNodes[0]).toBe(textSpan); + expect(link.childNodes[1]).toBe(icon); + }); + + it('should place the icon on the left when iconPlacement is "left"', () => { + setup( + + Click me + + ); + + const link = screen.getByRole('link'); + const icon = screen.getByTitle(''); + const textSpan = link.querySelector('span'); + + // Assert that the icon comes before the text span in the DOM + expect(link.childNodes[0]).toBe(icon); + expect(link.childNodes[1]).toBe(textSpan); + }); +}); diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index 9e1d1c4a1a9..d8e6e54d3fa 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -142,6 +142,7 @@ export const LinkButton = React.forwardRef( size = 'md', fill = 'solid', icon, + iconPlacement = 'left', fullWidth, children, className, @@ -174,6 +175,8 @@ export const LinkButton = React.forwardRef( className ); + const iconComponent = icon && ; + // When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632 const button = ( ( ref={tooltip ? undefined : ref} aria-label={ariaLabel ?? (!children && typeof tooltip === 'string' ? tooltip : undefined)} > - + {iconPlacement === 'left' && iconComponent} {children && {children}} + {iconPlacement === 'right' && iconComponent} );