Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI Framework] Create Button React components in UI Framework. #10646

Merged
Merged
Show file tree
Hide file tree
Changes from 32 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
68e14a2
Create Button React components in UI Framework.
cjcenizal Mar 2, 2017
efa0a26
Integrate button icon variations into button_icon.js. Integrate butto…
cjcenizal Mar 2, 2017
c55ff13
Add KuiLoadingButtonIcon and isLoading prop for KuiButton.
cjcenizal Mar 2, 2017
b461275
Add Jest test coverage for UI Framework.
cjcenizal Mar 21, 2017
933f8ec
Add tests for KuiButtonIcon and KuiButtonGroup.
cjcenizal Mar 21, 2017
36e0ea6
Add both React and HTML examples for KuiButton.
cjcenizal Mar 21, 2017
802f1ea
Update UI Framework README with instructions on creating and testing …
cjcenizal Mar 21, 2017
0132a55
Move KuiButton isDisabled check from onClick handler to prop assginment.
cjcenizal Mar 21, 2017
31219b3
Refactor kuiButton to not use createElement, and instead exit early a…
cjcenizal Mar 22, 2017
a8000c9
Redesign KuiButton and KuiButtonIcon to accept a type prop.
cjcenizal Mar 22, 2017
020d94c
Break KuiButton apart into KuiButton, KuiLinkButton, and KuiSubmitBut…
cjcenizal Mar 22, 2017
119abf5
Move KuiButtonIcon and KuiButtonGroup into their own directories.
cjcenizal Mar 22, 2017
24a9a4f
Remove unused icon var from KuiSubmitButton.
cjcenizal Mar 22, 2017
4119bfb
Use simpler rest parameter syntax instead of Object.assign for defini…
cjcenizal Mar 22, 2017
d50d081
Refactor KuiButton and KuiButtonIcon type prop to emphasize passing s…
cjcenizal Mar 22, 2017
f9c55fa
Add comment to explain role of nonVoidPropTypes in KuiButton.
cjcenizal Mar 22, 2017
0c5d2fd
Dynamically define KuiButton and KuiButtonIcon tests for type prop.
cjcenizal Mar 22, 2017
6d724fc
Fix Jest coverage configuration for deeply-nested dirs.
cjcenizal Mar 22, 2017
a9a4652
Rename prop testSubject to data-test-subj.
cjcenizal Mar 22, 2017
d1eed94
button idea
kimjoar Mar 23, 2017
a2d045e
Remove unnecessary onClick mentions
kimjoar Mar 23, 2017
4016eba
- Update KuiLinkButton to preventDefault on click when disabled.
cjcenizal Mar 24, 2017
05d934b
Update tests with HTML attributes group. Add test for aria-label.
cjcenizal Mar 24, 2017
3bc5016
Add UI Framework to linting task.
cjcenizal Mar 24, 2017
322a968
Refactor HTML attribute tests to be more succinct.
cjcenizal Mar 24, 2017
2187260
Remove backticks from ui_framework_test task.
cjcenizal Mar 24, 2017
94daf03
Add eslintrc file to ui_framework, for Jest-specific rules.
cjcenizal Mar 24, 2017
2fa3cf7
Add UI Framework Jest tests to npm test script. Create separate scrip…
cjcenizal Mar 24, 2017
8d4222a
Remove redundant kuiSubmitButton tests.
cjcenizal Mar 24, 2017
ad9616f
Document Enzyme-specific Webpack configuration.
cjcenizal Mar 24, 2017
c28bbd7
Fix appearance of kuiButtons with icons throughout Kibana, by adding …
cjcenizal Mar 24, 2017
17e0838
Update JSX to not enclose prop arguments in whitespace. Update tests …
cjcenizal Mar 28, 2017
98e1e38
Remove unused Jest stub files.
cjcenizal Mar 29, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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);
27 changes: 27 additions & 0 deletions tasks/utils/ui_framework_test_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const path = require('path');
const rootDir = 'ui_framework';
const resolve = relativePath => path.resolve(__dirname, '..', '', relativePath);

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'],
moduleNameMapper: {
'^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'),
'^.+\\.css$': resolve('config/jest/CSSStub.js'),
'^.+\\.scss$': resolve('config/jest/CSSStub.js')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think these files might be missing? Probably not importing any of them, so don't hit this problem in this PR. We can just remove this from here and add it later? (Just to get this PR in)

},
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