[@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar…

… and Header components
mantinedev · Dec 5, 2022 · 693d25d · 693d25d
1 parent 2c8247a
commit 693d25d
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 15 deletions.
diff --git a/src/mantine-core/src/AppShell/AppShell.story.tsx b/src/mantine-core/src/AppShell/AppShell.story.tsx
@@ -32,6 +32,7 @@ export function AltLayout() {
   return (
     <AppShell
       layout="alt"
+      zIndex={342}
       header={
         <Header height={60}>
           <Group position="apart">
@@ -41,7 +42,11 @@ export function AltLayout() {
         </Header>
       }
       footer={<Footer height={40}>Footer</Footer>}
-      navbar={<Navbar width={{ base: 250 }}>Navbar</Navbar>}
+      navbar={
+        <Navbar width={{ base: 250 }} zIndex={412}>
+          Navbar
+        </Navbar>
+      }
       aside={<Aside width={{ base: 150 }}>Aside</Aside>}
     >
       Content

diff --git a/src/mantine-core/src/AppShell/AppShell.tsx b/src/mantine-core/src/AppShell/AppShell.tsx
@@ -4,7 +4,6 @@ import {
   DefaultProps,
   Selectors,
   MantineStyleSystemSize,
-  getDefaultZIndex,
   useComponentDefaultProps,
 } from '@mantine/styles';
 import { Box } from '../Box';
@@ -54,7 +53,6 @@ export interface AppShellProps
 
 const defaultProps: Partial<AppShellProps> = {
   fixed: true,
-  zIndex: getDefaultZIndex('app'),
   padding: 'md',
 };
 

diff --git a/src/mantine-core/src/AppShell/Aside/Aside.tsx b/src/mantine-core/src/AppShell/Aside/Aside.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { getDefaultZIndex, useComponentDefaultProps } from '@mantine/styles';
+import { useComponentDefaultProps } from '@mantine/styles';
 import { ForwardRefWithStaticComponents } from '@mantine/utils';
 import {
   HorizontalSection,
@@ -19,7 +19,6 @@ type AsideComponent = ForwardRefWithStaticComponents<AsideProps, { Section: type
 const defaultProps: Partial<AsideProps> = {
   fixed: false,
   position: { top: 0, right: 0 },
-  zIndex: getDefaultZIndex('app'),
   hiddenBreakpoint: 'md',
   hidden: false,
 };

diff --git a/src/mantine-core/src/AppShell/Footer/Footer.tsx b/src/mantine-core/src/AppShell/Footer/Footer.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { getDefaultZIndex, useComponentDefaultProps } from '@mantine/styles';
+import { useComponentDefaultProps } from '@mantine/styles';
 import { VerticalSection, VerticalSectionSharedProps } from '../VerticalSection/VerticalSection';
 
 export interface FooterProps
@@ -12,7 +12,6 @@ export interface FooterProps
 const defaultProps: Partial<FooterProps> = {
   fixed: false,
   position: { bottom: 0, left: 0, right: 0 },
-  zIndex: getDefaultZIndex('app'),
 };
 
 export const Footer = forwardRef<HTMLElement, FooterProps>((props: FooterProps, ref) => {

diff --git a/src/mantine-core/src/AppShell/Header/Header.tsx b/src/mantine-core/src/AppShell/Header/Header.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { getDefaultZIndex, useComponentDefaultProps } from '@mantine/styles';
+import { useComponentDefaultProps } from '@mantine/styles';
 import { VerticalSection, VerticalSectionSharedProps } from '../VerticalSection/VerticalSection';
 
 export interface HeaderProps
@@ -12,7 +12,6 @@ export interface HeaderProps
 const defaultProps: Partial<HeaderProps> = {
   fixed: false,
   position: { top: 0, left: 0, right: 0 },
-  zIndex: getDefaultZIndex('app'),
 };
 
 export const Header = forwardRef<HTMLElement, HeaderProps>((props: HeaderProps, ref) => {

diff --git a/src/mantine-core/src/AppShell/HorizontalSection/HorizontalSection.tsx b/src/mantine-core/src/AppShell/HorizontalSection/HorizontalSection.tsx
@@ -51,7 +51,7 @@ export const HorizontalSection = forwardRef<HTMLElement, HorizontalSectionProps>
       height,
       fixed = false,
       position,
-      zIndex = getDefaultZIndex('app'),
+      zIndex,
       hiddenBreakpoint = 'md',
       hidden = false,
       withBorder = true,
@@ -75,7 +75,7 @@ export const HorizontalSection = forwardRef<HTMLElement, HorizontalSectionProps>
         fixed: ctx.fixed || fixed,
         position,
         hiddenBreakpoint,
-        zIndex: ctx.zIndex || zIndex,
+        zIndex: zIndex || ctx.zIndex || getDefaultZIndex('app'),
         section,
         withBorder,
         layout: ctx.layout,

diff --git a/src/mantine-core/src/AppShell/Navbar/Navbar.tsx b/src/mantine-core/src/AppShell/Navbar/Navbar.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { getDefaultZIndex, useComponentDefaultProps } from '@mantine/styles';
+import { useComponentDefaultProps } from '@mantine/styles';
 import { ForwardRefWithStaticComponents } from '@mantine/utils';
 import {
   HorizontalSection,
@@ -19,7 +19,6 @@ type NavbarComponent = ForwardRefWithStaticComponents<NavbarProps, { Section: ty
 const defaultProps: Partial<NavbarProps> = {
   fixed: false,
   position: { top: 0, left: 0 },
-  zIndex: getDefaultZIndex('app'),
   hiddenBreakpoint: 'md',
   hidden: false,
 };

diff --git a/src/mantine-core/src/AppShell/VerticalSection/VerticalSection.tsx b/src/mantine-core/src/AppShell/VerticalSection/VerticalSection.tsx
@@ -46,7 +46,7 @@ export const VerticalSection = forwardRef<HTMLElement, VerticalSectionProps>(
       fixed = false,
       withBorder = true,
       position,
-      zIndex = getDefaultZIndex('app'),
+      zIndex,
       section,
       unstyled,
       __staticSelector,
@@ -55,7 +55,7 @@ export const VerticalSection = forwardRef<HTMLElement, VerticalSectionProps>(
     ref
   ) => {
     const ctx = useAppShellContext();
-    const _zIndex = ctx.zIndex || zIndex;
+    const _zIndex = zIndex || ctx.zIndex || getDefaultZIndex('app');
 
     const { classes, cx, theme } = useStyles(
       {