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>

public/app/features/teams/TeamGroupSync.tsx

@@ -2,13 +2,14 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
-import { LegacyForms, Tooltip, Icon } from '@grafana/ui';
+import { LegacyForms, Tooltip, Icon, Button } from '@grafana/ui';
 const { Input } = LegacyForms;
 
 import { TeamGroup } from '../../types';
 import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions';
 import { getTeamGroups } from './state/selectors';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 
 export interface Props {
   groups: TeamGroup[];
@@ -65,9 +66,9 @@ export class TeamGroupSync extends PureComponent<Props, State> {
       <tr key={group.groupId}>
         <td>{group.groupId}</td>
         <td style={{ width: '1%' }}>
-          <a className="btn btn-danger btn-small" onClick={() => this.onRemoveGroup(group)}>
-            <Icon name="times" style={{ marginBottom: 0 }} />
-          </a>
+          <Button size="sm" variant="destructive" onClick={() => this.onRemoveGroup(group)}>
+            <Icon name="times" />
+          </Button>
         </td>
       </tr>
     );
@@ -86,17 +87,15 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           </Tooltip>
           <div className="page-action-bar__spacer" />
           {groups.length > 0 && (
-            <button className="btn btn-primary pull-right" onClick={this.onToggleAdding}>
+            <Button className="pull-right" onClick={this.onToggleAdding}>
               <Icon name="plus" /> Add group
-            </button>
+            </Button>
           )}
         </div>
 
         <SlideDown in={isAdding}>
           <div className="cta-form">
-            <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
-              <Icon name="times" />
-            </button>
+            <CloseButton onClick={this.onToggleAdding} />
             <h5>Add External Group</h5>
             <form className="gf-form-inline" onSubmit={this.onAddGroup}>
               <div className="gf-form">
@@ -110,9 +109,9 @@ export class TeamGroupSync extends PureComponent<Props, State> {
               </div>
 
               <div className="gf-form">
-                <button className="btn btn-primary gf-form-btn" type="submit" disabled={!this.isNewGroupValid()}>
+                <Button type="submit" disabled={!this.isNewGroupValid()}>
                   Add group
-                </button>
+                </Button>
               </div>
             </form>
           </div>

public/app/features/teams/TeamMembers.tsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import { Icon } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
@@ -13,6 +12,8 @@ import { config } from 'app/core/config';
 import { contextSrv, User as SignedInUser } from 'app/core/services/context_srv';
 import TeamMemberRow from './TeamMemberRow';
 import { setSearchMemberQuery } from './state/reducers';
+import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
+import { Button } from '@grafana/ui';
 
 export interface Props {
   members: TeamMember[];
@@ -79,28 +80,21 @@ export class TeamMembers extends PureComponent<Props, State> {
           </div>
 
           <div className="page-action-bar__spacer" />
-
-          <button
-            className="btn btn-primary pull-right"
-            onClick={this.onToggleAdding}
-            disabled={isAdding || !isTeamAdmin}
-          >
+          <Button className="pull-right" onClick={this.onToggleAdding} disabled={isAdding || !isTeamAdmin}>
             Add member
-          </button>
+          </Button>
         </div>
 
         <SlideDown in={isAdding}>
           <div className="cta-form">
-            <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
-              <Icon name="times" />
-            </button>
+            <CloseButton onClick={this.onToggleAdding} />
             <h5>Add team member</h5>
             <div className="gf-form-inline">
               <UserPicker onSelected={this.onUserSelected} className="min-width-30" />
               {this.state.newTeamMember && (
-                <button className="btn btn-primary gf-form-btn" type="submit" onClick={this.onAddUserToTeam}>
+                <Button type="submit" onClick={this.onAddUserToTeam}>
                   Add to team
-                </button>
+                </Button>
               )}
             </div>
           </div>

public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap

@@ -29,14 +29,9 @@ exports[`Render should render component 1`] = `
     <div
       className="cta-form"
     >
-      <button
-        className="cta-form__close btn btn-transparent"
+      <CloseButton
         onClick={[Function]}
-      >
-        <Icon
-          name="times"
-        />
-      </button>
+      />
       <h5>
         Add External Group
       </h5>
@@ -58,13 +53,12 @@ exports[`Render should render component 1`] = `
         <div
           className="gf-form"
         >
-          <button
-            className="btn btn-primary gf-form-btn"
+          <Button
             disabled={true}
             type="submit"
           >
             Add group
-          </button>
+          </Button>
         </div>
       </form>
     </div>
@@ -104,15 +98,15 @@ exports[`Render should render groups table 1`] = `
     <div
       className="page-action-bar__spacer"
     />
-    <button
-      className="btn btn-primary pull-right"
+    <Button
+      className="pull-right"
       onClick={[Function]}
     >
       <Icon
         name="plus"
       />
        Add group
-    </button>
+    </Button>
   </div>
   <SlideDown
     in={false}
@@ -120,14 +114,9 @@ exports[`Render should render groups table 1`] = `
     <div
       className="cta-form"
     >
-      <button
-        className="cta-form__close btn btn-transparent"
+      <CloseButton
         onClick={[Function]}
-      >
-        <Icon
-          name="times"
-        />
-      </button>
+      />
       <h5>
         Add External Group
       </h5>
@@ -149,13 +138,12 @@ exports[`Render should render groups table 1`] = `
         <div
           className="gf-form"
         >
-          <button
-            className="btn btn-primary gf-form-btn"
+          <Button
             disabled={true}
             type="submit"
           >
             Add group
-          </button>
+          </Button>
         </div>
       </form>
     </div>
@@ -194,19 +182,15 @@ exports[`Render should render groups table 1`] = `
               }
             }
           >
-            <a
-              className="btn btn-danger btn-small"
+            <Button
               onClick={[Function]}
+              size="sm"
+              variant="destructive"
             >
               <Icon
                 name="times"
-                style={
-                  Object {
-                    "marginBottom": 0,
-                  }
-                }
               />
-            </a>
+            </Button>
           </td>
         </tr>
         <tr
@@ -222,19 +206,15 @@ exports[`Render should render groups table 1`] = `
               }
             }
           >
-            <a
-              className="btn btn-danger btn-small"
+            <Button
               onClick={[Function]}
+              size="sm"
+              variant="destructive"
             >
               <Icon
                 name="times"
-                style={
-                  Object {
-                    "marginBottom": 0,
-                  }
-                }
               />
-            </a>
+            </Button>
           </td>
         </tr>
         <tr
@@ -250,19 +230,15 @@ exports[`Render should render groups table 1`] = `
               }
             }
           >
