fix: Deprecated function reference in pfe-modal (#1272)

* fix: Fix patch

* fix: Add more info to the changelog

* fix: Update modal script

Author: castastrophe

CHANGELOG-1.x.md

@@ -1,7 +1,8 @@
 ## 1.2.0 ( TBD )
 
 - [f876664](https://github.com/patternfly/patternfly-elements/commit/f876664655894cbd29d610c20b3bdbde31aaed7a) fix: Sass maps missing from compiled assets
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Storybook updates required change to knobs add-on import
+- [e3fd841](https://github.com/patternfly/patternfly-elements/commit/e3fd8414cf380a45a89f4166ad2f9d9125cf8760) fix: Storybook updates required change to knobs add-on import
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Remove deprecated method call in pfe-modal, _mapSchemaToSlots
 
 ## 1.1.0 ( 2020-12-22 )
 

docs/content/develop/step-2e.md

@@ -180,140 +180,6 @@ The events object contains any custom events that this component will fire and f
 }
 ```
 
-## JavaScript
-
-Looking back to our component's JavaScript, we can now add the schema to our web component by adding:
-
-```
-get schemaUrl() {
-  return "pfe-cool-element.json";
-}
-```
-
-Adding the schema will allow the web component to read in these properties and enforce the schema settings automatically.  Inside PFElement, we can see `_mapSchemaToProperties` and `_mapSchemaToSlots` methods. These methods read in the schema and check the web component mark-up for valid or invalid inputs.  If an attribute is required but not provided, it will inject that attribute onto the component using the default value from the schema.
-
-Additionally, it will validate the slots being used and add a `has_<slot-name>` attribute to the parent which can be used for styling purposes.
-
-Let's look at our component with the schemaURL added:
-
-
-```
-import PFElement from "../pfelement/dist/pfelement.js";
-
-class PfeCoolElement extends PFElement {
-  static get tag() {
-    return "pfe-cool-element";
-  }
-
-  get templateUrl() {
-    return "pfe-cool-element.html";
-  }
-
-  get styleUrl() {
-    return "pfe-cool-element.scss";
-  }
-
-  get schemaUrl() {
-    return "pfe-cool-element.json";
-  }
-
-  static get events() {
-    return {
-      select: `${this.tag}:follow`
-    };
-  }
-
-  follow() {
-    this.following = !this.following;
-
-    this.emitEvent(PfeCoolElement.events.select);
-  }
-
-  set following(value) {
-    const isFollowing = Boolean(value);
-
-    if (isFollowing) {
-      this.setAttribute("following", "");
-    } else {
-      this.removeAttribute("following");
-    }
-  }
-
-  get following() {
-    return this.hasAttribute("following");
-  }
-
-  static get observedAttributes() {
-    return ["following", "photo-url"];
-  }
-
-  constructor() {
-    super(PfeCoolElement, { type: PfeCoolElement.PfeType });
-
-    this.following = false;
-
-    this._clickHandler = this._clickHandler.bind(this);
-    this._keyupHandler = this._keyupHandler.bind(this);
-    this._followToggle = this._followToggle.bind(this);
-    this._addImage     = this._addImage.bind(this);
-
-    this.button = this.shadowRoot.querySelector("button");
-
-    if (this.button) {
-      this.button.addEventListener("click", this._clickHandler);
-      this.button.addEventListener("keyup", this._keyupHandler);
-    }
-
-    this.profilePic = this.shadowRoot.querySelector("#profile-pic");
-  }
-
-  _followToggle() {
-    this.button.textContent = this.following ? "Unfollow" : "Follow";
-  }
-
-  _addImage(newImage) {
-    this.profilePic.style.backgroundImage = `url(${newImage})`;
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case "following":
-        this._followToggle();
-        break;
-
-      case "photo-url":
-        this._addImage(newValue);
-        break;
-    }
-  }
-
-  disconnectedCallback() {
-    if (this.button) {
-      this.button.removeEventListener("click", this._clickHandler);
-      this.button.removeEventListener("keyup", this._keyupHandler);
-    }
-  }
-
-  _clickHandler(event) {
-    this.follow(event);
-  }
-
-  // On enter press, trigger follow event
-  _keyupHandler(event) {
-    let key = event.key || event.keyCode;
-    switch (key) {
-      case "Enter":
-      case 13:
-        this.follow(event);
-    }
-  }
-}
-
-PFElement.create(PfeCoolElement);
-
-export default PfeCoolElement;
-```
-
 Now that our code works, we should create tests to ensure our element works as we iterate on it in the future.
 
 [Move to Step 3: Test](../step-3)

elements/pfe-modal/src/pfe-modal.js

@@ -41,17 +41,15 @@ class PfeModal extends PFElement {
     // These fire custom events
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
+    this._init = this._init.bind(this);
 
     this._modalWindow = this.shadowRoot.querySelector(`.${this.tag}__window`);
     this._modalCloseButton = this.shadowRoot.querySelector(`.${this.tag}__close`);
     this._overlay = this.shadowRoot.querySelector(`.${this.tag}__overlay`);
     this._container = this.shadowRoot.querySelector(`.${this.tag}__container`);
     this._outer = this.shadowRoot.querySelector(`.${this.tag}__outer`);
 
-    this._observer = new MutationObserver(() => {
-      this._mapSchemaToSlots(this.tag, this.slots);
-      this._init();
-    });
+    this._observer = new MutationObserver(this._init);
   }
 
   connectedCallback() {
@@ -83,6 +81,8 @@ class PfeModal extends PFElement {
   }
 
   _init() {
+    if (window.ShadyCSS) this._observer.disconnect();
+
     this.trigger = this.querySelector(`[slot="${this.tag}--trigger"]`);
     this.header = this.querySelector(`[slot="${this.tag}--header"]`);
     this.body = [...this.querySelectorAll(`*:not([slot])`)];
@@ -105,6 +105,8 @@ class PfeModal extends PFElement {
         this._modalWindow.setAttribute("aria-label", this.trigger.innerText);
       }
     }
+
+    if (window.ShadyCSS) this._observer.observe(this, { childList: true });
   }
 
   _keydownHandler(event) {