Allow scoping of DOM query in AtomicComponent.init method - Githubissues

cfpb / capital-framework

The Consumer Financial Protection Bureau's user interface framework

https://cfpb.github.io/capital-framework/

Creative Commons Zero v1.0 Universal

55 stars 29 forks source link

Allow scoping of DOM query in AtomicComponent.init method #878

Closed anselmbradford closed 5 years ago

anselmbradford commented 5 years ago

Changes

Allow scoping of DOM query in AtomicComponent.init method by adding scope parameter. Also adds associated tests.
Removes istanbul ignore code comment for _transitionComplete method. It has greater than 90% coverage, but we should be able to see that's uncovered.

Testing

gulp test:unit should pass.
You can test this in cfgov-refresh by:
- Visit https://www.consumerfinance.gov/about-us/newsroom/ and apply some Topic filters and see that the "Apply filters" button gets cropped out of view (issue [GHE]/CFGOV/platform/issues/2981).
- Run gulp build.
- Copy tmp/cf-expandables directory from this branch.
- Paste it into cfgov-refresh/node_modules/, replacing the one that's there.
- Copy tmp/cf-atomic-component and tmp/cf-core directories from this branch.
- Create cfgov-refresh/node_modules/cf-expandables/node_modules/ and paste atomic-component and core into that.
- Go into FilterableListControls.js and change line 54 from const _expandables = Expandable.init(); to const _expandables = Expandable.init( _dom );.
- Run gulp clean && gulp build
- Visit http://localhost:8000/about-us/newsroom/ and see that adding Topic filters adjusts the height of the filter.