fix(base): introduce a z-offset for toasts

sanity-io · Mar 4, 2021 · fc3ac66 · fc3ac66
1 parent 54bf01f
commit fc3ac66
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/packages/@sanity/base/src/components/SanityRoot.tsx b/packages/@sanity/base/src/components/SanityRoot.tsx
@@ -27,6 +27,7 @@ import DevServerStatus from './DevServerStatus'
 import {GlobalStyle} from './GlobalStyle'
 import MissingProjectConfig from './MissingProjectConfig'
 import VersionChecker from './VersionChecker'
+import {useZIndex, ZIndexProvider} from './zOffsets'
 
 Refractor.registerLanguage(bash)
 Refractor.registerLanguage(javascript)
@@ -71,6 +72,7 @@ function UIErrorMessage() {
 function AppProvider() {
   const [portalElement, setPortalElement] = useState(() => document.createElement('div'))
   const [uiError, setUIError] = useState<Error | null>(null)
+  const zIndex = useZIndex()
 
   try {
     useRootTheme()
@@ -86,7 +88,7 @@ function AppProvider() {
     <UserColorManagerProvider manager={userColorManager}>
       <PortalProvider element={portalElement}>
         <LayerProvider>
-          <ToastProvider paddingY={7} zOffset={10000}>
+          <ToastProvider paddingY={7} zOffset={zIndex.toast}>
             <SnackbarProvider>
               <ThemeColorProvider tone="transparent">
                 <GlobalStyle />
@@ -114,9 +116,11 @@ function SanityRoot() {
   }
 
   return (
-    <ThemeProvider theme={theme}>
-      <AppProvider />
-    </ThemeProvider>
+    <ZIndexProvider>
+      <ThemeProvider theme={theme}>
+        <AppProvider />
+      </ThemeProvider>
+    </ZIndexProvider>
   )
 }
 

diff --git a/packages/@sanity/base/src/components/zOffsets/defaults.ts b/packages/@sanity/base/src/components/zOffsets/defaults.ts
@@ -18,6 +18,7 @@ export const defaults: ZIndexContextValue = {
   drawershade: 1000000,
   drawer: 1000001,
   fullscreen: 1200000,
+  toast: 11000,
 
   // NOT IN USE
   dropdown: 200,

diff --git a/packages/@sanity/base/src/components/zOffsets/legacyZIndexes.ts b/packages/@sanity/base/src/components/zOffsets/legacyZIndexes.ts
@@ -21,6 +21,7 @@ export function getLegacyZIndexes(): ZIndexContextValue {
     drawershade: getCustomCSSPropertyNumber('--zindex-drawershade') || defaults.drawershade,
     drawer: getCustomCSSPropertyNumber('--zindex-drawer') || defaults.drawer,
     fullscreen: defaults.fullscreen,
+    toast: defaults.toast,
 
     // THESE ARE NOT IN USE:
     dropdown: getCustomCSSPropertyNumber('--zindex-dropdown') || defaults.dropdown,

diff --git a/packages/@sanity/base/src/components/zOffsets/types.ts b/packages/@sanity/base/src/components/zOffsets/types.ts
@@ -36,6 +36,9 @@ export interface ZIndexContextValue {
   /** Used for UI that sits on top of the entire application */
   fullscreen: number
 
+  /** Used for toasts */
+  toast: number
+
   // THESE ARE NOT IN USE:
   dropdown: number
   navbarFixed: number