diff --git a/Gruntfile.js b/Gruntfile.js index e98708b87e3a..c33a576d4340 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -19,7 +19,7 @@ require('./src/setup_node_env'); -module.exports = function (grunt) { +module.exports = function(grunt) { // set the config once before calling load-grunt-config // and once during so that we have access to it via // grunt.config.get() within the config files @@ -35,8 +35,8 @@ module.exports = function (grunt) { init: true, config: config, loadGruntTasks: { - pattern: ['grunt-*', '@*/grunt-*', 'gruntify-*', '@*/gruntify-*'] - } + pattern: ['grunt-*', '@*/grunt-*', 'gruntify-*', '@*/gruntify-*'], + }, }); // load task definitions diff --git a/packages/kbn-analytics/babel.config.js b/packages/kbn-analytics/babel.config.js index 8d5789997625..397a9a03a4f7 100644 --- a/packages/kbn-analytics/babel.config.js +++ b/packages/kbn-analytics/babel.config.js @@ -22,7 +22,7 @@ module.exports = { plugins: ['@babel/plugin-proposal-class-properties'], env: { web: { - presets: ['@kbn/babel-preset/webpack_preset'] + presets: ['@kbn/babel-preset/webpack_preset'], }, node: { presets: ['@kbn/babel-preset/node_preset'], diff --git a/packages/kbn-babel-code-parser/src/can_require.js b/packages/kbn-babel-code-parser/src/can_require.js index 4d85910abe6e..b41061123776 100644 --- a/packages/kbn-babel-code-parser/src/can_require.js +++ b/packages/kbn-babel-code-parser/src/can_require.js @@ -28,7 +28,7 @@ export function canRequire(entry, cwd = require.resolve.paths(entry) || []) { // looking recursively as normal starting // from those locations. return require.resolve(entry, { - paths: [].concat(cwd) + paths: [].concat(cwd), }); } catch (e) { return false; diff --git a/packages/kbn-babel-code-parser/src/code_parser.js b/packages/kbn-babel-code-parser/src/code_parser.js index 0f53bd249bb5..9431eb639e2e 100644 --- a/packages/kbn-babel-code-parser/src/code_parser.js +++ b/packages/kbn-babel-code-parser/src/code_parser.js @@ -81,7 +81,7 @@ export async function parseEntries(cwd, entries, strategy, results, wasParsed = // Test each entry against canRequire function const entriesQueue = entries.map(entry => canRequire(entry)); - while(entriesQueue.length) { + while (entriesQueue.length) { // Get the first element in the queue as // select it as our current entry to parse const mainEntry = entriesQueue.shift(); @@ -93,7 +93,9 @@ export async function parseEntries(cwd, entries, strategy, results, wasParsed = } // Find new entries and adds them to the end of the queue - entriesQueue.push(...(await strategy(sanitizedCwd, parseSingleFile, mainEntry, wasParsed, results))); + entriesQueue.push( + ...(await strategy(sanitizedCwd, parseSingleFile, mainEntry, wasParsed, results)) + ); // Mark the current main entry as already parsed wasParsed[mainEntry] = true; diff --git a/packages/kbn-babel-code-parser/src/strategies.test.js b/packages/kbn-babel-code-parser/src/strategies.test.js index d7caa8b95d4a..dc2c599e81c3 100644 --- a/packages/kbn-babel-code-parser/src/strategies.test.js +++ b/packages/kbn-babel-code-parser/src/strategies.test.js @@ -23,11 +23,11 @@ import { parseSingleFile } from './code_parser'; import { _calculateTopLevelDependency, dependenciesParseStrategy } from './strategies'; jest.mock('./can_require', () => ({ - canRequire: jest.fn() + canRequire: jest.fn(), })); jest.mock('fs', () => ({ - readFile: jest.fn() + readFile: jest.fn(), })); const mockCwd = '/tmp/project/dir/'; @@ -69,7 +69,13 @@ describe('Code Parser Strategies', () => { } }); - const results = await dependenciesParseStrategy(mockCwd, parseSingleFile, 'dep1/file.js', {}, {}); + const results = await dependenciesParseStrategy( + mockCwd, + parseSingleFile, + 'dep1/file.js', + {}, + {} + ); expect(results[0]).toBe(`${mockCwd}node_modules/dep_from_node_modules/index.js`); }); @@ -78,7 +84,7 @@ describe('Code Parser Strategies', () => { cb(null, `require('./relative_dep')`); }); - canRequire.mockImplementation((entry) => { + canRequire.mockImplementation(entry => { if (entry === `${mockCwd}dep1/relative_dep`) { return `${entry}/index.js`; } @@ -86,7 +92,13 @@ describe('Code Parser Strategies', () => { return false; }); - const results = await dependenciesParseStrategy(mockCwd, parseSingleFile, 'dep1/file.js', {}, {}); + const results = await dependenciesParseStrategy( + mockCwd, + parseSingleFile, + 'dep1/file.js', + {}, + {} + ); expect(results[0]).toBe(`${mockCwd}dep1/relative_dep/index.js`); }); diff --git a/packages/kbn-babel-code-parser/src/visitors.js b/packages/kbn-babel-code-parser/src/visitors.js index 190586357395..30014941d2a2 100644 --- a/packages/kbn-babel-code-parser/src/visitors.js +++ b/packages/kbn-babel-code-parser/src/visitors.js @@ -21,29 +21,29 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) { // raw values on require + require.resolve CallExpression: ({ node }) => { // AST check for require expressions - const isRequire = (node) => { + const isRequire = node => { return matches({ callee: { type: 'Identifier', - name: 'require' - } + name: 'require', + }, })(node); }; // AST check for require.resolve expressions - const isRequireResolve = (node) => { + const isRequireResolve = node => { return matches({ callee: { type: 'MemberExpression', object: { type: 'Identifier', - name: 'require' + name: 'require', }, property: { type: 'Identifier', - name: 'resolve' - } - } + name: 'resolve', + }, + }, })(node); }; @@ -66,12 +66,12 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) { // raw values on import ImportDeclaration: ({ node }) => { // AST check for supported import expressions - const isImport = (node) => { + const isImport = node => { return matches({ type: 'ImportDeclaration', source: { - type: 'StringLiteral' - } + type: 'StringLiteral', + }, })(node); }; @@ -85,12 +85,12 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) { // raw values on export from ExportNamedDeclaration: ({ node }) => { // AST check for supported export from expressions - const isExportFrom = (node) => { + const isExportFrom = node => { return matches({ type: 'ExportNamedDeclaration', source: { - type: 'StringLiteral' - } + type: 'StringLiteral', + }, })(node); }; @@ -104,12 +104,12 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) { // raw values on export * from ExportAllDeclaration: ({ node }) => { // AST check for supported export * from expressions - const isExportAllFrom = (node) => { + const isExportAllFrom = node => { return matches({ type: 'ExportAllDeclaration', source: { - type: 'StringLiteral' - } + type: 'StringLiteral', + }, })(node); }; @@ -118,7 +118,7 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) { const exportAllFromSource = node.source; dependenciesAcc.push(exportAllFromSource.value); } - } + }, }; })(); } diff --git a/packages/kbn-babel-code-parser/src/visitors.test.js b/packages/kbn-babel-code-parser/src/visitors.test.js index a8f865bda26e..6a29d144a4de 100644 --- a/packages/kbn-babel-code-parser/src/visitors.test.js +++ b/packages/kbn-babel-code-parser/src/visitors.test.js @@ -21,12 +21,12 @@ import * as parser from '@babel/parser'; import traverse from '@babel/traverse'; import { dependenciesVisitorsGenerator } from './visitors'; -const visitorsApplier = (code) => { +const visitorsApplier = code => { const result = []; traverse( parser.parse(code, { sourceType: 'unambiguous', - plugins: ['exportDefaultFrom'] + plugins: ['exportDefaultFrom'], }), dependenciesVisitorsGenerator(result) ); diff --git a/packages/kbn-babel-preset/common_babel_parser_options.js b/packages/kbn-babel-preset/common_babel_parser_options.js index 3020b919bc3a..4004230171a4 100644 --- a/packages/kbn-babel-preset/common_babel_parser_options.js +++ b/packages/kbn-babel-preset/common_babel_parser_options.js @@ -28,6 +28,6 @@ module.exports = { 'exportDefaultFrom', 'exportNamespaceFrom', 'objectRestSpread', - 'throwExpressions' + 'throwExpressions', ], }; diff --git a/packages/kbn-babel-preset/node_preset.js b/packages/kbn-babel-preset/node_preset.js index 793044e3796e..c7809f28fec7 100644 --- a/packages/kbn-babel-preset/node_preset.js +++ b/packages/kbn-babel-preset/node_preset.js @@ -20,21 +20,19 @@ module.exports = (_, options = {}) => { const overrides = []; if (!process.env.ALLOW_PERFORMANCE_HOOKS_IN_TASK_MANAGER) { - overrides.push( - { - test: [/x-pack[\/\\]legacy[\/\\]plugins[\/\\]task_manager/], - plugins: [ - [ - require.resolve('babel-plugin-filter-imports'), - { - imports: { - perf_hooks: ['performance'], - }, + overrides.push({ + test: [/x-pack[\/\\]legacy[\/\\]plugins[\/\\]task_manager/], + plugins: [ + [ + require.resolve('babel-plugin-filter-imports'), + { + imports: { + perf_hooks: ['performance'], }, - ], + }, ], - } - ); + ], + }); } return { diff --git a/packages/kbn-interpreter/src/common/lib/get_by_alias.test.js b/packages/kbn-interpreter/src/common/lib/get_by_alias.test.js index 9cfc37fd8f30..19282f5e23d0 100644 --- a/packages/kbn-interpreter/src/common/lib/get_by_alias.test.js +++ b/packages/kbn-interpreter/src/common/lib/get_by_alias.test.js @@ -25,7 +25,10 @@ describe('getByAlias', () => { bar: { name: 'bar', aliases: ['b'] }, }; - const fnsArray = [{ name: 'foo', aliases: ['f'] }, { name: 'bar', aliases: ['b'] }]; + const fnsArray = [ + { name: 'foo', aliases: ['f'] }, + { name: 'bar', aliases: ['b'] }, + ]; it('returns the function by name', () => { expect(getByAlias(fnsObject, 'foo')).toBe(fnsObject.foo); diff --git a/packages/kbn-interpreter/src/common/registries.js b/packages/kbn-interpreter/src/common/registries.js index efc754464e18..2c68f5647ca7 100644 --- a/packages/kbn-interpreter/src/common/registries.js +++ b/packages/kbn-interpreter/src/common/registries.js @@ -17,7 +17,6 @@ * under the License. */ - /** * Add a new set of registries to an existing set of registries. * diff --git a/packages/kbn-interpreter/tasks/build/cli.js b/packages/kbn-interpreter/tasks/build/cli.js index 8d951f8a9eda..86df21ee566a 100644 --- a/packages/kbn-interpreter/tasks/build/cli.js +++ b/packages/kbn-interpreter/tasks/build/cli.js @@ -24,27 +24,19 @@ const del = require('del'); const supportsColor = require('supports-color'); const { ToolingLog, withProcRunner, pickLevelFromFlags } = require('@kbn/dev-utils'); -const { - ROOT_DIR, - BUILD_DIR, -} = require('./paths'); +const { ROOT_DIR, BUILD_DIR } = require('./paths'); const unknownFlags = []; const flags = getopts(process.argv, { - boolean: [ - 'watch', - 'dev', - 'help', - 'debug' - ], + boolean: ['watch', 'dev', 'help', 'debug'], unknown(name) { unknownFlags.push(name); - } + }, }); const log = new ToolingLog({ level: pickLevelFromFlags(flags), - writeTo: process.stdout + writeTo: process.stdout, }); if (unknownFlags.length) { @@ -64,7 +56,7 @@ if (flags.help) { process.exit(); } -withProcRunner(log, async (proc) => { +withProcRunner(log, async proc => { log.info('Deleting old output'); await del(BUILD_DIR); @@ -80,20 +72,22 @@ withProcRunner(log, async (proc) => { cmd: 'babel', args: [ 'src', - '--ignore', `*.test.js`, - '--out-dir', relative(cwd, BUILD_DIR), + '--ignore', + `*.test.js`, + '--out-dir', + relative(cwd, BUILD_DIR), '--copy-files', ...(flags.dev ? ['--source-maps', 'inline'] : []), - ...(flags.watch ? ['--watch'] : ['--quiet']) + ...(flags.watch ? ['--watch'] : ['--quiet']), ], wait: true, env, - cwd + cwd, }), ]); log.success('Complete'); -}).catch((error) => { +}).catch(error => { log.error(error); process.exit(1); }); diff --git a/packages/kbn-interpreter/tasks/build/paths.js b/packages/kbn-interpreter/tasks/build/paths.js index e446da90e7cd..aefd64a93946 100644 --- a/packages/kbn-interpreter/tasks/build/paths.js +++ b/packages/kbn-interpreter/tasks/build/paths.js @@ -24,4 +24,3 @@ exports.SOURCE_DIR = resolve(exports.ROOT_DIR, 'src'); exports.BUILD_DIR = resolve(exports.ROOT_DIR, 'target'); exports.BABEL_PRESET_PATH = require.resolve('@kbn/babel-preset/webpack_preset'); - diff --git a/packages/kbn-interpreter/tasks/build/server_code_transformer.js b/packages/kbn-interpreter/tasks/build/server_code_transformer.js index b1185f475219..4bd9220993c6 100644 --- a/packages/kbn-interpreter/tasks/build/server_code_transformer.js +++ b/packages/kbn-interpreter/tasks/build/server_code_transformer.js @@ -21,7 +21,7 @@ const { extname } = require('path'); const { transform } = require('@babel/core'); -exports.createServerCodeTransformer = (sourceMaps) => { +exports.createServerCodeTransformer = sourceMaps => { return (content, path) => { switch (extname(path)) { case '.js': diff --git a/packages/kbn-spec-to-console/bin/spec_to_console.js b/packages/kbn-spec-to-console/bin/spec_to_console.js index 88f30be5e94f..20e870963e4b 100644 --- a/packages/kbn-spec-to-console/bin/spec_to_console.js +++ b/packages/kbn-spec-to-console/bin/spec_to_console.js @@ -17,7 +17,6 @@ * under the License. */ - const fs = require('fs'); const path = require('path'); const program = require('commander'); @@ -48,7 +47,7 @@ files.forEach(file => { try { fs.mkdirSync(program.directory, { recursive: true }); fs.writeFileSync(outputPath, output + '\n'); - } catch(e) { + } catch (e) { console.log('Cannot write file ', e); } } else { diff --git a/packages/kbn-spec-to-console/index.js b/packages/kbn-spec-to-console/index.js index c32c05160fcc..09e69cc9b2c0 100644 --- a/packages/kbn-spec-to-console/index.js +++ b/packages/kbn-spec-to-console/index.js @@ -17,6 +17,5 @@ * under the License. */ - const convert = require('./lib/convert'); module.exports = convert; diff --git a/packages/kbn-spec-to-console/lib/convert.test.js b/packages/kbn-spec-to-console/lib/convert.test.js index cecb198b5e4f..4e835dd30d10 100644 --- a/packages/kbn-spec-to-console/lib/convert.test.js +++ b/packages/kbn-spec-to-console/lib/convert.test.js @@ -17,7 +17,6 @@ * under the License. */ - const convert = require('./convert'); const clusterHealthSpec = require('../test/fixtures/cluster_health_spec'); diff --git a/packages/kbn-spec-to-console/lib/convert/methods.js b/packages/kbn-spec-to-console/lib/convert/methods.js index a80ae860d26e..b4ab8f467ae1 100644 --- a/packages/kbn-spec-to-console/lib/convert/methods.js +++ b/packages/kbn-spec-to-console/lib/convert/methods.js @@ -17,7 +17,6 @@ * under the License. */ - module.exports = methods => { return methods; }; diff --git a/packages/kbn-spec-to-console/lib/convert/params.js b/packages/kbn-spec-to-console/lib/convert/params.js index b001044caba1..86ac1667282f 100644 --- a/packages/kbn-spec-to-console/lib/convert/params.js +++ b/packages/kbn-spec-to-console/lib/convert/params.js @@ -17,7 +17,6 @@ * under the License. */ - module.exports = params => { const result = {}; Object.keys(params).forEach(param => { diff --git a/packages/kbn-ui-framework/Gruntfile.js b/packages/kbn-ui-framework/Gruntfile.js index 8fb1032f30a6..cf0c1643055e 100644 --- a/packages/kbn-ui-framework/Gruntfile.js +++ b/packages/kbn-ui-framework/Gruntfile.js @@ -26,7 +26,7 @@ const debounce = require('lodash/function/debounce'); const platform = require('os').platform(); const isPlatformWindows = /^win/.test(platform); -module.exports = function (grunt) { +module.exports = function(grunt) { grunt.initConfig({ clean: { target: ['target'], @@ -43,23 +43,18 @@ module.exports = function (grunt) { '!**/__snapshots__/**/*', ], dest: 'target', - } + }, }, babel: { prodBuild: { expand: true, - src: [ - 'target/components/**/*.js', - 'target/src/**/*.js', - ], + src: ['target/components/**/*.js', 'target/src/**/*.js'], dest: '.', options: { - presets: [ - require.resolve('@kbn/babel-preset/webpack_preset') - ] + presets: [require.resolve('@kbn/babel-preset/webpack_preset')], }, - } - } + }, + }, }); grunt.loadNpmTasks('grunt-babel'); @@ -67,7 +62,7 @@ module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask('prodBuild', ['clean:target', 'copy:makeProdBuild', 'babel:prodBuild']); - grunt.registerTask('docSiteBuild', function () { + grunt.registerTask('docSiteBuild', function() { const done = this.async(); const serverCmd = { @@ -77,7 +72,7 @@ module.exports = function (grunt) { '--config=doc_site/webpack.config.js', '--devtool=null', // Prevent the source map from being generated ], - opts: { stdio: 'inherit' } + opts: { stdio: 'inherit' }, }; const uiFrameworkServerBuild = new Promise((resolve, reject) => { @@ -99,24 +94,26 @@ module.exports = function (grunt) { uiFrameworkServerBuild.then(done); }); - grunt.registerTask('docSiteStart', function () { + grunt.registerTask('docSiteStart', function() { const done = this.async(); Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done); }); - grunt.registerTask('compileCssLight', function () { + grunt.registerTask('compileCssLight', function() { const done = this.async(); uiFrameworkCompileLight().then(done); }); - grunt.registerTask('compileCssDark', function () { + grunt.registerTask('compileCssDark', function() { const done = this.async(); uiFrameworkCompileDark().then(done); }); function uiFrameworkServerStart() { const serverCmd = { - cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' : './node_modules/.bin/webpack-dev-server', + cmd: isPlatformWindows + ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' + : './node_modules/.bin/webpack-dev-server', args: [ '--config=doc_site/webpack.config.js', '--hot', @@ -125,7 +122,7 @@ module.exports = function (grunt) { '--host=0.0.0.0', '--port=8020', ], - opts: { stdio: 'inherit' } + opts: { stdio: 'inherit' }, }; return new Promise((resolve, reject) => { @@ -142,7 +139,6 @@ module.exports = function (grunt) { resolve(); }); - }); } @@ -151,25 +147,28 @@ module.exports = function (grunt) { const dest = 'dist/kui_light.css'; return new Promise(resolve => { - sass.render({ - file: src, - }, function (error, result) { - if (error) { - grunt.log.error(error); + sass.render( + { + file: src, + }, + function(error, result) { + if (error) { + grunt.log.error(error); + } + + postcss([postcssConfig]) + .process(result.css, { from: src, to: dest }) + .then(result => { + grunt.file.write(dest, result.css); + + if (result.map) { + grunt.file.write(`${dest}.map`, result.map); + } + + resolve(); + }); } - - postcss([postcssConfig]) - .process(result.css, { from: src, to: dest }) - .then(result => { - grunt.file.write(dest, result.css); - - if (result.map) { - grunt.file.write(`${dest}.map`, result.map); - } - - resolve(); - }); - }); + ); }); } @@ -178,46 +177,55 @@ module.exports = function (grunt) { const dest = 'dist/kui_dark.css'; return new Promise(resolve => { - sass.render({ - file: src, - }, function (error, result) { - if (error) { - grunt.log.error(error); + sass.render( + { + file: src, + }, + function(error, result) { + if (error) { + grunt.log.error(error); + } + + postcss([postcssConfig]) + .process(result.css, { from: src, to: dest }) + .then(result => { + grunt.file.write(dest, result.css); + + if (result.map) { + grunt.file.write(`${dest}.map`, result.map); + } + + resolve(); + }); } - - postcss([postcssConfig]) - .process(result.css, { from: src, to: dest }) - .then(result => { - grunt.file.write(dest, result.css); - - if (result.map) { - grunt.file.write(`${dest}.map`, result.map); - } - - resolve(); - }); - }); + ); }); } function uiFrameworkWatch() { - const debouncedCompile = debounce(() => { - // Compile the SCSS in a separate process because node-sass throws a fatal error if it fails - // to compile. - grunt.util.spawn({ - cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt', - args: [ - 'compileCssLight', - 'compileCssDark', - ], - }, (error, result) => { - if (error) { - grunt.log.error(result.stdout); - } else { - grunt.log.writeln(result); - } - }); - }, 400, { leading: true }); + const debouncedCompile = debounce( + () => { + // Compile the SCSS in a separate process because node-sass throws a fatal error if it fails + // to compile. + grunt.util.spawn( + { + cmd: isPlatformWindows + ? '.\\node_modules\\.bin\\grunt.cmd' + : './node_modules/.bin/grunt', + args: ['compileCssLight', 'compileCssDark'], + }, + (error, result) => { + if (error) { + grunt.log.error(result.stdout); + } else { + grunt.log.writeln(result); + } + } + ); + }, + 400, + { leading: true } + ); return new Promise(() => { debouncedCompile(); diff --git a/packages/kbn-ui-framework/doc_site/postcss.config.js b/packages/kbn-ui-framework/doc_site/postcss.config.js index 9ba3de2666ca..571bae86dee3 100644 --- a/packages/kbn-ui-framework/doc_site/postcss.config.js +++ b/packages/kbn-ui-framework/doc_site/postcss.config.js @@ -18,7 +18,5 @@ */ module.exports = { - plugins: [ - require('autoprefixer')() - ] + plugins: [require('autoprefixer')()], }; diff --git a/packages/kbn-ui-framework/doc_site/src/actions/action_types.js b/packages/kbn-ui-framework/doc_site/src/actions/action_types.js index 2b9cb751c351..f795ba931a98 100644 --- a/packages/kbn-ui-framework/doc_site/src/actions/action_types.js +++ b/packages/kbn-ui-framework/doc_site/src/actions/action_types.js @@ -17,11 +17,9 @@ * under the License. */ - import keyMirror from 'keymirror'; export default keyMirror({ - // Source code viewer actions OPEN_CODE_VIEWER: null, CLOSE_CODE_VIEWER: null, @@ -33,5 +31,4 @@ export default keyMirror({ // Example nav actions REGISTER_SECTION: null, UNREGISTER_SECTION: null, - }); diff --git a/packages/kbn-ui-framework/doc_site/src/actions/index.js b/packages/kbn-ui-framework/doc_site/src/actions/index.js index 3658958e9c6c..e13ab6b5d71d 100644 --- a/packages/kbn-ui-framework/doc_site/src/actions/index.js +++ b/packages/kbn-ui-framework/doc_site/src/actions/index.js @@ -17,17 +17,8 @@ * under the License. */ -export { - openCodeViewer, - closeCodeViewer, -} from './code_viewer_actions'; +export { openCodeViewer, closeCodeViewer } from './code_viewer_actions'; -export { - openSandbox, - closeSandbox, -} from './sandbox_actions'; +export { openSandbox, closeSandbox } from './sandbox_actions'; -export { - registerSection, - unregisterSection, -} from './example_nav_actions'; +export { registerSection, unregisterSection } from './example_nav_actions'; diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_code/guide_code.js b/packages/kbn-ui-framework/doc_site/src/components/guide_code/guide_code.js index d496e05514c1..f5845becbe77 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_code/guide_code.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_code/guide_code.js @@ -19,6 +19,4 @@ import React from 'react'; -export const GuideCode = props => ( - {props.children} -); +export const GuideCode = props => {props.children}; diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js b/packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js index 68b8c8f810e1..b1d2f8e031f7 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js @@ -49,14 +49,9 @@ export class GuideCodeViewer extends Component { if (code) { return (
-
- {type} -
+
{type}
-            
+            
               {code}
             
           
@@ -70,20 +65,15 @@ export class GuideCodeViewer extends Component { 'is-code-viewer-open': this.props.isOpen, }); - const codeSections = this.props.source.map(sourceObject => ( + const codeSections = this.props.source.map(sourceObject => this.renderSection(sourceObject.type, sourceObject.code) - )); + ); return (
-
- {this.props.title} -
+
{this.props.title}
-
+
{codeSections}
diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js b/packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js index 37e66615b86c..93470ac6de12 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js @@ -68,11 +68,7 @@ export class GuideDemo extends Component { }); return ( -
(this.content = c)} - {...rest} - > +
(this.content = c)} {...rest}> {children}
); diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_link/guide_link.js b/packages/kbn-ui-framework/doc_site/src/components/guide_link/guide_link.js index a24fd9612187..b49880e0e3bf 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_link/guide_link.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_link/guide_link.js @@ -20,11 +20,7 @@ import React from 'react'; export const GuideLink = props => ( - + {props.children} ); diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_nav/guide_nav.js b/packages/kbn-ui-framework/doc_site/src/components/guide_nav/guide_nav.js index cb4654522e4e..f31a3b10eef4 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_nav/guide_nav.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_nav/guide_nav.js @@ -59,11 +59,7 @@ export class GuideNav extends Component { } renderNoItems(name) { - return ( -

- { `No ${name} match your search` } -

- ); + return

{`No ${name} match your search`}

; } renderPagination() { @@ -85,10 +81,7 @@ export class GuideNav extends Component { }); const nextButton = ( - + ); @@ -126,21 +119,13 @@ export class GuideNav extends Component { 'is-menu-button-pinned': this.props.isNavOpen, }); - const componentNavItems = - this.props.components.filter(item => ( - item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 - )).map((item, index) => { - const icon = - item.hasReact - ?
- : undefined; + const componentNavItems = this.props.components + .filter(item => item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) + .map((item, index) => { + const icon = item.hasReact ?
: undefined; return (
- + {item.name} @@ -149,21 +134,13 @@ export class GuideNav extends Component { ); }); - const sandboxNavItems = - this.props.sandboxes.filter(item => ( - item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 - )).map((item, index) => { - const icon = - item.hasReact - ?
- : undefined; + const sandboxNavItems = this.props.sandboxes + .filter(item => item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) + .map((item, index) => { + const icon = item.hasReact ?
: undefined; return (
- + {item.name} @@ -175,18 +152,15 @@ export class GuideNav extends Component { return (
- diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js b/packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js index dee59460a821..d1e6ddd63305 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js @@ -20,10 +20,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { - GuidePageSideNav, - GuidePageSideNavItem, -} from '../'; +import { GuidePageSideNav, GuidePageSideNavItem } from '../'; export class GuidePage extends Component { constructor(props) { @@ -34,20 +31,20 @@ export class GuidePage extends Component { onClickLink(id) { // Scroll to element. - $('html, body').animate({ // eslint-disable-line no-undef - scrollTop: $(`#${id}`).offset().top - 100 // eslint-disable-line no-undef - }, 250); + $('html, body').animate( + { + // eslint-disable-line no-undef + scrollTop: $(`#${id}`).offset().top - 100, // eslint-disable-line no-undef + }, + 250 + ); } renderSideNavMenu() { // Traverse sections and build side nav from it. return this.props.sections.map((section, index) => { return ( - + {section.name} ); @@ -57,15 +54,11 @@ export class GuidePage extends Component { render() { return (
- - {this.renderSideNavMenu()} - + {this.renderSideNavMenu()}
-

- The Kibana UI Framework has been DEPRECATED. -

+

The Kibana UI Framework has been DEPRECATED.

Please use the EUI Framework instead. diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js b/packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js index 96be2d83dcfb..bd7dc0705c6d 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js @@ -20,16 +20,12 @@ import PropTypes from 'prop-types'; import React from 'react'; -export const GuidePageSideNav = props => { +export const GuidePageSideNav = props => { return (
-
- {props.title} -
+
{props.title}
-
- {props.children} -
+
{props.children}
); }; diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js b/packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js index 3d5497e6c8f4..1c59de73b47a 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js @@ -21,7 +21,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; export class GuidePageSideNavItem extends Component { - constructor(props) { super(props); @@ -35,16 +34,12 @@ export class GuidePageSideNavItem extends Component { render() { return (
-
+
{this.props.children}
); } - } GuidePageSideNavItem.propTypes = { diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox.js b/packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox.js index f5a71bfb1b29..4ae5f04da91b 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox.js @@ -17,21 +17,14 @@ * under the License. */ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { - getIsSandbox, -} from '../../store'; +import { getIsSandbox } from '../../store'; -import { - openSandbox, - closeSandbox, -} from '../../actions'; +import { openSandbox, closeSandbox } from '../../actions'; function mapStateToProps(state) { return { @@ -58,11 +51,7 @@ class GuideSandboxComponent extends Component { } render() { - return ( -
- {this.props.children} -
- ); + return
{this.props.children}
; } } diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js b/packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js index fee8e5e770e8..ace860d293e4 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js @@ -20,13 +20,8 @@ import { connect } from 'react-redux'; import { GuideSandboxCodeToggle } from './guide_sandbox_code_toggle'; -import { - openCodeViewer, -} from '../../actions'; +import { openCodeViewer } from '../../actions'; -export const GuideSandboxCodeToggleContainer = connect( - null, - { - openCodeViewer, - }, -)(GuideSandboxCodeToggle); +export const GuideSandboxCodeToggleContainer = connect(null, { + openCodeViewer, +})(GuideSandboxCodeToggle); diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section.js b/packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section.js index dbad59ffb3bd..5af0788dae83 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section.js @@ -46,18 +46,10 @@ export class GuideSection extends Component { render() { return ( -
+
-
- {this.props.title} -
-
diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section_container.js b/packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section_container.js index 0ee6f01f3917..52b10cdbf138 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section_container.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section_container.js @@ -20,17 +20,10 @@ import { connect } from 'react-redux'; import { GuideSection } from './guide_section'; -import { +import { openCodeViewer, registerSection, unregisterSection } from '../../actions'; + +export const GuideSectionContainer = connect(null, { openCodeViewer, registerSection, unregisterSection, -} from '../../actions'; - -export const GuideSectionContainer = connect( - null, - { - openCodeViewer, - registerSection, - unregisterSection, - }, -)(GuideSection); +})(GuideSection); diff --git a/packages/kbn-ui-framework/doc_site/src/components/guide_text/guide_text.js b/packages/kbn-ui-framework/doc_site/src/components/guide_text/guide_text.js index 2cbc99aa1222..26c68dfe8795 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/guide_text/guide_text.js +++ b/packages/kbn-ui-framework/doc_site/src/components/guide_text/guide_text.js @@ -19,6 +19,4 @@ import React from 'react'; -export const GuideText = props => ( -
{props.children}
-); +export const GuideText = props =>
{props.children}
; diff --git a/packages/kbn-ui-framework/doc_site/src/components/index.js b/packages/kbn-ui-framework/doc_site/src/components/index.js index 45963064d6d4..eb24f1eeca22 100644 --- a/packages/kbn-ui-framework/doc_site/src/components/index.js +++ b/packages/kbn-ui-framework/doc_site/src/components/index.js @@ -26,9 +26,7 @@ export { GuidePageContainer as GuidePage } from './guide_page/guide_page_contain export { GuidePageSideNav } from './guide_page_side_nav/guide_page_side_nav'; export { GuidePageSideNavItem } from './guide_page_side_nav/guide_page_side_nav_item'; export { GuideSandbox } from './guide_sandbox/guide_sandbox'; -export { - GuideSandboxCodeToggleContainer as GuideSandboxCodeToggle -} from './guide_sandbox/guide_sandbox_code_toggle_container'; +export { GuideSandboxCodeToggleContainer as GuideSandboxCodeToggle } from './guide_sandbox/guide_sandbox_code_toggle_container'; export { GuideSectionContainer as GuideSection } from './guide_section/guide_section_container'; export { GuideSectionTypes } from './guide_section/guide_section_types'; export { GuideText } from './guide_text/guide_text'; diff --git a/packages/kbn-ui-framework/doc_site/src/index.js b/packages/kbn-ui-framework/doc_site/src/index.js index 33aa3f582d9b..5473024ae93c 100644 --- a/packages/kbn-ui-framework/doc_site/src/index.js +++ b/packages/kbn-ui-framework/doc_site/src/index.js @@ -34,9 +34,7 @@ import AppContainer from './views/app_container'; import { HomeView } from './views/home/home_view'; import { NotFoundView } from './views/not_found/not_found_view'; -import { - Routes, -} from './services'; +import { Routes } from './services'; const store = configureStore(); @@ -47,22 +45,24 @@ childRoutes.push({ name: 'Page Not Found', }); -const routes = [{ - path: '/', - component: AppContainer, - indexRoute: { - component: HomeView, - source: 'views/home/HomeView', +const routes = [ + { + path: '/', + component: AppContainer, + indexRoute: { + component: HomeView, + source: 'views/home/HomeView', + }, + childRoutes, }, - childRoutes, -}]; +]; // Update document title with route name. const onRouteEnter = route => { const leafRoute = route.routes[route.routes.length - 1]; - document.title = leafRoute.name ? - `Kibana UI Framework - ${leafRoute.name}` : - 'Kibana UI Framework'; + document.title = leafRoute.name + ? `Kibana UI Framework - ${leafRoute.name}` + : 'Kibana UI Framework'; }; const syncTitleWithRoutes = routesList => { @@ -82,10 +82,7 @@ syncTitleWithRoutes(routes); ReactDOM.render( - + , document.getElementById('guide') ); diff --git a/packages/kbn-ui-framework/doc_site/src/services/example/create_example.js b/packages/kbn-ui-framework/doc_site/src/services/example/create_example.js index 8b8953e1421b..cf13bbf9b54b 100644 --- a/packages/kbn-ui-framework/doc_site/src/services/example/create_example.js +++ b/packages/kbn-ui-framework/doc_site/src/services/example/create_example.js @@ -18,9 +18,7 @@ */ /* eslint import/named: 0 */ -import { - GuideExample, -} from '../../components'; +import { GuideExample } from '../../components'; export default function creatExample(examples) { class Example extends GuideExample { @@ -30,7 +28,7 @@ export default function creatExample(examples) { } Example.propTypes = { - ...GuideExample.propTypes + ...GuideExample.propTypes, }; return Example; diff --git a/packages/kbn-ui-framework/doc_site/src/services/js_injector/js_injector.js b/packages/kbn-ui-framework/doc_site/src/services/js_injector/js_injector.js index 14131ba7967a..48d032a4bc9e 100644 --- a/packages/kbn-ui-framework/doc_site/src/services/js_injector/js_injector.js +++ b/packages/kbn-ui-framework/doc_site/src/services/js_injector/js_injector.js @@ -17,13 +17,11 @@ * under the License. */ - import $ from 'jquery'; const ID_ATTRIBUTE = 'injected-js-tag-id'; export default { - inject(js, id) { if (id) { $(`[${ID_ATTRIBUTE}=${id}]`).remove(); @@ -36,5 +34,4 @@ export default { remove(id) { $(`[${ID_ATTRIBUTE}=${id}]`).remove(); }, - }; diff --git a/packages/kbn-ui-framework/doc_site/src/services/string/render_to_html.js b/packages/kbn-ui-framework/doc_site/src/services/string/render_to_html.js index 7689277715d2..4f0d1e772fec 100644 --- a/packages/kbn-ui-framework/doc_site/src/services/string/render_to_html.js +++ b/packages/kbn-ui-framework/doc_site/src/services/string/render_to_html.js @@ -19,10 +19,7 @@ import React from 'react'; -import { - render, - configure -} from 'enzyme'; +import { render, configure } from 'enzyme'; import EnzymeAdapter from 'enzyme-adapter-react-16'; @@ -41,7 +38,7 @@ export function renderToHtml(componentReference, props = {}) { indent_size: 2, unformatted: [], // Expand all tags, including spans }); - } catch(e) { + } catch (e) { return ''; } } diff --git a/packages/kbn-ui-framework/doc_site/src/services/string/slugify.js b/packages/kbn-ui-framework/doc_site/src/services/string/slugify.js index 8496d36873a6..f016857ff441 100644 --- a/packages/kbn-ui-framework/doc_site/src/services/string/slugify.js +++ b/packages/kbn-ui-framework/doc_site/src/services/string/slugify.js @@ -17,8 +17,6 @@ * under the License. */ - - /** * Lowercases input and replaces spaces with hyphens: * e.g. 'GridView Example' -> 'gridview-example' @@ -28,7 +26,8 @@ function one(str) { .toLowerCase() .replace(/[-]+/g, ' ') .replace(/[^\w^\s]+/g, '') - .replace(/ +/g, ' ').split(' '); + .replace(/ +/g, ' ') + .split(' '); return parts.join('-'); } diff --git a/packages/kbn-ui-framework/doc_site/src/store/configure_store.js b/packages/kbn-ui-framework/doc_site/src/store/configure_store.js index cb14900f88e8..e6f6be88df41 100644 --- a/packages/kbn-ui-framework/doc_site/src/store/configure_store.js +++ b/packages/kbn-ui-framework/doc_site/src/store/configure_store.js @@ -17,11 +17,7 @@ * under the License. */ -import { - applyMiddleware, - createStore, - compose, -} from 'redux'; +import { applyMiddleware, createStore, compose } from 'redux'; import thunk from 'redux-thunk'; import { browserHistory } from 'react-router'; // eslint-disable-line import { routerMiddleware, routerReducer } from 'react-router-redux'; @@ -44,12 +40,10 @@ export default function configureStore(initialState) { }; } - const finalStore = compose( - applyMiddleware( - thunk, - routerMiddleware(browserHistory) - ) - )(createStore)(rootReducer, initialState); + const finalStore = compose(applyMiddleware(thunk, routerMiddleware(browserHistory)))(createStore)( + rootReducer, + initialState + ); return finalStore; } diff --git a/packages/kbn-ui-framework/doc_site/src/views/app_container.js b/packages/kbn-ui-framework/doc_site/src/views/app_container.js index 8af92eb3d728..a78876474552 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/app_container.js +++ b/packages/kbn-ui-framework/doc_site/src/views/app_container.js @@ -20,22 +20,11 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { - getIsCodeViewerOpen, - getIsSandbox, - getSections, - getSource, - getTitle, -} from '../store'; +import { getIsCodeViewerOpen, getIsSandbox, getSections, getSource, getTitle } from '../store'; import { AppView } from './app_view'; -import { - openCodeViewer, - closeCodeViewer, - registerSection, - unregisterSection, -} from '../actions'; +import { openCodeViewer, closeCodeViewer, registerSection, unregisterSection } from '../actions'; function mapStateToProps(state, ownProps) { return { diff --git a/packages/kbn-ui-framework/doc_site/src/views/app_view.js b/packages/kbn-ui-framework/doc_site/src/views/app_view.js index fc14417564d7..4a8b1d944f6e 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/app_view.js +++ b/packages/kbn-ui-framework/doc_site/src/views/app_view.js @@ -22,14 +22,9 @@ import React, { Component } from 'react'; import classNames from 'classnames'; -import { - Routes, -} from '../services'; +import { Routes } from '../services'; -import { - GuideCodeViewer, - GuideNav, -} from '../components'; +import { GuideCodeViewer, GuideNav } from '../components'; // Inject version into header. const pkg = require('../../../../../package.json'); @@ -114,9 +109,7 @@ export class AppView extends Component { sandboxes={Routes.sandboxes} /> -
- {this.props.children} -
+
{this.props.children}
( -
- The Great American Novel -
+
The Great American Novel
- +
pages
diff --git a/packages/kbn-ui-framework/doc_site/src/views/bar/bar_example.js b/packages/kbn-ui-framework/doc_site/src/views/bar/bar_example.js index b2da802ec8d8..a71b2ff28ee6 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/bar/bar_example.js +++ b/packages/kbn-ui-framework/doc_site/src/views/bar/bar_example.js @@ -22,13 +22,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; +import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components'; import Bar from './bar'; import barSource from '!!raw-loader!./bar'; @@ -46,13 +40,16 @@ export default props => ( Use the Bar to organize controls in a horizontal layout. This is especially useful for @@ -71,17 +68,20 @@ export default props => ( - A Bar with one section will align it to the right, by default. To align it to the left, - just add another section and leave it empty, or don’t use a Bar at all. + A Bar with one section will align it to the right, by default. To align it to the left, just + add another section and leave it empty, or don’t use a Bar at all. @@ -91,17 +91,20 @@ export default props => ( - Technically the Bar can contain three or more sections, but there’s no established use-case - for this. + Technically the Bar can contain three or more sections, but there’s no established + use-case for this. diff --git a/packages/kbn-ui-framework/doc_site/src/views/bar/bar_one_section.js b/packages/kbn-ui-framework/doc_site/src/views/bar/bar_one_section.js index 06962b217592..590b977fcb42 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/bar/bar_one_section.js +++ b/packages/kbn-ui-framework/doc_site/src/views/bar/bar_one_section.js @@ -19,22 +19,14 @@ import React from 'react'; -import { - KuiBar, - KuiBarSection, - KuiButton -} from '../../../../components'; +import { KuiBar, KuiBarSection, KuiButton } from '../../../../components'; export default () => (
- - See previous 10 pages - - - See next 10 pages - + See previous 10 pages + See next 10 pages
diff --git a/packages/kbn-ui-framework/doc_site/src/views/bar/bar_three_sections.js b/packages/kbn-ui-framework/doc_site/src/views/bar/bar_three_sections.js index cfaef7df6cfa..522f4856775e 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/bar/bar_three_sections.js +++ b/packages/kbn-ui-framework/doc_site/src/views/bar/bar_three_sections.js @@ -19,44 +19,29 @@ import React from 'react'; -import { - KuiBar, - KuiBarSection, - KuiButton, - KuiButtonGroup -} from '../../../../components'; +import { KuiBar, KuiBarSection, KuiButton, KuiButtonGroup } from '../../../../components'; export default () => ( -
- The Great American Novel -
+
The Great American Novel
- - Create new page - - - Clear all pages - + Create new page + Clear all pages - +
pages
- - Undo - - - Redo - + Undo + Redo
diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_basic.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_basic.js index 2f7fa6a504be..281ce9186280 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_basic.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_basic.js @@ -19,27 +19,18 @@ import React from 'react'; -import { - KuiButton, -} from '../../../../components'; +import { KuiButton } from '../../../../components'; export default () => (
- window.alert('Button clicked')} - > + window.alert('Button clicked')}> Basic button

- window.alert('Button clicked')} - disabled - > + window.alert('Button clicked')} disabled> Basic button, disabled
diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_danger.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_danger.js index 53a66fdc05ba..96aa07638e7b 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_danger.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_danger.js @@ -19,25 +19,17 @@ import React from 'react'; -import { - KuiButton, -} from '../../../../components'; +import { KuiButton } from '../../../../components'; export default () => (
- - Danger button - + Danger button

- + Danger button, disabled
- ); diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_elements.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_elements.js index 2b2e012421f2..64bff6e0f298 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_elements.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_elements.js @@ -19,37 +19,31 @@ import React from 'react'; -import { - KuiButton, - KuiLinkButton, - KuiSubmitButton, -} from '../../../../components'; +import { KuiButton, KuiLinkButton, KuiSubmitButton } from '../../../../components'; export default () => (
- - Button element - + Button element

-
{ - e.preventDefault(); - window.alert('Submit'); - }} + { + e.preventDefault(); + window.alert('Submit'); + }} > - - Submit input element - + Submit input element

-
{ - e.preventDefault(); - window.alert('Submit'); - }} + { + e.preventDefault(); + window.alert('Submit'); + }} > Submit input element, disabled @@ -58,23 +52,14 @@ export default () => (
- + Anchor element

- + Anchor element, disabled
diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_example.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_example.js index f1ee209126a7..daea2978aeff 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_example.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_example.js @@ -23,13 +23,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; +import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components'; import Basic from './button_basic'; import basicSource from '!!raw-loader!./button_basic'; @@ -81,16 +75,20 @@ export default props => ( - Use the basic button for navigation elements or controls that are not the primary focus of the page (ex: pagination, toggles...etc). + Use the basic button for navigation elements or controls that are not the primary focus of + the page (ex: pagination, toggles...etc). @@ -100,13 +98,16 @@ export default props => ( Use the hollow Button when presenting a neutral action, e.g. a “Cancel” button. @@ -119,17 +120,20 @@ export default props => ( - Use the primary Button to represent the most common action. Generally, there won’t be a - need to present more than one of these at a time. + Use the primary Button to represent the most common action. Generally, there won’t be + a need to present more than one of these at a time. @@ -139,16 +143,20 @@ export default props => ( - Secondary buttons are usually used for actions (“do this”) that are optional actions on a page. + Secondary buttons are usually used for actions (“do this”) that are optional + actions on a page. @@ -158,17 +166,18 @@ export default props => ( - - Danger Buttons represent irreversible, potentially regrettable actions. - + Danger Buttons represent irreversible, potentially regrettable actions. @@ -177,17 +186,18 @@ export default props => ( - - Warning Buttons represent potentially notable actions. - + Warning Buttons represent potentially notable actions. @@ -196,13 +206,16 @@ export default props => ( @@ -211,20 +224,23 @@ export default props => (

- You can toss an icon into a Button, with or without text. You can also use a predefined icon - or specify custom icon classes. If you have a button without textual content, make sure you set - the aria-label attribute with a textual representation for screen readers (see - last example below). + You can toss an icon into a Button, with or without text. You can also use a predefined + icon or specify custom icon classes. If you have a button without textual content, make + sure you set the aria-label attribute with a textual representation for + screen readers (see last example below).

@@ -235,13 +251,16 @@ export default props => ( @@ -250,13 +269,16 @@ export default props => ( Use the united version of the ButtonGroup to emphasize the close relationship within a set @@ -275,13 +297,16 @@ export default props => ( You can create a Button using a button element, link, or input[type=“submit”]. @@ -294,14 +319,14 @@ export default props => ( - +
); diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_group.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_group.js index bc3c26d67d09..6834d662798f 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_group.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_group.js @@ -19,33 +19,22 @@ import React from 'react'; -import { - KuiButton, - KuiButtonGroup, -} from '../../../../components'; +import { KuiButton, KuiButtonGroup } from '../../../../components'; export default () => (
- - Cancel - + Cancel - - Duplicate - + Duplicate - - Save - + Save
- - Button group with one button - + Button group with one button
); diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_group_united.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_group_united.js index f11e5d8a4f77..33a3a95e42bb 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_group_united.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_group_united.js @@ -19,26 +19,16 @@ import React from 'react'; -import { - KuiButton, - KuiButtonGroup, - KuiButtonIcon, -} from '../../../../components'; +import { KuiButton, KuiButtonGroup, KuiButtonIcon } from '../../../../components'; export default () => (
- - Option A - + Option A - - Option B - + Option B - - Option C - + Option C
@@ -50,11 +40,7 @@ export default () => ( icon={} /> - } - /> + } />
); diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_hollow.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_hollow.js index 151a7006a3c2..edc99875268d 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_hollow.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_hollow.js @@ -19,23 +19,16 @@ import React from 'react'; -import { - KuiButton, -} from '../../../../components'; +import { KuiButton } from '../../../../components'; export default () => (
- - Hollow button - + Hollow button

- + Hollow button, disabled
diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_loading.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_loading.js index 11bb38ce236b..764adddd500e 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_loading.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_loading.js @@ -17,14 +17,9 @@ * under the License. */ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; -import { - KuiButtonIcon, - KuiButton, -} from '../../../../components'; +import { KuiButtonIcon, KuiButton } from '../../../../components'; export default class LoadingButton extends Component { constructor(props) { diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_primary.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_primary.js index 33e0d4dbf473..27b9d0a83edb 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_primary.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_primary.js @@ -19,23 +19,16 @@ import React from 'react'; -import { - KuiButton, -} from '../../../../components'; +import { KuiButton } from '../../../../components'; export default () => (
- - Primary button - + Primary button

- + Primary button, disabled
diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_secondary.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_secondary.js index 86a38fe5b6c7..d1c6bba0d3b8 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_secondary.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_secondary.js @@ -19,25 +19,17 @@ import React from 'react'; -import { - KuiButton, -} from '../../../../components'; +import { KuiButton } from '../../../../components'; export default () => (
- - Secondary button - + Secondary button

- + Secondary button, disabled
); - diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_warning.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_warning.js index edefd1f79524..8bc839bc12fe 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_warning.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_warning.js @@ -19,25 +19,17 @@ import React from 'react'; -import { - KuiButton, -} from '../../../../components'; +import { KuiButton } from '../../../../components'; export default () => (
- - Warning button - + Warning button

- + Warning button, disabled
- ); diff --git a/packages/kbn-ui-framework/doc_site/src/views/button/button_with_icon.js b/packages/kbn-ui-framework/doc_site/src/views/button/button_with_icon.js index fd2eed744bec..95dc138d49ac 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/button/button_with_icon.js +++ b/packages/kbn-ui-framework/doc_site/src/views/button/button_with_icon.js @@ -19,58 +19,39 @@ import React from 'react'; -import { - KuiButton, - KuiButtonIcon, -} from '../../../../components'; +import { KuiButton, KuiButtonIcon } from '../../../../components'; export default () => (
- } - > + }> Create

- } - > + }> Delete

- } - > + }> Previous

- } - iconPosition="right" - > + } iconPosition="right"> Next

- } - > + }> Loading diff --git a/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button.js b/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button.js index 6b12e62913c9..0cb1643cf9ff 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button.js +++ b/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button.js @@ -19,15 +19,13 @@ import React from 'react'; -import { - KuiCollapseButton -} from '../../../../components'; +import { KuiCollapseButton } from '../../../../components'; export default () => (
- - - - + + + +
); diff --git a/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_aria.js b/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_aria.js index 5be948a319f7..d22c1bdebf98 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_aria.js +++ b/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_aria.js @@ -19,27 +19,24 @@ import React, { Component } from 'react'; -import { - KuiCollapseButton -} from '../../../../components'; +import { KuiCollapseButton } from '../../../../components'; import { htmlIdGenerator } from '../../../../src/services'; export default class extends Component { - constructor(props) { super(props); this.state = { - isExpanded: false + isExpanded: false, }; } - onToggleContent = (ev) => { + onToggleContent = ev => { ev.preventDefault(); - this.setState((state) => ({ - isExpanded: !state.isExpanded + this.setState(state => ({ + isExpanded: !state.isExpanded, })); - } + }; render() { const { isExpanded } = this.state; @@ -53,14 +50,10 @@ export default class extends Component { aria-expanded={isExpanded} aria-controls={idGen('collapsible')} /> -
+
Here is some collapsible content.
); } - } diff --git a/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_example.js b/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_example.js index 5706233d673a..d008a0d5f23f 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_example.js +++ b/packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_example.js @@ -22,13 +22,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; +import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components'; import CollapseButton from './collapse_button'; import collapseButtonSource from '!!raw-loader!./collapse_button'; @@ -42,13 +36,16 @@ export default props => ( Use this button to collapse and expand panels, drawers, sidebars, legends, and other @@ -62,31 +59,42 @@ export default props => ( To make an expandable element properly accessible you should add the following ARIA-attributes to it:
-
aria-expanded
+
+ aria-expanded +
- should be true or false depending on - the state of the collapsable content. + should be true or false depending on the state of the + collapsable content.
-
aria-controls
-
should reference the id of the actual collapsable content element.
-
aria-label
+
+ aria-controls +
- should contain a label like "Toggle panel" or preferably more specific what - it toggles (e.g. "Toggle filter actions"). You don’t need to switch the label - when the state changes, since a screen reader will use aria-expanded to - read out the current state. + should reference the id of the actual collapsable content element. +
+
+ aria-label +
+
+ should contain a label like "Toggle panel" or preferably more specific what it + toggles (e.g. "Toggle filter actions"). You don’t need to switch the + label when the state changes, since a screen reader will use aria-expanded{' '} + to read out the current state.
The following example demonstrate the usage of these attributes. diff --git a/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js b/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js index 7ca261afb9f7..b16e3459310e 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js +++ b/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js @@ -26,13 +26,13 @@ export function EmptyTablePrompt() { } + icon={} aria-label="Add a new item" data-test-subj="addNewPromptButton" buttonType="primary" href="#" > - Add a new item + Add a new item } message="Uh oh, You have no items!" diff --git a/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js b/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js index f2824b21d689..f44e36fe1fd5 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js +++ b/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js @@ -22,13 +22,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideDemo, - GuidePage, - GuideSection, - GuideSectionTypes, - GuideText, -} from '../../components'; +import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components'; import { EmptyTablePrompt } from './empty_table_prompt'; import emptyTablePromptSource from '!!raw-loader!./empty_table_prompt'; // eslint-disable-line import/default @@ -42,40 +36,44 @@ export default props => ( - Use this prompt when a table has no results. It helps create space and provides a place to prompt the user - to follow some next actions, such as creating an item. + Use this prompt when a table has no results. It helps create space and provides a place to + prompt the user to follow some next actions, such as creating an item. - + - - Wrap in an EmptyTablePromptPanel when using with a controlled table. - + Wrap in an EmptyTablePromptPanel when using with a controlled table. - + diff --git a/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js b/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js index 01e07e873d1d..c36fe9ce4ad9 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js +++ b/packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js @@ -52,7 +52,7 @@ export function ControlledTableWithEmptyPrompt() { actions={ } + icon={} aria-label="Add a new dashboard" data-test-subj="addNewDashPromptButton" buttonType="primary" @@ -62,13 +62,13 @@ export function ControlledTableWithEmptyPrompt() { } + icon={} aria-label="Add a new visualization" data-test-subj="addNewVizPromptButton" buttonType="primary" href="#" > - Add a new visualization + Add a new visualization } diff --git a/packages/kbn-ui-framework/doc_site/src/views/form/check_box.js b/packages/kbn-ui-framework/doc_site/src/views/form/check_box.js index 903307e675b9..3395a2a1de04 100644 --- a/packages/kbn-ui-framework/doc_site/src/views/form/check_box.js +++ b/packages/kbn-ui-framework/doc_site/src/views/form/check_box.js @@ -17,14 +17,8 @@ * under the License. */ -import React, { - Component, -} from 'react'; -import { - KuiCheckBox, - KuiCheckBoxLabel -} from '../../../../components'; - +import React, { Component } from 'react'; +import { KuiCheckBox, KuiCheckBoxLabel } from '../../../../components'; class KuiCheckBoxExample extends Component { state = { @@ -36,7 +30,7 @@ class KuiCheckBoxExample extends Component { handleChange = (event, key) => { this.setState({ [key]: event.target.checked }); - } + }; render() { return ( @@ -45,18 +39,18 @@ class KuiCheckBoxExample extends Component { isChecked={this.state.value1} onChange={event => this.handleChange(event, 'value1')} /> -
+
this.handleChange(event, 'value2')} /> -
+
this.handleChange(event, 'value3')} isDisabled /> -
+
( - - Never forget to label every input element. You can either - use a label element with a for attribute - referencing the id of the input field, wrap the input field - within the label element or use aria-label or aria-labelledby. + Never forget to label every input element. You can either use a label{' '} + element with a for attribute referencing the{' '} + id of the input field, wrap the input field + within the label element or use aria-label or{' '} + aria-labelledby. - For the sake of simplicity we haven’t labeled the input elements on - this page correctly. + For the sake of simplicity we haven’t labeled the input elements on this page + correctly. - - - + - Note: You have to specify right-side padding using a custom class or - inline style to keep the input text from overlapping with the assistance content. - Use em units for this padding so that it scales appropriately if the - user changes their root font-size. + Note: You have to specify right-side padding using a custom class or inline + style to keep the input text from overlapping with the assistance content. Use{' '} + em units for this padding so that it scales appropriately if the user + changes their root font-size. - + - + - Use StaticInput to display dynamic content in a form which the user isn’t allowed to edit. + Use StaticInput to display dynamic content in a form which the user isn’t allowed to + edit. - + -