Grafana UI: Apply disabled styles to LinkButton (#25693)

* Grafana UI: Apply disabled styles to LinkButton

* Grafana UI: Add disabled knob

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select, text } from '@storybook/addon-knobs';
+import { select, text, boolean } from '@storybook/addon-knobs';
 import { Button, ButtonVariant } from './Button';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { getIconKnob } from '../../utils/storybook/knobs';
@@ -24,11 +24,11 @@ const sizes = ['sm', 'md', 'lg'];
 export const simple = () => {
   const variant = select('Variant', variants, 'primary');
   const size = select('Size', sizes, 'md');
-  const buttonText = text('text', 'Button');
+  const buttonText = text('Text', 'Button');
+  const disabled = boolean('Disabled', false);
   const icon = getIconKnob();
-
   return (
-    <Button variant={variant as ButtonVariant} size={size as ComponentSize} icon={icon}>
+    <Button variant={variant as ButtonVariant} size={size as ComponentSize} icon={icon} disabled={disabled}>
       {buttonText}
     </Button>
   );

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

@@ -72,6 +72,12 @@ export interface StyleProps {
   hasText: boolean;
 }
 
+const disabledStyles = css`
+  cursor: not-allowed;
+  opacity: 0.65;
+  box-shadow: none;
+`;
+
 export const getButtonStyles = stylesFactory((props: StyleProps) => {
   const { theme, variant } = props;
   const { padding, fontSize, height } = getPropertiesForButtonSize(props);
@@ -98,9 +104,7 @@ export const getButtonStyles = stylesFactory((props: StyleProps) => {
 
         &[disabled],
         &:disabled {
-          cursor: not-allowed;
+          ${disabledStyles};
-          opacity: 0.65;
-          box-shadow: none;
         }
       `,
       getFocusStyle(theme),
@@ -157,7 +161,7 @@ Button.displayName = 'Button';
 
 type ButtonLinkProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;
 export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
-  ({ variant, icon, children, className, ...otherProps }, ref) => {
+  ({ variant, icon, children, className, disabled, ...otherProps }, ref) => {
     const theme = useContext(ThemeContext);
     const styles = getButtonStyles({
       theme,
@@ -167,8 +171,22 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       hasIcon: icon !== undefined,
     });
 
+    const linkButtonStyles =
+      disabled &&
+      cx(
+        disabledStyles,
+        css`
+          pointer-events: none;
+        `
+      );
+
     return (
-      <a className={cx(styles.button, className)} {...otherProps} ref={ref}>
+      <a
+        className={cx(styles.button, linkButtonStyles, className)}
+        {...otherProps}
+        ref={ref}
+        tabIndex={disabled ? -1 : 0}
+      >
         <ButtonContent icon={icon} size={otherProps.size}>
           {children}
         </ButtonContent>

packages/grafana-ui/src/components/Logs/getLogRowStyles.ts

@@ -138,7 +138,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
       white-space: pre-wrap;
       word-break: break-all;
     `,
-    //Log details sepcific CSS
+    //Log details specific CSS
     logDetailsContainer: css`
       label: logs-row-details-table;
       border: 1px solid ${borderColor};