UI/Button: Remove deprecated "link" variant (#49843)

This commit is contained in:
kay delaney 2022-05-31 09:40:03 +01:00 committed by GitHub
parent bfbe856319
commit 0012d2d81f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 12 additions and 31 deletions

View File

@ -10,7 +10,7 @@ import { ComponentSize } from '../../types/size';
import { getPropertiesForButtonSize } from '../Forms/commonStyles';
import { Icon } from '../Icon/Icon';
export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link';
export type ButtonVariant = 'primary' | 'secondary' | 'destructive';
export const allButtonVariants: ButtonVariant[] = ['primary', 'secondary', 'destructive'];
export type ButtonFill = 'solid' | 'outline' | 'text';
export const allButtonFills: ButtonFill[] = ['solid', 'outline', 'text'];
@ -53,11 +53,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
iconOnly: !children,
});
deprecatedPropWarning(
variant === 'link',
`${Button.displayName}: Prop variant="link" is deprecated. Please use fill="text".`
);
return (
<button className={cx(styles.button, className)} type={type} {...otherProps} ref={ref}>
{icon && <Icon name={icon} size={size} className={styles.icon} />}
@ -108,11 +103,6 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
className
);
deprecatedPropWarning(
variant === 'link',
`${LinkButton.displayName}: Prop variant="link" is deprecated. Please use fill="text".`
);
return (
<a className={linkButtonStyles} {...otherProps} tabIndex={disabled ? -1 : 0} ref={ref}>
{icon && <Icon name={icon} size={size} className={styles.icon} />}
@ -256,7 +246,7 @@ function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant,
transition: 'none',
};
if (fill === 'text' || variant === 'link') {
if (fill === 'text') {
return {
...disabledStyles,
background: 'transparent',
@ -280,24 +270,15 @@ function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant,
}
export function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill) {
const buttonVariant = variant === 'link' ? 'primary' : variant;
const buttonFill = variant === 'link' ? 'text' : fill;
switch (buttonVariant) {
switch (variant) {
case 'secondary':
return getButtonVariantStyles(theme, theme.colors.secondary, buttonFill);
return getButtonVariantStyles(theme, theme.colors.secondary, fill);
case 'destructive':
return getButtonVariantStyles(theme, theme.colors.error, buttonFill);
return getButtonVariantStyles(theme, theme.colors.error, fill);
case 'primary':
default:
return getButtonVariantStyles(theme, theme.colors.primary, buttonFill);
}
}
function deprecatedPropWarning(test: boolean, message: string) {
if (process.env.NODE_ENV === 'development' && test) {
console.warn(`@grafana/ui ${message}`);
return getButtonVariantStyles(theme, theme.colors.primary, fill);
}
}

View File

@ -72,7 +72,7 @@ export class InputQueryEditor extends PureComponent<Props, State> {
{query.data ? (
<div style={{ alignSelf: 'center' }}>{describeDataFrame(query.data)}</div>
) : (
<LinkButton variant="link" href={`datasources/edit/${uid}/`}>
<LinkButton fill="text" href={`datasources/edit/${uid}/`}>
{name}: {describeDataFrame(datasource.data)} &nbsp;&nbsp;
<Icon name="pen" />
</LinkButton>

View File

@ -47,7 +47,7 @@ export function FolderFilter({ onChange: propsOnChange, maxMenuHeight }: FolderF
<Button
size="xs"
icon="trash-alt"
variant="link"
fill="text"
className={styles.clear}
onClick={() => onChange([])}
aria-label="Clear folders"

View File

@ -55,7 +55,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
<Button
size="xs"
icon="trash-alt"
variant="link"
fill="text"
className={styles.clear}
onClick={() => onChange([])}
aria-label="Clear types"

View File

@ -73,7 +73,7 @@ export function ServiceAccountProfile({
<>
<div style={{ marginBottom: '10px' }}>
<a href="org/serviceaccounts" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<Button variant="link" icon="backward" />
<Button fill="text" icon="backward" />
</a>
<h1
className="page-heading"

View File

@ -20,7 +20,7 @@ export const MappingsConfiguration = (props: Props): JSX.Element => {
<h3 className="page-heading">Label mappings</h3>
{!props.showHelp && (
<p>
<Button variant="link" onClick={props.onRestoreHelp}>
<Button fill="text" onClick={props.onRestoreHelp}>
Learn how label mappings work
</Button>
</p>

View File

@ -75,7 +75,7 @@ export function ViewControls<Config extends Record<string, any>>(props: Props<Co
</VerticalGroup>
{allowConfiguration && (
<Button size={'xs'} variant={'link'} onClick={() => setShowConfig((showConfig) => !showConfig)}>
<Button size={'xs'} fill="text" onClick={() => setShowConfig((showConfig) => !showConfig)}>
{showConfig ? 'Hide config' : 'Show config'}
</Button>
)}