Makes jumplinks work (#254)

* jumplinks on main content scroll but buggy * update PF and move anchor to heading * add fix for double highlight of jumplink * mysterious change to unrelated test * add yarn.lock
2020-12-11 12:34:18 -05:00 · 2020-12-11 12:34:18 -05:00 · 691708e5f2
commit 691708e5f2
parent 54c9698661
10 changed files with 82 additions and 39 deletions
--- a/package.json
+++ b/package.json
@ -17,7 +17,7 @@
  },
  "dependencies": {
    "@patternfly/patternfly": "^4.65.6",
-    "@patternfly/react-core": "4.79.2",
+    "@patternfly/react-core": "4.83.3",
    "@patternfly/react-icons": "4.7.18",
    "@patternfly/react-table": "4.19.24",
    "file-saver": "^2.0.2",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -14,6 +14,9 @@ import { routes, RouteDef } from "./route-config";
 import { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs";
 import { ForbiddenSection } from "./ForbiddenSection";

+// This must match the id given as scrollableSelector in scroll-form
+const mainPageContentId = "kc-main-content-page-container";
+
 const AppContexts = ({ children }: { children: ReactNode }) => (
  <AccessContextProvider>
    <Help>
@ -44,6 +47,7 @@ export const App = () => {
          isManagedSidebar
          sidebar={<PageNav />}
          breadcrumb={<PageBreadCrumbs />}
+          mainContainerId={mainPageContentId}
        >
          <Switch>
            {routes(() => {}).map((route, i) => (
--- a/src/components/json-file-upload/tests/snapshots/JsonFileUpload.test.tsx.snap
+++ b/src/components/json-file-upload/tests/snapshots/JsonFileUpload.test.tsx.snap
@ -216,6 +216,7 @@ exports[`<JsonFileUpload /> render 1`] = `
                      disabled={false}
                      id="test"
                      innerRef={null}
+                      isDisabled={false}
                      isRequired={false}
                      name="test"
                      onChange={[Function]}
@ -487,6 +488,7 @@ exports[`<JsonFileUpload /> upload file 1`] = `
                      disabled={false}
                      id="upload"
                      innerRef={null}
+                      isDisabled={false}
                      isRequired={false}
                      name="upload"
                      onChange={[Function]}
--- a/src/components/scroll-form/FormPanel.tsx
+++ b/src/components/scroll-form/FormPanel.tsx
@ -1,17 +1,24 @@
 import React from "react";
 import { Title } from "@patternfly/react-core";

-import style from "./form-panel.module.css";
+import "./form-panel.css";

 interface FormPanelProps extends React.HTMLProps<HTMLFormElement> {
  title: string;
+  scrollId: string;
 }

 export const FormPanel = (props: FormPanelProps) => {
-  const { title, children, ...rest } = props;
+  const { title, children, scrollId, ...rest } = props;
  return (
-    <section {...rest} className={style.panel}>
-      <Title headingLevel="h4" size="xl" className={style.title}>
+    <section {...rest} className="kc-form-panel__panel">
+      <Title
+        headingLevel="h4"
+        size="xl"
+        className="kc-form-panel__title"
+        id={scrollId}
+        tabIndex={0} // so that jumpLink sends focus to the section for a11y
+      >
        {title}
      </Title>
      {children}
--- a/src/components/scroll-form/ScrollForm.tsx
+++ b/src/components/scroll-form/ScrollForm.tsx
@ -5,40 +5,43 @@ import {
  GridItem,
  JumpLinks,
  JumpLinksItem,
-  Title,
+  PageSection,
 } from "@patternfly/react-core";

 import { FormPanel } from "./FormPanel";
-import style from "./scroll-form.module.css";
+import "./scroll-form.css";

 type ScrollFormProps = {
  sections: string[];
  children: React.ReactNode;
 };

+// This must match the page id created in App.tsx unless another page section has been given hasScrollableContent
+const mainPageContentId = "#kc-main-content-page-container";
+
+let spacesToHyphens = (string: string): string => {
+  return string.replace(/\s+/g, "-");
+};
+
 export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
  const { t } = useTranslation("common");
-  const [active, setActive] = useState(sections[0]);

  const Nav = () => (
-    <div className={style.sticky}>
-      <Title headingLevel="h5" size="lg">
-        {t("jumpToSection")}
-      </Title>
-
-      <JumpLinks isVertical>
+    <PageSection className="kc-scroll-form--sticky">
+      <JumpLinks
+        isVertical
+        // scrollableSelector has to point to the id of the element whose scrollTop changes
+        // to scroll the entire main section, it has to be the pf-c-page__main
+        scrollableSelector={mainPageContentId}
+        label={t("jumpToSection")}
+        offset={76}
+      >
        {sections.map((cat) => (
-          <JumpLinksItem
-            isActive={active === cat}
-            key={cat}
-            href={`#${cat}`}
-            onClick={() => setActive(cat)}
-          >
-            {cat}
-          </JumpLinksItem>
+          // note that JumpLinks currently does not work with spaces in the href
+          <JumpLinksItem href={`#${spacesToHyphens(cat)}`}>{cat}</JumpLinksItem>
        ))}
      </JumpLinks>
-    </div>
+    </PageSection>
  );

  const nodes = Children.toArray(children);
@ -46,7 +49,8 @@ export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
    <Grid hasGutter>
      <GridItem span={8}>
        {sections.map((cat, index) => (
-          <FormPanel id={cat} key={cat} title={cat}>
+          <FormPanel scrollId={spacesToHyphens(cat)} key={cat} title={cat}>
+            {/* <FormPanel scrollId={cat.replace(/\s+/g, "-")} key={cat} title={cat}> */}
            {nodes[index]}
          </FormPanel>
        ))}
--- a/src/components/scroll-form/form-panel.css
+++ b/src/components/scroll-form/form-panel.css
@ -0,0 +1,8 @@
+.kc-form-panel__panel {
+  padding-top: var(--pf-global--spacer--lg);
+  padding-bottom: var(--pf-global--spacer--2xl);
+}
+
+.kc-form-panel__title {
+  margin-bottom: var(--pf-global--spacer--lg);
+}
--- a/src/components/scroll-form/form-panel.module.css
+++ b/src/components/scroll-form/form-panel.module.css
@ -1,9 +0,0 @@
-
-.panel {
-  padding-top: 24px;
-  padding-bottom: 48px;
-}
-
-.title {
-  padding-bottom: 24px;
-}
--- a/src/components/scroll-form/scroll-form.css
+++ b/src/components/scroll-form/scroll-form.css
@ -0,0 +1,4 @@
+.kc-scroll-form--sticky {
+  position: sticky;
+  top: 0;
+}
--- a/src/components/scroll-form/scroll-form.module.css
+++ b/src/components/scroll-form/scroll-form.module.css
@ -1,5 +0,0 @@
-
-.sticky {
-  position: sticky;
-  top: 100px;
-}
--- a/yarn.lock
+++ b/yarn.lock
@ -3468,7 +3468,20 @@
  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.65.6.tgz#ca906c6d55ffc3097d0e23d9ad578e95cb866ea3"
  integrity sha512-dENO2nZbf5SoEH68coW9U+6FpZmdVnFVjztl7rUeWUPSBUuF1eWld5LT03Q6PVoZuWqqbJxFJodyFKwLb+L9vw==

-"@patternfly/react-core@4.79.2", "@patternfly/react-core@^4.79.2":
+"@patternfly/react-core@4.83.3":
+  version "4.83.3"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.83.3.tgz#0f74d55fd85b0a0444cf97bbc49a8c2a6f56aea2"
+  integrity sha512-/1E9M0IyiWTBbot8Ub75zNkcYr3rWRiWIY7fMH5Lb63cBY8lXYOupZQ/6pC6i/zVP75EUEYdjHeL8K501Ejvow==
+  dependencies:
+    "@patternfly/react-icons" "^4.7.21"
+    "@patternfly/react-styles" "^4.7.20"
+    "@patternfly/react-tokens" "^4.9.21"
+    focus-trap "4.0.2"
+    react-dropzone "9.0.0"
+    tippy.js "5.1.2"
+    tslib "1.13.0"
+
+"@patternfly/react-core@^4.79.2":
  version "4.79.2"
  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.79.2.tgz#058ebea5a2749294dd69ad9fe8d3e43088100ada"
  integrity sha512-TCWi5Hu8+gpqFVAL4ZMXCRLbRfayM7wJ8+/Ob4rfhC61qm36CZNAcqWOmuV8bghOzB29INUMNShggtuiUa5mkg==
@ -3486,11 +3499,21 @@
  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.7.18.tgz#c188f1f460f62bd9ee262f1da580caaefbf8fdf9"
  integrity sha512-Kd0JjeVCESpMJGb5ZkLXvAdCuklV9dYGUkcTO18WMyXQ57s9+xXjVA77wojmp6Ru1ZCWOP5bLXZOKmwVnOfUpQ==

+"@patternfly/react-icons@^4.7.21":
+  version "4.7.21"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.7.21.tgz#0f54cf7c784eb34802fe49d55087cbe9216db2c6"
+  integrity sha512-m6gqfE4KwqviGmYiHm3lTohTCgBANaQc0GXQy1NOjN/EYdmahOzmrCSulIDx37qU0y+5AwOtBQBQybKIe4mVKA==
+
 "@patternfly/react-styles@^4.7.16":
  version "4.7.16"
  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.7.16.tgz#a6c5c1cd7efbe54423210ba9cd70a4c41660e09e"
  integrity sha512-bJmRrYKXgHGPPwLHg/gy1tDb/qEV6JpFLgkelLuz38czXeBnPpAUn9yKry3wNr95VQGERT6FcLsWjXKPY1x42Q==

+"@patternfly/react-styles@^4.7.20":
+  version "4.7.20"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.7.20.tgz#098ecbbc78bf2e1dfd7ca21725047b72f0ea189e"
+  integrity sha512-9Nz0SmBIgv7p8aIa/v8p7wFJ8yVI5ZFw6Xtr7QUX836yPPrzbse5IfpqINYBD7Wqv0yGMkfOh5VP2Q0q+ks/rg==
+
 "@patternfly/react-table@4.19.24":
  version "4.19.24"
  resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-4.19.24.tgz#5d121e60f1475af0001a64ace278b92da334614b"
@ -3509,6 +3532,11 @@
  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.9.18.tgz#b34afc5fd2567a50b7658aff004f31b536fd9096"
  integrity sha512-zQfqwKtoz1hDngyiGnF6oHeESDtgNY6C79Db97JxMMuRBV7i+5f6uC/DrYhcqNtqHA7mxrVJg0SM1xnPSAW9lA==

+"@patternfly/react-tokens@^4.9.21":
+  version "4.9.21"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.9.21.tgz#f59950970ce87ed296663a475de202c7e8ae4aaa"
+  integrity sha512-PcfOGAbQeKfDBX8V9QFPS+rFVHzpiFpOgbqdquPMyGpnr5rV+YXJioOppVN6WpyY2vjUCEQB/n3pdYT3ZWoV7g==
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.4.2":
  version "0.4.3"
  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz#1eec460596d200c0236bf195b078a5d1df89b766"