class="kuiButton kuiButton--basic kuiButton--iconText"
href="{{ link }}"
>
-
- View {{ title }}
+
+
+ View {{ title }}
+
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
index 2099b50603de3..b14322308cc69 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -97,8 +97,10 @@
class="kuiButton kuiButton--primary kuiButton--iconText"
href="#/visualize/new"
>
-
- Create a visualization
+
+
+ Create a visualization
+
diff --git a/tasks/config/eslint.js b/tasks/config/eslint.js
index 4bda74aea2556..3e963154c91c6 100644
--- a/tasks/config/eslint.js
+++ b/tasks/config/eslint.js
@@ -9,6 +9,8 @@ export default grunt => ({
'scripts',
'tasks',
'test',
+ 'ui_framework/components',
+ 'ui_framework/doc_site',
'utilities',
],
},
diff --git a/tasks/test.js b/tasks/test.js
index 91729f70b43f3..a5ae3869c7e14 100644
--- a/tasks/test.js
+++ b/tasks/test.js
@@ -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',
diff --git a/tasks/ui_framework_test.js b/tasks/ui_framework_test.js
new file mode 100644
index 0000000000000..aef875ee85d49
--- /dev/null
+++ b/tasks/ui_framework_test.js
@@ -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();
+ });
+
+ });
+ }
+};
diff --git a/tasks/utils/ui_framework_test.js b/tasks/utils/ui_framework_test.js
new file mode 100644
index 0000000000000..6a9bf528ed7c1
--- /dev/null
+++ b/tasks/utils/ui_framework_test.js
@@ -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);
diff --git a/tasks/utils/ui_framework_test_config.js b/tasks/utils/ui_framework_test_config.js
new file mode 100644
index 0000000000000..06b47b3a9e33b
--- /dev/null
+++ b/tasks/utils/ui_framework_test_config.js
@@ -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: '/jest/report',
+ coverageReporters: ['html'],
+ moduleFileExtensions: ['jsx', 'js', 'json'],
+ testPathIgnorePatterns: ['/(dist|doc_site|jest)/'],
+ testEnvironment: 'node',
+ testRegex: '.*\.test\.(js|jsx)$',
+ snapshotSerializers: ['/../node_modules/enzyme-to-json/serializer']
+};
diff --git a/ui_framework/.babelrc b/ui_framework/.babelrc
new file mode 100644
index 0000000000000..9f3449c2e3053
--- /dev/null
+++ b/ui_framework/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["react", "@spalger/babel-presets"]
+}
diff --git a/ui_framework/.eslintrc b/ui_framework/.eslintrc
new file mode 100644
index 0000000000000..e20f525141316
--- /dev/null
+++ b/ui_framework/.eslintrc
@@ -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
+ }
+}
diff --git a/ui_framework/README.md b/ui_framework/README.md
index 82b213017c709..8d82c6ce8b670 100644
--- a/ui_framework/README.md
+++ b/ui_framework/README.md
@@ -1,53 +1,100 @@
# Kibana UI Framework
-## Development
+> The Kibana UI Framework is a collection of React UI components for quickly building user interfaces
+> for Kibana. Not using React? No problem! You can still use the CSS behind each component.
-* Start development server `npm run uiFramework:start`.
-* View docs on `http://localhost:8020/`.
+## Using the Framework
-## What is this?
+### Documentation
-The Kibana UI Framework provides you with UI components you can quickly use to build user interfaces for Kibana.
+You can view interactive documentation by running `npm run uiFramework:start` and then visiting
+`http://localhost:8020/`.
-The UI Framework comes with interactive examples which document how to use its various UI components. These components are currently only implemented in CSS, but eventually they'll grow to involve JS as well.
+### React components
-When you build a UI using this framework (e.g. a plugin's UI), you can rest assured it will integrate seamlessly into the overall Kibana UI.
+Here are the components you can import from the Framnework:
-## How to create a new component
+```javascript
+import {
+ KuiButton,
+ KuiButtonGroup,
+ KuiButtonIcon,
+} from '../path/to/ui_framework/components';
+```
-There are two steps to creating a new component:
+## Creating components
-1. Create the CSS for the component in `ui_framework/components`.
-2. Document it with examples in `ui_framework/doc_site`.
+There are four steps to creating a new component:
-### Create the component CSS
+1. Create the SCSS for the component in `ui_framework/components`.
+2. Create the React portion of the component.
+3. Document it with examples in `ui_framework/doc_site`.
+4. Write tests.
+
+### Create component SCSS
1. Create a directory for your component in `ui_framework/components`.
2. In this directory, create `_{component name}.scss`.
-3. _Optional:_ Create any other components that should be logically-grouped in this directory (see below).
-4. Create an `_index.scss` file in this directory that import all of the new component SCSS files you created.
+3. _Optional:_ Create any other components that should be [logically-grouped](#logically-grouped-components)
+in this directory.
+4. Create an `_index.scss` file in this directory that import all of the new component SCSS files
+you created.
5. Import the `_index.scss` file into `ui_framework/components/index.scss`.
This makes your styles available to Kibana and the UI Framework documentation.
-#### Logically-grouped components
+### Create the React component
+
+1. Create the React component(s) in the same directory as the related SCSS file(s).
+2. Export these components from an `index.js` file.
+3. Re-export these components from `ui_framework/components/index.js`.
-If a component has subcomponents (e.g. ToolBar and ToolBarSearch), tightly-coupled components (e.g. Button and ButtonGroup), or you just want to group some related components together (e.g. TextInput, TextArea, and CheckBox), then they belong in the same logicaly grouping. In this case, you can create additional SCSS files for these components in the same component directory.
+This makes your React component available for import into Kibana.
### Document the component with examples
-1. Create a directory for your example in `ui_framework/doc_site/src/views`. Name it the name of the component.
-2. Create a `{component name}_example.js` file inside the directory. You'll use this file to define the different examples for your component.
+1. Create a directory for your example in `ui_framework/doc_site/src/views`. Name it the name of the
+component.
+2. Create a `{component name}_example.js` file inside the directory. You'll use this file to define
+the different examples for your component.
3. Add the route to this file in `ui_framework/doc_site/src/services/routes/Routes.js`.
-4. In the `{component name}_example.js` file you created, define examples which demonstrate the component. An example consists of a title, an optional description, an HTML file and an optional JavaScript file. It might help to refer to other examples to see how they're structured.
+4. In the `{component name}_example.js` file you created, define examples which demonstrate the component and describe
+its role from a UI perspective.
-The complexity of the component should determine how many examples you need to create, and how complex they should be. In general, your examples should demonstrate:
+The complexity of the component should determine how many examples you need to create, and how
+complex they should be. In general, your examples should demonstrate:
* The most common use-cases for the component.
-* How the component handles edge cases, e.g. overflowing content, text-based vs. element-based content.
+* How the component handles edge cases, e.g. overflowing content, text-based vs. element-based
+content.
* The various states of the component, e.g. disabled, selected, empty of content, error state.
-## Writing CSS
+### Test the component
+
+1. Create test files with the name pattern of `{component name}.test.js`.
+2. Create your tests.
+3. Run tests with `npm run uiFramework:test`.
+
+You can check how well the components have been covered
+by the tests by viewing the generated report at `ui_framework/jest/report/index.html`.
+
+#### React component development tips
+
+You can run `npm run uiFramework:dev` to watch your files and automatically run the tests when you
+make changes. Under this command, the tests will run faster than under `uiFramework:test` because
+they'll only test the files you've changed -- the code coverage report won't be re-genereated,
+however.
+
+## Principles
+
+### Logically-grouped components
+
+If a component has subcomponents (e.g. ToolBar and ToolBarSearch), tightly-coupled components (e.g.
+Button and ButtonGroup), or you just want to group some related components together (e.g. TextInput,
+TextArea, and CheckBox), then they belong in the same logicaly grouping. In this case, you can create
+additional SCSS files for these components in the same component directory.
+
+### Writing CSS
Check out our [CSS style guide](https://github.com/elastic/kibana/blob/master/style_guides/css_style_guide.md).
@@ -55,7 +102,9 @@ Check out our [CSS style guide](https://github.com/elastic/kibana/blob/master/st
### Dynamic, interactive documentation
-By having a "living style guide", we relieve our designers of the burden of creating and maintaining static style guides. This also makes it easier for our engineers to translate mockups, prototypes, and wireframes into products.
+By having a "living style guide", we relieve our designers of the burden of creating and maintaining
+static style guides. This also makes it easier for our engineers to translate mockups, prototypes,
+and wireframes into products.
### Copy-pasteable UI
@@ -63,13 +112,18 @@ Engineers can copy and paste sample code into their projects to quickly get reli
### Remove CSS from the day-to-day
-The CSS portion of this framework means engineers don't need to spend mental cycles translating a design into CSS. These cycles can be spent on the things critical to the identity of the specific project they're working on, like architecture and business logic.
+The CSS portion of this framework means engineers don't need to spend mental cycles translating a
+design into CSS. These cycles can be spent on the things critical to the identity of the specific
+project they're working on, like architecture and business logic.
-Once this framework also provides JS components, engineers won't even need to _see_ CSS -- it will be encapsulated behind the JS components' interfaces.
+If they use the React components, engineers won't even need to _see_ CSS -- it will be encapsulated
+behind the React components' interfaces.
### More UI tests === fewer UI bugs
-By covering our UI components with great unit tests and having those tests live within the framework itself, we can rest assured that our UI layer is tested and remove some of that burden from out integration/end-to-end tests.
+By covering our UI components with great unit tests and having those tests live within the framework
+itself, we can rest assured that our UI layer is tested and remove some of that burden from our
+integration/end-to-end tests.
## Why not just use Bootstrap?
@@ -84,7 +138,8 @@ We also gain the ability to fix some of the common issues with third-party CSS f
* They have non-semantic markup.
* They deeply nest their selectors.
-For a more in-depth analysis of the problems with Bootstrap (and similar frameworks), check out this article and the links it has at the bottom: ["Bootstrap Bankruptcy"](http://www.matthewcopeland.me/blog/2013/11/04/bootstrap-bankruptcy/).
+For a more in-depth analysis of the problems with Bootstrap (and similar frameworks), check out this
+article and the links it has at the bottom: ["Bootstrap Bankruptcy"](http://www.matthewcopeland.me/blog/2013/11/04/bootstrap-bankruptcy/).
## Examples of other in-house UI frameworks
diff --git a/ui_framework/components/button/__snapshots__/button.test.js.snap b/ui_framework/components/button/__snapshots__/button.test.js.snap
new file mode 100644
index 0000000000000..979451ac42be7
--- /dev/null
+++ b/ui_framework/components/button/__snapshots__/button.test.js.snap
@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiButton Baseline HTML attributes are rendered 1`] = `
+
+`;
+
+exports[`KuiButton Baseline is rendered 1`] = `
+
+`;
+
+exports[`KuiButton Props children is rendered 1`] = `
+
+`;
+
+exports[`KuiButton Props icon is rendered with children 1`] = `
+
+`;
+
+exports[`KuiButton Props icon is rendered without children 1`] = `
+
+`;
+
+exports[`KuiButton Props iconPosition moves the icon to the right 1`] = `
+
+`;
+
+exports[`KuiButton Props isLoading doesn't render the icon prop 1`] = `
+
+`;
+
+exports[`KuiButton Props isLoading renders a spinner 1`] = `
+
+`;
+
+exports[`KuiButton Props type basic renders the basic class 1`] = `
+
+`;
+
+exports[`KuiButton Props type danger renders the danger class 1`] = `
+
+`;
+
+exports[`KuiButton Props type hollow renders the hollow class 1`] = `
+
+`;
+
+exports[`KuiButton Props type primary renders the primary class 1`] = `
+
+`;
diff --git a/ui_framework/components/button/__snapshots__/link_button.test.js.snap b/ui_framework/components/button/__snapshots__/link_button.test.js.snap
new file mode 100644
index 0000000000000..8c897a6f25220
--- /dev/null
+++ b/ui_framework/components/button/__snapshots__/link_button.test.js.snap
@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiLinkButton Baseline HTML attributes are rendered (and disabled renders a class) 1`] = `
+
+
+
+`;
+
+exports[`KuiLinkButton Baseline is rendered 1`] = `
+
+
+
+`;
+
+exports[`KuiLinkButton Props children is rendered 1`] = `
+
+
+
+ Hello
+
+
+
+`;
+
+exports[`KuiLinkButton Props icon is rendered with children 1`] = `
+
+
+ Icon
+
+ Hello
+
+
+
+`;
+
+exports[`KuiLinkButton Props icon is rendered without children 1`] = `
+
+
+ Icon
+
+
+`;
+
+exports[`KuiLinkButton Props iconPosition moves the icon to the right 1`] = `
+
+
+
+ Hello
+
+ Icon
+
+
+`;
+
+exports[`KuiLinkButton Props isLoading doesn't render the icon prop 1`] = `
+
+
+
+
+
+`;
+
+exports[`KuiLinkButton Props isLoading renders a spinner 1`] = `
+
+
+
+
+
+`;
+
+exports[`KuiLinkButton Props type basic renders the basic class 1`] = `
+
+
+
+`;
+
+exports[`KuiLinkButton Props type danger renders the danger class 1`] = `
+
+
+
+`;
+
+exports[`KuiLinkButton Props type hollow renders the hollow class 1`] = `
+
+
+
+`;
+
+exports[`KuiLinkButton Props type primary renders the primary class 1`] = `
+
+
+
+`;
diff --git a/ui_framework/components/button/__snapshots__/submit_button.test.js.snap b/ui_framework/components/button/__snapshots__/submit_button.test.js.snap
new file mode 100644
index 0000000000000..12de82c013601
--- /dev/null
+++ b/ui_framework/components/button/__snapshots__/submit_button.test.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiSubmitButton Baseline HTML attributes are rendered 1`] = `
+
+`;
+
+exports[`KuiSubmitButton Baseline is rendered 1`] = `
+
+`;
+
+exports[`KuiSubmitButton Props children is rendered as value 1`] = `
+
+`;
+
+exports[`KuiSubmitButton Props type basic renders the basic class 1`] = `
+
+`;
+
+exports[`KuiSubmitButton Props type danger renders the danger class 1`] = `
+
+`;
+
+exports[`KuiSubmitButton Props type hollow renders the hollow class 1`] = `
+
+`;
+
+exports[`KuiSubmitButton Props type primary renders the primary class 1`] = `
+
+`;
diff --git a/ui_framework/components/button/_button.scss b/ui_framework/components/button/_button.scss
index 95f3b2734e9a6..60a3a7f28df72 100644
--- a/ui_framework/components/button/_button.scss
+++ b/ui_framework/components/button/_button.scss
@@ -1,8 +1,65 @@
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :disabled.
+ */
+@mixin kuiButtonDisabled {
+ &:disabled {
+ @content;
+ }
+
+ @at-root a#{&}.kuiButton-isDisabled {
+ @content;
+ }
+}
+
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :enabled.
+ */
+@mixin kuiButtonHover {
+ &:enabled:hover {
+ @content;
+ }
+
+ @at-root a#{&}:not(.kuiButton-isDisabled):hover { /* 1 */
+ @content;
+ }
+}
+
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :enabled.
+ */
+@mixin kuiButtonActive {
+ &:enabled:active {
+ @content;
+ }
+
+ @at-root a#{&}:not(.kuiButton-isDisabled):active { /* 1 */
+ @content;
+ }
+}
+
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :enabled.
+ */
+@mixin kuiButtonFocus {
+ &:not(a):enabled:focus {
+ @content;
+ }
+
+ @at-root a#{&}:not(.kuiButton-isDisabled):focus { /* 1 */
+ @content;
+ }
+}
+
+@mixin kuiButtonHoverAndActive {
+ @include kuiButtonHover { @content }
+ @include kuiButtonActive { @content }
+}
+
/**
* 1. Setting to inline-block guarantees the same height when applied to both
* button elements and anchor tags.
- * 2. Disable for Angular.
- * 3. Safari won't respect :enabled:active on links.
+ * 2. Links can be focused when they're "disabled" (since we're just faking this with a class), but
+ * at least make them look like they're not focused.
*/
.kuiButton {
display: inline-block; /* 1 */
@@ -16,119 +73,123 @@
border: none;
border-radius: $buttonBorderRadius;
- &:disabled {
+ @include kuiButtonDisabled {
cursor: default;
- pointer-events: none; /* 2 */
}
- &:active { /* 3 */
+ @include kuiButtonActive {
transform: translateY(1px);
}
&:focus {
+ outline: none; /* 2 */
+ }
+
+ @include kuiButtonFocus {
@include focus;
}
}
+ /**
+ * 1. Solves whitespace problems introduced by inline elements.
+ */
+ .kuiButton__inner {
+ display: flex; /* 1 */
+ align-items: center; /* 1 */
+ }
+
.kuiButton--iconText {
.kuiButton__icon {
- &:first-child {
- margin-right: 4px;
+ $iconSpacing: 8px;
+
+ &:first-child:not(:only-child) {
+ margin-right: $iconSpacing;
}
- &:last-child {
- margin-left: 4px;
+ &:last-child:not(:only-child) {
+ margin-left: $iconSpacing;
}
}
}
/**
* 1. Override Bootstrap.
- * 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--basic {
color: #5a5a5a;
background-color: #F2F2F2;
- // Goes before hover, so that hover can override it.
- &:focus {
- color: #5a5a5a !important; /* 1 */
+ @include kuiButtonFocus {
+ color: #5a5a5a;
}
- &:hover, /* 2 */
- &:active { /* 2 */
+ @include kuiButtonHoverAndActive {
color: #ffffff !important; /* 1 */
- background-color: #9B9B9B !important;
+ background-color: #9B9B9B !important; /* 1 */
}
- &:disabled {
+ @include kuiButtonDisabled {
color: #9B9B9B;
}
}
/**
* 1. Override Bootstrap.
- * 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--primary {
color: #FFFFFF;
background-color: #6EADC1;
- &:hover, /* 2 */
- &:active { /* 2 */
+ @include kuiButtonFocus {
+ color: #FFFFFF;
+ }
+
+ @include kuiButtonHoverAndActive {
color: #FFFFFF !important; /* 1 */
background-color: #006E8A;
}
- &:disabled {
+ @include kuiButtonDisabled {
background-color: #B6D6E0;
}
-
- &:focus {
- color: #FFFFFF !important; /* 1 */
- }
}
/**
* 1. Override Bootstrap.
- * 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--danger {
color: #FFFFFF;
background-color: #D76051;
- &:hover, /* 2 */
- &:active { /* 2 */
+ @include kuiButtonFocus {
+ @include focus($focusDangerColor);
+ color: #FFFFFF;
+ }
+
+ @include kuiButtonHoverAndActive {
color: #FFFFFF !important; /* 1 */
background-color: #A52E1F;
}
- &:disabled {
+ @include kuiButtonDisabled {
background-color: #efc0ba;
}
-
- &:focus {
- @include focus($focusDangerColor);
- color: #FFFFFF !important; /* 1 */
- }
}
/**
* 1. Override Bootstrap.
* 2. Override either Bootstrap or Timelion styles.
- * 3. Safari won't respect :enabled:hover/active on links.
*/
.kuiButton--hollow {
color: $linkColor !important; /* 2 */
background-color: transparent;
- &:hover, /* 3 */
- &:active { /* 3 */
+ @include kuiButtonHoverAndActive {
color: $linkHoverColor !important; /* 1 */
text-decoration: underline;
}
- &:disabled {
- color: #dddddd !important; /* 1 */
+ @include kuiButtonDisabled {
+ color: #dddddd;
}
}
diff --git a/ui_framework/components/button/_index.scss b/ui_framework/components/button/_index.scss
index 981ea6923233f..92ab9ca9a9e10 100644
--- a/ui_framework/components/button/_index.scss
+++ b/ui_framework/components/button/_index.scss
@@ -1,2 +1,2 @@
@import "button";
-@import "button_group";
+@import "button_group/button_group";
diff --git a/ui_framework/components/button/button.js b/ui_framework/components/button/button.js
new file mode 100644
index 0000000000000..32868f2c137a1
--- /dev/null
+++ b/ui_framework/components/button/button.js
@@ -0,0 +1,176 @@
+import React, {
+ PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+import { KuiButtonIcon } from './button_icon/button_icon';
+
+const BUTTON_TYPES = [
+ 'basic',
+ 'hollow',
+ 'danger',
+ 'primary',
+];
+
+const ICON_POSITIONS = [
+ 'left',
+ 'right',
+];
+
+const DEFAULT_ICON_POSITION = 'left';
+
+const buttonTypeToClassNameMap = {
+ basic: 'kuiButton--basic',
+ hollow: 'kuiButton--hollow',
+ danger: 'kuiButton--danger',
+ primary: 'kuiButton--primary',
+};
+
+const getClassName = ({ className, type, hasIcon = false }) =>
+ classNames('kuiButton', className, buttonTypeToClassNameMap[type], {
+ 'kuiButton--iconText': hasIcon,
+ });
+
+const ContentWithIcon = ({ children, icon, iconPosition, isLoading }) => {
+ const iconOrLoading = isLoading
+ ?
+ : icon;
+
+ // We need to wrap the children so that the icon's :first-child etc. pseudo-selectors get applied
+ // correctly.
+ const wrappedChildren = children ? {children} : undefined;
+
+ switch(iconPosition) {
+ case 'left':
+ return (
+
+ {iconOrLoading}
+ {wrappedChildren}
+
+ );
+
+ case 'right':
+ return (
+
+ {wrappedChildren}
+ {iconOrLoading}
+
+ );
+ }
+};
+
+const KuiButton = ({
+ isLoading,
+ iconPosition = DEFAULT_ICON_POSITION,
+ className,
+ type,
+ icon,
+ children,
+ ...rest
+}) => {
+ return (
+
+ );
+};
+
+KuiButton.propTypes = {
+ icon: PropTypes.node,
+ iconPosition: PropTypes.oneOf(ICON_POSITIONS),
+ children: PropTypes.node,
+ isLoading: PropTypes.bool,
+ type: PropTypes.oneOf(BUTTON_TYPES),
+ className: PropTypes.string,
+};
+
+const KuiLinkButton = ({
+ isLoading,
+ icon,
+ iconPosition = DEFAULT_ICON_POSITION,
+ className,
+ disabled,
+ type,
+ children,
+ ...rest
+}) => {
+ const onClick = e => {
+ if (disabled) {
+ e.preventDefault();
+ }
+ };
+
+ const classes = classNames(getClassName({
+ className,
+ type,
+ hasIcon: icon || isLoading,
+ }), { 'kuiButton-isDisabled': disabled });
+
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+KuiLinkButton.propTypes = {
+ icon: PropTypes.node,
+ iconPosition: PropTypes.oneOf(ICON_POSITIONS),
+ isLoading: PropTypes.bool,
+ type: PropTypes.oneOf(BUTTON_TYPES),
+ className: PropTypes.string,
+ children: PropTypes.node,
+};
+
+const KuiSubmitButton = ({
+ className,
+ type,
+ children,
+ ...rest
+}) => {
+ // NOTE: The `input` element is a void element and can't contain children.
+ return (
+
+ );
+};
+
+KuiSubmitButton.propTypes = {
+ children: PropTypes.string,
+ type: PropTypes.oneOf(BUTTON_TYPES),
+ className: PropTypes.string,
+};
+
+export {
+ BUTTON_TYPES,
+ KuiButton,
+ KuiLinkButton,
+ KuiSubmitButton,
+};
diff --git a/ui_framework/components/button/button.test.js b/ui_framework/components/button/button.test.js
new file mode 100644
index 0000000000000..85edd8c2ef151
--- /dev/null
+++ b/ui_framework/components/button/button.test.js
@@ -0,0 +1,143 @@
+import React from 'react';
+import { render, shallow } from 'enzyme';
+import sinon from 'sinon';
+
+import {
+ BUTTON_TYPES,
+ KuiButton,
+} from './button';
+
+describe('KuiButton', () => {
+ describe('Baseline', () => {
+ test('is rendered', () => {
+ const $button = render(
+
+ );
+
+ expect($button)
+ .toMatchSnapshot();
+ });
+
+ test('HTML attributes are rendered', () => {
+ const $button = render(
+
+ );
+
+ expect($button)
+ .toMatchSnapshot();
+ });
+ });
+
+ describe('Props', () => {
+ describe('type', () => {
+ BUTTON_TYPES.forEach(type => {
+ describe(type, () => {
+ test(`renders the ${type} class`, () => {
+ const $button = render();
+ expect($button).toMatchSnapshot();
+ });
+ });
+ });
+ });
+
+ describe('icon', () => {
+ test('is rendered with children', () => {
+ const $button = render(
+
+ Hello
+
+ );
+
+ expect($button)
+ .toMatchSnapshot();
+ });
+
+ test('is rendered without children', () => {
+ const $button = render(
+
+ );
+
+ expect($button)
+ .toMatchSnapshot();
+ });
+ });
+
+ describe('iconPosition', () => {
+ test('moves the icon to the right', () => {
+ const $button = render(
+
+ Hello
+
+ );
+
+ expect($button)
+ .toMatchSnapshot();
+ });
+ });
+
+ describe('children', () => {
+ test('is rendered', () => {
+ const $button = render(
+
+ Hello
+
+ );
+
+ expect($button)
+ .toMatchSnapshot();
+ });
+ });
+
+ describe('onClick', () => {
+ test(`isn't called upon instantiation`, () => {
+ const onClickHandler = sinon.stub();
+
+ shallow(
+
+ );
+
+ sinon.assert.notCalled(onClickHandler);
+ });
+
+ test('is called when the button is clicked', () => {
+ const onClickHandler = sinon.stub();
+
+ const $button = shallow(
+
+ );
+
+ $button.simulate('click');
+
+ sinon.assert.calledOnce(onClickHandler);
+ });
+ });
+
+ describe('isLoading', () => {
+ test('renders a spinner', () => {
+ const $button = render(
+
+ );
+
+ expect($button)
+ .toMatchSnapshot();
+ });
+
+ test(`doesn't render the icon prop`, () => {
+ const $button = render(
+
+ );
+
+ expect($button)
+ .toMatchSnapshot();
+ });
+ });
+ });
+});
diff --git a/ui_framework/components/button/button_group/__snapshots__/button_group.test.js.snap b/ui_framework/components/button/button_group/__snapshots__/button_group.test.js.snap
new file mode 100644
index 0000000000000..1bb2afd901f39
--- /dev/null
+++ b/ui_framework/components/button/button_group/__snapshots__/button_group.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiButtonGroup Baseline is rendered 1`] = `
+
+`;
+
+exports[`KuiButtonGroup Props children is rendered 1`] = `
+
+ Hello
+
+`;
+
+exports[`KuiButtonGroup Props isUnited renders the united class 1`] = `
+
+`;
diff --git a/ui_framework/components/button/_button_group.scss b/ui_framework/components/button/button_group/_button_group.scss
similarity index 100%
rename from ui_framework/components/button/_button_group.scss
rename to ui_framework/components/button/button_group/_button_group.scss
diff --git a/ui_framework/components/button/button_group/button_group.js b/ui_framework/components/button/button_group/button_group.js
new file mode 100644
index 0000000000000..71748db4f9e1b
--- /dev/null
+++ b/ui_framework/components/button/button_group/button_group.js
@@ -0,0 +1,24 @@
+import React, {
+ PropTypes,
+} from 'react';
+
+import classNames from 'classnames';
+
+const KuiButtonGroup = props => {
+ const classes = classNames('kuiButtonGroup', {
+ 'kuiButtonGroup--united': props.isUnited,
+ });
+
+ return (
+