diff --git a/frontend/src/metabase/admin/datamodel/components/QueryDefinitionTooltip/QueryDefinitionTooltip.jsx b/frontend/src/metabase/admin/datamodel/components/QueryDefinitionTooltip/QueryDefinitionTooltip.jsx
index 341f8a66da9e3e8c79e629533c25ffc199e75b9b..d5567266d72f673f5bfc5b5778c900f107ab06b1 100644
--- a/frontend/src/metabase/admin/datamodel/components/QueryDefinitionTooltip/QueryDefinitionTooltip.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/QueryDefinitionTooltip/QueryDefinitionTooltip.jsx
@@ -28,7 +28,7 @@ export class QueryDefinitionTooltip extends Component {
</div>
{object.definition && (
<div className={CS.mt2}>
- <FieldSet legend={t`Definition`} className="border-light">
+ <FieldSet legend={t`Definition`} className={CS.borderLight}>
<QueryDefinition
className={QueryBuilderS.TooltipFilterList}
object={object}
diff --git a/frontend/src/metabase/admin/datamodel/components/filters/OperatorSelector.jsx b/frontend/src/metabase/admin/datamodel/components/filters/OperatorSelector.jsx
index 18914da44941497a4263d635d2835518ecf63b6b..63f3c2401a91f7facd078e9f259bb364afa46b1e 100644
--- a/frontend/src/metabase/admin/datamodel/components/filters/OperatorSelector.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/filters/OperatorSelector.jsx
@@ -20,7 +20,7 @@ export default class OperatorSelector extends Component {
<Select
value={operator}
onChange={e => onOperatorChange(e.target.value)}
- className={cx("border-medium", CS.textDefault, className)}
+ className={cx(CS.borderMedium, CS.textDefault, className)}
data-testid="operator-select"
>
{operators.map(o => (
diff --git a/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx b/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx
index b4899f6f1318857be08a39e1d30c7a38a4ea7353..b307985135c18a6ace9184f3d27f9a9312320dbf 100644
--- a/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx
@@ -71,7 +71,7 @@ export default class Revision extends Component {
<UserAvatar user={revision.user} bg={userColor} />
</div>
<div
- className={cx(CS.flexFull, CS.my1, "border-left")}
+ className={cx(CS.flexFull, CS.my1, CS.borderLeft)}
style={{ borderWidth: 2 }}
/>
</div>
diff --git a/frontend/src/metabase/admin/datamodel/metadata/components/MetadataTable/MetadataTable.tsx b/frontend/src/metabase/admin/datamodel/metadata/components/MetadataTable/MetadataTable.tsx
index 3106fa5bf50be808bf43616bb4240fefd114fb22..57900300111eb327effbb330f9c7d7a58cfce518 100644
--- a/frontend/src/metabase/admin/datamodel/metadata/components/MetadataTable/MetadataTable.tsx
+++ b/frontend/src/metabase/admin/datamodel/metadata/components/MetadataTable/MetadataTable.tsx
@@ -251,7 +251,7 @@ const TableVisibilitySection = ({
</MetadataVisibilityBadge>
{table.visibility_type && (
- <span id="VisibilitySubTypes" className={cx("border-left", CS.mx2)}>
+ <span id="VisibilitySubTypes" className={cx(CS.borderLeft, CS.mx2)}>
<span
className={cx(CS.mx2, CS.textUppercase, CS.textMedium)}
>{t`Why Hide?`}</span>
diff --git a/frontend/src/metabase/admin/people/components/AddMemberRow.jsx b/frontend/src/metabase/admin/people/components/AddMemberRow.jsx
index 7f0bd2bc239d5e76b5552d1dc3d5b511443a83b5..cd0aa06269e98c6d865246fb3a3cc03028c84c8b 100644
--- a/frontend/src/metabase/admin/people/components/AddMemberRow.jsx
+++ b/frontend/src/metabase/admin/people/components/AddMemberRow.jsx
@@ -131,7 +131,7 @@ const AddMemberTypeaheadPopover = Typeahead({
return (
<TippyPopover
- className="bordered"
+ className={CS.bordered}
offset={0}
placement="bottom-start"
visible={suggestions.length > 0}
diff --git a/frontend/src/metabase/admin/people/components/GroupsListing.jsx b/frontend/src/metabase/admin/people/components/GroupsListing.jsx
index a77da5b0d3d396d1aa03c4e62546fb204981b124..5ad71aa1e99b8a1a407f54ccf9f521179958ab28 100644
--- a/frontend/src/metabase/admin/people/components/GroupsListing.jsx
+++ b/frontend/src/metabase/admin/people/components/GroupsListing.jsx
@@ -152,7 +152,7 @@ function EditingGroupRow({
}) {
const textIsValid = group.name && group.name.length;
return (
- <tr className="bordered border-brand rounded">
+ <tr className={cx(CS.bordered, CS.borderBrand, "rounded")}>
<td>
<Input
className={CS.h3}
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.tsx b/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.tsx
index d08b5481500a3b47da99ef980ed9762ecf4abffe..75038cd731eb391a33f0a814bbca89dd3fff8d07 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.tsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.tsx
@@ -118,7 +118,7 @@ function PermissionsPageLayout({
<LeaveConfirmationModal isEnabled={isDirty} route={route} />
- <TabsContainer className="border-bottom">
+ <TabsContainer className={CS.borderBottom}>
<PermissionsTabs tab={tab} onChangeTab={navigateToTab} />
<ToolbarButtonsContainer>
{toolbarRightContent}
diff --git a/frontend/src/metabase/admin/settings/components/ApiKeys/ManageApiKeys.tsx b/frontend/src/metabase/admin/settings/components/ApiKeys/ManageApiKeys.tsx
index 465aea888494a4dfe30313bea9c58eeecdeb4a42..78bbdd5b0fe6087d5b4eed908e36a94950d8b656 100644
--- a/frontend/src/metabase/admin/settings/components/ApiKeys/ManageApiKeys.tsx
+++ b/frontend/src/metabase/admin/settings/components/ApiKeys/ManageApiKeys.tsx
@@ -64,7 +64,7 @@ function ApiKeysTable({
</thead>
<tbody>
{apiKeys?.map(apiKey => (
- <tr key={apiKey.id} className="border-bottom">
+ <tr key={apiKey.id} className={CS.borderBottom}>
<td className={CS.textBold} style={{ maxWidth: 400 }}>
<Ellipsified>{apiKey.name}</Ellipsified>
</td>
diff --git a/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.jsx b/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.jsx
index e73a6ef996573e9e5ef1b12ebb939acd2e87a587..0f776964061ed8db780c3ea18ece6be91481a403 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.jsx
@@ -79,7 +79,7 @@ function NewVersionAvailable({ currentVersion }) {
CS.p2,
CS.bordered,
CS.rounded,
- "border-success",
+ CS.borderSuccess,
CS.flex,
CS.flexRow,
CS.alignCenter,
diff --git a/frontend/src/metabase/admin/tasks/containers/ModelCacheRefreshJobs/ModelCacheRefreshJobs.tsx b/frontend/src/metabase/admin/tasks/containers/ModelCacheRefreshJobs/ModelCacheRefreshJobs.tsx
index a6f644422428f032741a6f7b921cbf291099c53d..664692dcd8a24a45ad93520b2a285683dcc165e9 100644
--- a/frontend/src/metabase/admin/tasks/containers/ModelCacheRefreshJobs/ModelCacheRefreshJobs.tsx
+++ b/frontend/src/metabase/admin/tasks/containers/ModelCacheRefreshJobs/ModelCacheRefreshJobs.tsx
@@ -11,6 +11,7 @@ import PaginationControls from "metabase/components/PaginationControls";
import Link from "metabase/core/components/Link";
import Tooltip from "metabase/core/components/Tooltip";
import AdminS from "metabase/css/admin.module.css";
+import CS from "metabase/css/core/index.css";
import PersistedModels from "metabase/entities/persisted-models";
import { usePagination } from "metabase/hooks/use-pagination";
import { capitalize } from "metabase/lib/formatting";
@@ -147,7 +148,7 @@ function ModelCacheRefreshJobs({ children, onRefresh }: Props) {
return (
<div data-testid="model-cache-logs">
- <table className={cx(AdminS.ContentTable, "border-bottom")}>
+ <table className={cx(AdminS.ContentTable, CS.borderBottom)}>
<colgroup>
<col style={{ width: "30%" }} />
<col style={{ width: "40%" }} />
diff --git a/frontend/src/metabase/components/FieldSet.tsx b/frontend/src/metabase/components/FieldSet.tsx
index 5a8cf3e3a96b963dd4084a139020c85ffffaa377..9c7d04c8bd1f7af4d7aff6a635f39042d3aa65e9 100644
--- a/frontend/src/metabase/components/FieldSet.tsx
+++ b/frontend/src/metabase/components/FieldSet.tsx
@@ -12,7 +12,7 @@ interface FieldSetProps {
}
export function FieldSet({
- className = "border-brand",
+ className = CS.borderBrand,
legend,
required = false,
noPadding = false,
diff --git a/frontend/src/metabase/components/InputWithSelectPrefix/InputWithSelectPrefix.jsx b/frontend/src/metabase/components/InputWithSelectPrefix/InputWithSelectPrefix.jsx
index d040ebb13a45d2bda6e32553e61164ee9ae9bc17..e6350f9e375c89012f8bcf442470eff5b9fdadf1 100644
--- a/frontend/src/metabase/components/InputWithSelectPrefix/InputWithSelectPrefix.jsx
+++ b/frontend/src/metabase/components/InputWithSelectPrefix/InputWithSelectPrefix.jsx
@@ -79,7 +79,7 @@ export default class InputWithSelectPrefix extends Component {
)}
>
<Select
- className="border-right"
+ className={CS.borderRight}
value={prefix || defaultPrefix}
onChange={e => this.setState({ prefix: e.target.value })}
buttonProps={{ className: CS.borderless }}
diff --git a/frontend/src/metabase/components/YearPicker/YearPicker.tsx b/frontend/src/metabase/components/YearPicker/YearPicker.tsx
index 4ef6dcc3a8565ea472608f5f6383afbe6c745f65..2d8640bff1784e065114ebaa25c31158560cf9cd 100644
--- a/frontend/src/metabase/components/YearPicker/YearPicker.tsx
+++ b/frontend/src/metabase/components/YearPicker/YearPicker.tsx
@@ -2,6 +2,7 @@ import type { ChangeEvent } from "react";
import _ from "underscore";
import Select from "metabase/core/components/Select";
+import CS from "metabase/css/core/index.css";
const YEARS = _.range(new Date().getFullYear(), 1900, -1);
@@ -12,7 +13,7 @@ export interface YearPickerProps {
const YearPicker = ({ value, onChange }: YearPickerProps) => (
<Select
- className="borderless"
+ className={CS.borderless}
value={value}
options={YEARS}
optionNameFn={(option: any) => option}
diff --git a/frontend/src/metabase/css/core/bordered.module.css b/frontend/src/metabase/css/core/bordered.module.css
index 7b50a66b324ff4f0047ad27e59dc9080127cdef1..e27a043e48563924ac2d23ba8d9be40efbb5a15f 100644
--- a/frontend/src/metabase/css/core/bordered.module.css
+++ b/frontend/src/metabase/css/core/bordered.module.css
@@ -5,88 +5,71 @@
--border-color: var(--color-border);
}
-:global(.bordered),
.bordered {
border: var(--border-size) var(--border-style) var(--color-border);
}
-:global(.border-bottom),
-.border-bottom,
.borderBottom {
border-bottom: var(--border-size) var(--border-style) var(--color-border);
}
-/* ensure that a border-top item inside of a bordred element won't double up */
-:global(.bordered > .border-bottom:last-child) {
+/* ensure that a border-top item inside of a bordered element won't double up */
+.bordered > .border-bottom:last-child {
border-bottom: none;
}
-:global(.border-top),
-.border-top,
.borderTop {
border-top: var(--border-size) var(--border-style) var(--color-border);
}
-/* ensure that a border-top item inside of a bordred element won't double up */
-:global(.bordered > .border-top:first-child) {
+/* ensure that a border-top item inside of a bordered element won't double up */
+.bordered > .border-top:first-child {
border-top: none;
}
-:global(.border-row-divider),
.borderRowDivider {
border-bottom: var(--border-size) var(--border-style) var(--color-border);
}
-:global(.border-row-divider:last-child),
.borderRowDivider:last-child {
border-bottom: none;
}
-:global(.border-right) {
+.borderRight {
border-right: var(--border-size) var(--border-style) var(--color-border);
}
-:global(.border-left),
.borderLeft {
border-left: var(--border-size) var(--border-style) var(--color-border);
}
-:global(.border-light) {
+.borderLight {
border-color: color-mod(var(--color-border) alpha(-80%)) !important;
}
-:global(.border-error),
-.border-error,
.borderError {
border-color: var(--color-error) !important;
}
-:global(.border-success) {
+.borderSuccess {
border-color: var(--color-success) !important;
}
-:global(.border-brand),
-.border-brand,
.borderBrand {
border-color: var(--color-brand) !important;
}
-:global(.border-transparent) {
+.borderTransparent {
border-color: transparent;
}
/* BORDERLESS IS THE DEFAULT */
/* ONLY USE IF needing to override an existing border! */
/* ensure there is no border via important */
-:global(.borderless),
.borderless {
border: none !important;
}
-.border-bottom {
- border-bottom: var(--border-size) dashed var(--color-border);
-}
-
-:global(.border-medium) {
+.borderMedium {
border-width: var(--border-size-medium);
}
diff --git a/frontend/src/metabase/css/dashboard.module.css b/frontend/src/metabase/css/dashboard.module.css
index 9b07a270f3c113dde8cd983bf4731836c65d5c1c..6aa8778bd6a9b3dd0b5cc2fb6dbf2610f3922bbc 100644
--- a/frontend/src/metabase/css/dashboard.module.css
+++ b/frontend/src/metabase/css/dashboard.module.css
@@ -34,13 +34,6 @@
fill: currentColor;
}
-.Dashboard.DashboardNight :global(.border-top),
-.Dashboard.DashboardNight :global(.border-left),
-.Dashboard.DashboardNight :global(.border-bottom),
-.Dashboard.DashboardNight :global(.border-right) {
- border-color: var(--color-bg-dark);
-}
-
/* Night mode transition */
.Dashboard.DashboardFullscreen,
.Dashboard.DashboardFullscreen .DashCard .Card {
diff --git a/frontend/src/metabase/dashboard/components/AddSeriesModal/AddSeriesModal.tsx b/frontend/src/metabase/dashboard/components/AddSeriesModal/AddSeriesModal.tsx
index e514b9eb6412b5a137ca586754f7822bad4b817e..ee5fa1e7e849320b7c89f16e6365f3a6150ceb8a 100644
--- a/frontend/src/metabase/dashboard/components/AddSeriesModal/AddSeriesModal.tsx
+++ b/frontend/src/metabase/dashboard/components/AddSeriesModal/AddSeriesModal.tsx
@@ -202,7 +202,7 @@ export class AddSeriesModal extends Component<Props, State> {
</div>
</div>
<div
- className={cx("border-left", CS.flex, CS.flexColumn)}
+ className={cx(CS.borderLeft, CS.flex, CS.flexColumn)}
style={{
width: 370,
backgroundColor: color("bg-light"),
diff --git a/frontend/src/metabase/lib/utils.ts b/frontend/src/metabase/lib/utils.ts
index 7a6f77315ce6e7869d51ce1f114c1a5a445d2bf0..eef73460d82be87fe133baf4e1aefc4d3ce3e4a0 100644
--- a/frontend/src/metabase/lib/utils.ts
+++ b/frontend/src/metabase/lib/utils.ts
@@ -3,34 +3,9 @@ import _ from "underscore";
import { PLUGIN_IS_EE_BUILD } from "metabase/plugins";
-const LAYOUT_PROPS = [
- "m",
- "ml",
- "mr",
- "mt",
- "mb",
- "mx",
- "my",
- "p",
- "pl",
- "pr",
- "pt",
- "pb",
- "px",
- "py",
- "bg",
- "color",
- "hover",
- "bordered",
-];
-
const EMAIL_REGEX =
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-export function stripLayoutProps(props: unknown) {
- return _.omit(props, LAYOUT_PROPS);
-}
-
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
diff --git a/frontend/src/metabase/query_builder/components/template_tags/SnippetRow/SnippetRow.jsx b/frontend/src/metabase/query_builder/components/template_tags/SnippetRow/SnippetRow.jsx
index 4146547f837a77f568c601f66a291782d28be712..3585f08134f240d35f255a606ea48134ba88e507 100644
--- a/frontend/src/metabase/query_builder/components/template_tags/SnippetRow/SnippetRow.jsx
+++ b/frontend/src/metabase/query_builder/components/template_tags/SnippetRow/SnippetRow.jsx
@@ -23,7 +23,7 @@ class SnippetRowInner extends Component {
return (
<div
className={cx(
- { "border-transparent": !isOpen },
+ { [CS.borderTransparent]: !isOpen },
CS.borderBottom,
CS.borderTop,
)}
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
index 77247cf4386d6b31df1de1b4bfc9b3010aca4857..2cc35cd68565af7eff0745fb48b1cd6b5f0ced85 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
@@ -295,7 +295,7 @@ const RulePreview = ({ rule, cols, onClick, onRemove }) => (
<RuleBackground
rule={rule}
className={cx(CS.mr2, CS.flexNoShrink, CS.rounded, {
- bordered: rule.type === "range",
+ [CS.bordered]: rule.type === "range",
})}
style={{ width: 40, height: 40 }}
/>