From 9e88fb35fd4dbdf2839bec783c3a6ed4896ec435 Mon Sep 17 00:00:00 2001
From: "Mahatthana (Kelvin) Nomsawadi" <me@bboykelvin.dev>
Date: Fri, 12 Apr 2024 00:38:47 +0700
Subject: [PATCH] Migrate `bordered.module.css` (#41307)
* Migrate .bordered
* Migrate .borderBottom, .borderTop
* Fix typo
* Remove unused classes
* Migrate .borderRight
* Migrate .borderLeft
* Migrate .borderLight
* Migrate .borderError
* Migrate .borderSuccess
* Migrate .borderBrand
* Migrate .borderTransparent
* Migrate .borderless
* Migrate .borderMedium
* Review: Add missing CS import
---
.../QueryDefinitionTooltip.jsx | 2 +-
.../components/filters/OperatorSelector.jsx | 2 +-
.../components/revisions/Revision.jsx | 2 +-
.../MetadataTable/MetadataTable.tsx | 2 +-
.../admin/people/components/AddMemberRow.jsx | 2 +-
.../admin/people/components/GroupsListing.jsx | 2 +-
.../PermissionsPageLayout.tsx | 2 +-
.../components/ApiKeys/ManageApiKeys.tsx | 2 +-
.../VersionUpdateNotice.jsx | 2 +-
.../ModelCacheRefreshJobs.tsx | 3 +-
frontend/src/metabase/components/FieldSet.tsx | 2 +-
.../InputWithSelectPrefix.jsx | 2 +-
.../components/YearPicker/YearPicker.tsx | 3 +-
.../src/metabase/css/core/bordered.module.css | 35 +++++--------------
.../src/metabase/css/dashboard.module.css | 7 ----
.../AddSeriesModal/AddSeriesModal.tsx | 2 +-
frontend/src/metabase/lib/utils.ts | 25 -------------
.../template_tags/SnippetRow/SnippetRow.jsx | 2 +-
.../settings/ChartSettingsTableFormatting.jsx | 2 +-
19 files changed, 27 insertions(+), 74 deletions(-)
diff --git a/frontend/src/metabase/admin/datamodel/components/QueryDefinitionTooltip/QueryDefinitionTooltip.jsx b/frontend/src/metabase/admin/datamodel/components/QueryDefinitionTooltip/QueryDefinitionTooltip.jsx
index 341f8a66da9..d5567266d72 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 18914da4494..63f3c2401a9 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 b4899f6f131..b307985135c 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 3106fa5bf50..57900300111 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 7f0bd2bc239..cd0aa06269e 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 a77da5b0d3d..5ad71aa1e99 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 d08b5481500..75038cd731e 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 465aea88849..78bbdd5b0fe 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 e73a6ef9965..0f776964061 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 a6f64442242..664692dcd8a 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 5a8cf3e3a96..9c7d04c8bd1 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 d040ebb13a4..e6350f9e375 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 4ef6dcc3a85..2d8640bff17 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 7b50a66b324..e27a043e485 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 9b07a270f3c..6aa8778bd6a 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 e514b9eb641..ee5fa1e7e84 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 7a6f77315ce..eef73460d82 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 4146547f837..3585f08134f 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 77247cf4386..2cc35cd6856 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 }}
/>
--
GitLab