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

heyMP · 2021-08-30T21:19:36Z

The progress bar line is dynamically calculated based on the size of the items. Because of this, we need to add a resize event so let the progres-steps element know to recalculate the bar.

Related issues

[fix] progress bar not lining up with circle for longer texts #1710

Preview

Link(s) to demo page(s) where this element can be viewed:

Link

What has changed and why

Resize event listener added
Removed min-width: fit-contents: so that the --pfe-progress-steps__item--size property works as expected.

Testing instructions

Verify that resize observer looks good
1. Go here https://deploy-preview-1763--patternfly-elements.netlify.app/elements/pfe-progress-steps/demo/
2. Load the website on desktop size
3. Shrink the browser size down to mobile size
4. Verify that all of the progress bars span the length of the first to last item
Verify that all items share consistent widths
1. Go here https://deploy-preview-1763--patternfly-elements.netlify.app/elements/pfe-progress-steps/demo/
2. Open your console and past in the "Demo Snippet" code below.
3. You should see variable size text in the first item.
4. The middle item should be centered on the page which indicates that all items have the same widths
5. Verify that the progress bar spans the length of the first to last item

Demo Snippet

let progressStep = document.querySelector('pfe-progress-steps');
let item = progressStep.querySelector('[slot=title]').innerText = "aoisdnf sfosdf asdf oasf";
progressStep.style.setProperty('--pfe-progress-steps__item--size', '300px');
progressStep._build();

Browser requirements

Your component should work in all of the following environments:

Latest 2 versions of Edge
Internet Explorer 11 (should be useable, not pixel perfect)
Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
Firefox 78 (or latest version for Red Hat Enterprise Linux distribution)
Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
Latest 2 versions of Safari
Android mobile device (such as the Galaxy S9)
Apple mobile device (such as the iPhone X)
Apple tablet device (such as the iPhone Pro)

Ready-for-merge Checklist

Expected files: all files in this pull request are related to one request or issue (no stragglers or scope-creep).
Tests have been updated to cover these changes.
Browser testing passed.
Changelog updated.
Documentation (README.md, WHY.md, etc.) updated or added.
Link to the demo recording:
Approved by designer.

Merging

Please squash when merging and ensure your commit message uses conventional commit formatting.

Be sure to share your updates with the patternfly-elements-contribute@redhat.com mailing list!

fixes #1710

netlify · 2021-08-30T21:25:05Z

✔️ Deploy Preview for patternfly-elements ready!

🔨 Explore the source changes: 298d72c

🔍 Inspect the deploy log: https://app.netlify.com/sites/patternfly-elements/deploys/61320fd502ac7800079cec22

😎 Browse the preview: https://deploy-preview-1763--patternfly-elements.netlify.app

…-steps-progress-bar

heyMP · 2021-09-01T12:43:27Z

CHANGELOG-1.x.md

