Skip to content
Snippets Groups Projects
Unverified Commit 25bac882 authored by Oisin Coveney's avatar Oisin Coveney Committed by GitHub
Browse files

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

parent 37b4269d
No related branches found
No related tags found
No related merge requests found
Showing
with 46 additions and 26 deletions
......@@ -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}
......
......@@ -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}
/>
......
......@@ -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 })}
/>
......
......@@ -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}
......
......@@ -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}
......
/* 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`
......
......@@ -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}
......
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}
......
......@@ -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,
}}
......
......@@ -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}
......
......@@ -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}
......
......@@ -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;
}
......@@ -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}
......
......@@ -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,
......
......@@ -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 })
......
/* 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)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment