Website - Refactor DocCodeBlock to fix z-index issues (#2704)

Author: KristinLBradley

website/app/initializers/showdown-extensions.js

@@ -109,8 +109,10 @@ export function initialize(/* application */) {
         selfExecutingBlock += `  <div class="doc-code-block__code-rendered">`;
         selfExecutingBlock += `    ${inputCodeblock}`;
         selfExecutingBlock += '  </div>';
-        selfExecutingBlock += `  <Doc::CopyButton @id='${blockUniqueId}' @type="solid" @textToCopy='${codeblockEncoded}' @encoded={{true}} aria-labelledby="copy-label-${blockUniqueId} pre-block-${blockUniqueId}"/>`;
-        selfExecutingBlock += `  ${preBlock}`;
+        selfExecutingBlock += '  <div class="doc-code-block__code-snippet-wrapper">';
+        selfExecutingBlock += `    <Doc::CopyButton @id='${blockUniqueId}' @type="solid" @textToCopy='${codeblockEncoded}' @encoded={{true}} aria-labelledby="copy-label-${blockUniqueId} pre-block-${blockUniqueId}"/>`;
+        selfExecutingBlock += `    ${preBlock}`;
+        selfExecutingBlock += '  </div>';
         selfExecutingBlock += '</div>';
 
         if(attributeString.includes('data-execute=false')) {

website/app/styles/doc-components/code-block.scss

@@ -11,20 +11,10 @@
 // Notice: vertical spacing is declared in `/styles/spacing`
 
 .doc-code-block {
-  position: relative;
-  z-index: 2;
   border-radius: 3px;
-
-  .doc-copy-button {
-    position: absolute;
-    right: 13px;
-    margin-top: 13px;
-  }
 }
 
 .doc-code-block__code-rendered {
-  position: relative;
-  z-index: 1;
   padding: 16px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath d='M1 2V0h1v1H0v1z' fill-opacity='.05'/%3E%3C/svg%3E");
   // use this to fine tune the size of the checkered pattern
@@ -43,6 +33,16 @@
   }
 }
 
+.doc-code-block__code-snippet-wrapper {
+  position: relative;
+
+  .doc-copy-button {
+    position: absolute;
+    right: 13px;
+    margin-top: 13px;
+  }
+}
+
 // notice: in some cases it's rendered as standalone element, so we have to have
 .doc-code-block__code-snippet {
   padding: 16px;

website/app/styles/doc-components/scroll-to-top.scss

@@ -7,7 +7,7 @@
   position: fixed;
   right: 40px;
   bottom: 40px;
-  z-index: 99;
+  z-index: 48; // Needs to be below z-index of hds-dialog-primitive__overlay
   width: 44px;
   height: 44px;
   padding: 8px;

website/app/styles/pages/application/sidebar.scss

@@ -58,19 +58,6 @@ body.application.index {
 // ALL THE OTHER PAGES
 
 body.application:not(.index) {
-  // if dialog is open, set sidebar z-index to 1
-  &.doc-page-wrapper:has(dialog[open]),
-  &.doc-page-wrapper:has(.hds-code-editor--is-full-screen) {
-    --doc-z-index-sidebar: 1;
-
-    .doc-scroll-to-top {z-index: 1;}
-  }
-
-  // if code editor is in full screen mode, set page header & scroll to top z-index to 1
-  &.doc-page-wrapper:has(.hds-code-editor--is-full-screen) {
-    .doc-page-header, .doc-scroll-to-top {z-index: 1;}
-  }
-
   // Notice: for `display` and animation/transition look below
   .doc-page-sidebar {
     position: fixed;

website/app/styles/pages/application/tabs.scss

@@ -36,20 +36,10 @@
   @include breakpoint.x-large() {
     padding: 24px var(--doc-page-stage-gutter-x-large) 0;
   }
-}
 
-// Make tabs position sticky/fixed if:
-// * the viewport height is greater than 480px AND
-// * dialog is NOT open
-// * code editor is NOT in full screen mode
-.doc-page-wrapper
-  :not(:has(dialog[open]))
-  :not(:has(.hds-code-editor--is-full-screen)) {
   @media (height >= 480px) {
-    .doc-page-tabs {
-      position: sticky;
-      top: var(--doc-page-header-height);
-    }
+    position: sticky;
+    top: var(--doc-page-header-height);
   }
 }