+- [5393d18](https://github.com/patternfly/patternfly-elements/commit/5393d185fec3b62e78037a9835470fc15adae2b3) fix: Pfe-Primary-Detail - Fixing animation jank when expanding a section in compact mode
+- [04ccc7d](https://github.com/patternfly/patternfly-elements/commit/04ccc7de323bd503227d972d61707e6acb8f0b89) docs: Adjust example code block for typography classes
+- [974ab6f](https://github.com/patternfly/patternfly-elements/commit/974ab6f1ab4047d4e94007d64a31e5a0cddf9b7a) fix: typos in package.json files


fixed up the commit logs.

heyMP · 2021-09-01T12:46:11Z

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

 :host(:not([vertical])) {
  width: pfe-local(size, $region: item);
-  min-width: fit-content;
+  text-align: center;


The step items only line up correctly if the width is explicitly set. fit-content was messing with it.

kylebuch8 · 2021-09-02T20:52:42Z

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


  constructor() {
    super(PfeProgressSteps, { type: PfeProgressSteps.PfeType });
+    this._resizeObserver = new ResizeObserver(this._build.bind(this));


Can we add an IE11 check before this?

Added check.

kylebuch8 · 2021-09-02T20:52:57Z

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

    super.connectedCallback();
-    this._build();
+    // this will call _build initially and estabilish a resize observer for this element
+    this._resizeObserver.observe(this);


Can we add an IE11 check before this?

checking for presence of resizeObserver first. If not, just build it one time. If it's IE11, then the _build command will catch it.

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

kylebuch8 · 2021-09-02T20:53:47Z

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

-  disconnectedCallback() {}
+  disconnectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver.disconnect();


Add some logic to only disconnect if this._resizeObserver is present.

…-steps-progress-bar

kylebuch8

Leather Gloves Touch Mulch

feat: added resize observer for lining up progress bar

76f498d

fixes #1710

github-actions bot added functionality Functionality, typically pertaining to the JavaScript. styles An issue or PR pertaining only to CSS/Sass labels Aug 30, 2021

github-actions bot added the AT passed Automated testing has passed label Aug 30, 2021

chore: update tests

28d5cbb

github-actions bot added the tests Related to testing label Aug 31, 2021

heyMP changed the title ~~[WIP] feat: added resize observer for lining up progress bar~~ [WIP] fix: added resize observer for lining up progress bar Aug 31, 2021

heyMP added 2 commits August 31, 2021 07:25

chore: update changelog

26ebc4e

feat: added resize observer for the element level

4542fdf

heyMP changed the title ~~[WIP] fix: added resize observer for lining up progress bar~~ fix: added resize observer for lining up progress bar Sep 1, 2021

Merge remote-tracking branch 'origin/master' into issue-1710-progress…

596b670

…-steps-progress-bar

heyMP commented Sep 1, 2021

View reviewed changes

Branch was auto-updated with the latest.

d28aae6

kylebuch8 requested changes Sep 2, 2021

View reviewed changes

heyMP added 2 commits September 2, 2021 18:00

fix: add checks for ie11 with resize observer

8e04e48

Merge remote-tracking branch 'origin/master' into issue-1710-progress…

298d72c

…-steps-progress-bar

kylebuch8 approved these changes Sep 3, 2021

View reviewed changes

kylebuch8 merged commit f727065 into master Sep 3, 2021

kylebuch8 deleted the issue-1710-progress-steps-progress-bar branch September 3, 2021 12:36

github-actions bot added ready to merge and removed ready to merge labels Sep 3, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

heyMP commented Aug 30, 2021 •

edited

Loading

Uh oh!

netlify bot commented Aug 30, 2021 •

edited

Loading

Uh oh!

heyMP Sep 1, 2021

Uh oh!

heyMP Sep 1, 2021

Uh oh!

kylebuch8 Sep 2, 2021

Uh oh!

heyMP Sep 3, 2021

Uh oh!

kylebuch8 Sep 2, 2021

Uh oh!

heyMP Sep 3, 2021

Uh oh!

Uh oh!

kylebuch8 Sep 2, 2021

Uh oh!

kylebuch8 left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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

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

Uh oh!

Conversation

heyMP commented Aug 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Preview

What has changed and why

Testing instructions

Demo Snippet

Browser requirements

Ready-for-merge Checklist

Merging

Uh oh!

netlify bot commented Aug 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

heyMP Sep 1, 2021

Choose a reason for hiding this comment

Uh oh!

heyMP Sep 1, 2021

Choose a reason for hiding this comment

Uh oh!

kylebuch8 Sep 2, 2021

Choose a reason for hiding this comment

Uh oh!

heyMP Sep 3, 2021

Choose a reason for hiding this comment

Uh oh!

kylebuch8 Sep 2, 2021

Choose a reason for hiding this comment

Uh oh!

heyMP Sep 3, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kylebuch8 Sep 2, 2021

Choose a reason for hiding this comment

Uh oh!

kylebuch8 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

heyMP commented Aug 30, 2021 •

edited

Loading

netlify bot commented Aug 30, 2021 •

edited

Loading