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

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}

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 => (

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>

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>

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}

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}

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}

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>

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,

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%" }} />

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,

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

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}

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);
 }

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 {

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"),

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)

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,
         )}

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 }}
       />