Convert `inputs.module.css` to CSS Modules (#40163)

frontend/src/metabase/admin/datamodel/components/FormInput/FormInput.tsx

@@ -2,6 +2,8 @@ import cx from "classnames";
 import type { InputHTMLAttributes, Ref } from "react";
 import { forwardRef } from "react";
 
+import CS from "metabase/css/core/index.css";
+
 import { FormInputRoot } from "./FormInput.styled";
 
 interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -18,7 +20,7 @@ const FormInput = forwardRef(function FormInput(
       {...props}
       value={props.value ?? ""}
       ref={ref}
-      className={cx("input", className)}
+      className={cx(CS.input, className)}
       type="text"
       touched={touched}
       error={error}

frontend/src/metabase/admin/datamodel/components/FormTextArea/FormTextArea.tsx

@@ -2,6 +2,8 @@ import cx from "classnames";
 import type { Ref, TextareaHTMLAttributes } from "react";
 import { forwardRef } from "react";
 
+import CS from "metabase/css/core/index.css";
+
 import { FormTextAreaRoot } from "./FormTextArea.styled";
 
 interface FormTextAreaProps
@@ -18,7 +20,7 @@ const FormTextArea = forwardRef(function FormTextArea(
     <FormTextAreaRoot
       {...props}
       ref={ref}
-      className={cx("input", className)}
+      className={cx(CS.input, className)}
       touched={touched}
       error={error}
     />

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

@@ -41,7 +41,7 @@ export default class ObjectRetireModal extends Component {
             <p className="text-paragraph">{t`If you're sure you want to retire this ${objectType}, please write a quick explanation of why it's being retired:`}</p>
             <textarea
               ref={this.revisionMessage}
-              className="input full"
+              className={cx(CS.input, CS.full)}
               placeholder={t`This will show up in the activity feed and in an email that will be sent to anyone on your team who created something that uses this ${objectType}.`}
               onChange={e => this.setState({ valid: !!e.target.value })}
             />

frontend/src/metabase/admin/datamodel/components/filters/pickers/DefaultPicker/DefaultPicker.tsx

@@ -4,6 +4,7 @@ import type { ReactElement } from "react";
 import { t } from "ttag";
 
 import FieldValuesWidget from "metabase/components/FieldValuesWidget";
+import CS from "metabase/css/core/index.css";
 import { getCurrencySymbol } from "metabase/lib/formatting";
 import {
   getFilterArgumentFormatOptions,
@@ -135,7 +136,7 @@ export function DefaultPicker({
         return (
           <FieldValuesWidget
             key={index}
-            className="input"
+            className={CS.input}
             value={values}
             onChange={onValuesChange}
             multi={operator.multi}

frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/HoursMinutesInput.jsx

@@ -2,6 +2,7 @@
 import moment from "moment-timezone"; // eslint-disable-line no-restricted-imports -- deprecated usage
 
 import NumericInput from "metabase/components/NumericInput";
+import CS from "metabase/css/core/index.css";
 import { has24HourModeSetting } from "metabase/lib/time";
 import { Icon } from "metabase/ui";
 
@@ -37,7 +38,7 @@ const HoursMinutesInput = ({
     <span className="px1">:</span>
     <NumericInput
       data-testid="minutes-input"
-      className="input"
+      className={CS.input}
       style={{ height: 36 }}
       size={2}
       maxLength={2}

frontend/src/metabase/admin/datamodel/components/filters/pickers/TextPicker.jsx

 /* eslint-disable react/prop-types */
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Component } from "react";
 import { t } from "ttag";
 import _ from "underscore";
 
+import CS from "metabase/css/core/index.css";
+
 import { TextPickerArea, TextPickerInput } from "./TextPicker.styled";
 
 export default class TextPicker extends Component {
@@ -81,7 +84,7 @@ export default class TextPicker extends Component {
           )}
           {!isSingleLine && (
             <TextPickerArea
-              className="input block full"
+              className={cx(CS.block, CS.full, CS.input)}
               type="text"
               value={this.state.fieldString}
               onChange={e => this.setValue(e.target.value)}
@@ -96,7 +99,7 @@ export default class TextPicker extends Component {
 
           {isSingleLine && (
             <TextPickerInput
-              className="input block full"
+              className={cx(CS.block, CS.full, CS.input)}
               style={{
                 paddingLeft: this.props.prefix
                   ? `${this.props.prefix.length}.2rem`

frontend/src/metabase/admin/people/components/AddRow.jsx

@@ -26,7 +26,7 @@ export const AddRow = forwardRef(function AddRow(
     >
       {children}
       <input
-        className="input--borderless h3 ml1 flex-full"
+        className={cx(CS.inputBorderless, CS.h3, CS.ml1, CS.flexFull)}
         type="text"
         value={value}
         placeholder={placeholder}

frontend/src/metabase/admin/settings/components/widgets/GroupMappingsWidget/AddMappingRow/AddMappingRow.tsx

+import cx from "classnames";
 import type * as React from "react";
 import { useState } from "react";
 import { t } from "ttag";
 
 import type { MappingsType } from "metabase/admin/types";
 import Button from "metabase/core/components/Button";
+import CS from "metabase/css/core/index.css";
 
 type AddMappingRowProps = {
   mappings: MappingsType;
@@ -46,7 +48,7 @@ function AddMappingRow({
         <div className="m2 p1 bordered border-brand justify-between rounded relative flex align-center">
           <input
             aria-label="new-group-mapping-name-input"
-            className="input--borderless h3 ml1 flex-full"
+            className={cx(CS.inputBorderless, CS.h3, CS.ml1, CS.flexFull)}
             type="text"
             value={value}
             placeholder={placeholder}

frontend/src/metabase/components/CopyWidget/CopyWidget.jsx

@@ -2,6 +2,8 @@
 import cx from "classnames";
 import { Component } from "react";
 
+import CS from "metabase/css/core/index.css";
+
 import { CopyWidgetButton } from "./CopyWidget.styled";
 
 export default class CopyWidget extends Component {
@@ -10,7 +12,9 @@ export default class CopyWidget extends Component {
     return (
       <div className="flex relative" style={style}>
         <input
-          className={cx("Form-input flex-full", { "no-focus": !onChange })}
+          className={cx("Form-input flex-full", {
+            [CS.noFocus]: !onChange,
+          })}
           style={{
             paddingRight: 40,
           }}

frontend/src/metabase/components/TokenField/TokenField.tsx

@@ -6,6 +6,7 @@ import { findDOMNode } from "react-dom";
 import _ from "underscore";
 
 import TippyPopover from "metabase/components/Popover/TippyPopover";
+import CS from "metabase/css/core/index.css";
 import { isObscured } from "metabase/lib/dom";
 import {
   KEYCODE_ESCAPE,
@@ -607,7 +608,7 @@ class _TokenField extends Component<TokenFieldProps, TokenFieldState> {
             <input
               ref={this.inputRef}
               style={{ ...defaultStyleValue, ...valueStyle }}
-              className={cx("full no-focus borderless px1")}
+              className={cx(CS.noFocus, "full borderless px1")}
               // set size to be small enough that it fits in a parameter.
               size={10}
               placeholder={placeholder}

frontend/src/metabase/containers/ItemPicker/ItemPickerView.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from "react";
 import { t } from "ttag";
 
 import Breadcrumbs from "metabase/components/Breadcrumbs";
+import CS from "metabase/css/core/index.css";
 import Search from "metabase/entities/search";
 import type { IconProps } from "metabase/ui";
 import { Icon } from "metabase/ui";
@@ -97,7 +98,7 @@ function ItemPickerView<TId>({
         <ItemPickerHeader data-testid="item-picker-header">
           <SearchInput
             type="search"
-            className="input"
+            className={CS.input}
             placeholder={t`Search`}
             autoFocus
             onKeyPress={handleSearchInputKeyPress}

frontend/src/metabase/css/core/inputs.module.css

@@ -3,7 +3,6 @@
   --input-border-radius: 8px;
 }
 
-:global(.input),
 .input {
   color: var(--color-text-dark);
   font-size: 1.12em;
@@ -14,38 +13,37 @@
 }
 
 /* React doesn't receive events from IE11:s input clear button so don't show it */
-:global(.input::-ms-clear) {
+.input::-ms-clear {
   display: none;
   width: 0;
   height: 0;
 }
 
-:global(.input:focus),
-.input:focus:focus {
+.input:focus {
   outline: none;
   border: 1px solid var(--color-brand);
   transition: border 0.3s linear;
   color: var(--color-text-dark);
 }
 
-:global(.input--borderless),
-:global(.input--borderless:focus) {
+.inputBorderless,
+.inputBorderless:focus {
   box-shadow: none;
   outline: 0;
   border: none !important;
   background: transparent;
 }
 
-:global(.input:disabled) {
+.input:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-:global(.no-focus:focus) {
+.noFocus:focus {
   outline: 0;
 }
 
 /* prevent safari from forcing type="search" styles - metabase#5225 */
-:global(.input[type="search"]) {
+.input[type="search"] {
   -webkit-appearance: none;
 }

frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidget.jsx

@@ -5,6 +5,7 @@ import { t } from "ttag";
 import _ from "underscore";
 
 import FieldValuesWidget from "metabase/components/FieldValuesWidget";
+import CS from "metabase/css/core/index.css";
 import { UpdateFilterButton } from "metabase/parameters/components/UpdateFilterButton";
 import {
   WidgetRoot,
@@ -75,7 +76,7 @@ export default function ParameterFieldWidget({
           return (
             <FieldValuesWidget
               key={index}
-              className={cx("input", numFields - 1 !== index && "mb1")}
+              className={cx(CS.input, numFields - 1 !== index && CS.mb1)}
               value={value}
               parameter={parameter}
               parameters={parameters}

frontend/src/metabase/query_builder/components/LimitInput.tsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import type * as React from "react";
 
 import ButtonsS from "metabase/css/components/buttons.module.css";
+import CS from "metabase/css/core/index.css";
 
 const DEFAULT_STYLE = {
   borderWidth: 2,
@@ -28,7 +29,7 @@ const LimitInput = ({
   ...props
 }: LimitInputProps) => (
   <input
-    className={cx("input", className, {
+    className={cx(CS.input, className, {
       // HACK: reuse Button styles
       [ButtonsS.ButtonSmall]: small,
       [ButtonsS.ButtonMedium]: medium,

frontend/src/metabase/query_builder/components/template_tags/SnippetSidebar/SnippetSidebar.jsx

@@ -9,6 +9,7 @@ import _ from "underscore";
 import { canonicalCollectionId } from "metabase/collections/utils";
 import TippyPopoverWithTrigger from "metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger";
 import ButtonsS from "metabase/css/components/buttons.module.css";
+import CS from "metabase/css/core/index.css";
 import Search from "metabase/entities/search";
 import SnippetCollections from "metabase/entities/snippet-collections";
 import Snippets from "metabase/entities/snippets";
@@ -123,12 +124,12 @@ class SnippetSidebarInner extends React.Component {
               <div className="flex-full">
                 <div
                   /* Hide the search input by collapsing dimensions rather than `display: none`.
-                     This allows us to immediately focus on it when showSearch is set to true.*/
+                                                         This allows us to immediately focus on it when showSearch is set to true.*/
                   style={showSearch ? {} : { width: 0, height: 0 }}
                   className="text-heavy h3 overflow-hidden"
                 >
                   <input
-                    className="input input--borderless p0"
+                    className={cx(CS.input, CS.inputBorderless, CS.p0)}
                     ref={e => (this.searchBox = e)}
                     onChange={e =>
                       this.setState({ searchString: e.target.value })

frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx

 /* eslint-disable react/prop-types */
+import cx from "classnames";
 import { Fragment } from "react";
 import { t } from "ttag";
 import _ from "underscore";
@@ -6,6 +7,7 @@ import _ from "underscore";
 import NumericInput from "metabase/components/NumericInput";
 import Button from "metabase/core/components/Button";
 import ColorSelector from "metabase/core/components/ColorSelector";
+import CS from "metabase/css/core/index.css";
 import { color } from "metabase/lib/colors";
 import { getAccentColors } from "metabase/lib/colors/groups";
 import { Icon } from "metabase/ui";
@@ -73,7 +75,7 @@ const ChartSettingGaugeSegments = ({ value: segments, onChange }) => {
                 <td colSpan={3} className="pb2">
                   <input
                     type="text"
-                    className="input full"
+                    className={cx(CS.full, CS.input)}
                     value={segment.label}
                     onChange={e =>
                       onChangeProperty(index, "label", e.target.value)