feat: Remove the "pfe-" prefix from the history feature in pfe-tabs (#808)

Fixes #802

Author: kylebuch8

elements/pfe-tabs/README.md

@@ -73,8 +73,8 @@ This will override any context being passed from a parent component and will add
 Updates window.history and the URL to create sharable links. With the
 `pfe-tab-history` attribute, the tabs and each tab *must* have an `id`.
 
-The URL pattern will be `?pfe-{id-of-tabs}={id-of-selected-tab}`. In the example
-below, selecting "Tab 2" will update the URL as follows: `?pfe-my-tabs=tab2`.
+The URL pattern will be `?{id-of-tabs}={id-of-selected-tab}`. In the example
+below, selecting "Tab 2" will update the URL as follows: `?my-tabs=tab2`.
 
 ```html
 <pfe-tabs pfe-tab-history id="my-tabs">
@@ -99,7 +99,7 @@ By default, `pfe-tabs` will read the URL and look for a query string parameter
 that matches the id of a `pfe-tabs` component and a value of a specific
 `pfe-tab`.
 
-For example, `?pfe-my-tabs=tab2` would open the second tab in the code sample below.
+For example, `?my-tabs=tab2` would open the second tab in the code sample below.
 "my-tabs" is equal to the id of the `pfe-tabs` component and "tab2" is equal to
 the id of the second tab in the tab set.
 

elements/pfe-tabs/src/pfe-tabs.js

@@ -211,7 +211,7 @@ class PfeTabs extends PFElement {
       const urlParams = new URLSearchParams(window.location.search);
       const hash = window.location.hash;
 
-      urlParams.set(`pfe-${this.id}`, tab.id);
+      urlParams.set(`${this.id}`, tab.id);
       history.pushState({}, "", `${pathname}?${urlParams.toString()}${hash}`);
     }
 
@@ -447,10 +447,17 @@ class PfeTabs extends PFElement {
       urlParams = new URLSearchParams(window.location.search);
     }
 
-    if (urlParams && urlParams.has(`pfe-${this.id}`)) {
-      tabIndex = this._allTabs().findIndex(
-        tab => tab.id === urlParams.get(`pfe-${this.id}`)
-      );
+    // @DEPRECATED
+    // the "pfe-" prefix has been deprecated but we'll continue to support it
+    // we'll give priority to the urlParams.has(`${this.id}`) attribute first
+    // and fallback to urlParams.has(`pfe-${this.id}`) if it exists. We should
+    // be able to remove the || part of the if statement in the future
+    if (
+      urlParams &&
+      (urlParams.has(`${this.id}`) || urlParams.has(`pfe-${this.id}`))
+    ) {
+      const id = urlParams.get(`${this.id}`) || urlParams.get(`pfe-${this.id}`);
+      tabIndex = this._allTabs().findIndex(tab => tab.id === id);
     }
 
     return tabIndex;

elements/pfe-tabs/test/pfe-tabs_test.html

@@ -420,7 +420,38 @@ <h1>Tab 2 Content</h1>
         test("it should show the correct tab if there is a querystring parameter in the URL", done => {
           // the parameter should be equal to the id of the tabset
           // the value should be equal to the id of the tab you want opened
-          const searchParams = new URLSearchParams(window.location.search)
+          const searchParams = new URLSearchParams();
+          searchParams.set("fromQueryString", "fromQueryStringTab2");
+          var newPath = window.location.pathname + '?' + searchParams.toString();
+          history.pushState(null, '', newPath);
+
+          const fragment = document.createRange().createContextualFragment(`
+            <pfe-tabs id="fromQueryString">
+              <pfe-tab role="heading" slot="tab" id="fromQueryStringTab1">Tab 1</pfe-tab>
+              <pfe-tab-panel role="region" slot="panel">Content</pfe-tab-panel>
+              <pfe-tab role="heading" slot="tab" id="fromQueryStringTab2">Tab 2</pfe-tab>
+              <pfe-tab-panel role="region" slot="panel">Content</pfe-tab-panel>
+            </pfe-tabs>
+          `);
+
+          document.body.appendChild(fragment);
+
+          flush(() => {
+            const tabs = document.querySelector("#fromQueryString");
+            const tab2 = tabs.querySelector("#fromQueryStringTab2");
+            assert.equal(tabs.selectedIndex, 1);
+            assert.isTrue(tab2.hasAttribute("aria-selected"));
+
+            document.body.removeChild(tabs);
+            done();
+          });
+        });
+
+        test("it should continue to support the \"pfe-\" prefix in the URL and show the correct tab if there is a querystring parameter in the URL", done => {
+          // this supports any tabs that are currently using the "pfe-" prefix
+          // in the URL to open to a specific tab. the "pfe-" prefix has been
+          // deprecated and should no longer be used
+          const searchParams = new URLSearchParams();
           searchParams.set("pfe-fromQueryString", "fromQueryStringTab2");
           var newPath = window.location.pathname + '?' + searchParams.toString();
           history.pushState(null, '', newPath);
@@ -483,7 +514,7 @@ <h1>Tab 2 Content</h1>
 
           flush(() => {
             const urlSearchParams = new URLSearchParams(window.location.search);
-            assert.equal(urlSearchParams.get("pfe-history"), "historyTab2");
+            assert.equal(urlSearchParams.get("history"), "historyTab2");
             assert.equal(tabs.selectedIndex, 1);
             assert.isTrue(tab2.hasAttribute("aria-selected"));
             done();
@@ -500,7 +531,7 @@ <h1>Tab 2 Content</h1>
 
           flush(() => {
             const urlSearchParams = new URLSearchParams(window.location.search);
-            assert.equal(urlSearchParams.get("pfe-history"), "historyTab2");
+            assert.equal(urlSearchParams.get("history"), "historyTab2");
             assert.equal(tabs.selectedIndex, 0);
             assert.isTrue(tab1.hasAttribute("aria-selected"));
             done();