Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: Break Apart Component Mutation Observer Logic #935

Merged
merged 1 commit into from
Oct 31, 2018

Conversation

sghoweri
Copy link
Contributor

@sghoweri sghoweri commented Oct 26, 2018

Jira

N/A

Summary

Slightly refactors + breaks out the mutation observer logic currently used in the button component into it's own standalone JS utility library for reuse in Bolt core.

How to test

Confirm button components rendering to the Shadow DOM re-render as expected when slotted content added (including the correct slot classes change accordingly).

Create a new button on the page and confirm the before / after works as expected.

const buttonIconBefore = document.createElement('bolt-icon');
buttonIconBefore.setAttribute('name', 'arrow-left');
buttonIconBefore.setAttribute('slot', 'before');

const buttonIconAfter = document.createElement('bolt-icon');
buttonIconAfter.setAttribute('name', 'chevron-right');
buttonIconAfter.setAttribute('slot', 'after');

const buttonElement = document.querySelector('bolt-button'); 
buttonElement.textContent = 'Hello world!';
buttonElement.appendChild(buttonIconAfter);

document.body.appendChild(buttonElement); // confirm the before slot has the `is-empty` CSS class.

buttonElement.appendChild(buttonIconBefore); // now confirm the before slot contains the new icon and no longer displays the `is-empty` CSS class.

image

Screenshot before the "before" slot is populated with content

image

Screenshot after the "before" slot is populated with content

@remydenton
Copy link
Collaborator

Any idea why this PR didn't get a now.sh build @sghoweri?

@sghoweri
Copy link
Contributor Author

Any idea why this PR didn't get a now.sh build @sghoweri?

@remydenton huh... that's weird!

@sghoweri
Copy link
Contributor Author

image

@remydenton looks like this could either be:

  1. a random now.sh issue OR

  2. A random now.sh issue... possibly related to the number of concurrent builds / deploys we have going on? I'm curious to see if this problem goes away if we upgrade our now.sh plan to the next tier... particularly since I've seen this similar issue pop up a number of times now.

@sghoweri
Copy link
Contributor Author

sghoweri commented Oct 26, 2018

@remydenton working URL I pulled from the Travis logs: https://boltdesignsystem-vlrooyzhtk.now.sh

Copy link
Collaborator

@remydenton remydenton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great. Thanks for the testing instructions!

@remydenton remydenton merged commit 1ac3a85 into master Oct 31, 2018
@remydenton remydenton deleted the feature/refactor-component-mutation-observer branch October 31, 2018 21:41
@remydenton remydenton mentioned this pull request Oct 31, 2018
This was referenced Nov 18, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants