DOP-5052: fixing link buffer's on mobile (#1289)

mongodb · Oct 23, 2024 · eab275c · eab275c
1 parent 09442dc
commit eab275c
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 86 deletions.
diff --git a/src/components/DefinitionList/DefinitionListItem.js b/src/components/DefinitionList/DefinitionListItem.js
@@ -1,20 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import ComponentFactory from '../ComponentFactory';
-import { HeaderBuffer } from '../Permalink';
 import { theme } from '../../theme/docsTheme';
 import { findKeyValuePair } from '../../utils/find-key-value-pair';
 
+const HeaderBuffer = styled.div`
+  display: inline;
+  margin-top: -${theme.header.navbarScrollOffset};
+  position: absolute;
+  // Add a bit of padding to help headings be more accurately set as "active" on FF and Safari
+  padding-bottom: 2px;
+`;
+
 const DefinitionListItem = ({ nodeData: { children, term }, ...rest }) => {
   const termProps = {};
   const targetIdentifier = findKeyValuePair(term, 'type', 'inline_target');
 
   return (
     <>
-      {targetIdentifier && (
-        <HeaderBuffer id={targetIdentifier.html_id} bufferSpace={`-${theme.header.navbarScrollOffset}`} />
-      )}
+      {targetIdentifier && <HeaderBuffer id={targetIdentifier.html_id} />}
       <dt {...termProps}>
         {term.map((child, index) => (
           <ComponentFactory nodeData={child} key={`dt-${index}`} />

diff --git a/src/components/Permalink.js b/src/components/Permalink.js
@@ -20,15 +20,19 @@ const tooltipStyle = css`
   }
 `;
 
-export const HeaderBuffer = styled.div`
-  margin-top: ${({ bufferSpace }) => bufferSpace};
+const HeaderBuffer = styled.div`
+  display: inline;
+  left: 0;
+  top: 0;
+  margin-top: -${theme.header.navbarScrollOffset};
   position: absolute;
   // Add a bit of padding to help headings be more accurately set as "active" on FF and Safari
   padding-bottom: 2px;
 `;
 
 const headingStyle = (copied) => css`
   ${!!copied && 'visibility: visible !important;'}
+  position:relative;
   align-self: center;
   padding: 0 10px;
   visibility: hidden;
@@ -39,12 +43,11 @@ const iconStyling = css`
   margin-top: -2px;
 `;
 
-const Permalink = ({ id, description, buffer }) => {
+const Permalink = ({ id, description }) => {
   const [copied, setCopied] = useState(false);
   const [headingNode, setHeadingNode] = useState(null);
   const { darkMode } = useDarkMode();
   const url = isBrowser ? window.location.href.split('#')[0] + '#' + id : '';
-  const bufferSpace = buffer || `-${theme.header.navbarScrollOffset}`;
 
   useCopyClipboard(copied, setCopied, headingNode, url);
 
@@ -56,40 +59,37 @@ const Permalink = ({ id, description, buffer }) => {
   useHashAnchor(id, linkRef);
 
   return (
-    <>
-      <a
-        className={cx('headerlink', headingStyle(copied))}
-        ref={setHeadingNode}
-        href={`#${id}`}
-        title={'Permalink to this ' + description}
-        onClick={handleClick}
+    <a
+      className={cx('headerlink', headingStyle(copied))}
+      ref={setHeadingNode}
+      href={`#${id}`}
+      title={'Permalink to this ' + description}
+      onClick={handleClick}
+    >
+      <Icon
+        className={cx(iconStyling)}
+        glyph={'Link'}
+        size={12}
+        fill={darkMode ? palette.gray.light1 : palette.gray.base}
+      />
+      <Tooltip
+        className={cx(tooltipStyle)}
+        triggerEvent="click"
+        open={copied}
+        align="top"
+        justify="middle"
+        darkMode={true}
       >
-        <Icon
-          className={cx(iconStyling)}
-          glyph={'Link'}
-          size={12}
-          fill={darkMode ? palette.gray.light1 : palette.gray.base}
-        />
-        <Tooltip
-          className={cx(tooltipStyle)}
-          triggerEvent="click"
-          open={copied}
-          align="top"
-          justify="middle"
-          darkMode={true}
-        >
-          {'copied'}
-        </Tooltip>
-      </a>
-      <HeaderBuffer ref={linkRef} id={id} bufferSpace={bufferSpace} />
-    </>
+        {'copied'}
+      </Tooltip>
+      <HeaderBuffer ref={linkRef} id={id} />
+    </a>
   );
 };
 
 Permalink.propTypes = {
   id: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
-  buffer: PropTypes.string,
 };
 
 export default Permalink;
diff --git a/src/components/Target.js b/src/components/Target.js
@@ -1,9 +1,16 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
+import { cx, css } from '@leafygreen-ui/emotion';
 import useHashAnchor from '../hooks/use-hash-anchor';
+import { theme } from '../theme/docsTheme';
 import ComponentFactory from './ComponentFactory';
 import Permalink from './Permalink';
 
+const headerBuffer = css`
+  scroll-margin-top: ${theme.header.navbarScrollOffset};
+  position: absolute;
+`;
+
 // Based on condition isValid, split array into two arrays: [[valid, invalid]]
 const partition = (array, isValid) => {
   return array.reduce(
@@ -54,7 +61,7 @@ const Target = ({ nodeData: { children, html_id, name, options }, ...rest }) =>
           </dd>
         </dl>
       ) : (
-        <span ref={targetRef} className="header-buffer" id={html_id} />
+        <span ref={targetRef} className={cx(headerBuffer)} id={html_id} />
       )}
     </React.Fragment>
   );

diff --git a/tests/unit/__snapshots__/Collapsible.test.js.snap b/tests/unit/__snapshots__/Collapsible.test.js.snap
@@ -48,6 +48,7 @@ exports[`collapsible component renders all the content in the options and childr
 }
 
 .emotion-3 {
+  position: relative;
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -62,6 +63,9 @@ exports[`collapsible component renders all the content in the options and childr
 }
 
 .emotion-5 {
+  display: inline;
+  left: 0;
+  top: 0;
   margin-top: -85px;
   position: absolute;
   padding-bottom: 2px;
@@ -540,11 +544,11 @@ exports[`collapsible component renders all the content in the options and childr
                 fill="currentColor"
               />
             </svg>
+            <div
+              class="emotion-5 emotion-6"
+              id="this-is-a-heading"
+            />
           </a>
-          <div
-            class="emotion-5 emotion-6"
-            id="this-is-a-heading"
-          />
         </h2>
         <p
           class="emotion-7"

diff --git a/tests/unit/__snapshots__/Heading.test.js.snap b/tests/unit/__snapshots__/Heading.test.js.snap
@@ -16,6 +16,7 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-1 {
+  position: relative;
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -30,6 +31,9 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-3 {
+  display: inline;
+  left: 0;
+  top: 0;
   margin-top: -85px;
   position: absolute;
   padding-bottom: 2px;
@@ -64,11 +68,11 @@ exports[`renders correctly 1`] = `
           fill="currentColor"
         />
       </svg>
+      <div
+        class="emotion-3 emotion-4"
+        id="create-an-administrative-username-and-password"
+      />
     </a>
-    <div
-      class="emotion-3 emotion-4"
-      id="create-an-administrative-username-and-password"
-    />
   </h3>
 </DocumentFragment>
 `;
@@ -89,6 +93,7 @@ exports[`renders correctly in dark mode 1`] = `
 }
 
 .emotion-1 {
+  position: relative;
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -103,6 +108,9 @@ exports[`renders correctly in dark mode 1`] = `
 }
 
 .emotion-3 {
+  display: inline;
+  left: 0;
+  top: 0;
   margin-top: -85px;
   position: absolute;
   padding-bottom: 2px;
@@ -137,11 +145,11 @@ exports[`renders correctly in dark mode 1`] = `
           fill="currentColor"
         />
       </svg>
+      <div
+        class="emotion-3 emotion-4"
+        id="create-an-administrative-username-and-password"
+      />
     </a>
-    <div
-      class="emotion-3 emotion-4"
-      id="create-an-administrative-username-and-password"
-    />
   </h3>
 </DocumentFragment>
 `;
diff --git a/tests/unit/__snapshots__/Procedure.test.js.snap b/tests/unit/__snapshots__/Procedure.test.js.snap
@@ -347,6 +347,7 @@ exports[`renders steps nested in include nodes 1`] = `
 }
 
 .emotion-10 {
+  position: relative;
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -361,6 +362,9 @@ exports[`renders steps nested in include nodes 1`] = `
 }
 
 .emotion-12 {
+  display: inline;
+  left: 0;
+  top: 0;
   margin-top: -85px;
   position: absolute;
   padding-bottom: 2px;
@@ -431,11 +435,11 @@ exports[`renders steps nested in include nodes 1`] = `
                   fill="currentColor"
                 />
               </svg>
+              <div
+                class="emotion-12 emotion-13"
+                id="step-1"
+              />
             </a>
-            <div
-              class="emotion-12 emotion-13"
-              id="step-1"
-            />
           </h1>
           <p
             class="emotion-14"
@@ -490,11 +494,11 @@ exports[`renders steps nested in include nodes 1`] = `
                   fill="currentColor"
                 />
               </svg>
+              <div
+                class="emotion-12 emotion-13"
+                id="step-2"
+              />
             </a>
-            <div
-              class="emotion-12 emotion-13"
-              id="step-2"
-            />
           </h1>
           <p
             class="emotion-14"
@@ -549,11 +553,11 @@ exports[`renders steps nested in include nodes 1`] = `
                   fill="currentColor"
                 />
               </svg>
+              <div
+                class="emotion-12 emotion-13"
+                id="step-3"
+              />
             </a>
-            <div
-              class="emotion-12 emotion-13"
-              id="step-3"
-            />
           </h1>
           <p
             class="emotion-14"
@@ -608,11 +612,11 @@ exports[`renders steps nested in include nodes 1`] = `
                   fill="currentColor"
                 />
               </svg>
+              <div
+                class="emotion-12 emotion-13"
+                id="step-4"
+              />
             </a>
-            <div
-              class="emotion-12 emotion-13"
-              id="step-4"
-            />
           </h1>
           <p
             class="emotion-14"
@@ -667,11 +671,11 @@ exports[`renders steps nested in include nodes 1`] = `
                   fill="currentColor"
                 />
               </svg>
+              <div
+                class="emotion-12 emotion-13"
+                id="step-5"
+              />
             </a>
-            <div
-              class="emotion-12 emotion-13"
-              id="step-5"
-            />
           </h1>
           <p
             class="emotion-14"
@@ -726,11 +730,11 @@ exports[`renders steps nested in include nodes 1`] = `
                   fill="currentColor"
                 />
               </svg>
+              <div
+                class="emotion-12 emotion-13"
+                id="step-6"
+              />
             </a>
-            <div
-              class="emotion-12 emotion-13"
-              id="step-6"
-            />
           </h1>
           <p
             class="emotion-14"
@@ -785,11 +789,11 @@ exports[`renders steps nested in include nodes 1`] = `
                   fill="currentColor"
                 />
               </svg>
+              <div
+                class="emotion-12 emotion-13"
+                id="step-7"
+              />
             </a>
-            <div
-              class="emotion-12 emotion-13"
-              id="step-7"
-            />
           </h1>
           <p
             class="emotion-14"