Global to local css migration - Buttons

e2e/test/scenarios/admin/datamodel/metrics.cy.spec.js

@@ -162,9 +162,10 @@ describe("scenarios > admin > datamodel > metrics", () => {
     });
 
     it("should see a newly asked question in its questions list", () => {
-      // Ask a new qustion
+      // Ask a new question
       cy.visit("/reference/metrics/1/questions");
-      cy.get(".full").find(".Button").click();
+
+      cy.button("Ask a question").click();
 
       filter();
       filterField("Total", {

e2e/test/scenarios/admin/datamodel/segments.cy.spec.js

@@ -118,7 +118,8 @@ describe("scenarios > admin > datamodel > segments", () => {
     it("should see a newly asked question in its questions list", () => {
       // Ask question
       cy.visit("/reference/segments/1/questions");
-      cy.get(".full .Button").click();
+
+      cy.button("Ask a question").click();
       cy.findAllByText("37.65");
 
       filter();

e2e/test/scenarios/filters/filter.cy.spec.js

@@ -694,9 +694,10 @@ describe("scenarios > question > filter", () => {
     cy.findByText("Custom Expression").click();
     cy.get(".ace_text-input").type("[Tax] > 0");
 
-    // Tab switches the focus to the "Done" button
+    // Tab switches the focus to the "Cancel" button
     cy.realPress("Tab");
-    cy.focused().should("have.attr", "class").and("contains", "Button");
+
+    cy.focused().should("match", "button").and("have.text", "Cancel");
   });
 
   it("should allow choosing a suggestion with Tab", () => {
@@ -717,9 +718,10 @@ describe("scenarios > question > filter", () => {
     // Finish to complete a valid expression, i.e. [Tax] > 42
     cy.get(".ace_text-input").type("> 42");
 
-    // Tab switches the focus to the "Done" button
+    // Tab switches the focus to the "Cancel" button
     cy.realPress("Tab");
-    cy.focused().should("have.attr", "class").and("contains", "Button");
+
+    cy.focused().should("match", "button").and("have.text", "Cancel");
   });
 
   it("should allow hiding the suggestion list with Escape", () => {

e2e/test/scenarios/onboarding/reference/databases.cy.spec.js

@@ -56,7 +56,9 @@ describe("scenarios > reference > databases", () => {
     cy.visit("/reference/databases/1");
     // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
     cy.contains("Edit").click();
-    cy.get(".wrapper input").clear().type("My definitely profitable business");
+    cy.findByPlaceholderText("Sample Database")
+      .clear()
+      .type("My definitely profitable business");
     // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
     cy.contains("Save").click();
     // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage

e2e/test/scenarios/visualizations-charts/maps.cy.spec.js

@@ -76,9 +76,7 @@ describe("scenarios > visualizations > maps", () => {
       { visitQuestion: true },
     );
 
-    // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-    cy.findByText("Visualization").closest(".Button").as("vizButton");
-    cy.get("@vizButton").click();
+    cy.button("Visualization").click();
     cy.findByTestId("display-options-sensible").as("sensibleOptions");
 
     cy.get("@sensibleOptions").within(() => {

enterprise/frontend/src/metabase-enterprise/sandboxes/components/EditSandboxingModal/EditSandboxingModal.tsx

@@ -1,3 +1,4 @@
+import cx from "classnames";
 import type * as React from "react";
 import { useState } from "react";
 import { useAsyncFn } from "react-use";
@@ -9,6 +10,7 @@ import QuestionLoader from "metabase/containers/QuestionLoader";
 import QuestionPicker from "metabase/containers/QuestionPicker";
 import Button from "metabase/core/components/Button";
 import Radio from "metabase/core/components/Radio";
+import CS from "metabase/css/core/index.css";
 import { EntityName } from "metabase/entities/containers/EntityName";
 import { GTAPApi } from "metabase/services";
 import type { IconName } from "metabase/ui";
@@ -152,7 +154,7 @@ const EditSandboxingModal = ({
         )}
         {(!shouldUseSavedQuestion || policy.card_id != null) &&
           (hasAttributesOptions || hasValidMappings ? (
-            <div className="p3 border-top border-bottom">
+            <div className={cx(CS.p3, CS.borderTop, CS.borderBottom)}>
               {shouldUseSavedQuestion && (
                 <div className="pb2">
                   {t`You can optionally add additional filters here based on user attributes. These filters will be applied on top of any filters that are already in this saved question.`}

frontend/src/metabase/App.tsx

@@ -13,6 +13,7 @@ import {
 } from "metabase/components/ErrorPages";
 import { UndoListing } from "metabase/containers/UndoListing";
 import { ContentViewportContext } from "metabase/core/context/ContentViewportContext";
+import CS from "metabase/css/core/index.css";
 import ScrollToTop from "metabase/hoc/ScrollToTop";
 import { initializeIframeResizer } from "metabase/lib/dom";
 import AppBar from "metabase/nav/containers/AppBar";
@@ -97,7 +98,7 @@ function App({
   return (
     <ErrorBoundary onError={onError}>
       <ScrollToTop>
-        <AppContainer className="spread">
+        <AppContainer className={CS.spread}>
           <KeyboardTriggeredErrorModal />
           <AppBanner location={location} />
           {isAppBarVisible && <AppBar />}

frontend/src/metabase/account/login-history/components/LoginHistory/LoginHistory.jsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/prop-types */
+import cx from "classnames";
 import moment from "moment-timezone"; // eslint-disable-line no-restricted-imports -- deprecated usage
 import { t } from "ttag";
 import _ from "underscore";
@@ -8,6 +9,7 @@ import Card from "metabase/components/Card";
 import EmptyState from "metabase/components/EmptyState";
 import Label from "metabase/components/type/Label";
 import Text from "metabase/components/type/Text";
+import CS from "metabase/css/core/index.css";
 
 import {
   LoginActiveLabel,
@@ -17,18 +19,21 @@ import {
 } from "./LoginHistory.styled";
 
 const LoginHistoryItem = ({ item }) => (
-  <Card className="my2 py1" style={{ paddingLeft: 20, paddingRight: 20 }}>
+  <Card
+    className={cx(CS.my2, CS.py1)}
+    style={{ paddingLeft: 20, paddingRight: 20 }}
+  >
     <LoginItemContent>
       <div>
         <Label mb="0">
           {item.location} -{" "}
-          <span className="text-medium">{item.ip_address}</span>
+          <span className={CS.textMedium}>{item.ip_address}</span>
         </Label>
         <Text style={{ marginTop: -8 }}>{item.device_description}</Text>
       </div>
       <LoginItemInfo>
         {item.active && (
-          <LoginActiveLabel className="pr2">{t`Active`}</LoginActiveLabel>
+          <LoginActiveLabel className={CS.pr2}>{t`Active`}</LoginActiveLabel>
         )}
         <Label>{item.time}</Label>
       </LoginItemInfo>

frontend/src/metabase/admin/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`}

frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx

@@ -8,6 +8,8 @@ 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";
 import { PLUGIN_FEATURE_LEVEL_PERMISSIONS } from "metabase/plugins";
@@ -72,12 +74,16 @@ export default class DatabaseList extends Component {
     const error = deletionError || addSampleDatabaseError;
 
     return (
-      <div className="wrapper" data-testid="database-list">
+      <div className={CS.wrapper} data-testid="database-list">
         <section className="PageHeader px2 clearfix">
           {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>
@@ -142,7 +148,7 @@ export default class DatabaseList extends Component {
             <div className="pt4">
               <span
                 className={cx("p2 text-italic", {
-                  "border-top": databases && databases.length > 0,
+                  [CS.borderTop]: databases && databases.length > 0,
                 })}
               >
                 {isAddingSampleDatabase ? (

frontend/src/metabase/admin/datamodel/components/GuiQueryEditor/GuiQueryEditor.jsx

@@ -8,6 +8,7 @@ import { t } from "ttag";
 
 import IconBorder from "metabase/components/IconBorder";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import CS from "metabase/css/core/index.css";
 import { DatabaseSchemaAndTableDataSelector } from "metabase/query_builder/components/DataSelector";
 import { Icon } from "metabase/ui";
 import * as Lib from "metabase-lib";
@@ -317,7 +318,7 @@ export class GuiQueryEditor extends Component {
         </div>
         <div className="GuiBuilder-row flex flex-full">
           {this.renderViewSection()}
-          <div className="flex-full" />
+          <div className={CS.flexFull} />
           {this.props.children}
         </div>
       </div>

frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx

@@ -1,9 +1,11 @@
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { createRef, Component } from "react";
 import { t } from "ttag";
 
 import ModalWithTrigger from "metabase/components/ModalWithTrigger";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import CS from "metabase/css/core/index.css";
 import { capitalize } from "metabase/lib/formatting";
 import { Icon } from "metabase/ui";
 
@@ -60,7 +62,7 @@ export default class ObjectActionsSelect extends Component {
                 {t`Revision History`}
               </ActionLink>
             </li>
-            <li className="mt1 border-top">
+            <li className={cx(CS.mt1, CS.borderTop)}>
               <ModalWithTrigger
                 ref={this.retireModal}
                 triggerElement={t`Retire ${objectTypeLocalized}`}

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…`}

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>

frontend/src/metabase/admin/datamodel/components/revisions/RevisionHistory.jsx

@@ -1,10 +1,12 @@
 /* eslint-disable react/prop-types */
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Component } from "react";
 import { t } from "ttag";
 
 import Breadcrumbs from "metabase/components/Breadcrumbs";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import CS from "metabase/css/core/index.css";
 import Tables from "metabase/entities/tables";
 import { assignUserColors } from "metabase/lib/formatting";
 
@@ -31,7 +33,7 @@ class RevisionHistory extends Component {
     return (
       <LoadingAndErrorWrapper loading={!object || !revisions}>
         {() => (
-          <div className="wrapper">
+          <div className={CS.wrapper}>
             <Breadcrumbs
               className="py4"
               crumbs={[
@@ -41,7 +43,7 @@ class RevisionHistory extends Component {
                 [this.props.objectType + t` History`],
               ]}
             />
-            <div className="wrapper py4" style={{ maxWidth: 950 }}>
+            <div className={cx(CS.wrapper, "py4")} style={{ maxWidth: 950 }}>
               <h2 className="mb4">
                 {t`Revision History for`} &quot;{object.name}&quot;
               </h2>

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>

frontend/src/metabase/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…`}

frontend/src/metabase/admin/datamodel/metadata/components/MetadataFieldSettings/MetadataFieldSettings.tsx

@@ -6,6 +6,7 @@ import { AdminLayout } from "metabase/components/AdminLayout";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
 import { LeftNavPane, LeftNavPaneItem } from "metabase/components/LeftNavPane";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import CS from "metabase/css/core/index.css";
 import Databases from "metabase/entities/databases";
 import Fields from "metabase/entities/fields";
 import Schemas from "metabase/entities/schemas";
@@ -105,7 +106,7 @@ const MetadataFieldSettings = ({
         />
       }
     >
-      <div className="wrapper">
+      <div className={CS.wrapper}>
         <FieldBreadcrumbs
           database={database}
           schema={schema}