Fix on z-index for st.balloons() and st.snow() (#4911)

* Fix on z-index for balloons and snow Co-authored-by: Juan Martin Garcia <juan.garcia@snowflake.com>
streamlit · Jul 1, 2022 · 4da9a7e · 4da9a7e
1 parent 6dd7b6c
commit 4da9a7e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/frontend/src/components/core/StatusWidget/__snapshots__/StatusWidget.test.tsx.snap b/frontend/src/components/core/StatusWidget/__snapshots__/StatusWidget.test.tsx.snap
@@ -402,12 +402,12 @@ exports[`Tooltip element renders running img correctly with custom dark backgrou
         "balloons": 1000000,
         "base": 0,
         "fullscreenWrapper": 1000050,
-        "header": 1000020,
+        "header": 999990,
         "hide": -1,
         "menuButton": 110,
         "popupMenu": 1000040,
         "sidebar": 100,
-        "sidebarMobile": 1000030,
+        "sidebarMobile": 999995,
         "tablePortal": 1000110,
       },
     }
@@ -814,12 +814,12 @@ exports[`Tooltip element renders running img correctly with custom dark backgrou
           "balloons": 1000000,
           "base": 0,
           "fullscreenWrapper": 1000050,
-          "header": 1000020,
+          "header": 999990,
           "hide": -1,
           "menuButton": 110,
           "popupMenu": 1000040,
           "sidebar": 100,
-          "sidebarMobile": 1000030,
+          "sidebarMobile": 999995,
           "tablePortal": 1000110,
         },
       }
@@ -3573,12 +3573,12 @@ exports[`Tooltip element renders running img correctly with custom light backgro
         "balloons": 1000000,
         "base": 0,
         "fullscreenWrapper": 1000050,
-        "header": 1000020,
+        "header": 999990,
         "hide": -1,
         "menuButton": 110,
         "popupMenu": 1000040,
         "sidebar": 100,
-        "sidebarMobile": 1000030,
+        "sidebarMobile": 999995,
         "tablePortal": 1000110,
       },
     }
@@ -3985,12 +3985,12 @@ exports[`Tooltip element renders running img correctly with custom light backgro
           "balloons": 1000000,
           "base": 0,
           "fullscreenWrapper": 1000050,
-          "header": 1000020,
+          "header": 999990,
           "hide": -1,
           "menuButton": 110,
           "popupMenu": 1000040,
           "sidebar": 100,
-          "sidebarMobile": 1000030,
+          "sidebarMobile": 999995,
           "tablePortal": 1000110,
         },
       }
@@ -6744,12 +6744,12 @@ exports[`Tooltip element renders running img correctly with darkTheme 1`] = `
         "balloons": 1000000,
         "base": 0,
         "fullscreenWrapper": 1000050,
-        "header": 1000020,
+        "header": 999990,
         "hide": -1,
         "menuButton": 110,
         "popupMenu": 1000040,
         "sidebar": 100,
-        "sidebarMobile": 1000030,
+        "sidebarMobile": 999995,
         "tablePortal": 1000110,
       },
     }
@@ -7156,12 +7156,12 @@ exports[`Tooltip element renders running img correctly with darkTheme 1`] = `
           "balloons": 1000000,
           "base": 0,
           "fullscreenWrapper": 1000050,
-          "header": 1000020,
+          "header": 999990,
           "hide": -1,
           "menuButton": 110,
           "popupMenu": 1000040,
           "sidebar": 100,
-          "sidebarMobile": 1000030,
+          "sidebarMobile": 999995,
           "tablePortal": 1000110,
         },
       }
@@ -9915,12 +9915,12 @@ exports[`Tooltip element renders running img correctly with lightTheme 1`] = `
         "balloons": 1000000,
         "base": 0,
         "fullscreenWrapper": 1000050,
-        "header": 1000020,
+        "header": 999990,
         "hide": -1,
         "menuButton": 110,
         "popupMenu": 1000040,
         "sidebar": 100,
-        "sidebarMobile": 1000030,
+        "sidebarMobile": 999995,
         "tablePortal": 1000110,
       },
     }
@@ -10327,12 +10327,12 @@ exports[`Tooltip element renders running img correctly with lightTheme 1`] = `
           "balloons": 1000000,
           "base": 0,
           "fullscreenWrapper": 1000050,
-          "header": 1000020,
+          "header": 999990,
           "hide": -1,
           "menuButton": 110,
           "popupMenu": 1000040,
           "sidebar": 100,
-          "sidebarMobile": 1000030,
+          "sidebarMobile": 999995,
           "tablePortal": 1000110,
         },
       }

diff --git a/frontend/src/theme/primitives/zIndices.ts b/frontend/src/theme/primitives/zIndices.ts
@@ -18,8 +18,8 @@
 const sidebar = 100
 const menuButton = sidebar + 10
 const balloons = 1000000
-const header = balloons + 20
-const sidebarMobile = balloons + 30
+const header = balloons - 10
+const sidebarMobile = balloons - 5
 const popupMenu = balloons + 40
 const fullscreenWrapper = balloons + 50
 const tablePortal = fullscreenWrapper + 60