Re-export Mantine `rem` util (#40184)

* Re-export `rem` helper from Mantine

* Use `rem` in a few components as a PoC

enterprise/frontend/src/metabase-enterprise/auth/components/SettingsJWTForm/SettingsJWTForm.tsx

@@ -18,7 +18,7 @@ import {
   FormSwitch,
   FormTextInput,
 } from "metabase/forms";
-import { Flex, Stack } from "metabase/ui";
+import { rem, Flex, Stack } from "metabase/ui";
 import type { SettingValue } from "metabase-types/api";
 
 type SettingValues = { [key: string]: SettingValue };
@@ -80,7 +80,7 @@ export const SettingsJWTForm = ({
       enableReinitialize
     >
       {({ dirty }) => (
-        <Form m={"0 1rem"} maw={"32.5rem"}>
+        <Form m={"0 1rem"} maw={rem(520)}>
           <Breadcrumbs
             className="mb3"
             crumbs={[
@@ -88,7 +88,7 @@ export const SettingsJWTForm = ({
               [t`JWT`],
             ]}
           />
-          <Stack spacing="0.75rem" m="2.5rem 0">
+          <Stack spacing={rem(12)} m={`${rem(40)} 0`}>
             <SettingHeader
               id="jwt-user-provisioning-enabled?"
               setting={settings["jwt-user-provisioning-enabled?"]}

frontend/src/metabase/admin/permissions/components/ApplicationPermissionsHelp/ApplicationPermissionsHelp.tsx

@@ -2,16 +2,16 @@ import { t, jt } from "ttag";
 
 import ExternalLink from "metabase/core/components/ExternalLink";
 import MetabaseSettings from "metabase/lib/settings";
-import { Flex, Stack, Text, Title } from "metabase/ui";
+import { rem, Flex, Stack, Text, Title } from "metabase/ui";
 
 export const ApplicationPermissionsHelp = () => (
-  <Flex direction="column" py="1.375rem" px="1.5rem">
+  <Flex direction="column" py={rem(22)} px="lg">
     <Title order={4}>{t`Applications permissions`}</Title>
     <Text my="1rem">{t`People can be members of multiple groups, and Metabase grants them the most permissive level of access across all of a person's groups.`}</Text>
 
     <Title order={5}>{t`Applications permissions`}</Title>
 
-    <Stack spacing={10} mt="0.5rem">
+    <Stack spacing={10} mt="sm">
       <Text>{t`Application settings are useful for granting groups access to some, but not all, of Metabase’s administrative features.`}</Text>
       <Text>
         {jt`${(

frontend/src/metabase/admin/permissions/components/CollectionPermissionsHelp/CollectionPermissionsHelp.tsx

@@ -3,14 +3,14 @@ import { t, jt } from "ttag";
 import { PermissionHelpDescription } from "metabase/admin/permissions/components/PermissionHelpDescription";
 import ExternalLink from "metabase/core/components/ExternalLink";
 import MetabaseSettings from "metabase/lib/settings";
-import { Flex, Stack, Text, Title } from "metabase/ui";
+import { rem, Flex, Stack, Text, Title } from "metabase/ui";
 
 export const CollectionPermissionsHelp = () => (
-  <Flex direction="column" py="1.375rem" px="1.5rem">
+  <Flex direction="column" py={rem(22)} px="lg">
     <Title order={4}>{t`Collection permissions`}</Title>
     <Text my="1rem">{t`People can be members of multiple groups, and Metabase grants them the most permissive level of access across all of a person's groups.`}</Text>
 
-    <Title order={6} my="0.5rem">{t`Collections Permission Levels`}</Title>
+    <Title order={6} my="sm">{t`Collections Permission Levels`}</Title>
 
     <Stack spacing={16} mt="1rem">
       <PermissionHelpDescription

frontend/src/metabase/admin/permissions/components/DataPermissionsHelp/DataPermissionsHelp.tsx

@@ -6,7 +6,16 @@ import ExternalLink from "metabase/core/components/ExternalLink";
 import { useSelector } from "metabase/lib/redux";
 import MetabaseSettings from "metabase/lib/settings";
 import { getSetting } from "metabase/selectors/settings";
-import { Accordion, Box, Flex, Stack, Text, Title, Icon } from "metabase/ui";
+import {
+  rem,
+  Accordion,
+  Box,
+  Flex,
+  Stack,
+  Text,
+  Title,
+  Icon,
+} from "metabase/ui";
 
 export const DataPermissionsHelp = () => {
   const isAdvancedPermissionsFeatureEnabled = useSelector(
@@ -14,8 +23,8 @@ export const DataPermissionsHelp = () => {
   );
 
   return (
-    <Flex direction="column" py="1.375rem" px="1rem">
-      <Box px="0.75rem">
+    <Flex direction="column" py={rem(22)} px="1rem">
+      <Box px={rem(12)}>
         <Title order={4}>{t`Data permissions`}</Title>
         <Text my="1rem">{t`People can be members of multiple groups, and Metabase grants them the most permissive level of access across all of a person's groups.`}</Text>
       </Box>

frontend/src/metabase/nav/components/search/SearchResultsDropdown/SearchResultsDropdown.tsx

@@ -3,7 +3,7 @@ import { jt, t } from "ttag";
 import type { SearchResultsFooter } from "metabase/nav/components/search/SearchResults";
 import { SearchResults } from "metabase/nav/components/search/SearchResults";
 import type { WrappedResult } from "metabase/search/types";
-import { Text, Icon } from "metabase/ui";
+import { rem, Text, Icon } from "metabase/ui";
 
 import {
   SearchDropdownFooter,
@@ -36,7 +36,7 @@ export const SearchResultsDropdown = ({
         position="apart"
         align="center"
         px="lg"
-        py="0.625rem"
+        py={rem(10)}
         onClick={goToSearchApp}
         isSelected={isSelected}
       >

frontend/src/metabase/query_builder/components/DataSelector/DataSelectorTablePicker/DataSelectorTablePicker.tsx

@@ -11,7 +11,7 @@ import { color } from "metabase/lib/colors";
 import MetabaseSettings from "metabase/lib/settings";
 import { isSyncCompleted } from "metabase/lib/syncing";
 import { isNotNull } from "metabase/lib/types";
-import { Box, Icon, DelayGroup, Flex } from "metabase/ui";
+import { rem, Box, Icon, DelayGroup, Flex } from "metabase/ui";
 import type Database from "metabase-lib/v1/metadata/Database";
 import type Schema from "metabase-lib/v1/metadata/Schema";
 import type Table from "metabase-lib/v1/metadata/Table";
@@ -110,7 +110,7 @@ const DataSelectorTablePicker = ({
 
     return (
       <DelayGroup>
-        <Box component="span" w="18.75rem" style={{ overflowY: "auto" }}>
+        <Box w={rem(300)} style={{ overflowY: "auto" }}>
           <AccordionList
             id="TablePicker"
             key="tablePicker"

frontend/src/metabase/query_builder/components/DatasetEditor/ResizableNotebook/ResizableNotebook.jsx

@@ -6,7 +6,7 @@ import { ResizableBox } from "react-resizable";
 import CS from "metabase/css/core/index.css";
 import { darken } from "metabase/lib/colors";
 import Notebook from "metabase/query_builder/components/notebook/Notebook";
-import { Flex, Box } from "metabase/ui";
+import { rem, Flex, Box } from "metabase/ui";
 
 const propTypes = {
   isResizing: PropTypes.bool.isRequired,
@@ -31,7 +31,7 @@ const Handle = forwardRef(function Handle(props, ref) {
       w="100%"
       h="sm"
       pos="absolute"
-      bottom="-0.25rem"
+      bottom={`-${rem(4)}`}
       style={{
         cursor: "row-resize",
       }}

frontend/src/metabase/ui/index.ts

+export { rem } from "@mantine/core";
 export * from "./components";

frontend/src/metabase/visualizations/visualizations/SmartScalar/SettingsComponents/ComparisonPicker.tsx

@@ -4,7 +4,7 @@ import { jt, t } from "ttag";
 import _ from "underscore";
 
 import IconButtonWrapper from "metabase/components/IconButtonWrapper";
-import { Menu, Stack, Text } from "metabase/ui";
+import { rem, Menu, Stack, Text } from "metabase/ui";
 import type {
   DatasetColumn,
   SmartScalarComparison,
@@ -177,7 +177,9 @@ export function ComparisonPicker({
         </ComparisonPickerButton>
       </Menu.Target>
 
-      <Menu.Dropdown miw="21.5rem">{renderMenuDropdownContent()}</Menu.Dropdown>
+      <Menu.Dropdown miw={rem(344)}>
+        {renderMenuDropdownContent()}
+      </Menu.Dropdown>
     </Menu>
   );
 }

frontend/src/metabase/visualizations/visualizations/SmartScalar/SettingsComponents/PeriodsAgoMenuOption.tsx

@@ -2,7 +2,7 @@ import type { KeyboardEvent, MouseEvent } from "react";
 import { useCallback, useRef, useState } from "react";
 import { t } from "ttag";
 
-import { Group, Text, Box } from "metabase/ui";
+import { rem, Group, Text, Box } from "metabase/ui";
 import type { COMPARISON_TYPES } from "metabase/visualizations/visualizations/SmartScalar/constants";
 import type { SmartScalarComparisonPeriodsAgo } from "metabase-types/api";
 
@@ -96,7 +96,7 @@ export function PeriodsAgoMenuOption({
   );
 
   return (
-    <MenuItemStyled py="0.25rem" aria-selected={isSelected}>
+    <MenuItemStyled py="xs" aria-selected={isSelected}>
       <Box px="sm" onClick={() => onChange({ type, value }, true)}>
         <Group spacing="sm">
           <NumberInputStyled
@@ -106,7 +106,7 @@ export function PeriodsAgoMenuOption({
             onKeyPress={handleInputEnter}
             onClick={handleInputClick}
             size="xs"
-            w="3.5rem"
+            w={rem(56)}
             required
             ref={inputRef}
           />