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>

packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx

@@ -5,6 +5,7 @@ import { PopoverContentProps } from '../Tooltip/Tooltip';
 import { Switch } from '../Forms/Legacy/Switch/Switch';
 import { css } from '@emotion/css';
 import { withTheme, useStyles } from '../../themes';
+import { Button } from '../Button';
 
 export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopoverContentProps {
   yaxis?: number;
@@ -70,18 +71,18 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
   }
 
   render() {
-    const leftButtonClass = this.state.yaxis === 1 ? 'btn-primary' : 'btn-inverse';
-    const rightButtonClass = this.state.yaxis === 2 ? 'btn-primary' : 'btn-inverse';
+    const leftButtonVariant = this.state.yaxis === 1 ? 'primary' : 'secondary';
+    const rightButtonVariant = this.state.yaxis === 2 ? 'primary' : 'secondary';
 
     return (
       <div className="p-b-1">
         <label className="small p-r-1">Y Axis:</label>
-        <button onClick={this.onToggleAxis} className={'btn btn-small ' + leftButtonClass}>
+        <Button onClick={this.onToggleAxis} size="sm" variant={leftButtonVariant}>
           Left
-        </button>
-        <button onClick={this.onToggleAxis} className={'btn btn-small ' + rightButtonClass}>
+        </Button>
+        <Button onClick={this.onToggleAxis} size="sm" variant={rightButtonVariant}>
           Right
-        </button>
+        </Button>
       </div>
     );
   }

packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx

@@ -1,4 +1,8 @@
 import React, { ChangeEvent, MouseEvent, FC } from 'react';