-            <a
-              className="btn btn-danger btn-small"
+            <Button
               onClick={[Function]}
+              size="sm"
+              variant="destructive"
             >
               <Icon
                 name="times"
-                style={
-                  Object {
-                    "marginBottom": 0,
-                  }
-                }
               />
-            </a>
+            </Button>
           </td>
         </tr>
       </tbody>

public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap

@@ -17,13 +17,13 @@ exports[`Render should render component 1`] = `
     <div
       className="page-action-bar__spacer"
     />
-    <button
-      className="btn btn-primary pull-right"
+    <Button
+      className="pull-right"
       disabled={false}
       onClick={[Function]}
     >
       Add member
-    </button>
+    </Button>
   </div>
   <SlideDown
     in={false}
@@ -31,14 +31,9 @@ exports[`Render should render component 1`] = `
     <div
       className="cta-form"
     >
-      <button
-        className="cta-form__close btn btn-transparent"
+      <CloseButton
         onClick={[Function]}
-      >
-        <Icon
-          name="times"
-        />
-      </button>
+      />
       <h5>
         Add team member
       </h5>
@@ -109,13 +104,13 @@ exports[`Render should render team members 1`] = `
     <div
       className="page-action-bar__spacer"
     />
-    <button
-      className="btn btn-primary pull-right"
+    <Button
+      className="pull-right"
       disabled={false}
       onClick={[Function]}
     >
       Add member
-    </button>
+    </Button>
   </div>
   <SlideDown
     in={false}
@@ -123,14 +118,9 @@ exports[`Render should render team members 1`] = `
     <div
       className="cta-form"
     >
-      <button
-        className="cta-form__close btn btn-transparent"
+      <CloseButton
         onClick={[Function]}
-      >
-        <Icon
-          name="times"
-        />
-      </button>
+      />
       <h5>
         Add team member
       </h5>