opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-29 17:02:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Grafana UI: Apply disabled styles to LinkButton

* Grafana UI: Add disabled knob
This commit is contained in:
Alex Khomenko
2020-06-18 16:22:57 +03:00
committed by GitHub
parent e5d21461a0
commit 47a2ee5b24
3 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -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<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>