+import { Input } from '../Input/Input';
+import { Button } from '../Button';
+import { TextArea } from '../TextArea/TextArea';
+import { InlineField } from '../Forms/InlineField';
 
 interface Props {
   label: string;
@@ -6,35 +10,22 @@ interface Props {
   placeholder: string;
 
   onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
-  onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 
 export const CertificationKey: FC<Props> = ({ hasCert, label, onChange, onClick, placeholder }) => {
   return (
-    <div className="gf-form-inline">
-      <div className="gf-form gf-form--v-stretch">
-        <label className="gf-form-label width-7">{label}</label>
-      </div>
-      {!hasCert && (
-        <div className="gf-form gf-form--grow">
-          <textarea
-            rows={7}
-            className="gf-form-input gf-form-textarea"
-            onChange={onChange}
-            placeholder={placeholder}
-            required
-          />
-        </div>
+    <InlineField label={label} labelWidth={14}>
+      {hasCert ? (
+        <>
+          <Input type="text" disabled value="configured" width={24} />
+          <Button variant="secondary" onClick={onClick} style={{ marginLeft: 4 }}>
+            Reset
+          </Button>
+        </>
+      ) : (
+        <TextArea rows={7} onChange={onChange} placeholder={placeholder} required />
       )}
-
-      {hasCert && (
-        <div className="gf-form">
-          <input type="text" className="gf-form-input max-width-12" disabled value="configured" />
-          <a className="btn btn-secondary gf-form-btn" onClick={onClick}>
-            reset
-          </a>
-        </div>
-      )}
-    </div>
+    </InlineField>
   );
 };

packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx

@@ -13,7 +13,7 @@ export const TLSAuthSettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceCon
   const hasTLSClientKey = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientKey;
   const hasServerName = dataSourceConfig.jsonData && dataSourceConfig.jsonData.serverName;
 
-  const onResetClickFactory = (field: string) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+  const onResetClickFactory = (field: string) => (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     const newSecureJsonFields: KeyValue<boolean> = { ...dataSourceConfig.secureJsonFields };
     newSecureJsonFields[field] = false;

packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.internal.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup';
-import { UseState } from '../../utils/storybook/UseState';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
-export default {
-  title: 'Forms/Legacy/ToggleButtonGroup',
-  component: ToggleButtonGroup,
-  decorators: [withCenteredStory],
-};
-
-const options = [
-  { value: 'first', label: 'First' },
-  { value: 'second', label: 'Second' },
-  { value: 'third', label: 'Third' },
-];
-
-export const basic = () => {
-  return (
-    <UseState
-      initialState={{
-        value: 'first',
-      }}
-    >
-      {(value, updateValue) => {
-        return (
-          <ToggleButtonGroup label="Options">
-            {options.map((option, index) => {
-              return (
-                <ToggleButton
-                  key={`${option.value}-${index}`}
-                  value={option.value}
-                  onChange={(newValue) => {
-                    action('on change')(newValue);
-                    updateValue({ value: newValue });
-                  }}
-                  selected={value.value === option.value}
-                >
-                  {option.label}
-                </ToggleButton>
-              );
-            })}
-          </ToggleButtonGroup>
-        );
-      }}
-    </UseState>
-  );
-};

packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,77 +0,0 @@
-import React, { FC, ReactNode, PureComponent } from 'react';
-import classNames from 'classnames';
-import { Tooltip } from '../Tooltip/Tooltip';
-import { deprecationWarning } from '@grafana/data';
-
-interface ToggleButtonGroupProps {
-  label?: string;
-  children: JSX.Element[];
-  transparent?: boolean;
-  width?: number;
-}
-
-/** @deprecated */
-export class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
-  render() {
-    const { children, label, transparent, width } = this.props;
-    const labelClasses = classNames('gf-form-label', {
-      'gf-form-label--transparent': transparent,
-      [`width-${width}`]: width,
-    });
-    const buttonGroupClasses = classNames('toggle-button-group', {
-      'toggle-button-group--transparent': transparent,
-      'toggle-button-group--padded': width, // Add extra padding to compensate for buttons border
-    });
-
-    deprecationWarning('ToggleButtonGroup', 'ToggleButtonGroup', 'RadioButtonGroup');
-
-    return (
-      <div className="gf-form gf-form--align-center">
-        {label && <label className={labelClasses}>{label}</label>}
-        <div className={buttonGroupClasses}>{children}</div>
-      </div>
-    );
-  }
-}
-
-interface ToggleButtonProps {
-  onChange?: (value: any) => void;
-  selected?: boolean;
-  value: any;
-  className?: string;
-  children: ReactNode;
-  tooltip?: string;
-}
-
-export const ToggleButton: FC<ToggleButtonProps> = ({
-  children,
-  selected,
-  className = '',
-  value = null,
-  tooltip,
-  onChange,
-}) => {
-  const onClick = (event: React.SyntheticEvent) => {
-    event.stopPropagation();
-    if (!selected && onChange) {
-      onChange(value);
-    }
-  };
-
-  const btnClassName = `btn ${className}${selected ? ' active' : ''}`;
-  const button = (
-    <button className={btnClassName} onClick={onClick}>
-      <span>{children}</span>
-    </button>
-  );
-
-  if (tooltip) {
-    return (
-      <Tooltip content={tooltip} placement="bottom">
-        {button}
-      </Tooltip>
-    );
-  } else {
-    return button;
-  }
-};

packages/grafana-ui/src/components/index.ts

@@ -110,7 +110,6 @@ export { LogRows } from './Logs/LogRows';
 export { getLogRowStyles } from './Logs/getLogRowStyles';
 export { DataLinkButton } from './DataLinks/DataLinkButton';
 export { FieldLinkList } from './DataLinks/FieldLinkList';
-export { ToggleButtonGroup, ToggleButton } from './ToggleButtonGroup/ToggleButtonGroup';
 // Panel editors
 export { FullWidthButtonContainer } from './Button/FullWidthButtonContainer';
 export { ClickOutsideWrapper } from './ClickOutsideWrapper/ClickOutsideWrapper';

packages/grafana-ui/src/types/icon.ts

@@ -76,8 +76,11 @@ export type IconName =
   | 'gf-interpolation-step-after'
   | 'gf-interpolation-step-before'
   | 'gf-logs'
+  | 'github'
+  | 'gitlab'
   | 'grafana'
   | 'graph-bar'
+  | 'google'
   | 'heart-break'
   | 'heart'
   | 'history'
@@ -90,10 +93,12 @@ export type IconName =
   | 'link'
   | 'list-ul'
   | 'lock'
+  | 'microsoft'
   | 'minus-circle'
   | 'minus'
   | 'mobile-android'
   | 'monitor'
+  | 'okta'
   | 'palette'
   | 'panel-add'
   | 'pause'