style: Pass at propagating (and enhancing) Button component throughout Superset (#10649)

* getting rid of weird focus/active outline ring * Buttons... buttons _everywhere_ * linting * Nixing views/CRUD/dataset/Button component * fixing 2 typing errors * fixing more TS errors * prefer src path for include * one more real button, one less CSS class * one more "button" to "Button" * Published Status is now a proper clickable Label * nixing the CRUD button again * touching up stories, with SupersetButton story * SIP-34 button colors * adding polished package to mix colors * updating button colors to match Superset theme * abstracting away from bootstrap-specific props (might pivot libraries soon!) * more abstraction from bsStyle/bsSize props * exchanging styles for a prop * linting * restoring feature flag to stock * using src alias * last <button> replacement * this classname would never be applied * more linting action * fixing unsupported bsSize 'medium', and cta typing error * more cta action * unnecessary styles * errant bsSize prop * cleanup * tweaks to make new New button work * Linting * fixing a couple tests * fixing theme based test failure * margin tweak for NEW button * another fixed test * another fixed test * fixing two more tests * fixing last broken tests. * always be linting * Adding tertiary/dashed buttons * cleaning up QueryAndSave buttons * fixing "link" button styles * fixing/updating link button styles * cta buttons on Modal component * linting. * exporting button story knobs, making ALL knobs safe for export. * capitalizing a file... no big whoop * Basic button tests * renaming button - temporarily * renaming file to fix capitalization issue * passing theme through to a difficult popover. * fixin' a newly busted unit test * lint fixin' * oops, shouldn't have changed this prop! * adding a dive() to themedShallow, and fixing a cypress/jest test * addressing lint stuff * touching up stories, with SupersetButton story * SIP-34 button colors * updating button colors to match Superset theme * abstracting away from bootstrap-specific props (might pivot libraries soon!) * linting * restoring feature flag to stock * cleanup * Linting * renaming button - temporarily * renaming file to fix capitalization issue * oops, shouldn't have changed this prop! * adding a dive() to themedShallow, and fixing a cypress/jest test * addressing lint stuff * nixing new modal button * Fixing another popover/button issue that should break cypress * lint ✨ * passing classNames through to new button (should fix some tests) * cleaning unused classes, making cypress tests use data attrs * fixin' the test * fixing another class-based test with data-test attr * no longer passing theme as prop to buttons in popovers... themeprovider is better * outline/border tweaks!
2026-04-19 08:04:53 +00:00 · 2020-08-28 17:34:28 -07:00
parent 33fa9ebff1
commit 9fe30ab71e
78 changed files with 760 additions and 562 deletions
--- a/superset-frontend/src/explore/components/AdhocFilterEditPopover.jsx
+++ b/superset-frontend/src/explore/components/AdhocFilterEditPopover.jsx
@@ -18,7 +18,9 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Popover, Tab, Tabs } from 'react-bootstrap';
+import { Popover, Tab, Tabs } from 'react-bootstrap';
+import Button from 'src/components/Button';
+import { ThemeProvider } from '@superset-ui/style';

 import columnType from '../propTypes/columnType';
 import adhocMetricType from '../propTypes/adhocMetricType';
@@ -40,6 +42,7 @@ const propTypes = {
  ).isRequired,
  datasource: PropTypes.object,
  partitionColumn: PropTypes.string,
+  theme: PropTypes.object,
 };

 const startingWidth = 300;
@@ -119,6 +122,7 @@ export default class AdhocFilterEditPopover extends React.Component {
      onResize,
      datasource,
      partitionColumn,
+      theme,
      ...popoverProps
    } = this.props;

