Migrate buttons

metabase · Mar 13, 2024 · bea1d89 · bea1d89
1 parent 1f7c00e
commit bea1d89
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 27 deletions.
diff --git a/.../databases/components/DatabaseEditApp/Sidebar/ModelCachingControl/ModelCachingControl.tsx b/.../databases/components/DatabaseEditApp/Sidebar/ModelCachingControl/ModelCachingControl.tsx
@@ -8,6 +8,7 @@ import {
 import ActionButton from "metabase/components/ActionButton";
 import TippyPopover from "metabase/components/Popover/TippyPopover";
 import ExternalLink from "metabase/core/components/ExternalLink";
+import ButtonsS from "metabase/css/components/buttons.module.css";
 import { useDispatch } from "metabase/lib/redux";
 import MetabaseSettings from "metabase/lib/settings";
 import { MetabaseApi } from "metabase/services";
@@ -93,7 +94,7 @@ function ModelCachingControl({ database }: Props) {
     <div>
       <ControlContainer>
         <ActionButton
-          className="Button"
+          className={ButtonsS.Button}
           normalText={normalText}
           failedText={t`Failed`}
           successText={t`Done`}

diff --git a/frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx b/frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx
@@ -8,6 +8,7 @@ import { t } from "ttag";
 import LoadingSpinner from "metabase/components/LoadingSpinner";
 import Modal from "metabase/components/Modal";
 import FormMessage from "metabase/components/form/FormMessage";
+import ButtonsS from "metabase/css/components/buttons.module.css";
 import CS from "metabase/css/core/index.css";
 import DatabaseSyncModal from "metabase/databases/containers/DatabaseSyncModal";
 import { isSyncCompleted } from "metabase/lib/syncing";
@@ -78,7 +79,11 @@ export default class DatabaseList extends Component {
           {isAdmin && (
             <Link
               to="/admin/databases/create"
-              className="Button Button--primary float-right"
+              className={cx(
+                ButtonsS.Button,
+                ButtonsS.ButtonPrimary,
+                "float-right",
+              )}
             >{t`Add database`}</Link>
           )}
           <h2 className="PageTitle">{t`Databases`}</h2>

diff --git a/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx b/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx
@@ -5,6 +5,8 @@ import { t } from "ttag";
 
 import ActionButton from "metabase/components/ActionButton";
 import ModalContent from "metabase/components/ModalContent";
+import ButtonsS from "metabase/css/components/buttons.module.css";
+import CS from "metabase/css/core/index.css";
 
 export default class ObjectRetireModal extends Component {
   constructor(props, context) {
@@ -46,14 +48,14 @@ export default class ObjectRetireModal extends Component {
           </div>
 
           <div className="Form-actions ml-auto">
-            <a className="Button" onClick={this.props.onClose}>
+            <a className={ButtonsS.Button} onClick={this.props.onClose}>
               {t`Cancel`}
             </a>
             <ActionButton
               actionFn={this.handleSubmit.bind(this)}
-              className={cx("Button ml2", {
-                "Button--danger": valid,
-                disabled: !valid,
+              className={cx(ButtonsS.Button, CS.ml2, {
+                [ButtonsS.ButtonDanger]: valid,
+                [CS.disabled]: !valid,
               })}
               normalText={t`Retire`}
               activeText={t`Retiring…`}

diff --git a/frontend/src/metabase/admin/datamodel/components/PartialQueryBuilder.jsx b/frontend/src/metabase/admin/datamodel/components/PartialQueryBuilder.jsx
@@ -1,11 +1,13 @@
 /* eslint-disable react/prop-types */
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Component } from "react";
 import { connect } from "react-redux";
 import { t } from "ttag";
 import _ from "underscore";
 
 import Link from "metabase/core/components/Link";
+import ButtonsS from "metabase/css/components/buttons.module.css";
 import Tables from "metabase/entities/tables";
 import * as Urls from "metabase/lib/urls";
 import { getMetadata } from "metabase/selectors/metadata";
@@ -101,7 +103,7 @@ class PartialQueryBuilder extends Component {
               to={previewUrl}
               target={window.OSX ? null : "_blank"}
               rel="noopener noreferrer"
-              className="Button Button--primary"
+              className={cx(ButtonsS.Button, ButtonsS.ButtonPrimary)}
             >{t`Preview`}</Link>
           </div>
         </GuiQueryEditor>

diff --git a/frontend/src/metabase/admin/datamodel/containers/DataModelApp/ModelEducationalModal.jsx b/frontend/src/metabase/admin/datamodel/containers/DataModelApp/ModelEducationalModal.jsx
@@ -1,8 +1,10 @@
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 
 import Modal from "metabase/components/Modal";
 import ModalContent from "metabase/components/ModalContent";
+import ButtonsS from "metabase/css/components/buttons.module.css";
 import MetabaseSettings from "metabase/lib/settings";
 
 import {
@@ -43,7 +45,7 @@ export function ModelEducationalModal({ isOpen, onClose }) {
           <CenteredRow>
             <ButtonLink
               href={EDUCATION_URL}
-              className="Button Button--primary"
+              className={cx(ButtonsS.Button, ButtonsS.ButtonPrimary)}
             >{t`Learn how`}</ButtonLink>
           </CenteredRow>
         </Content>

diff --git a/...etabase/admin/datamodel/metadata/components/FieldGeneralSettings/FieldGeneralSettings.tsx b/...etabase/admin/datamodel/metadata/components/FieldGeneralSettings/FieldGeneralSettings.tsx
@@ -1,3 +1,4 @@
+import cx from "classnames";
 import { useCallback, useMemo } from "react";
 import { connect } from "react-redux";
 import { t } from "ttag";
@@ -6,6 +7,8 @@ import ActionButton from "metabase/components/ActionButton";
 import InputBlurChange from "metabase/components/InputBlurChange";
 import type { SelectChangeEvent } from "metabase/core/components/Select/Select";
 import Select from "metabase/core/components/Select/Select";
+import ButtonsS from "metabase/css/components/buttons.module.css";
+import CS from "metabase/css/core/index.css";
 import Fields from "metabase/entities/fields";
 import * as MetabaseCore from "metabase/lib/core";
 import type Field from "metabase-lib/v1/metadata/Field";
@@ -335,15 +338,15 @@ const FieldCachedValuesSection = ({
         description={t`Metabase can scan the values for this field to enable checkbox filters in dashboards and questions.`}
       />
       <ActionButton
-        className="Button mr2"
+        className={cx(ButtonsS.Button, CS.mr2)}
         actionFn={handleRescanFieldValues}
         normalText={t`Re-scan this field`}
         activeText={t`Starting…`}
         failedText={t`Failed to start scan`}
         successText={t`Scan triggered!`}
       />
       <ActionButton
-        className="Button Button--danger"
+        className={cx(ButtonsS.Button, ButtonsS.ButtonDanger)}
         actionFn={handleDiscardFieldValues}
         normalText={t`Discard cached field values`}
         activeText={t`Starting…`}

diff --git a/...abase/admin/datamodel/metadata/components/MetadataTableSettings/MetadataTableSettings.tsx b/...abase/admin/datamodel/metadata/components/MetadataTableSettings/MetadataTableSettings.tsx
@@ -6,6 +6,7 @@ import _ from "underscore";
 
 import ActionButton from "metabase/components/ActionButton";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
+import ButtonsS from "metabase/css/components/buttons.module.css";
 import CS from "metabase/css/core/index.css";
 import Databases from "metabase/entities/databases";
 import Schemas from "metabase/entities/schemas";
@@ -110,15 +111,15 @@ const MetadataTableSettings = ({
             description={t`Metabase can scan the values in this table to enable checkbox filters in dashboards and questions.`}
           />
           <ActionButton
-            className="Button mr2"
+            className={cx(ButtonsS.Button, CS.mr2)}
             actionFn={handleRescanTableFieldValues}
             normalText={t`Re-scan this table`}
             activeText={t`Starting…`}
             failedText={t`Failed to start scan`}
             successText={t`Scan triggered!`}
           />
           <ActionButton
-            className="Button Button--danger"
+            className={cx(ButtonsS.Button, ButtonsS.ButtonDanger)}
             actionFn={handleDiscardTableFieldValues}
             normalText={t`Discard cached field values`}
             activeText={t`Starting…`}

diff --git a/frontend/src/metabase/admin/people/components/AddRow.jsx b/frontend/src/metabase/admin/people/components/AddRow.jsx
@@ -3,6 +3,9 @@ import PropTypes from "prop-types";
 import { forwardRef } from "react";
 import { t } from "ttag";
 
+import ButtonsS from "metabase/css/components/buttons.module.css";
+import CS from "metabase/css/core/index.css";
+
 export const AddRow = forwardRef(function AddRow(
   {
     value,
@@ -35,7 +38,9 @@ export const AddRow = forwardRef(function AddRow(
         {t`Cancel`}
       </span>
       <button
-        className={cx("Button ml2", { "Button--primary": !!isValid })}
+        className={cx(ButtonsS.Button, CS.ml2, {
+          [ButtonsS.ButtonPrimary]: !!isValid,
+        })}
         disabled={!isValid}
         onClick={onDone}
       >

diff --git a/frontend/src/metabase/admin/people/components/GroupsListing.jsx b/frontend/src/metabase/admin/people/components/GroupsListing.jsx
@@ -15,6 +15,8 @@ import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
 import UserAvatar from "metabase/components/UserAvatar";
 import Input from "metabase/core/components/Input";
 import Link from "metabase/core/components/Link";
+import ButtonsS from "metabase/css/components/buttons.module.css";
+import CS from "metabase/css/core/index.css";
 import * as MetabaseAnalytics from "metabase/lib/analytics";
 import { color } from "metabase/lib/colors";
 import {
@@ -167,8 +169,8 @@ function EditingGroupRow({
           onClick={onCancelClicked}
         >{t`Cancel`}</span>
         <button
-          className={cx("Button ml2", {
-            "Button--primary": textIsValid && textHasChanged,
+          className={cx(ButtonsS.Button, CS.ml2, {
+            [ButtonsS.ButtonPrimary]: textIsValid && textHasChanged,
           })}
           disabled={!textIsValid || !textHasChanged}
           onClick={onDoneClicked}

diff --git a/...admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.jsx b/...admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.jsx
@@ -1,9 +1,12 @@
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 
 import HostingInfoLink from "metabase/admin/settings/components/widgets/HostingInfoLink";
 import Text from "metabase/components/type/Text";
 import ExternalLink from "metabase/core/components/ExternalLink";
+import ButtonsS from "metabase/css/components/buttons.module.css";
+import CS from "metabase/css/core/index.css";
 import { useSelector } from "metabase/lib/redux";
 import MetabaseSettings from "metabase/lib/settings";
 import { getIsPaidPlan } from "metabase/selectors/settings";
@@ -77,7 +80,12 @@ function NewVersionAvailable({ currentVersion }) {
           {t`You're running ${currentVersion}`}
         </span>
         <ExternalLink
-          className="Button Button--white Button--medium borderless"
+          className={cx(
+            ButtonsS.Button,
+            ButtonsS.ButtonWhite,
+            ButtonsS.ButtonMedium,
+            CS.borderless,
+          )}
           href={
             "https://www.metabase.com/docs/" +
             latestVersion +

diff --git a/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx b/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx
@@ -9,6 +9,8 @@ import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import Modal from "metabase/components/Modal";
 import { Ellipsified } from "metabase/core/components/Ellipsified";
 import Select, { Option } from "metabase/core/components/Select";
+import ButtonsS from "metabase/css/components/buttons.module.css";
+import CS from "metabase/css/core/index.css";
 import { uuid } from "metabase/lib/utils";
 import { SettingsApi, GeoJSONApi } from "metabase/services";
 import LeafletChoropleth from "metabase/visualizations/components/LeafletChoropleth";
@@ -145,7 +147,7 @@ export default class CustomGeoJSONWidget extends Component {
           <SettingHeader setting={setting} />
           {!this.state.map && (
             <button
-              className="Button Button--primary ml1"
+              className={cx(ButtonsS.Button, ButtonsS.ButtonPrimary, CS.ml1)}
               onClick={() =>
                 this.setState({
                   map: {
@@ -234,7 +236,9 @@ const ListMaps = ({ maps, onEditMap, onDeleteMap }) => (
                   action={() => onDeleteMap(map)}
                   title={t`Delete custom map`}
                 >
-                  <button className="Button Button--danger">{t`Remove`}</button>
+                  <button
+                    className={cx(ButtonsS.Button, ButtonsS.ButtonDanger)}
+                  >{t`Remove`}</button>
                 </Confirm>
               </td>
             </tr>
@@ -343,9 +347,9 @@ const EditMap = ({
               onChange={e => onMapChange({ ...map, url: e.target.value })}
             />
             <button
-              className={cx("Button ml1", {
-                "Button--primary": !geoJson,
-                disabled: !map.url,
+              className={cx(ButtonsS.Button, CS.ml1, {
+                [ButtonsS.ButtonPrimary]: !geoJson,
+                [CS.disabled]: !map.url,
               })}
               onClick={onLoadGeoJson}
             >
@@ -382,7 +386,7 @@ const EditMap = ({
             error={geoJsonError}
           >
             {() => (
-              <div className="spread relative">
+              <div className={cx(CS.spread, CS.relative)}>
                 <ChoroplethPreview geoJson={geoJson} />
               </div>
             )}
@@ -397,12 +401,12 @@ const EditMap = ({
     <div className="py1 flex">
       <div className="ml-auto">
         <button
-          className={cx("Button Button")}
+          className={ButtonsS.Button}
           onClick={onCancel}
         >{t`Cancel`}</button>
         <button
-          className={cx("Button Button--primary ml1", {
-            disabled:
+          className={cx(ButtonsS.Button, ButtonsS.ButtonPrimary, CS.ml1, {
+            [CS.disabled]:
               !map.name || !map.url || !map.region_name || !map.region_key,
           })}
           onClick={onSave}

diff --git a/frontend/src/metabase/admin/settings/slack/components/SlackAppsLink/SlackAppsLink.tsx b/frontend/src/metabase/admin/settings/slack/components/SlackAppsLink/SlackAppsLink.tsx
@@ -1,5 +1,8 @@
+import cx from "classnames";
 import { t } from "ttag";
 
+import ButtonsS from "metabase/css/components/buttons.module.css";
+
 import { LinkIcon, LinkRoot, LinkText } from "./SlackAppsLink.styled";
 
 export interface SlackAppsLinkProps {
@@ -13,7 +16,7 @@ const SlackAppsLink = ({ manifest }: SlackAppsLinkProps): JSX.Element => {
 
   return (
     <LinkRoot
-      className="Button Button--primary"
+      className={cx(ButtonsS.Button, ButtonsS.ButtonPrimary)}
       href={`https://api.slack.com${link}`}
     >
       <LinkText>{t`Create Slack App`}</LinkText>

diff --git a/...d/src/metabase/admin/tasks/containers/ModelCacheRefreshJobs/ModelCacheRefreshJobModal.tsx b/...d/src/metabase/admin/tasks/containers/ModelCacheRefreshJobs/ModelCacheRefreshJobModal.tsx
@@ -7,6 +7,7 @@ import _ from "underscore";
 import ModalContent from "metabase/components/ModalContent";
 import Button from "metabase/core/components/Button";
 import Link from "metabase/core/components/Link";
+import ButtonsS from "metabase/css/components/buttons.module.css";
 import PersistedModels from "metabase/entities/persisted-models";
 import type { ModelCacheRefreshStatus } from "metabase-types/api";
 
@@ -69,7 +70,7 @@ function ModelCacheRefreshJobModal({
       >{t`Retry now`}</Button>,
       <Link
         key="edit"
-        className="Button"
+        className={ButtonsS.Button}
         to={`/model/${persistedModel.card_id}/query`}
       >{t`Edit model`}</Link>,
     ];