fix: Content set hold rendering until upgrade, prefixed attribute support for overflow property in cards (#1427)

* fix: Fixing the cascade of the alignment

* fix: Writing tests

* fix: Add new tests

* fix: Manually set properties

* fix: Fix build error

* fix: Additional tests

* fix: Remove auto-import; darn you VSCode

* fix: Update tests

* fix: Comment out React tests for attributes

* fix: Final updates

* fix: Revert demo update

* fix: Remove comments for debugging

* fix: Update changelog

* fix: Add align overrides and set a skip on the tests failing for react

* feat: Docker image config

* updated spandix default settings.

* fix: Working through test errors

* fix: Try skipping the test suite again

* fix: Update test

* fix: Updating error related to tdd and bdd

* fix: Update syntax

* fix: Update postbuild

* fix: Fix react skip logic

* fix: Update mix bdd errors

* fix: Use a before each

* fix: Use describe instead of suite

* fix: Revert unrelated updates

* fix: Setup

* fix: Skip react and vue

* fix: Remove extra escape hooks

* fix: Fix width error in tests

* fix: Revert unneeded file updates

* fix: Move fixture to setup

* fix: Test adding back in react and vue

* fix: Replace done with skip

* fix: React skip attribute suite

* fix: Skip react & vue when using test fixtures

* fix: Push up working fixes

* Fix content set cascading attributes alt (#1420)

* fix: Fix IE11 bug! Upgraded elements being hidden by the light DOM content

* fix: Prettier formatting existing items

* fix: Revert unnecessary updates

* Remove unneeded log outputs in pfelement

* fix: updating tests

* fix: Remove unused connect method

* fix: Add back content reference for non-IE envs

* fix: Fix resize error

* fix: Add check that this.view exists before fetching tag

* fix: Fixing issues found in branch testing

* Apply suggestions from code review

* fix: Update tests to use customElements.whenDefined instead of customElements.define

* fix: Fix appendChild error from test suite

* fix: Append new header/panel to content set not rendered element

* fix: Adding comment to pfelement; new test for propogation of attributes

* fix: Update attributes in React & Vue markup

* fix: Commented out disclosure test because that seems to be a bug in pfe-accordion

* fix: Update baselines

* fix: Add prefixing to card styles, fix propagation bug in content-set (AGAIN) using delayRender

* fix: Remove debug flag

* fix: Update changelog

* fix: Remove logging

* fix: Fix for failing test; view -> this.viewAll

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

Author: 3 people

CHANGELOG-1.x.md

@@ -1,3 +1,7 @@
+# 1.3.2 (2021-03-04)
+
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Content set hold rendering until upgrade, prefixed attribute support for overflow property in cards
+
 # 1.3.1 (2021-03-03)
 
 - [eaf0e25](https://github.com/patternfly/patternfly-elements/commit/eaf0e256a525833e4cb3a36a51cf78c73c44867d) fix: Content set bug with cascading attributes in UMD assets

elements/pfe-card/src/pfe-card.scss

@@ -111,7 +111,7 @@ $size-small: (
   &__header,
   &__body,
   &__footer {
-    ::slotted([overflow~="top"]),
+    ::slotted([pfe-overflow~="top"]),
     ::slotted([overflow~="top"]) {
       z-index: 1;
       margin-top: -2rem; //IE11 fallback
@@ -121,20 +121,20 @@ $size-small: (
       }
     }
 
-    ::slotted([overflow~="right"]),
+    ::slotted([pfe-overflow~="right"]),
     ::slotted([overflow~="right"]) {
       margin-right: -2rem; //IE11 fallback
       margin-right: calc(-1 * #{pfe-local(PaddingRight)});
     }
 
-    ::slotted([overflow~="bottom"]),
+    ::slotted([pfe-overflow~="bottom"]),
     ::slotted([overflow~="bottom"]) {
       margin-bottom: -2rem; //IE11 fallback
       margin-bottom: calc(-1 * calc(#{pfe-local(PaddingBottom)} + #{pfe-local(BorderRadius)}));
       align-self: flex-end;
     }
 
-    ::slotted([overflow~="left"]),
+    ::slotted([pfe-overflow~="left"]),
     ::slotted([overflow~="left"]) {
       margin-left: -2rem; //IE11 fallback
       margin-left: calc(-1 * #{pfe-local(PaddingLeft)});
@@ -146,29 +146,29 @@ $size-small: (
       object-fit: cover; // Fix distortion
     }
 
-    ::slotted(img:not[overflow]),
+    ::slotted(img:not[pfe-overflow]),
     ::slotted(img:not[overflow]) {
       align-self: flex-start; //Don't stretch image 100% with other Flexbox items in card.
     }
 
-    ::slotted(img[overflow]),
+    ::slotted(img[pfe-overflow]),
     ::slotted(img[overflow]) {
       max-width: unset !important;
     }
 
-    ::slotted(img[overflow~="right"]),
+    ::slotted(img[pfe-overflow~="right"]),
     ::slotted(img[overflow~="right"]) {
       width: calc(100% + 2rem) !important; //IE11 fallback
       width: calc(100% + #{pfe-local(PaddingRight)}) !important;
     }
 
-    ::slotted(img[overflow~="left"]),
+    ::slotted(img[pfe-overflow~="left"]),
     ::slotted(img[overflow~="left"]) {
       width: calc(100% + 2rem) !important; //IE11 fallback
       width: calc(100% + #{pfe-local(PaddingLeft)}) !important;
     }
 
-    ::slotted(img[overflow~="right"][overflow~="left"]),
+    ::slotted(img[pfe-overflow~="right"][pfe-overflow~="left"]),
     ::slotted(img[overflow~="right"][overflow~="left"]) {
       width: calc(100% + 4rem) !important; //IE11 fallback
       width: calc(100% + #{pfe-local(PaddingRight)} + #{pfe-local(PaddingLeft)}) !important;
@@ -204,7 +204,7 @@ $size-small: (
       margin-bottom: pfe-local(PaddingBottom);
     }
 
-    ::slotted([overflow~="top"]),
+    ::slotted([pfe-overflow~="top"]),
     ::slotted([overflow~="top"]) {
       --pfe-card__overflow--MarginTop: calc(#{pfe-local(PaddingTop)} * -1);
     }
@@ -213,12 +213,12 @@ $size-small: (
       display: none;
     }
 
-    :host([has_body],[has_footer]) & ::slotted([overflow~="bottom"]),
+    :host([has_body],[has_footer]) & ::slotted([pfe-overflow~="bottom"]),
     :host([has_body],[has_footer]) & ::slotted([overflow~="bottom"]) {
       --pfe-card__overflow--MarginBottom: calc(#{pfe-local(spacing--vertical)} * -1);
     }
 
-    ::slotted([overflow~="bottom"]),
+    ::slotted([pfe-overflow~="bottom"]),
     ::slotted([overflow~="bottom"]) {
       --pfe-card__overflow--MarginBottom: calc(#{pfe-local(PaddingBottom)} * -1);
     }
@@ -230,23 +230,23 @@ $size-small: (
     }
   }
   &__body {
-    :host(:not([has_header])) & ::slotted([overflow~="top"]),
+    :host(:not([has_header])) & ::slotted([pfe-overflow~="top"]),
     :host(:not([has_header])) & ::slotted([overflow~="top"]) {
       --pfe-card__overflow--MarginTop: calc(#{pfe-local(PaddingTop)} * -1);
     }
 
-    ::slotted([overflow~="top"]),
+    ::slotted([pfe-overflow~="top"]),
     ::slotted([overflow~="top"]) {
       z-index: 1;
       --pfe-card__overflow--MarginTop: calc(#{pfe-local(spacing--vertical)} * -1);
     }
 
-    ::slotted([overflow~="bottom"]),
+    ::slotted([pfe-overflow~="bottom"]),
     ::slotted([overflow~="bottom"]) {
       --pfe-card__overflow--MarginBottom: calc(#{pfe-local(PaddingBottom)} * -1);
     }
 
-    :host([has_footer]) & ::slotted([overflow~="bottom"]),
+    :host([has_footer]) & ::slotted([pfe-overflow~="bottom"]),
     :host([has_footer]) & ::slotted([overflow~="bottom"]) {
       --pfe-card__overflow--MarginBottom: calc(#{pfe-local(spacing--vertical)} * -1);
     }
@@ -264,7 +264,7 @@ $size-small: (
     // Aligns buttons and CTAs
     align-items: pfe-local(AlignItems, baseline, $region: footer);
 
-    ::slotted([overflow~="bottom"]),
+    ::slotted([pfe-overflow~="bottom"]),
     ::slotted([overflow~="bottom"]) {
       --pfe-card__overflow--MarginBottom: calc(#{pfe-local(PaddingBottom)} * -1);
     }

elements/pfe-content-set/demo/index.html

@@ -220,7 +220,7 @@ <h4 pfe-content-set--header>Heading 3</h4>
   <br />
 
   <section>
-    <h3>Attributes: <code>vertical</code>, <code>variant</code> and <code>align</code></h3>
+    <h3 id="attributes">Attributes: <code>vertical</code>, <code>variant</code> and <code>align</code></h3>
   </section>
   <section class="faux-container">
     <h2 class="label">pfe-content set with attributes <code>vertical</code> and <code>variant="wind"</code>

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

@@ -71,18 +71,18 @@ class PfeContentSet extends PFElement {
         attr: "pfe-variant",
         alias: "variant"
       },
-      tabHistory: {
-        title: "Tab History",
-        type: Boolean,
-        default: false,
-        cascade: "pfe-tabs"
-      },
       // @TODO: Deprecated for 1.0
       oldTabHistory: {
         type: Boolean,
         alias: "tabHistory",
         attr: "pfe-tab-history"
       },
+      tabHistory: {
+        title: "Tab History",
+        type: Boolean,
+        default: false,
+        cascade: "pfe-tabs"
+      },
       //-- PFE-ACCORDION specific properties
       disclosure: {
         // Leaving this as a string since it's an opt out
@@ -210,14 +210,8 @@ class PfeContentSet extends PFElement {
     // If any light DOM exists, validate it meets the requirements for rendering
     if (this.hasLightDOM()) {
       let valid = false;
-      // For non-IE environments, use assigned nodes
-      const content = this.shadowRoot.querySelector(`slot#lightdom`);
-      let nodes = content.assignedNodes();
-      // Otherwise grab the direct children
-      if (this.isIE11) nodes = [...this.children];
-
       // Loop through the assigned nodes
-      nodes.forEach(node => {
+      [...this.children].forEach(node => {
         // Validate that any non-text nodes have the right attributes present
         // They don't have to be in the right order, just that they exist at all lets us progress
         if (
@@ -233,7 +227,7 @@ class PfeContentSet extends PFElement {
   }
 
   constructor() {
-    super(PfeContentSet, { type: PfeContentSet.PfeType });
+    super(PfeContentSet, { type: PfeContentSet.PfeType, delayRender: true });
 
     this.isIE11 = /MSIE|Trident|Edge\//.test(window.navigator.userAgent);
 
@@ -249,6 +243,7 @@ class PfeContentSet extends PFElement {
 
     this._observer = new MutationObserver(this._mutationHandler);
     if (window.ResizeObserver) this._resizeObserver = new ResizeObserver(this._resizeHandler);
+    if (this.isIE11) this.render();
   }
 
   connectedCallback() {
@@ -260,6 +255,7 @@ class PfeContentSet extends PFElement {
     // Validate that the light DOM data exists before building
     if (this.hasValidLightDOM) {
       this._build();
+      if (!this.isIE11) this.render();
 
       if (!this.isIE11 && window.ResizeObserver && this.parentElement) {
         this._resizeObserver.observe(this.parentElement);
@@ -426,6 +422,10 @@ class PfeContentSet extends PFElement {
       if (sets) view.appendChild(sets);
     }
 
+    // Render or re-cascade properties to the component after update
+    if (!this._rendered) this.render();
+    else this.cascadeProperties(this.viewAll);
+
     // Wait until the tabs upgrade before setting the selectedIndex value
     Promise.all([customElements.whenDefined(PfeTabs.tag)]).then(() => {
       // pass the selectedIndex property down from pfe-content-set

elements/pfelement/src/pfelement.js

@@ -367,6 +367,7 @@ class PFElement extends HTMLElement {
       }
 
       // If the property/attribute pair has a cascade target, copy the attribute to the matching elements
+      // Note: this handles the cascading of new/updated attributes
       if (propDef.cascade) {
         this._copyAttribute(attr, this._pfeClass._convertSelectorsToArray(propDef.cascade));
       }
@@ -387,6 +388,10 @@ class PFElement extends HTMLElement {
     this.shadowRoot.appendChild(this.template.content.cloneNode(true));
 
     this.log(`render`);
+
+    // Cascade properties to the rendered template
+    this.cascadeProperties();
+    // Reset the display context
     this.resetContext();
 
     // If the slot definition exists, set up an observer
@@ -395,12 +400,13 @@ class PFElement extends HTMLElement {
     }
 
     // If an observer was defined, set it to begin observing here
-    if (this._cascadeObserver)
+    if (this._cascadeObserver) {
       this._cascadeObserver.observe(this, {
         attributes: true,
         childList: true,
         subtree: true
       });
+    }
 
     this._rendered = true;
   }
@@ -421,7 +427,8 @@ class PFElement extends HTMLElement {
   }
 
   /**
-   * Handles the cascading of properties to nested components
+   * Handles the cascading of properties to nested components when new elements are added
+   * Attribute updates/additions are handled by the attribute callback
    */
   cascadeProperties(nodeList) {
     const cascade = this._pfeClass._getCache("cascadingProperties");
@@ -526,6 +533,8 @@ 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 --- */