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-26 03:24: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/SqlLab/components/EstimateQueryCostButton.jsx
+++ b/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx
@@ -22,7 +22,7 @@ import { Table } from 'reactable-arc';
 import { Alert } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';

-import Button from '../../components/Button';
+import Button from 'src/components/Button';
 import Loading from '../../components/Loading';
 import ModalTrigger from '../../components/ModalTrigger';

@@ -85,8 +85,8 @@ class EstimateQueryCostButton extends React.PureComponent {
          modalBody={this.renderModalBody()}
          triggerNode={
            <Button
-              bsStyle="warning"
-              bsSize="small"
+              buttonStyle="warning"
+              buttonSize="small"
              onClick={this.onClick}
              key="query-estimate-btn"
              tooltip={tooltip}
--- a/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton.jsx
+++ b/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton.jsx
@@ -24,9 +24,9 @@ import Dialog from 'react-bootstrap-dialog';
 import { t } from '@superset-ui/translation';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';

+import Button from 'src/components/Button';
 import { exploreChart } from '../../explore/exploreUtils';
 import * as actions from '../actions/sqlLab';
-import Button from '../../components/Button';

 const propTypes = {
  actions: PropTypes.object.isRequired,
@@ -89,7 +89,7 @@ class ExploreCtasResultsButton extends React.PureComponent {
    return (
      <>
        <Button
-          bsSize="small"
+          buttonSize="small"
          onClick={this.onClick}
          tooltip={t('Explore the result set in the data exploration view')}
        >
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton.jsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton.jsx
@@ -25,11 +25,11 @@ import { Alert } from 'react-bootstrap';
 import Dialog from 'react-bootstrap-dialog';
 import { t } from '@superset-ui/translation';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-
 import shortid from 'shortid';
+
+import Button from 'src/components/Button';
 import { exploreChart } from '../../explore/exploreUtils';
 import * as actions from '../actions/sqlLab';
-import Button from '../../components/Button';

 const propTypes = {
  actions: PropTypes.object.isRequired,
@@ -213,7 +213,7 @@ class ExploreResultsButton extends React.PureComponent {
    return (
      <>
        <Button
-          bsSize="small"
+          buttonSize="small"
          onClick={this.onClick}
          disabled={!allowsSubquery}
          tooltip={t('Explore the result set in the data exploration view')}
--- a/superset-frontend/src/SqlLab/components/LimitControl.tsx
+++ b/superset-frontend/src/SqlLab/components/LimitControl.tsx
@@ -17,13 +17,8 @@
 * under the License.
 */
 import React from 'react';
-import {
-  Button,
-  FormGroup,
-  FormControl,
-  Overlay,
-  Popover,
-} from 'react-bootstrap';
+import { FormGroup, FormControl, Overlay, Popover } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { t } from '@superset-ui/translation';
 import styled from '@superset-ui/style';

@@ -119,8 +114,8 @@ export default class LimitControl extends React.PureComponent<
          </FormGroup>
          <div className="clearfix">
            <Button
-              bsSize="small"
-              bsStyle="primary"
+              buttonSize="small"
+              buttonStyle="primary"
              className="float-right ok m-l-5"
              disabled={!isValid}
              onClick={this.submitAndClose}
@@ -128,7 +123,7 @@ export default class LimitControl extends React.PureComponent<
              {t('Ok')}
            </Button>
            <Button
-              bsSize="small"
+              buttonSize="small"
              className="float-right reset"
              onClick={this.setValueAndClose.bind(
                this,
--- a/superset-frontend/src/SqlLab/components/QuerySearch.jsx
+++ b/superset-frontend/src/SqlLab/components/QuerySearch.jsx
@@ -18,7 +18,7 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import Select from 'src/components/Select';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
@@ -273,8 +273,8 @@ class QuerySearch extends React.PureComponent {
            />

            <Button
-              bsSize="small"
-              bsStyle="success"
+              buttonSize="small"
+              buttonStyle="success"
              onClick={this.refreshQueries}
            >
              {t('Search')}
--- a/superset-frontend/src/SqlLab/components/QueryTable.jsx
+++ b/superset-frontend/src/SqlLab/components/QueryTable.jsx
@@ -24,6 +24,7 @@ import { ProgressBar, Well } from 'react-bootstrap';
 import Label from 'src/components/Label';
 import { t } from '@superset-ui/translation';

+import Button from 'src/components/Button';
 import Link from '../../components/Link';
 import ResultSet from './ResultSet';
 import ModalTrigger from '../../components/ModalTrigger';
@@ -99,31 +100,34 @@ class QueryTable extends React.PureComponent {
          </div>
        );
        q.user = (
-          <button
-            className="btn btn-link btn-xs"
+          <Button
+            buttonSize="small"
+            buttonStyle="link"
            onClick={this.props.onUserClicked.bind(this, q.userId)}
          >
            {q.user}
-          </button>
+          </Button>
        );
        q.db = (
-          <button
-            className="btn btn-link btn-xs"
+          <Button
+            buttonSize="small"
+            buttonStyle="link"
            onClick={this.props.onDbClicked.bind(this, q.dbId)}
          >
            {q.db}
-          </button>
+          </Button>
        );
        q.started = moment(q.startDttm).format('HH:mm:ss');
        q.querylink = (
          <div style={{ width: '100px' }}>
-            <button
-              className="btn btn-link btn-xs"
+            <Button
+              buttonSize="small"
+              buttonStyle="link"
              onClick={this.openQuery.bind(this, q.queryId)}
            >
              <i className="fa fa-external-link m-r-3" />
              {t('Edit')}
-            </button>
+            </Button>
          </div>
        );
        q.sql = (
--- a/superset-frontend/src/SqlLab/components/ResultSet.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet.tsx
@@ -17,7 +17,8 @@
 * under the License.
 */
 import React, { CSSProperties } from 'react';
-import { Alert, Button, ButtonGroup, ProgressBar } from 'react-bootstrap';
+import { Alert, ButtonGroup, ProgressBar } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import shortid from 'shortid';
 import { t } from '@superset-ui/translation';

@@ -166,7 +167,7 @@ export default class ResultSet extends React.PureComponent<
              )}
            {this.props.csv && (
              <Button
-                bsSize="small"
+                buttonSize="small"
                href={`/superset/csv/${this.props.query.id}`}
              >
                <i className="fa fa-file-text-o" /> {t('.CSV')}
@@ -177,7 +178,7 @@ export default class ResultSet extends React.PureComponent<
              text={prepareCopyToClipboardTabularData(data)}
              wrapped={false}
              copyNode={
-                <Button bsSize="small">
+                <Button buttonSize="small">
                  <i className="fa fa-clipboard" /> {t('Clipboard')}
                </Button>
              }
@@ -243,7 +244,7 @@ export default class ResultSet extends React.PureComponent<
            ] {t('was created')} &nbsp;
            <ButtonGroup>
              <Button
-                bsSize="small"
+                buttonSize="small"
                className="m-r-5"
                onClick={() => this.popSelectStar(tempSchema, tempTable)}
              >
@@ -296,9 +297,9 @@ export default class ResultSet extends React.PureComponent<
      if (query.isDataPreview) {
        return (
          <Button
-            bsSize="sm"
+            buttonSize="sm"
            className="fetch"
-            bsStyle="primary"
+            buttonStyle="primary"
            onClick={() =>
              this.reFetchQueryResults({
                ...query,
@@ -312,9 +313,9 @@ export default class ResultSet extends React.PureComponent<
      } else if (query.resultsKey) {
        return (
          <Button
-            bsSize="sm"
+            buttonSize="sm"
            className="fetch"
-            bsStyle="primary"
+            buttonStyle="primary"
            onClick={() => this.fetchResults(query)}
          >
            {t('Refetch Results')}
@@ -336,7 +337,7 @@ export default class ResultSet extends React.PureComponent<
    if (query.trackingUrl) {
      trackingUrl = (
        <Button
-          bsSize="small"
+          buttonSize="small"
          onClick={() => query.trackingUrl && window.open(query.trackingUrl)}
        >
          {t('Track Job')}
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { t } from '@superset-ui/translation';

-import Button, { ButtonProps } from '../../components/Button';
+import Button, { ButtonProps } from 'src/components/Button';

 const NO_OP = () => undefined;

@@ -32,9 +32,6 @@ interface Props {
  stopQuery: () => void;
  sql: string;
 }
-const commonBtnStyle = {
-  width: '140px',
-};

 const RunQueryActionButton = ({
  allowAsync = false,
@@ -51,15 +48,14 @@ const RunQueryActionButton = ({
    !!queryState && ['running', 'pending'].indexOf(queryState) > -1;

  const commonBtnProps: ButtonProps = {
-    bsSize: 'small',
-    bsStyle: btnStyle,
+    buttonSize: 'small',
+    buttonStyle: btnStyle,
    disabled: !dbId,
-    style: commonBtnStyle,
  };

  if (shouldShowStopBtn) {
    return (
-      <Button {...commonBtnProps} onClick={stopQuery}>
+      <Button {...commonBtnProps} cta onClick={stopQuery}>
        <i className="fa fa-stop" /> {t('Stop')}
      </Button>
    );
@@ -67,6 +63,7 @@ const RunQueryActionButton = ({
    return (
      <Button
        {...commonBtnProps}
+        cta
        onClick={() => runQuery(true)}
        key="run-async-btn"
        tooltip={t('Run query asynchronously (Ctrl + ↵)')}
@@ -79,6 +76,7 @@ const RunQueryActionButton = ({
  return (
    <Button
      {...commonBtnProps}
+      cta
      onClick={() => runQuery(false)}
      key="run-btn"
      tooltip={t('Run query synchronously (Ctrl + ↵)')}
--- a/superset-frontend/src/SqlLab/components/SaveQuery.jsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.jsx
@@ -135,7 +135,7 @@ class SaveQuery extends React.PureComponent {
          <Col md={12}>
            {isSaved && (
              <Button
-                bsStyle="primary"
+                buttonStyle="primary"
                onClick={this.onUpdate}
                className="m-r-3"
              >
@@ -143,7 +143,7 @@ class SaveQuery extends React.PureComponent {
              </Button>
            )}
            <Button
-              bsStyle={isSaved ? undefined : 'primary'}
+              buttonStyle={isSaved ? undefined : 'primary'}
              onClick={this.onSave}
              className="m-r-3"
            >
@@ -169,7 +169,7 @@ class SaveQuery extends React.PureComponent {
          backdrop="static"
          triggerNode={
            <Button
-              bsSize="small"
+              buttonSize="small"
              className="toggleSave"
              onClick={this.toggleSave}
            >
--- a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx
+++ b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx
@@ -192,7 +192,7 @@ class ScheduleQueryButton extends React.PureComponent {
          modalBody={this.renderModalBody()}
          triggerNode={
            <Button
-              bsSize="small"
+              buttonSize="small"
              className="toggleSchedule"
              onClick={this.toggleSchedule}
              disabled={this.props.disabled}
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx
+++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx
@@ -22,7 +22,7 @@ import { Popover, OverlayTrigger } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';

-import Button from '../../components/Button';
+import Button from 'src/components/Button';
 import CopyToClipboard from '../../components/CopyToClipboard';
 import { storeQuery } from '../../utils/common';
 import getClientErrorObject from '../../utils/getClientErrorObject';
@@ -110,7 +110,7 @@ class ShareSqlLabQuery extends React.Component {
        shouldUpdatePosition
        overlay={this.renderPopover()}
      >
-        <Button bsSize="small" className="toggleSave">
+        <Button buttonSize="small" className="toggleSave">
          <i className="fa fa-share" /> {t('Share')}
        </Button>
      </OverlayTrigger>
--- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
@@ -398,7 +398,7 @@ class SqlEditor extends React.PureComponent {
            <InputGroup.Button>
              {this.props.database.allow_ctas && (
                <Button
-                  bsSize="small"
+                  buttonSize="small"
                  disabled={this.state.ctas.length === 0}
                  onClick={this.createTableAs.bind(this)}
                  tooltip={ctasToolTip}
@@ -408,7 +408,7 @@ class SqlEditor extends React.PureComponent {
              )}
              {this.props.database.allow_cvas && (
                <Button
-                  bsSize="small"
+                  buttonSize="small"
                  disabled={this.state.ctas.length === 0}
                  onClick={this.createViewAs.bind(this)}
                  tooltip={cvasToolTip}
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
@@ -18,7 +18,7 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { t } from '@superset-ui/translation';
 import TableElement from './TableElement';
 import TableSelector from '../../components/TableSelector';
@@ -140,7 +140,11 @@ export default class SqlEditorLeftBar extends React.PureComponent {
          </div>
        </div>
        {shouldShowReset && (
-          <Button bsSize="small" bsStyle="danger" onClick={this.resetState}>
+          <Button
+            buttonSize="small"
+            buttonStyle="danger"
+            onClick={this.resetState}
+          >
            <i className="fa fa-bomb" /> {t('Reset State')}
          </Button>
        )}
--- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx
+++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx
@@ -29,8 +29,8 @@ import 'brace/theme/textmate';
 import { t } from '@superset-ui/translation';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';

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

 const propTypes = {
  onChange: PropTypes.func,