Buttons: replace usage of .btn classnames (#33226)

* refactor(loginpage): migrate custom button styles to use Button component

* refactor(certificationkey): prefer grafana-ui form elements over html elements and classnames

* refactor(axisselector): prefer grafana-ui Button component over html button element

* refactor(input-datasource): replace use of btn class with grafana-ui components

* chore(grafana-ui): delete deprecated ToggleButtonGroup component

* refactor: replace btn and cta-form__close class usage with IconButton

* chore(closebutton): post master merge use v2 theme

* refactor(permissionlist): remove usage of .btn classname

* Wip

* docs(styling): update styling and theme docs import paths

* refactor(alerting): remote btn classnames from TestRuleResult

* refactor(apikeys): prefer grafana-ui Button components over btn classNames

* refactor(folders): prefer grafana-ui Button components over btn classNames

* refactor(teams): prefer grafana-ui Button components over btn classNames

* refactor(datasources): prefer grafana-ui Button components over btn classNames

* refactor: prefer grafana-ui Button components over btn classNames

* Minor style tweak to service buttons

* test: update snapshots related to button changes

* chore(input-datasource): remove unused import declaration

* refactor(loginservicebuttons): rename theme.palette to theme.colors

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Jack Westbrook
2021-04-23 10:06:42 +02:00
committed by GitHub
parent 6034bf37c6
commit c809d63065
36 changed files with 335 additions and 494 deletions

View File

@@ -1,5 +1,5 @@
import React, { FC } from 'react';
import { Button } from '@grafana/ui';
import { FilterInput } from '../../core/components/FilterInput/FilterInput';
interface Props {
@@ -17,9 +17,9 @@ export const ApiKeysActionBar: FC<Props> = ({ searchQuery, disabled, onAddClick,
</div>
<div className="page-action-bar__spacer" />
<button className="btn btn-primary pull-right" onClick={onAddClick} disabled={disabled}>
<Button className="pull-right" onClick={onAddClick} disabled={disabled}>
Add API key
</button>
</Button>
</div>
);
};

View File

@@ -1,8 +1,9 @@
import React, { ChangeEvent, FC, FormEvent, useEffect, useState } from 'react';
import { EventsWithValidation, Icon, InlineFormLabel, LegacyForms, ValidationEvents } from '@grafana/ui';
import { EventsWithValidation, InlineFormLabel, LegacyForms, ValidationEvents, Button } from '@grafana/ui';
import { NewApiKey, OrgRole } from '../../types';
import { rangeUtil } from '@grafana/data';
import { SlideDown } from '../../core/components/Animations/SlideDown';
import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
const { Input } = LegacyForms;
@@ -65,9 +66,7 @@ export const ApiKeysForm: FC<Props> = ({ show, onClose, onKeyAdded }) => {
return (
<SlideDown in={show}>
<div className="gf-form-inline cta-form">
<button className="cta-form__close btn btn-transparent" onClick={onClose}>
<Icon name="times" />
</button>
<CloseButton onClick={onClose} />
<form className="gf-form-group" onSubmit={onSubmit}>
<h5>Add API Key</h5>
<div className="gf-form-inline">
@@ -101,7 +100,7 @@ export const ApiKeysForm: FC<Props> = ({ show, onClose, onKeyAdded }) => {
/>
</div>
<div className="gf-form">
<button className="btn gf-form-btn btn-primary">Add</button>
<Button>Add</Button>
</div>
</div>
</form>