diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx index a9055562a74..ca37314fc5d 100644 --- a/packages/grafana-ui/src/components/Button/Button.story.tsx +++ b/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 ( - ); diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index 48a76d6ca86..0cb13a99ea6 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/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; - opacity: 0.65; - box-shadow: none; + ${disabledStyles}; } `, getFocusStyle(theme), @@ -157,7 +161,7 @@ Button.displayName = 'Button'; type ButtonLinkProps = CommonProps & ButtonHTMLAttributes & AnchorHTMLAttributes; export const LinkButton = React.forwardRef( - ({ 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( hasIcon: icon !== undefined, }); + const linkButtonStyles = + disabled && + cx( + disabledStyles, + css` + pointer-events: none; + ` + ); + return ( - + {children} diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts index 03d19297f9f..037ad2c5e2f 100644 --- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts +++ b/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};