fix(spotlight): set z-index of default annotation to be above spotlig…

…ht container
Headstorm · Dec 6, 2021 · 4dd7acd · 4dd7acd
1 parent 24129a1
commit 4dd7acd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/components/RangeSlider/RangeSlider.stories.tsx b/src/components/RangeSlider/RangeSlider.stories.tsx
@@ -24,10 +24,10 @@ const Row = styled.div`
 const ColorPreview = styled.div`
   ${fonts.body}
 
-  height: 12em;
-  width: 34em;
+  height: 12rem;
+  width: 34rem;
   transition: color 0.5s;
-  font-size: 5em;
+  font-size: 5rem;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/src/components/Spotlight/Spotlight.tsx b/src/components/Spotlight/Spotlight.tsx
@@ -31,6 +31,8 @@ const Annotation = styled(AnimatedDiv)`
   left: 0;
   padding-bottom: 1rem;
 
+  z-index: 201;
+
   width: fit-content;
   max-width: 50vw;
 `;

diff --git a/src/components/Spotlight/__tests__/__snapshots__/Spotlight.test.tsx.snap b/src/components/Spotlight/__tests__/__snapshots__/Spotlight.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Spotlight Should match previous snapshot with a targetElement 1`] = `
-.c9 {
+<body>
+  .c9 {
   opacity: 0;
   background: linear-gradient( 90deg, rgba(0,0,0,0.75), rgba(0,0,0,0.25), rgba(0,0,0,0.75) ) repeat;
   color: transparent;
@@ -114,14 +115,14 @@ exports[`Spotlight Should match previous snapshot with a targetElement 1`] = `
   top: 0;
   left: 0;
   padding-bottom: 1rem;
+  z-index: 201;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   max-width: 50vw;
 }
 
-<body>
-  <div>
+<div>
     <div
       class=" c0"
       globalstyles="
@@ -239,6 +240,7 @@ exports[`Spotlight Should match previous snapshot with default props 1`] = `
   top: 0;
   left: 0;
   padding-bottom: 1rem;
+  z-index: 201;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;