[@mantine/core] AppShell: Fix header height 0 not working (#5514)

mantinedev · Jan 5, 2024 · 3d74104 · 3d74104
1 parent e691391
commit 3d74104
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/packages/@mantine/core/src/components/AppShell/AppShell.story.tsx b/packages/@mantine/core/src/components/AppShell/AppShell.story.tsx
@@ -28,7 +28,7 @@ export function Usage() {
         collapsed: { desktop: !asideOpened, mobile: !asideMobileOpened },
       }}
       header={{
-        height: 50,
+        height: 0,
         collapsed: !headerOpened,
       }}
       footer={{

diff --git a/...ages/@mantine/core/src/core/Box/style-props/resolvers/size-resolver/size-resolver.test.ts b/...ages/@mantine/core/src/core/Box/style-props/resolvers/size-resolver/size-resolver.test.ts
@@ -5,7 +5,7 @@ describe('@mantine/core/Box/size-resolver', () => {
     expect(sizeResolver(10)).toBe('calc(0.625rem * var(--mantine-scale))');
     expect(sizeResolver(-10)).toBe('calc(-0.625rem * var(--mantine-scale))');
     expect(sizeResolver(1.5)).toBe('calc(0.09375rem * var(--mantine-scale))');
-    expect(sizeResolver(0)).toBe('0');
+    expect(sizeResolver(0)).toBe('0rem');
   });
 
   it('resolves string correctly', () => {

diff --git a/packages/@mantine/core/src/core/utils/get-size/get-size.test.ts b/packages/@mantine/core/src/core/utils/get-size/get-size.test.ts
@@ -24,7 +24,7 @@ describe('@mantine/core/get-size', () => {
 describe('@mantine/core/get-spacing', () => {
   it('returns correct values', () => {
     expect(getSpacing(10)).toBe('calc(0.625rem * var(--mantine-scale))');
-    expect(getSpacing(0)).toBe('0');
+    expect(getSpacing(0)).toBe('0rem');
     expect(getSpacing('10')).toBe('calc(0.625rem * var(--mantine-scale))');
     expect(getSpacing('10px')).toBe('calc(0.625rem * var(--mantine-scale))');
     expect(getSpacing('10rem')).toBe('calc(10rem * var(--mantine-scale))');
@@ -37,7 +37,7 @@ describe('@mantine/core/get-spacing', () => {
 describe('@mantine/core/get-radius', () => {
   it('returns correct values', () => {
     expect(getRadius(10)).toBe('calc(0.625rem * var(--mantine-scale))');
-    expect(getRadius(0)).toBe('0');
+    expect(getRadius(0)).toBe('0rem');
     expect(getRadius('10')).toBe('calc(0.625rem * var(--mantine-scale))');
     expect(getRadius('10px')).toBe('calc(0.625rem * var(--mantine-scale))');
     expect(getRadius('10rem')).toBe('calc(10rem * var(--mantine-scale))');
@@ -54,7 +54,7 @@ describe('@mantine/core/get-radius', () => {
 describe('@mantine/core/get-font-size', () => {
   it('returns correct values', () => {
     expect(getFontSize(10)).toBe('calc(0.625rem * var(--mantine-scale))');
-    expect(getFontSize(0)).toBe('0');
+    expect(getFontSize(0)).toBe('0rem');
     expect(getFontSize('10')).toBe('calc(0.625rem * var(--mantine-scale))');
     expect(getFontSize('10px')).toBe('calc(0.625rem * var(--mantine-scale))');
     expect(getFontSize('10rem')).toBe('calc(10rem * var(--mantine-scale))');

diff --git a/packages/@mantine/core/src/core/utils/units-converters/rem.test.ts b/packages/@mantine/core/src/core/utils/units-converters/rem.test.ts
@@ -6,8 +6,8 @@ describe('@mantine/units-converters/rem', () => {
   });
 
   it('handles 0 correctly', () => {
-    expect(rem(0)).toBe('0');
-    expect(rem('0')).toBe('0');
+    expect(rem(0)).toBe('0rem');
+    expect(rem('0')).toBe('0rem');
   });
 
   it('converts numbers to rem', () => {
@@ -55,7 +55,7 @@ describe('@mantine/units-converters/rem', () => {
 
 describe('@mantine/units-converters/em', () => {
   it('converts numbers to em', () => {
-    expect(em(0)).toBe('0');
+    expect(em(0)).toBe('0em');
     expect(em(16)).toBe('1em');
     expect(em(-32)).toBe('-2em');
   });

diff --git a/packages/@mantine/core/src/core/utils/units-converters/rem.ts b/packages/@mantine/core/src/core/utils/units-converters/rem.ts
@@ -5,7 +5,7 @@ function scaleRem(remValue: string) {
 function createConverter(units: string, { shouldScale = false } = {}) {
   function converter(value: unknown): string {
     if (value === 0 || value === '0') {
-      return '0';
+      return `0${units}`;
     }
 
     if (typeof value === 'number') {