@@ -129,68 +133,74 @@ export default class AdhocFilterEditPopover extends React.Component {

    return (
      <Popover id="filter-edit-popover" {...popoverProps}>
-        <Tabs
-          id="adhoc-filter-edit-tabs"
-          defaultActiveKey={adhocFilter.expressionType}
-          className="adhoc-filter-edit-tabs"
-          style={{ height: this.state.height, width: this.state.width }}
-        >
-          <Tab
-            className="adhoc-filter-edit-tab"
-            eventKey={EXPRESSION_TYPES.SIMPLE}
-            title="Simple"
+        <ThemeProvider theme={theme}>
+          <Tabs
+            id="adhoc-filter-edit-tabs"
+            defaultActiveKey={adhocFilter.expressionType}
+            className="adhoc-filter-edit-tabs"
+            style={{ height: this.state.height, width: this.state.width }}
          >
-            <AdhocFilterEditPopoverSimpleTabContent
-              adhocFilter={this.state.adhocFilter}
-              onChange={this.onAdhocFilterChange}
-              options={options}
-              datasource={datasource}
-              onHeightChange={this.adjustHeight}
-              partitionColumn={partitionColumn}
-            />
-          </Tab>
-          <Tab
-            className="adhoc-filter-edit-tab"
-            eventKey={EXPRESSION_TYPES.SQL}
-            title="Custom SQL"
-          >
-            {!this.props.datasource ||
-            this.props.datasource.type !== 'druid' ? (
-              <AdhocFilterEditPopoverSqlTabContent
+            <Tab
+              className="adhoc-filter-edit-tab"
+              eventKey={EXPRESSION_TYPES.SIMPLE}
+              title="Simple"
+            >
+              <AdhocFilterEditPopoverSimpleTabContent
                adhocFilter={this.state.adhocFilter}
                onChange={this.onAdhocFilterChange}
-                options={this.props.options}
-                height={this.state.height}
+                options={options}
+                datasource={datasource}
+                onHeightChange={this.adjustHeight}
+                partitionColumn={partitionColumn}
              />
-            ) : (
-              <div className="custom-sql-disabled-message">
-                Custom SQL Filters are not available on druid datasources
-              </div>
-            )}
-          </Tab>
-        </Tabs>
-        <div>
-          <Button
-            disabled={!stateIsValid}
-            bsStyle={hasUnsavedChanges && stateIsValid ? 'primary' : 'default'}
-            bsSize="small"
-            className="m-r-5"
-            onClick={this.onSave}
-          >
-            Save
-          </Button>
-          <Button bsSize="small" onClick={this.props.onClose}>
-            Close
-          </Button>
-          <i
-            role="button"
-            tabIndex={0}
-            onMouseDown={this.onDragDown}
-            className="fa fa-expand edit-popover-resize text-muted"
-          />
-        </div>
+            </Tab>
+            <Tab
+              className="adhoc-filter-edit-tab"
+              eventKey={EXPRESSION_TYPES.SQL}
+              title="Custom SQL"
+            >
+              {!this.props.datasource ||
+              this.props.datasource.type !== 'druid' ? (
+                <AdhocFilterEditPopoverSqlTabContent
+                  adhocFilter={this.state.adhocFilter}
+                  onChange={this.onAdhocFilterChange}
+                  options={this.props.options}
+                  height={this.state.height}
+                />
+              ) : (
+                <div className="custom-sql-disabled-message">
+                  Custom SQL Filters are not available on druid datasources
+                </div>
+              )}
+            </Tab>
+          </Tabs>
+          <div>
+            <Button
+              disabled={!stateIsValid}
+              buttonStyle={
+                hasUnsavedChanges && stateIsValid ? 'primary' : 'default'
+              }
+              buttonSize="small"
+              className="m-r-5"
+              onClick={this.onSave}
+              cta
+            >
+              Save
+            </Button>
+            <Button buttonSize="small" onClick={this.props.onClose} cta>
+              Close
+            </Button>
+            <i
+              role="button"
+              tabIndex={0}
+              onMouseDown={this.onDragDown}
+              className="fa fa-expand edit-popover-resize text-muted"
+            />
+          </div>
+        </ThemeProvider>
      </Popover>
    );
  }
 }
