[@mantine/core] Add support for values separated by space to rem an…

…d `em` functions (#5174)
mantinedev · Nov 7, 2023 · f4f95a1 · f4f95a1
1 parent 29ffec6
commit f4f95a1
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 5 deletions.
diff --git a/src/mantine-core/src/components/Paper/Paper.story.tsx b/src/mantine-core/src/components/Paper/Paper.story.tsx
@@ -15,6 +15,18 @@ export function Usage() {
   );
 }
 
+export function SpaceSeparatedRadius() {
+  return (
+    <div style={{ padding: 40, maxWidth: 600 }}>
+      <Paper radius="0 0 1rem 1rem" shadow="md" withBorder p="xl">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, et illo? Dolores
+        mollitia, maiores est totam ab libero itaque fuga, dolorum hic nesciunt quibusdam, esse amet
+        magni quia voluptatibus molestias!
+      </Paper>
+    </div>
+  );
+}
+
 export function NestedPapers() {
   return (
     <Paper p="md" withBorder shadow="md">

diff --git a/src/mantine-core/src/core/utils/get-size/get-size.test.ts b/src/mantine-core/src/core/utils/get-size/get-size.test.ts
@@ -45,6 +45,9 @@ describe('@mantine/core/get-radius', () => {
     expect(getRadius('xs')).toBe('var(--mantine-radius-xs)');
     expect(getRadius('md')).toBe('var(--mantine-radius-md)');
     expect(getRadius(undefined)).toBe('var(--mantine-radius-default)');
+    expect(getRadius('16px 8px')).toBe(
+      'calc(1rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale))'
+    );
   });
 });
 

diff --git a/src/mantine-core/src/core/utils/get-size/get-size.ts b/src/mantine-core/src/core/utils/get-size/get-size.ts
@@ -38,5 +38,5 @@ export function getShadow(size: unknown) {
     return undefined;
   }
 
-  return getSize(size, 'mantine-shadow');
+  return getSize(size, 'mantine-shadow', false);
 }
diff --git a/src/mantine-core/src/core/utils/is-number-like/is-number-like.test.ts b/src/mantine-core/src/core/utils/is-number-like/is-number-like.test.ts
@@ -21,8 +21,13 @@ describe('@mantine/core/isNumberLike', () => {
     expect(isNumberLike('-1.1')).toBe(true);
     expect(isNumberLike('0.1')).toBe(true);
     expect(isNumberLike('-0.1')).toBe(true);
+  });
+
+  it('handles calc, var and values separated by space', () => {
     expect(isNumberLike('calc(10rem - 5px)')).toBe(true);
     expect(isNumberLike('var(--test-var)')).toBe(true);
+    expect(isNumberLike('10px 5px')).toBe(true);
+    expect(isNumberLike('1rem 0.5rem')).toBe(true);
   });
 
   it('returns false for strings that do not start with number', () => {

diff --git a/src/mantine-core/src/core/utils/is-number-like/is-number-like.ts b/src/mantine-core/src/core/utils/is-number-like/is-number-like.ts
@@ -4,7 +4,11 @@ export function isNumberLike(value: unknown) {
   }
 
   if (typeof value === 'string') {
-    if (value.startsWith('calc(') || value.startsWith('var(')) {
+    if (
+      value.startsWith('calc(') ||
+      value.startsWith('var(') ||
+      (value.includes(' ') && value.trim() !== '')
+    ) {
       return true;
     }
 

diff --git a/src/mantine-core/src/core/utils/units-converters/rem.test.ts b/src/mantine-core/src/core/utils/units-converters/rem.test.ts
@@ -31,6 +31,20 @@ describe('@mantine/units-converters/rem', () => {
   it('does not modify scaled values', () => {
     expect(rem('calc(2rem * var(--mantine-scale))')).toBe('calc(2rem * var(--mantine-scale))');
   });
+
+  it('converts values separated by space', () => {
+    expect(rem('10px 5px')).toBe(
+      'calc(0.625rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale))'
+    );
+
+    expect(rem('1rem 0.5rem')).toBe(
+      'calc(1rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale))'
+    );
+
+    expect(rem('16px solid var(--mantine-color-primary)')).toBe(
+      'calc(1rem * var(--mantine-scale)) solid var(--mantine-color-primary)'
+    );
+  });
 });
 
 describe('@mantine/units-converters/em', () => {

diff --git a/src/mantine-core/src/core/utils/units-converters/rem.ts b/src/mantine-core/src/core/utils/units-converters/rem.ts
@@ -3,7 +3,7 @@ function scaleRem(remValue: string) {
 }
 
 function createConverter(units: string, { shouldScale = false } = {}) {
-  return (value: unknown) => {
+  function converter(value: unknown): string {
     if (value === 0 || value === '0') {
       return '0';
     }
@@ -14,10 +14,17 @@ function createConverter(units: string, { shouldScale = false } = {}) {
     }
 
     if (typeof value === 'string') {
-      if (value.includes('calc(') || value.includes('var(')) {
+      if (value.startsWith('calc(') || value.startsWith('var(')) {
         return value;
       }
 
+      if (value.includes(' ')) {
+        return value
+          .split(' ')
+          .map((val) => converter(val))
+          .join(' ');
+      }
+
       if (value.includes(units)) {
         return shouldScale ? scaleRem(value) : value;
       }
@@ -30,7 +37,9 @@ function createConverter(units: string, { shouldScale = false } = {}) {
     }
 
     return value as string;
-  };
+  }
+
+  return converter;
 }
 
 export const rem = createConverter('rem', { shouldScale: true });