Skip to content

Commit

Permalink
[UI Framework] Create Button React components in UI Framework. (#10646)
Browse files Browse the repository at this point in the history
* Create KuiButton, KuiLinkButton, KuiSubmitButton, and KuiButtonIcon React components in UI Framework.
* Add Jest test coverage for UI Framework, generate report in ui_framework/jest/report.
* Add UI Framework to linting task.
* Update UI Framework README with instructions on creating and testing React components.
* Add both React and HTML examples.
* Add UI Framework Jest tests to npm test script. Create separate scripts for watching and generating coverage reports.
* Fix appearance of kuiButtons with icons throughout Kibana, by adding a flexbox wrapper.
* Improve accessibility of kuiButtonIcon.
* Remove disabled attribute from KuiLinkButton.
* Remove kuiButton-isDisabled class from KuiButton and KuiSubmitButton.
  • Loading branch information
cjcenizal authored Mar 29, 2017
1 parent 250fbda commit b604911
Show file tree
Hide file tree
Showing 60 changed files with 2,123 additions and 315 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,5 @@ selenium
*.swo
*.out
ui_framework/doc_site/build/*.js*
ui_framework/jest/report
yarn.lock
11 changes: 10 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,9 @@
"mocha": "mocha",
"mocha:debug": "mocha --debug-brk",
"sterilize": "grunt sterilize",
"uiFramework:start": "grunt uiFramework:start"
"uiFramework:start": "grunt uiFramework:start",
"uiFramework:dev": "node tasks/utils/ui_framework_test --env=jsdom --watch",
"uiFramework:coverage": "node tasks/utils/ui_framework_test --env=jsdom --coverage"
},
"repository": {
"type": "git",
Expand Down Expand Up @@ -95,6 +97,7 @@
"autoprefixer-loader": "2.0.0",
"babel-cli": "6.18.0",
"babel-core": "6.21.0",
"babel-jest": "18.0.0",
"babel-loader": "6.2.10",
"babel-plugin-add-module-exports": "0.2.1",
"babel-polyfill": "6.20.0",
Expand Down Expand Up @@ -199,6 +202,7 @@
},
"devDependencies": {
"@elastic/eslint-config-kibana": "0.4.0",
"@spalger/babel-presets": "0.3.2",
"angular-mocks": "1.4.7",
"auto-release-sinon": "1.0.3",
"babel-eslint": "6.1.2",
Expand All @@ -209,8 +213,10 @@
"chromedriver": "2.24.1",
"classnames": "2.2.5",
"enzyme": "2.7.0",
"enzyme-to-json": "1.4.5",
"eslint": "3.11.1",
"eslint-plugin-babel": "4.0.0",
"eslint-plugin-jest": "19.0.1",
"eslint-plugin-mocha": "4.7.0",
"eslint-plugin-react": "6.10.3",
"event-stream": "3.3.2",
Expand All @@ -230,11 +236,14 @@
"gulp-sourcemaps": "1.7.3",
"highlight.js": "9.0.0",
"history": "2.1.1",
"html": "1.0.0",
"html-loader": "0.4.3",
"husky": "0.8.1",
"image-diff": "1.6.0",
"intern": "3.2.3",
"istanbul-instrumenter-loader": "0.1.3",
"jest": "19.0.0",
"jest-cli": "19.0.0",
"jsdom": "9.9.1",
"karma": "1.2.0",
"karma-chrome-launcher": "0.2.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
class="kuiButton kuiButton--basic kuiButton--iconText"
ng-disabled="isDisabled"
>
<span
class="kuiButton__icon kuiIcon fa-spinner fa-spin"
ng-class="isDisabled ? ['fa-spinner', 'fa-spin'] : [icon]"
/>
<span ng-transclude />
<span class="kuiButton__inner">
<span
class="kuiButton__icon kuiIcon fa-spinner fa-spin"
ng-class="isDisabled ? ['fa-spinner', 'fa-spin'] : [icon]"
/>
<span ng-transclude />
</span>
</button>
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,10 @@
class="kuiButton kuiButton--primary kuiButton--iconText"
href="#/dashboard/create"
>
<span class="kuiButton__icon kuiIcon fa-plus"></span>
Create a dashboard
<span class="kuiButton__inner">
<span class="kuiButton__icon kuiIcon fa-plus"></span>
<span>Create a dashboard</span>
</span>
</a>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ <h1 class="kuiTitle">
class="kuiButton kuiButton--basic kuiButton--iconText"
ng-click="exportAll()"
>
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
Export Everything
<span class="kuiButton__inner">
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
<span>Export Everything</span>
</span>
</button>

<file-upload
Expand All @@ -25,8 +27,10 @@ <h1 class="kuiTitle">
class="kuiButton kuiButton--basic kuiButton--iconText"
data-import-saved-objects-button
>
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-upload"></span>
Import
<span class="kuiButton__inner">
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-upload"></span>
<span>Import</span>
</span>
</button>
</file-upload>
</div>
Expand Down Expand Up @@ -84,8 +88,10 @@ <h1 class="kuiTitle">
aria-label="Delete selected objects"
ng-disabled="selectedItems.length == 0"
>
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
Delete
<span class="kuiButton__inner">
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
<span>Delete</span>
</span>
</button>

<!-- Bulk export button -->
Expand All @@ -95,8 +101,10 @@ <h1 class="kuiTitle">
aria-label="Export selected objects"
ng-disabled="selectedItems.length == 0"
>
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
Export
<span class="kuiButton__inner">
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
<span>Export</span>
</span>
</button>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,20 @@ <h1 class="kuiTitle">
class="kuiButton kuiButton--basic kuiButton--iconText"
href="{{ link }}"
>
<span class="kuiButton__icon kuiIcon fa-eye"></span>
View {{ title }}
<span class="kuiButton__inner">
<span class="kuiButton__icon kuiIcon fa-eye"></span>
<span>View {{ title }}</span>
</span>
</a>

<button
class="kuiButton kuiButton--danger kuiButton--iconText"
ng-click="delete()"
>
<span class="kuiButton__icon kuiIcon fa-trash-o"></span>
Delete {{ title }}
<span class="kuiButton__inner">
<span class="kuiButton__icon kuiIcon fa-trash-o"></span>
<span>Delete {{ title }}</span>
</span>
</button>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,10 @@
class="kuiButton kuiButton--primary kuiButton--iconText"
href="#/visualize/new"
>
<span class="kuiButton__icon kuiIcon fa-plus"></span>
Create a visualization
<span class="kuiButton__inner">
<span class="kuiButton__icon kuiIcon fa-plus"></span>
<span>Create a visualization</span>
</span>
</a>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions tasks/config/eslint.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ export default grunt => ({
'scripts',
'tasks',
'test',
'ui_framework/components',
'ui_framework/doc_site',
'utilities',
],
},
Expand Down
1 change: 1 addition & 0 deletions tasks/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ module.exports = function (grunt) {
grunt.registerTask('test:coverage', [ 'run:testCoverageServer', 'karma:coverage' ]);

grunt.registerTask('test:quick', [
'uiFramework:test',
'test:server',
'test:ui',
'test:browser',
Expand Down
37 changes: 37 additions & 0 deletions tasks/ui_framework_test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
const platform = require('os').platform();
const config = require('./utils/ui_framework_test_config');

module.exports = function (grunt) {
grunt.registerTask('uiFramework:test', function () {
const done = this.async();
Promise.all([uiFrameworkTest()]).then(done);
});

function uiFrameworkTest() {
const serverCmd = {
cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\jest.cmd' : './node_modules/.bin/jest',
args: [
'--env=jsdom',
`--config=${JSON.stringify(config)}`,
],
opts: { stdio: 'inherit' }
};

return new Promise((resolve, reject) => {
grunt.util.spawn(serverCmd, (error, result, code) => {
if (error || code !== 0) {
const message = result.stderr || result.stdout;

grunt.log.error(message);

return reject();
}

grunt.log.writeln(result);

resolve();
});

});
}
};
8 changes: 8 additions & 0 deletions tasks/utils/ui_framework_test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const jest = require('jest');
const config = require('./ui_framework_test_config');

const argv = process.argv.slice(2);

argv.push('--config', JSON.stringify(config));

jest.run(argv);
20 changes: 20 additions & 0 deletions tasks/utils/ui_framework_test_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
const rootDir = 'ui_framework';

module.exports = {
rootDir,
collectCoverageFrom: [
'components/**/*.js',
// Seems to be a bug with jest or micromatch, in which the above glob doesn't match subsequent
// levels of directories, making this glob necessary.
'components/**/**/*.js',
'!components/index.js',
'!components/**/*/index.js',
],
coverageDirectory: '<rootDir>/jest/report',
coverageReporters: ['html'],
moduleFileExtensions: ['jsx', 'js', 'json'],
testPathIgnorePatterns: ['<rootDir>/(dist|doc_site|jest)/'],
testEnvironment: 'node',
testRegex: '.*\.test\.(js|jsx)$',
snapshotSerializers: ['<rootDir>/../node_modules/enzyme-to-json/serializer']
};
3 changes: 3 additions & 0 deletions ui_framework/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["react", "@spalger/babel-presets"]
}
13 changes: 13 additions & 0 deletions ui_framework/.eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"plugins": [
"jest"
],
"rules": {
"jest/no-disabled-tests": "error",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error"
},
"env": {
"jest/globals": true
}
}
Loading

0 comments on commit b604911

Please sign in to comment.