+
 AdhocFilterEditPopover.propTypes = propTypes;
--- a/superset-frontend/src/explore/components/AdhocFilterOption.jsx
+++ b/superset-frontend/src/explore/components/AdhocFilterOption.jsx
@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import { OverlayTrigger } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import { withTheme } from '@superset-ui/style';

 import Label from 'src/components/Label';
 import AdhocFilterEditPopover from './AdhocFilterEditPopover';
@@ -41,8 +42,7 @@ const propTypes = {
  datasource: PropTypes.object,
  partitionColumn: PropTypes.string,
 };
-
-export default class AdhocFilterOption extends React.PureComponent {
+class AdhocFilterOption extends React.PureComponent {
  constructor(props) {
    super(props);
    this.closeFilterEditOverlay = this.closeFilterEditOverlay.bind(this);
@@ -73,7 +73,7 @@ export default class AdhocFilterOption extends React.PureComponent {
  }

  render() {
-    const { adhocFilter } = this.props;
+    const { adhocFilter, theme } = this.props;
    const overlay = (
      <AdhocFilterEditPopover
        onResize={this.onPopoverResize}
@@ -83,6 +83,7 @@ export default class AdhocFilterOption extends React.PureComponent {
        options={this.props.options}
        datasource={this.props.datasource}
        partitionColumn={this.props.partitionColumn}
+        theme={theme}
      />
    );
    return (
@@ -123,4 +124,7 @@ export default class AdhocFilterOption extends React.PureComponent {
    );
  }
 }
+
+export default withTheme(AdhocFilterOption);
+
 AdhocFilterOption.propTypes = propTypes;
--- a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
+++ b/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
@@ -18,7 +18,8 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, FormGroup, Popover, Tab, Tabs } from 'react-bootstrap';
+import { FormGroup, Popover, Tab, Tabs } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import Select from 'src/components/Select';
 import ace from 'brace';
 import AceEditor from 'react-ace';
@@ -27,6 +28,7 @@ import 'brace/theme/github';
 import 'brace/ext/language_tools';
 import { t } from '@superset-ui/translation';
 import { ColumnOption } from '@superset-ui/chart-controls';
+import { ThemeProvider } from '@superset-ui/style';

 import FormLabel from 'src/components/FormLabel';

@@ -45,6 +47,7 @@ const propTypes = {
  onResize: PropTypes.func.isRequired,
  columns: PropTypes.arrayOf(columnType),
  datasourceType: PropTypes.string,
+  theme: PropTypes.object,
 };

 const defaultProps = {
@@ -192,6 +195,7 @@ export default class AdhocMetricEditPopover extends React.Component {
      onClose,
      onResize,
      datasourceType,
+      theme,
      ...popoverProps
    } = this.props;

@@ -232,98 +236,104 @@ export default class AdhocMetricEditPopover extends React.Component {
    const hasUnsavedChanges = !adhocMetric.equals(propsAdhocMetric);
    return (
      <Popover id="metrics-edit-popover" title={popoverTitle} {...popoverProps}>
-        <Tabs
-          id="adhoc-metric-edit-tabs"
-          defaultActiveKey={adhocMetric.expressionType}
-          className="adhoc-metric-edit-tabs"
-          style={{ height: this.state.height, width: this.state.width }}
-          onSelect={this.refreshAceEditor}
-          animation={false}
-        >
-          <Tab
-            className="adhoc-metric-edit-tab"
-            eventKey={EXPRESSION_TYPES.SIMPLE}
-            title="Simple"
+        <ThemeProvider theme={theme}>
+          <Tabs
+            id="adhoc-metric-edit-tabs"
+            defaultActiveKey={adhocMetric.expressionType}
+            className="adhoc-metric-edit-tabs"
+            style={{ height: this.state.height, width: this.state.width }}
+            onSelect={this.refreshAceEditor}
+            animation={false}
          >
-            <FormGroup>
-              <FormLabel>
-                <strong>column</strong>
-              </FormLabel>
-              <Select
-                name="select-column"
-                {...this.selectProps}
-                {...columnSelectProps}
-              />
-            </FormGroup>
-            <FormGroup>
-              <FormLabel>
-                <strong>aggregate</strong>
-              </FormLabel>
-              <Select
-                name="select-aggregate"
-                {...this.selectProps}
-                {...aggregateSelectProps}
-                autoFocus
-              />
-            </FormGroup>
-          </Tab>
-          <Tab
-            className="adhoc-metric-edit-tab"
-            eventKey={EXPRESSION_TYPES.SQL}
-            title="Custom SQL"
-            data-test="adhoc-metric-edit-tab#custom"
-          >
-            {this.props.datasourceType !== 'druid' ? (
+            <Tab
+              className="adhoc-metric-edit-tab"
+              eventKey={EXPRESSION_TYPES.SIMPLE}
+              title="Simple"
+            >
              <FormGroup>
-                <AceEditor
-                  ref={this.handleAceEditorRef}
-                  mode="sql"
-                  theme="github"
-                  height={`${this.state.height - 43}px`}
-                  onChange={this.onSqlExpressionChange}
-                  width="100%"
-                  showGutter={false}
-                  value={
-                    adhocMetric.sqlExpression || adhocMetric.translateToSql()
-                  }
-                  editorProps={{ $blockScrolling: true }}
-                  enableLiveAutocompletion
-                  className="adhoc-filter-sql-editor"
-                  wrapEnabled
+                <FormLabel>
+                  <strong>column</strong>
+                </FormLabel>
+                <Select
+                  name="select-column"
+                  {...this.selectProps}
+                  {...columnSelectProps}
                />
              </FormGroup>
-            ) : (
-              <div className="custom-sql-disabled-message">
-                Custom SQL Metrics are not available on druid datasources
-              </div>
-            )}
-          </Tab>
-        </Tabs>
-        <div>
-          <Button
-            disabled={!stateIsValid}
-            bsStyle={hasUnsavedChanges && stateIsValid ? 'primary' : 'default'}
-            bsSize="small"
-            className="m-r-5"
-            data-test="AdhocMetricEdit#save"
-            onClick={this.onSave}
-          >
-            Save
-          </Button>
-          <Button
-            bsSize="small"
-            onClick={this.props.onClose}
-            data-test="AdhocMetricEdit#cancel"
-          >
-            Close
-          </Button>
-          <i
-            role="button"
-            tabIndex={0}
-            onMouseDown={this.onDragDown}
-            className="fa fa-expand edit-popover-resize text-muted"
-          />
-        </div>
+              <FormGroup>
+                <FormLabel>
+                  <strong>aggregate</strong>
+                </FormLabel>
+                <Select
+                  name="select-aggregate"
+                  {...this.selectProps}
+                  {...aggregateSelectProps}
+                  autoFocus
+                />
+              </FormGroup>
+            </Tab>
+            <Tab
+              className="adhoc-metric-edit-tab"
+              eventKey={EXPRESSION_TYPES.SQL}
+              title="Custom SQL"
+              data-test="adhoc-metric-edit-tab#custom"
+            >
+              {this.props.datasourceType !== 'druid' ? (
+                <FormGroup>
+                  <AceEditor
+                    ref={this.handleAceEditorRef}
+                    mode="sql"
+                    theme="github"
+                    height={`${this.state.height - 43}px`}
+                    onChange={this.onSqlExpressionChange}
+                    width="100%"
+                    showGutter={false}
+                    value={
+                      adhocMetric.sqlExpression || adhocMetric.translateToSql()
+                    }
+                    editorProps={{ $blockScrolling: true }}
+                    enableLiveAutocompletion
+                    className="adhoc-filter-sql-editor"
+                    wrapEnabled
+                  />
+                </FormGroup>
+              ) : (
+                <div className="custom-sql-disabled-message">
+                  Custom SQL Metrics are not available on druid datasources
+                </div>
+              )}
+            </Tab>
+          </Tabs>
+          <div>
+            <Button
+              disabled={!stateIsValid}
+              buttonStyle={
+                hasUnsavedChanges && stateIsValid ? 'primary' : 'default'
+              }
+              buttonSize="small"
+              className="m-r-5"
+              data-test="AdhocMetricEdit#save"
+              onClick={this.onSave}
+              cta
+            >
+              Save
+            </Button>
+            <Button
+              buttonSize="small"
+              onClick={this.props.onClose}
+              data-test="AdhocMetricEdit#cancel"
+              cta
+            >
+              Close
+            </Button>
+            <i
+              role="button"
+              tabIndex={0}
+              onMouseDown={this.onDragDown}
+              className="fa fa-expand edit-popover-resize text-muted"
+            />
+          </div>
+        </ThemeProvider>
      </Popover>
    );
  }
--- a/superset-frontend/src/explore/components/AdhocMetricOption.jsx
+++ b/superset-frontend/src/explore/components/AdhocMetricOption.jsx
@@ -19,6 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { OverlayTrigger } from 'react-bootstrap';
+import { withTheme } from '@superset-ui/style';

 import Label from 'src/components/Label';
 import AdhocMetricEditPopover from './AdhocMetricEditPopover';
@@ -33,7 +34,7 @@ const propTypes = {
  datasourceType: PropTypes.string,
 };

-export default class AdhocMetricOption extends React.PureComponent {
+class AdhocMetricOption extends React.PureComponent {
  constructor(props) {
    super(props);
    this.closeMetricEditOverlay = this.closeMetricEditOverlay.bind(this);
@@ -65,7 +66,7 @@ export default class AdhocMetricOption extends React.PureComponent {
  }

  render() {
-    const { adhocMetric } = this.props;
+    const { adhocMetric, theme } = this.props;
    const overlayContent = (
      <AdhocMetricEditPopover
        onResize={this.onPopoverResize}
@@ -74,6 +75,7 @@ export default class AdhocMetricOption extends React.PureComponent {
        onClose={this.closeMetricEditOverlay}
        columns={this.props.columns}
        datasourceType={this.props.datasourceType}
+        theme={theme}
      />
    );

@@ -109,4 +111,7 @@ export default class AdhocMetricOption extends React.PureComponent {
    );
  }
 }
+
+export default withTheme(AdhocMetricOption);
+
 AdhocMetricOption.propTypes = propTypes;
--- a/superset-frontend/src/explore/components/DisplayQueryButton.jsx
+++ b/superset-frontend/src/explore/components/DisplayQueryButton.jsx
@@ -38,13 +38,13 @@ import {
 import { Table } from 'reactable-arc';
 import { t } from '@superset-ui/translation';

+import Button from 'src/components/Button';
 import getClientErrorObject from '../../utils/getClientErrorObject';
 import CopyToClipboard from './../../components/CopyToClipboard';
 import { getChartDataRequest } from '../../chart/chartAction';
 import downloadAsImage from '../../utils/downloadAsImage';
 import Loading from '../../components/Loading';
 import ModalTrigger from './../../components/ModalTrigger';
-import Button from '../../components/Button';
 import RowCountLabel from './RowCountLabel';
 import {
  applyFormattingToTabularData,
--- a/superset-frontend/src/explore/components/ExploreActionButtons.jsx
+++ b/superset-frontend/src/explore/components/ExploreActionButtons.jsx
@@ -47,7 +47,7 @@ export default function ExploreActionButtons({
  slice,
 }) {
  const exportToCSVClasses = cx('btn btn-default btn-sm', {
-    'disabled disabledButton': !canDownload,
+    disabled: !canDownload,
  });
  const doExportCSV = exportChart.bind(this, {
    formData: latestQueryFormData,
--- a/superset-frontend/src/explore/components/PropertiesModal.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal.tsx
@@ -18,7 +18,6 @@
 */
 import React, { useState, useEffect, useRef } from 'react';
 import {
-  Button,
  Modal,
  Row,
  Col,
@@ -26,6 +25,7 @@ import {
  FormGroup,
  // @ts-ignore
 } from 'react-bootstrap';
+import Button from 'src/components/Button';
 // @ts-ignore
 import Dialog from 'react-bootstrap-dialog';
 import { OptionsType } from 'react-select/src/types';
@@ -263,15 +263,15 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
        </Row>
      </Modal.Body>
      <Modal.Footer>
-        <Button type="button" bsSize="sm" onClick={onHide}>
+        <Button type="button" buttonSize="sm" onClick={onHide} cta>
          {t('Cancel')}
        </Button>
        <Button
          type="submit"
-          bsSize="sm"
-          bsStyle="primary"
-          className="m-r-5"
+          buttonSize="sm"
+          buttonStyle="primary"
          disabled={!owners || submitting || !name}
+          cta
        >
          {t('Save')}
        </Button>
--- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx
+++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx
@@ -19,11 +19,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import classnames from 'classnames';
 import { t } from '@superset-ui/translation';
 import styled from '@superset-ui/style';

-import Button from '../../components/Button';
+import Button from 'src/components/Button';
 import Hotkeys from '../../components/Hotkeys';

 const propTypes = {
@@ -61,7 +60,8 @@ const Styles = styled.div`
  align-items: center;
  padding-bottom: ${({ theme }) => 2 * theme.gridUnit}px;

-  .save-btn {
+  .btn {
+    /* just to make sure buttons don't jiggle */
    width: 100px;
  }
 `;
@@ -75,12 +75,7 @@ export default function QueryAndSaveBtns({
  chartIsStale,
  errorMessage,
 }) {
-  const saveClasses = classnames({
-    'disabled disabledButton': !canAdd,
-    'save-btn': true,
-  });
-
-  let qryButtonStyle = 'default';
+  let qryButtonStyle = 'secondary';
  if (errorMessage) {
    qryButtonStyle = 'danger';
  } else if (chartIsStale) {
@@ -89,15 +84,21 @@ export default function QueryAndSaveBtns({

  const saveButtonDisabled = errorMessage ? true : loading;
  const qryOrStopButton = loading ? (
-    <Button onClick={onStop} bsStyle="warning" className="save-btn">
+    <Button
+      onClick={onStop}
+      buttonStyle="warning"
+      buttonSize="small"
+      disabled={!canAdd}
+    >
      <i className="fa fa-stop-circle-o" /> Stop
    </Button>
  ) : (
    <Button
-      className="query save-btn"
+      buttonSize="small"
      onClick={onQuery}
-      bsStyle={qryButtonStyle}
+      buttonStyle={qryButtonStyle}
      disabled={!!errorMessage}
+      data-test="run-query-button"
    >
      <i className="fa fa-bolt" /> {t('Run')}
    </Button>
@@ -109,7 +110,8 @@ export default function QueryAndSaveBtns({
        <ButtonGroup className="query-and-save">
          {qryOrStopButton}
          <Button
-            className={saveClasses}
+            buttonStyle="secondary"
+            buttonSize="small"
            data-target="#save_modal"
            data-toggle="modal"
            disabled={saveButtonDisabled}
--- a/superset-frontend/src/explore/components/SaveModal.jsx
+++ b/superset-frontend/src/explore/components/SaveModal.jsx
@@ -20,14 +20,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import {
-  Alert,
-  Button,
-  FormControl,
-  FormGroup,
-  Modal,
-  Radio,
-} from 'react-bootstrap';
+import { Alert, FormControl, FormGroup, Modal, Radio } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import FormLabel from 'src/components/FormLabel';
 import { CreatableSelect } from 'src/components/Select/SupersetStyledSelect';
 import { t } from '@superset-ui/translation';
@@ -208,18 +202,12 @@ class SaveModal extends React.Component {

        <Modal.Footer>
          <div className="float-right">
-            <Button
-              type="button"
-              id="btn_cancel"
-              bsSize="sm"
-              onClick={this.props.onHide}
-            >
+            <Button id="btn_cancel" buttonSize="sm" onClick={this.props.onHide}>
              {t('Cancel')}
            </Button>
            <Button
-              type="button"
              id="btn_modal_save_goto_dash"
-              bsSize="sm"
+              buttonSize="sm"
              disabled={
                !this.state.newSliceName || !this.state.newDashboardName
              }
@@ -228,10 +216,9 @@ class SaveModal extends React.Component {
              {t('Save & go to dashboard')}
            </Button>
            <Button
-              type="button"
              id="btn_modal_save"
-              bsSize="sm"
-              bsStyle="primary"
+              buttonSize="sm"
+              buttonStyle="primary"
              onClick={this.saveOrOverwrite.bind(this, false)}
              disabled={!this.state.newSliceName}
            >
--- a/superset-frontend/src/explore/components/controls/AnnotationLayer.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayer.jsx
@@ -19,13 +19,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CompactPicker } from 'react-color';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import mathjs from 'mathjs';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 import { getCategoricalSchemeRegistry } from '@superset-ui/color';
 import { getChartMetadataRegistry } from '@superset-ui/chart';
 import { validateNonEmpty } from '@superset-ui/validator';
+import { ThemeProvider } from '@superset-ui/style';

 import SelectControl from './SelectControl';
 import TextControl from './TextControl';
@@ -63,6 +64,7 @@ const propTypes = {
  timeColumn: PropTypes.string,
  intervalEndColumn: PropTypes.string,
  vizType: PropTypes.string,
+  theme: PropTypes.object,

  error: PropTypes.string,
  colorScheme: PropTypes.string,
@@ -619,8 +621,8 @@ export default class AnnotationLayer extends React.PureComponent {
            />
            <Button
              style={{ marginTop: '0.5rem', marginBottom: '0.5rem' }}
-              bsStyle={color === AUTOMATIC_COLOR ? 'success' : 'default'}
-              bsSize="xsmall"
+              buttonStyle={color === AUTOMATIC_COLOR ? 'success' : 'default'}
+              buttonSize="xsmall"
              onClick={() => this.setState({ color: AUTOMATIC_COLOR })}
            >
              Automatic Color
@@ -661,7 +663,7 @@ export default class AnnotationLayer extends React.PureComponent {
  render() {
    const { isNew, name, annotationType, sourceType, show } = this.state;
    const isValid = this.isValidForm();
-
+    const { theme } = this.props;
    const metadata = getChartMetadataRegistry().get(this.props.vizType);
    const supportedAnnotationTypes = metadata
      ? metadata.supportedAnnotationTypes.map(
@@ -671,7 +673,7 @@ export default class AnnotationLayer extends React.PureComponent {
    const supportedSourceTypes = this.getSupportedSourceTypes(annotationType);

    return (
-      <div>
+      <ThemeProvider theme={theme}>
        {this.props.error && (
          <span style={{ color: 'red' }}>ERROR: {this.props.error}</span>
        )}
@@ -724,12 +726,12 @@ export default class AnnotationLayer extends React.PureComponent {
          {this.renderDisplayConfiguration()}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Button bsSize="sm" onClick={this.deleteAnnotation}>
+          <Button buttonSize="sm" onClick={this.deleteAnnotation}>
            {!isNew ? t('Remove') : t('Cancel')}
          </Button>
          <div>
            <Button
-              bsSize="sm"
+              buttonSize="sm"
              disabled={!isValid}
              onClick={this.applyAnnotation}
            >
@@ -737,7 +739,7 @@ export default class AnnotationLayer extends React.PureComponent {
            </Button>

            <Button
-              bsSize="sm"
+              buttonSize="sm"
              disabled={!isValid}
              onClick={this.submitAnnotation}
            >
@@ -745,7 +747,7 @@ export default class AnnotationLayer extends React.PureComponent {
            </Button>
          </div>
        </div>
-      </div>
+      </ThemeProvider>
    );
  }
 }
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl.jsx
@@ -26,6 +26,7 @@ import {
 } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { t } from '@superset-ui/translation';
+import { withTheme } from '@superset-ui/style';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { getChartKey } from '../../exploreUtils';
 import { runAnnotationQuery } from '../../../chart/chartAction';
@@ -100,6 +101,7 @@ class AnnotationLayerControl extends React.PureComponent {

  renderPopover(parent, annotation, error) {
    const id = !annotation ? '_new' : annotation.name;
+    const { theme } = this.props;
    return (
      <Popover
        style={{ maxWidth: 'none' }}
@@ -116,6 +118,7 @@ class AnnotationLayerControl extends React.PureComponent {
          addAnnotationLayer={this.addAnnotationLayer}
          removeAnnotationLayer={this.removeAnnotationLayer}
          close={() => this.refs[parent].hide()}
+          theme={theme}
        />
      </Popover>
    );
@@ -208,7 +211,9 @@ function mapDispatchToProps(dispatch) {
  };
 }

+const themedAnnotationLayerControl = withTheme(AnnotationLayerControl);
+
 export default connect(
  mapStateToProps,
  mapDispatchToProps,
-)(AnnotationLayerControl);
+)(themedAnnotationLayerControl);
--- a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl.jsx
@@ -19,7 +19,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Button,
  DropdownButton,
  FormControl,
  FormGroup,
@@ -32,6 +31,7 @@ import {
  Tabs,
  Tooltip,
 } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 import moment from 'moment';
@@ -365,7 +365,7 @@ class DateFilterControl extends React.Component {
            onClick={() => {}}
          />
          <InputGroup.Button onClick={() => this.toggleCalendar(key)}>
-            <Button>
+            <Button theme={this.props.theme}>
              <i className="fa fa-calendar" />
            </Button>
          </InputGroup.Button>
@@ -563,10 +563,11 @@ class DateFilterControl extends React.Component {
          </Tabs>
          <div className="clearfix">
            <Button
-              bsSize="small"
+              buttonSize="small"
              className="float-right ok"
-              bsStyle="primary"
+              buttonStyle="primary"
              onClick={this.close}
+              theme={this.props.theme}
            >
              Ok
            </Button>
--- a/superset-frontend/src/explore/components/controls/SpatialControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SpatialControl.jsx
@@ -18,7 +18,8 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, Button, OverlayTrigger, Popover } from 'react-bootstrap';
+import { Row, Col, OverlayTrigger, Popover } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { t } from '@superset-ui/translation';

 import Label from 'src/components/Label';
@@ -204,9 +205,9 @@ export default class SpatialControl extends React.Component {
          </PopoverSection>
          <div className="clearfix">
            <Button
-              bsSize="small"
+              buttonSize="small"
              className="float-left ok"
-              bsStyle="primary"
+              buttonStyle="primary"
              onClick={this.close.bind(this)}
            >
              Ok
--- a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
+++ b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
@@ -18,7 +18,8 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, FormGroup, FormControl } from 'react-bootstrap';
+import { FormGroup, FormControl } from 'react-bootstrap';
+import Button from 'src/components/Button';

 import AceEditor from 'react-ace';
 import 'brace/mode/sql';
@@ -121,7 +122,7 @@ export default class TextAreaControl extends React.Component {
            bsSize="large"
            modalTitle={controlHeader}
            triggerNode={
-              <Button bsSize="small" className="m-t-5">
+              <Button buttonSize="small" className="m-t-5">
                {t('Edit')} <strong>{this.props.language}</strong>{' '}
                {t('in modal')}
              </Button>