fix: added resize observer for lining up progress bar (#1763)

* feat: added resize observer for lining up progress bar

fixes #1710

* chore: update tests

* chore: update changelog

* feat: added resize observer for the element level

* fix: add checks for ie11 with resize observer

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

Author: heyMP

CHANGELOG-1.x.md

@@ -4,6 +4,7 @@
 - [b691da0](https://github.com/patternfly/patternfly-elements/commit/b691da07c4f3e150337698044369e64b9d2ad849) docs: Adjust example code block for typography classes
 - [974ab6f](https://github.com/patternfly/patternfly-elements/commit/974ab6f1ab4047d4e94007d64a31e5a0cddf9b7a) fix: typos in package.json files
 - [b18dd64](https://github.com/patternfly/patternfly-elements/commit/b18dd64da950b580b526ebe092b59eaadaf7d07e) fix: fix for re-renders when there is no selectedindex
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: added resize observer for lining up progress bar
 
 # 1.11.0 (2021-08-18)
 

elements/pfe-progress-steps/src/pfe-progress-steps-item.scss

@@ -41,7 +41,7 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
 $LOCAL: progress-steps;
 :host(:not([vertical])) {
   width: pfe-local(size, $region: item);
-  min-width: fit-content;
+  text-align: center;
 }
 :host([vertical]:not(:last-child)) {
   min-height: pfe-local(size, $region: item);

elements/pfe-progress-steps/src/pfe-progress-steps.js

@@ -53,14 +53,25 @@ class PfeProgressSteps extends PFElement {
 
   constructor() {
     super(PfeProgressSteps, { type: PfeProgressSteps.PfeType });
+    if (!this.isIE11) this._resizeObserver = new ResizeObserver(this._build.bind(this));
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this._build();
+    if (this._resizeObserver) {
+      // this will call _build initially and estabilish a resize observer for this element
+      this._resizeObserver.observe(this);
+    } else {
+      // if we don't have access to resize observer then
+      // manually call build.
+      this._build();
+    }
   }
 
-  disconnectedCallback() {}
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resizeObserver) this._resizeObserver.disconnect();
+  }
 
   _build() {
     if (this.isIE11) return;

elements/pfe-progress-steps/test/pfe-progress-steps.spec.js

@@ -9,14 +9,12 @@ import { createFixture } from '../../../test/utils/create-fixture.js';
 // Import the element we're testing.
 import '../dist/pfe-progress-steps';
 
-
 const itemTemplate = (title = "", description = "", state = "", current = false) => `
    <pfe-progress-steps-item${state ? ` state="${state}"` : ""}${current ? ` current` : ""}>
    ${title ? `<span slot="title">${title}</span>` : ""}
    ${description ? `<span slot="description">${description}</span>` : ""}
    </pfe-progress-steps-item>`;
 
-
 // One element, defined here, is used
 // in multiple tests. It's torn down and recreated each time.
 const element =
@@ -81,4 +79,51 @@ describe("<pfe-progress-steps>", () => {
       const description = item.querySelector("[slot=description]");
       expect(description.textContent).to.equal("View first step");
     });
+
+    describe("<pfe-progress-steps-item>", () => {
+      it("should be horizontal by default", async () => {
+        const el = await createFixture(element);
+        // get an array of the positions of each item
+        const items = [...el.querySelectorAll("pfe-progress-steps-item")]
+          .map(i => i.offsetTop);
+        // see if these positions are stacked on top of one another
+        // we use every so we can exit early.
+        const isEven = items.every((i, index) => {
+          // if there is a next item to work with
+          if (typeof items[index + 1] === "undefined") return true;
+          // check if the item offsets are equal to see if it's a row
+          return items[index + 1] === items[index];
+        });
+        expect(isEven).to.be.true;
+      });
+
+      it("should have a stacked layout on vertical", async () => {
+        const el = await createFixture(element);
+        el.setAttribute("vertical", "");
+        // get an array of the positions of each item
+        const items = [...el.querySelectorAll("pfe-progress-steps-item")]
+          .map(i => i.offsetTop);
+        // see if these positions are stacked on top of one another
+        // we use every so we can exit early.
+        const isStacked = items.every((i, index) => {
+          // if there is a next item to work with
+          if (typeof items[index + 1] === "undefined") return true;
+          // if the next item offset is greater than the current then it's stacked
+          return items[index + 1] >= items[index];
+        });
+        expect(isStacked).to.be.true;
+      });
+    })
+
+    describe("progress bar", () => {
+      it("should have a length that spans from the middle of the first item to the middle of the last item", async () => {
+        const el = await createFixture(element);
+        const stepItems = [...el.querySelectorAll("pfe-progress-steps-item")];
+        // get the centerpoint of the items
+        let firstItemMidpoint = stepItems[0].offsetLeft + stepItems[0].offsetWidth / 2;
+        let lastItemMidpoint = stepItems[stepItems.length - 1].offsetLeft + (stepItems[stepItems.length - 2].offsetWidth / 2);
+        expect(el.shadowRoot.querySelector(".pfe-progress-steps__progress-bar").offsetWidth).to.equal(lastItemMidpoint - firstItemMidpoint);
+      });
+    });
+
 });