mirror of
https://github.com/grafana/grafana.git
synced 2024-12-24 08:00:08 -06:00
UI/Button: Remove deprecated "link" variant (#49843)
This commit is contained in:
parent
bfbe856319
commit
0012d2d81f
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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)}
|
||||
<Icon name="pen" />
|
||||
</LinkButton>
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user