diff --git a/demo/index.js b/demo/index.js index 0f3282deedff..5e38d1f968c8 100644 --- a/demo/index.js +++ b/demo/index.js @@ -10,22 +10,20 @@ export * from '../src/bundle'; if (typeof module !== 'undefined' && module.hot) { const forEach = Array.prototype.forEach; - if (window.oldComponentClasses) { + module.hot.dispose(() => { // Releases component instances of (old) component classes that have been replaced with new ones by HMR - window.oldComponentClasses.forEach(Clz => { - forEach.call(document.body.querySelectorAll(Clz.options.selectorInit), element => { - const instance = Clz.components.get(element); - if (instance) { - instance.release(); - } + Object.keys(components) + .map(key => components[key]) + .filter(component => typeof component.init === 'function') + .forEach(Clz => { + forEach.call(document.body.querySelectorAll(Clz.options.selectorInit), element => { + const instance = Clz.components.get(element); + if (instance) { + instance.release(); + } + }); }); - }); - } - - // Preserves component classe refs, that would be replaced replaced with new ones by HMR, to `window` - window.oldComponentClasses = Object.keys(components) - .map(key => components[key]) - .filter(component => typeof component.init === 'function'); + }); module.hot.accept(); } diff --git a/docs/contributing.md b/docs/contributing.md index f1f190543581..fd24063debae 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -10,7 +10,8 @@ Contributing to carbon-components requires that you can run this repo locally on ## Class names -Prefix all class names with `bx--`. +Prefix all class names with `#{$prefix}--` in SCSS, which is replaced with `bx--` by default, +and design systems inheriting Carbon can override. This prefix prevents potential conflicts with class names from the user. __HTML__ @@ -24,21 +25,21 @@ __HTML__ __SCSS__ ```scss -.bx--inline-notification { +.#{$prefix}--inline-notification { ... } -.bx--inline-notification__details { +.#{$prefix}--inline-notification__details { ... } ``` -Follow BEM naming convention for classes. Again, the only thing we do differently is prefix all classes with `bx--`. +Follow BEM naming convention for classes. Again, the only thing we do differently is prefix all classes with `#{$prefix}--`. ```scss -.bx--block -.bx--block__element -.bx--block--modifier +.#{$prefix}--block +.#{$prefix}--block__element +.#{$prefix}--block--modifier ``` ### Start a new `block` or `element`? @@ -50,16 +51,16 @@ A nested element can use a new block name as long as the styles are independent ``` -:point_up: The `bx--component-button` class implies that this button has independent styles from its parent. +:point_up: The `#{$prefix}--component-button` class implies that this button has independent styles from its parent. Generally, it's preferred to start a new block. ### Red Flags Avoid names with multiple `__element` names: -- :x: `.bx--card__list__item` -- :white_check_mark: `.bx--card-item` -- :white_check_mark: `.bx--card__item` +- :x: `.#{$prefix}--card__list__item` +- :white_check_mark: `.#{$prefix}--card-item` +- :white_check_mark: `.#{$prefix}--card__item` ## Files and folders diff --git a/gulpfile.js b/gulpfile.js index 8ffa3c008cee..7439b5820ae8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -42,22 +42,19 @@ const del = require('del'); // Test environment const Server = require('karma').Server; -const cloptions = require('minimist')(process.argv.slice(2), { - alias: { - k: 'keepalive', - p: 'port', - r: 'rollup', - }, - default: { - port: 3000, - serverport: 8080, - }, - boolean: ['keepalive', 'rollup'], -}); +const commander = require('commander'); + +const assign = v => v; +const cloptions = commander + .option('-k, --keepalive', 'Keeps browser open after first run of Karma test finishes') + .option('--name [name]', 'Component name used for aXe testing', assign, '') + .option('-p, --port [port]', 'Uses the given port for dev env', assign, 3000) + .option('-r, --rollup', 'Uses Rollup for dev env') + .option('--serverport [port]', 'Uses the given port for dev env server', assign, 8080) + .parse(process.argv); // Axe A11y Test const axe = require('gulp-axe-webdriver'); -const axeArgs = require('minimist')(process.argv.slice(2)); /** * BrowserSync @@ -344,7 +341,7 @@ gulp.task('test:unit', done => { }); gulp.task('test:a11y', ['sass:compiled'], done => { - const componentName = axeArgs.name === undefined ? undefined : axeArgs.name; + const componentName = cloptions.name; const options = { a11yCheckOptions: { rules: { @@ -357,9 +354,9 @@ gulp.task('test:a11y', ['sass:compiled'], done => { showOnlyViolations: true, exclude: '.offleft, #flex-col, #flex-row', tags: ['wcag2aa', 'wcag2a'], - folderOutputReport: componentName === undefined ? 'tests/axe/allHtml' : 'tests/axe', - saveOutputIn: componentName === undefined ? `a11y-html.json` : `a11y-${componentName}.json`, - urls: componentName === undefined ? ['http://localhost:3000'] : [`http://localhost:3000/components/${componentName}/`], + folderOutputReport: !componentName ? 'tests/axe/allHtml' : 'tests/axe', + saveOutputIn: !componentName ? `a11y-html.json` : `a11y-${componentName}.json`, + urls: !componentName ? ['http://localhost:3000'] : [`http://localhost:3000/component/${componentName}/`], }; return axe(options, done); diff --git a/package.json b/package.json index 38ab91191c66..6239c4273311 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,8 @@ "browser-sync": "~2.10.0", "carbon-addons-cloud": "^1.1.0", "carbon-components-react": "^5.8.0", - "chai": "^3.5.0", "classnames": "^2.2.0", + "commander": "^2.13.0", "core-js": "^2.4.0", "custom-event": "^1.0.0", "cz-conventional-changelog": "^1.2.0", @@ -91,25 +91,24 @@ "gulp-sourcemaps": "~1.6.0", "gulp-uglify": "^2.1.2", "gulp-util": "~3.0.7", + "html-loader": "^0.5.0", "husky": "^0.12.0", + "jasmine-core": "^2.9.0", "karma": "^2.0.0", "karma-chrome-launcher": "^2.2.0", "karma-coverage": "^1.1.0", "karma-firefox-launcher": "^1.0.0", "karma-html2js-preprocessor": "^1.1.0", "karma-ie-launcher": "^1.0.0", - "karma-mocha": "^1.3.0", - "karma-mocha-reporter": "^2.2.0", - "karma-rollup-preprocessor": "^5.0.0", + "karma-jasmine": "^1.1.0", "karma-safari-launcher": "^1.0.0", - "karma-sinon-chai": "^1.1.0", "karma-sourcemap-loader": "~0.3.7", + "karma-spec-reporter": "0.0.32", + "karma-webpack": "^2.0.0", "lolex": "1.4.0", "markdown-it": "^8.4.0", "merge-stream": "^1.0.0", "minimatch": "^3.0.0", - "minimist": "~1.2.0", - "mocha": "~2.4.4", "mock-raf": "^1.0.0", "nodemon": "1.9.1", "prettier": "^1.7.0", @@ -125,12 +124,9 @@ "rollup-plugin-filesize": "^1.2.1", "rollup-plugin-node-resolve": "^3.0.0", "rollup-plugin-replace": "^2.0.0", - "rollup-plugin-string": "^2.0.0", "rollup-plugin-uglify": "^2.0.0", "scss-to-json": "1.1.0", "semantic-release": "^6.3.2", - "sinon": "^2.1.0", - "sinon-chai": "^2.9.0", "validate-commit-msg": "^2.8.2", "vinyl-named": "^1.1.0", "webpack": "^3.10.0", diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss index f9d67f03c507..64175c7e2431 100644 --- a/src/components/content-switcher/_content-switcher.scss +++ b/src/components/content-switcher/_content-switcher.scss @@ -49,6 +49,15 @@ } } + .#{$prefix}--content-switcher__icon { + margin-right: $spacing-xs; + fill: currentColor; + // need to color any child path or g + * { + fill: currentColor; + } + } + .#{$prefix}--content-switcher-btn:not(:last-of-type) { border-right: none; } diff --git a/src/components/date-picker/date-picker.js b/src/components/date-picker/date-picker.js index ab3a90f38284..8d58ff39d625 100644 --- a/src/components/date-picker/date-picker.js +++ b/src/components/date-picker/date-picker.js @@ -27,18 +27,20 @@ function flattenOptions(options) { */ function augmentFlatpickr(calendar) { const container = calendar._; - if (container.changeEvent) { - container._changeEvent = container.changeEvent; // eslint-disable-line no-underscore-dangle + if (container) { + if (container.changeEvent) { + container._changeEvent = container.changeEvent; // eslint-disable-line no-underscore-dangle + } + Object.defineProperty(container, 'changeEvent', { + get() { + return this._changeEvent; + }, + set(value) { + value.detail = Object.assign(value.detail || {}, { fromFlatpickr: true }); + this._changeEvent = value; + }, + }); } - Object.defineProperty(container, 'changeEvent', { - get() { - return this._changeEvent; - }, - set(value) { - value.detail = Object.assign(value.detail || {}, { fromFlatpickr: true }); - this._changeEvent = value; - }, - }); return calendar; } diff --git a/src/components/file-uploader/file-uploader.js b/src/components/file-uploader/file-uploader.js index 873794ef65f4..1c0f75eedf29 100644 --- a/src/components/file-uploader/file-uploader.js +++ b/src/components/file-uploader/file-uploader.js @@ -23,11 +23,11 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented this.container = this.element.querySelector(this.options.selectorContainer); if (!this.input) { - throw new Error('Cannot find the file input box.'); + throw new TypeError('Cannot find the file input box.'); } if (!this.container) { - throw new Error('Cannot find the file names container.'); + throw new TypeError('Cannot find the file names container.'); } this.inputId = this.input.getAttribute('id'); diff --git a/src/components/floating-menu/floating-menu.js b/src/components/floating-menu/floating-menu.js index efd2631c9287..0d0fc3387111 100644 --- a/src/components/floating-menu/floating-menu.js +++ b/src/components/floating-menu/floating-menu.js @@ -49,8 +49,9 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu handleBlur(event) { if (this.element.classList.contains(this.options.classShown)) { this.changeState('hidden', getLaunchingDetails(event)); - if (this.element.contains(event.relatedTarget) && event.target !== this.options.refNode) { - this.options.refNode.focus(); + const { refNode } = this.options; + if (this.element.contains(event.relatedTarget) && refNode && event.target !== refNode) { + refNode.focus(); } } } @@ -162,6 +163,9 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu _changeState(state, detail, callback) { const shown = state === 'shown'; const { refNode, classShown, classRefShown } = this.options; + if (!refNode) { + throw new TypeError('Cannot find the refernce node for changing the style.'); + } this.element.classList.toggle(classShown, shown); if (classRefShown) { refNode.classList.toggle(classRefShown, shown); diff --git a/src/components/interior-left-nav/interior-left-nav-keep-open.html b/src/components/interior-left-nav/interior-left-nav-keep-open.html index 22887039c560..8a1d69f6256e 100644 --- a/src/components/interior-left-nav/interior-left-nav-keep-open.html +++ b/src/components/interior-left-nav/interior-left-nav-keep-open.html @@ -1,27 +1,27 @@ -