diff --git a/src/components/toolbar/_toolbar.scss b/src/components/toolbar/_toolbar.scss index 3aea2ca43dd1..1bbe04d10b8b 100644 --- a/src/components/toolbar/_toolbar.scss +++ b/src/components/toolbar/_toolbar.scss @@ -13,7 +13,6 @@ $css--helpers: true; @import '../search/search'; @include exports('toolbar') { - .bx--toolbar { @include helvetica; display: flex; @@ -100,7 +99,8 @@ $css--helpers: true; } .bx--toolbar-filter-icon { - width: 1.2rem; + padding-left: 0; + padding-right: 0; } .bx--toolbar-menu__title { diff --git a/src/globals/js/watch.js b/src/globals/js/watch.js index 5575cba48489..24101e733e9c 100644 --- a/src/globals/js/watch.js +++ b/src/globals/js/watch.js @@ -3,30 +3,38 @@ import { componentClasses } from '../../index'; const forEach = Array.prototype.forEach; -const createAndReleaseComponentsUponDOMMutation = (records, componentClassesForWatchInit, options) => { - records.forEach((record) => { - forEach.call(record.addedNodes, (node) => { +const createAndReleaseComponentsUponDOMMutation = ( + records, + componentClassesForWatchInit, + options +) => { + records.forEach(record => { + console.log('record: ', record); + forEach.call(record.addedNodes, node => { if (node.nodeType === Node.ELEMENT_NODE) { - componentClassesForWatchInit.forEach((Clz) => { + componentClassesForWatchInit.forEach(Clz => { Clz.init(node, options); }); } }); - forEach.call(record.removedNodes, (node) => { + forEach.call(record.removedNodes, node => { if (node.nodeType === Node.ELEMENT_NODE) { - componentClasses.forEach((Clz) => { + componentClasses.forEach(Clz => { if (node.matches(Clz.options.selectorInit)) { const instance = Clz.components.get(node); if (instance) { instance.release(); } } else { - forEach.call(node.querySelectorAll(Clz.options.selectorInit), (element) => { - const instance = Clz.components.get(element); - if (instance) { - instance.release(); + forEach.call( + node.querySelectorAll(Clz.options.selectorInit), + element => { + const instance = Clz.components.get(element); + if (instance) { + instance.release(); + } } - }); + ); } }); } @@ -40,18 +48,33 @@ const createAndReleaseComponentsUponDOMMutation = (records, componentClassesForW * @param {Object} [options] The component options. * @returns {Handle} The handle to stop watching. */ -export default function (target = document, options = {}) { - if (target.nodeType !== Node.ELEMENT_NODE && target.nodeType !== Node.DOCUMENT_NODE) { - throw new TypeError('DOM document or DOM element should be given to watch for DOM node to create/release components.'); +export default function(target = document, options = {}) { + if ( + target.nodeType !== Node.ELEMENT_NODE && + target.nodeType !== Node.DOCUMENT_NODE + ) { + throw new TypeError( + 'DOM document or DOM element should be given to watch for DOM node to create/release components.' + ); } - const handles = componentClasses.map(Clz => Clz.init(target, options)).filter(Boolean); + const handles = componentClasses + .map(Clz => Clz.init(target, options)) + .filter(Boolean); handles.push(initCheckbox()); - const componentClassesForWatchInit = componentClasses.filter(Clz => !Clz.forLazyInit); + const componentClassesForWatchInit = componentClasses.filter( + Clz => !Clz.forLazyInit + ); - let observer = new MutationObserver((records) => { - createAndReleaseComponentsUponDOMMutation(records, componentClassesForWatchInit, options); + let observer = new MutationObserver(records => { + console.log('records: ', records); + + createAndReleaseComponentsUponDOMMutation( + records, + componentClassesForWatchInit, + options + ); }); observer.observe(target, { childList: true,