GrafanaUI: Fix iconPlacement prop not being respected in LinkButton (#113708)

fix: iconPlacement now respected in LinkButton. Added tests.

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(
+      <LinkButton icon="cloud" iconPlacement="right" href="https://grafana.com">
+        Click me
+      </LinkButton>
+    );
+
+    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(
+      <LinkButton icon="cloud" iconPlacement="left" href="https://grafana.com">
+        Click me
+      </LinkButton>
+    );
+
+    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);
+  });
+});

packages/grafana-ui/src/components/Button/Button.tsx

@@ -142,6 +142,7 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       size = 'md',
       fill = 'solid',
       icon,
+      iconPlacement = 'left',
       fullWidth,
       children,
       className,
@@ -174,6 +175,8 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       className
     );
 
+    const iconComponent = icon && <IconRenderer icon={icon} size={size} className={styles.icon} />;
+
     // When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632
     const button = (
       <a
@@ -184,8 +187,9 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
         ref={tooltip ? undefined : ref}
         aria-label={ariaLabel ?? (!children && typeof tooltip === 'string' ? tooltip : undefined)}
       >
-        <IconRenderer icon={icon} size={size} className={styles.icon} />
+        {iconPlacement === 'left' && iconComponent}
         {children && <span className={styles.content}>{children}</span>}
+        {iconPlacement === 'right' && iconComponent}
       </a>
     );