fix: Updating pfelement to cascade on attribute; add back persist test (#1554)

* fix: Updating pfelement to cascade on attribute

* fix: Bring back comments removed and tidy up parent selector

* fix: Update which function is run for on attribute rendering

* fix: Update changelog

* fix: Add check for parentNode

* fix: Switch back to parentNode

* fix: Fixing resetContext logic

* fix: Switch content set to use resetContext and remove console outputs

* fix: Remove duplicate isPFElement

* fix: Remove isPFElement

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: castastrophe <[email protected]>

Author: 3 people

CHANGELOG-1.x.md

@@ -1,7 +1,8 @@
-# 1.6.0 (2021)
+# 1.6.0 (2021-04-23)
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: JSDoc preview added for PFElement
+- [0a549f8](https://github.com/patternfly/patternfly-elements/commit/0a549f8c54037e01006063800e729d633b515f66) feat: JSDoc preview added for PFElement
 - [65983e6](https://github.com/patternfly/patternfly-elements/commit/65983e60d5394116d3dce6870b77f72772fa09c0) fix: pfe-primary-detail IE11 rendering fix
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Context initialization cascading from parent to child (#1438)
 
 # 1.5.1 (2021-04-15)
 

elements/pfe-accordion/demo/index.html

@@ -46,12 +46,12 @@
       <h2>Accordion component</h2>
     </header>
     <article>
-      <pfe-accordion>
+      <pfe-accordion id="accordion-default">
         <pfe-accordion-header id="first-header">
           <h3>Nested panel example</h3>
         </pfe-accordion-header>
         <pfe-accordion-panel>
-          <pfe-accordion disclosure="false">
+          <pfe-accordion disclosure="false" id="accordion-nested">
             <pfe-accordion-header>
               <h3>Panel with multiple paragraphs</h3>
             </pfe-accordion-header>
@@ -107,12 +107,12 @@ <h3>Panel with CTA</h3>
       <h2>Accordion component on dark</h2>
     </header>
     <article>
-      <pfe-accordion>
+      <pfe-accordion id="accordion-darkest">
         <pfe-accordion-header>
           <h3>Nested panel example</h3>
         </pfe-accordion-header>
         <pfe-accordion-panel>
-          <pfe-accordion>
+          <pfe-accordion id="accordion-darkest-nested">
             <pfe-accordion-header>
               <h3>Panel with multiple paragraphs</h3>
             </pfe-accordion-header>

elements/pfe-content-set/src/pfe-content-set.js

@@ -483,6 +483,8 @@ class PfeContentSet extends PFElement {
     Promise.all([customElements.whenDefined(tag)]).then(() => {
       this.cascadeProperties();
 
+      this.resetContext();
+
       // Attach the mutation observer
       if (!this.isIE11) this._observer.observe(this, CONTENT_MUTATION_CONFIG);
 

elements/pfe-content-set/test/pfe-content-set_test.js

@@ -215,10 +215,10 @@ suite('<pfe-content-set>', () => {
 
   test("it should set the correct \"on\" attribute from a parent component that has a color attribute to the nested tabs",
     done => {
-      flush(() => {
-        const tabBand = document.querySelector("#band");
-        const contentSet = tabBand.querySelector("pfe-content-set");
+      const tabBand = document.querySelector("#band");
+      const contentSet = tabBand.querySelector("pfe-content-set");
 
+      Promise.all([customElements.whenDefined("pfe-content-set")]).then(() => {
         const tabs = contentSet.view;
         const tab = tabs.querySelector("pfe-tab");
         const panel = tabs.querySelector("pfe-tab-panel");
@@ -236,8 +236,8 @@ suite('<pfe-content-set>', () => {
 
           done();
         });
-
       });
+
     });
 
   test("it should set the correct \"on\" attribute from a parent component that has a color attribute to the nested accordion",

elements/pfelement/src/pfelement.js

@@ -285,22 +285,52 @@ class PFElement extends HTMLElement {
    * This alerts nested components to a change in the context
    */
   contextUpdate() {
-    // If a value has been set, alert any nested children of the change
-    [...this.querySelectorAll("*"), ...this.shadowRoot.querySelectorAll("*")]
+    // Loop over light DOM elements, find direct descendants that are components
+    const lightEls = [...this.querySelectorAll("*")]
       .filter(item => item.tagName.toLowerCase().slice(0, 4) === `${prefix}-`)
-      .map(child => {
-        this.log(`Update context of ${child.tag}`);
-        Promise.all([customElements.whenDefined(child.tagName.toLowerCase())]).then(() => {
-          // Ask the component to recheck it's context in case it changed
-          child.resetContext(this.on);
-        });
+      // Closest will return itself or it's ancestor matching that selector
+      .filter(item => {
+        // If there is no parent element, return null
+        if (!item.parentElement) return;
+        // Otherwise, find the closest component that's this one
+        else return item.parentElement.closest(`[${this._pfeClass._getCache("prop2attr").pfelement}]`) === this;
+      });
+
+    // Loop over shadow elements, find direct descendants that are components
+    let shadowEls = [...this.shadowRoot.querySelectorAll("*")]
+      .filter(item => item.tagName.toLowerCase().slice(0, 4) === `${prefix}-`)
+      // Closest will return itself or it's ancestor matching that selector
+      .filter(item => {
+        // If there is a parent element and we can find another web component in the ancestor tree
+        if (item.parentElement && item.parentElement.closest(`[${this._pfeClass._getCache("prop2attr").pfelement}]`)) {
+          return item.parentElement.closest(`[${this._pfeClass._getCache("prop2attr").pfelement}]`) === this;
+        }
+        // Otherwise, check if the host matches this context
+        if (item.getRootNode().host === this) return true;
+
+        // If neither state is true, return false
+        return false;
       });
+
+    const nestedEls = lightEls.concat(shadowEls);
+
+    // If nested elements don't exist, return without processing
+    if (nestedEls.length === 0) return;
+
+    // Loop over the nested elements and reset their context
+    nestedEls.map(child => {
+      this.log(`Update context of ${child.tagName.toLowerCase()}`);
+      Promise.all([customElements.whenDefined(child.tagName.toLowerCase())]).then(() => {
+        // Ask the component to recheck it's context in case it changed
+        child.resetContext(this.on);
+      });
+    });
   }
 
   resetContext(fallback) {
     if (this.isIE11) return;
 
-    this.log(`Resetting context on ${this.tag}`);
+    this.log(`Resetting context`);
     // Priority order for context values to be pulled from:
     //--> 1. context (OLD: pfe-theme)
     //--> 2. --context (OLD: --theme)
@@ -429,8 +459,8 @@ class PFElement extends HTMLElement {
     // Cascade properties to the rendered template
     this.cascadeProperties();
 
-    // Reset the display context
-    this.resetContext();
+    // Update the display context
+    this.contextUpdate();
 
     if (PFElement.trackPerformance()) {
       try {
@@ -494,7 +524,7 @@ class PFElement extends HTMLElement {
     const cascade = this._pfeClass._getCache("cascadingProperties");
 
     if (cascade) {
-      if (window.ShadyCSS && this._cascadeObserver) this._cascadeObserver.disconnect();
+      if (this._cascadeObserver) this._cascadeObserver.disconnect();
 
       let selectors = Object.keys(cascade);
       // Find out if anything in the nodeList matches any of the observed selectors for cacading properties
@@ -525,7 +555,7 @@ class PFElement extends HTMLElement {
       }
 
       // @TODO This is here for IE11 processing; can move this after deprecation
-      if (window.ShadyCSS && this._rendered && this._cascadeObserver)
+      if (this._rendered && this._cascadeObserver)
         this._cascadeObserver.observe(this, {
           attributes: true,
           childList: true,
@@ -550,6 +580,7 @@ class PFElement extends HTMLElement {
    */
   _contextObserver(oldValue, newValue) {
     if (newValue && ((oldValue && oldValue !== newValue) || !oldValue)) {
+      this.log(`Running the context observer`);
       this.on = newValue;
       this.cssVariable("context", newValue);
     }
@@ -560,6 +591,7 @@ class PFElement extends HTMLElement {
    */
   _onObserver(oldValue, newValue) {
     if ((oldValue && oldValue !== newValue) || (newValue && !oldValue)) {
+      this.log(`Context update`);
       // Fire an event for child components
       this.contextUpdate();
     }
@@ -593,8 +625,6 @@ class PFElement extends HTMLElement {
       if (mutation.type === "childList" && mutation.addedNodes.length) {
         this.cascadeProperties(mutation.addedNodes);
       }
-      // @TODO: Do something when mutation type is attribute?
-      // else if (mutation.type === "attributes") {}
     }
   }
   /* --- End observers --- */
@@ -693,7 +723,7 @@ class PFElement extends HTMLElement {
   _initializeSlots(tag, slots) {
     this.log("Validate slots...");
 
-    if (window.ShadyCSS && this._slotsObserver) this._slotsObserver.disconnect();
+    if (this._slotsObserver) this._slotsObserver.disconnect();
 
     // Loop over the properties provided by the schema
     Object.keys(slots).forEach(slot => {
@@ -739,7 +769,7 @@ class PFElement extends HTMLElement {
 
     this.log("Slots validated.");
 
-    if (window.ShadyCSS && this._slotsObserver) this._slotsObserver.observe(this, { childList: true });
+    if (this._slotsObserver) this._slotsObserver.observe(this, { childList: true });
   }
 
   /**

scripts/test.js

@@ -12,14 +12,21 @@ const argv = require("yargs")
     ["npm test", "(run all tests, builds by default)"],
     ["npm test -- pfe-card", "(run one test)"],
     ["npm test -- pfe-card pfe-band", "(run multiple tests)"],
-    ["npm test -- --nobuild", "(do not build the component(s) prior to running tests)"]
+    ["npm test -- --nobuild", "(do not build the component(s) prior to running tests)"],
+    ["npm test -- --debug", "(maintain the test environment for debugging)"]
   ])
   .options({
     nobuild: {
       default: false,
       alias: "nb",
       describe: "do not build the component(s) prior to running tests",
       type: "boolean"
+    },
+    debug: {
+      default: false,
+      alias: "p",
+      describe: "maintain the test environment for debugging",
+      type: "boolean"
     }
   }).argv;
 
@@ -35,6 +42,6 @@ const build = !argv.nobuild ? `npm run build ${components.join(" ")} && ` : "";
 shell.exec(
   `${build}./node_modules/.bin/wct --config-file wct.conf.json --npm ${
     components ? components.map(item => `\"./elements/${item}/test\"`).join(" ") : ""
-  }`,
+  }${argv.debug ? " -p" : ""}`,
   code => process.exit(code)
 );