diff --git a/ui_framework/src/components/call_out/_call_out.scss b/ui_framework/src/components/call_out/_call_out.scss
index 5ac6f6740ad80..8ce78f71b0db0 100644
--- a/ui_framework/src/components/call_out/_call_out.scss
+++ b/ui_framework/src/components/call_out/_call_out.scss
@@ -1,6 +1,6 @@
.kuiCallOut {
- padding: $kuiSizeM $kuiSizeL;
- border-left: 4px solid transparent;
+ padding: $kuiSize;
+ border-left: $kuiSizeXS / 2 solid transparent;
}
// Modifier naming and colors.
@@ -31,17 +31,20 @@ $callOutTypes: (
/**
* 1. Align icon with first line of title text if it wraps.
- * 2. Apply margin to all but last item in the flex.
+ * 2. If content exists under the header, space it appropriately.
+ * 3. Apply margin to all but last item in the flex.
*/
.kuiCallOutHeader {
@include kuiFontSizeM;
-
- margin-bottom: $kuiVerticalRhythmS;
display: flex;
align-items: baseline; /* 1 */
+ + * {
+ margin-top: $kuiSizeS; /* 1 */
+ }
+
> * + * {
- margin-left: $kuiSizeS; /* 2 */
+ margin-left: $kuiSizeS; /* 3 */
}
}
diff --git a/ui_framework/src/components/form/_form.scss b/ui_framework/src/components/form/_form.scss
new file mode 100644
index 0000000000000..e9b56f5e0a4dc
--- /dev/null
+++ b/ui_framework/src/components/form/_form.scss
@@ -0,0 +1,9 @@
+.kuiForm__error {
+ @include kuiFontSizeS;
+ list-style: disc;
+ margin-left: $kuiSizeXL;
+}
+
+.kuiForm__errors {
+ margin-bottom: $kuiSize;
+}
diff --git a/ui_framework/src/components/form/_index.scss b/ui_framework/src/components/form/_index.scss
new file mode 100644
index 0000000000000..0e5c3264c6a27
--- /dev/null
+++ b/ui_framework/src/components/form/_index.scss
@@ -0,0 +1,33 @@
+$kuiFormMaxWidth: 400px;
+$kuiFormBackgroundColor: tintOrShade($kuiColorLightestShade, 60%, 25%);
+
+@mixin kuiFieldStyle {
+ border: none;
+ font-size: $kuiFontSizeS;
+ font-family: $kuiFontFamily;
+ padding: $kuiSizeM;
+ color: $kuiTextColor;
+ min-width: $kuiSize * 16;
+ background: $kuiFormBackgroundColor;
+ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.08), inset -400px 0 0 0 $kuiFormBackgroundColor;
+ transition: box-shadow $kuiAnimSpeedNormal ease-in, background $kuiAnimSpeedNormal ease-in;
+ max-width: $kuiFormMaxWidth;
+ border-radius: 0;
+
+ &:focus {
+ background: $kuiColorEmptyShade;
+ box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.16), inset 0 0 0 0 $kuiColorEmptyShade, inset 0 -2px 0 0 $kuiColorPrimary;
+ }
+}
+
+@import 'form';
+@import 'form_row/index';
+@import 'checkbox/index';
+@import 'field_number/index';
+@import 'field_password/index';
+@import 'field_search/index';
+@import 'field_text/index';
+@import 'range/index';
+@import 'select/index';
+@import 'switch/index';
+@import 'text_area/index';
diff --git a/ui_framework/src/components/form/checkbox/_checkbox.scss b/ui_framework/src/components/form/checkbox/_checkbox.scss
new file mode 100644
index 0000000000000..171c9a1e011a8
--- /dev/null
+++ b/ui_framework/src/components/form/checkbox/_checkbox.scss
@@ -0,0 +1,51 @@
+.kuiCheckbox {
+ position: relative;
+ height: $kuiSizeL;
+ margin-top: $kuiSizeS;
+
+ .kuiCheckbox__label {
+ position: absolute;
+ padding-left: $kuiSizeXL;
+ line-height: $kuiSizeL;
+ display: block;
+ font-weight: $kuiFontWeightRegular;
+ z-index: 2;
+ font-size: $kuiFontSizeS;
+ cursor: pointer;
+ }
+
+ .kuiCheckbox__square {
+ position: absolute;
+ height: $kuiSizeL;
+ width: $kuiSizeL;
+ border-radius: $kuiBorderRadius;
+ border: $kuiBorderThin;
+ background: $kuiFormBackgroundColor;
+ z-index: 0;
+ }
+
+ .kuiCheckbox__check {
+ height: 100%;
+ width: 100%;
+ }
+
+ .kuiCheckbox__input {
+ position: absolute;
+ opacity: 0;
+
+ &:checked ~ .kuiCheckbox__square .kuiCheckbox__check {
+ background-color: $kuiTextColor;
+ mask: url('../src/components/icon/assets/check.svg') center center no-repeat;
+ }
+
+ &:focus ~ .kuiCheckbox__square {
+ background-color: $kuiFocusBackgroundColor;
+ border-color: $kuiColorPrimary;
+ }
+
+ &:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check {
+ background-color: $kuiTextColor;
+ mask: url('../src/components/icon/assets/check.svg') center center no-repeat;
+ }
+ }
+}
diff --git a/ui_framework/src/components/form/checkbox/_index.scss b/ui_framework/src/components/form/checkbox/_index.scss
new file mode 100644
index 0000000000000..e6e53eb712869
--- /dev/null
+++ b/ui_framework/src/components/form/checkbox/_index.scss
@@ -0,0 +1 @@
+@import 'checkbox';
diff --git a/ui_framework/src/components/form/checkbox/checkbox.js b/ui_framework/src/components/form/checkbox/checkbox.js
new file mode 100644
index 0000000000000..55490f3161149
--- /dev/null
+++ b/ui_framework/src/components/form/checkbox/checkbox.js
@@ -0,0 +1,29 @@
+import React, {
+ PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiCheckbox = ({ options, className, ...rest }) => {
+ const classes = classNames('kuiCheckbox', className);
+
+ return (
+
+ {options.map((option, index) => {
+
+ return (
+
+ );
+ })}
+
+ {errors.map(function (error, index) {
+ return {error} ;
+ })}
+
+ );
+ }
+
+ let optionalErrorAlert = null;
+ if (invalid) {
+ optionalErrorAlert = (
+
+ {optionalErrors}
+
+ );
+ }
+
+ return (
+
+ {optionalErrorAlert}
+ {children}
+
+ );
+};
+
+KuiForm.propTypes = {
+ invalid: PropTypes.bool,
+ errors: PropTypes.array,
+};
diff --git a/ui_framework/src/components/form/form.test.js b/ui_framework/src/components/form/form.test.js
new file mode 100644
index 0000000000000..8db361d646f93
--- /dev/null
+++ b/ui_framework/src/components/form/form.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiForm } from './form';
+
+describe('KuiForm', () => {
+ test('is rendered', () => {
+ const component = render(
+ {helpText}
;
+ }
+
+ if (errors) {
+ optionalErrors = (
+ errors.map(function (error, index) {
+ return {error}
;
+ })
+ );
+ }
+
+ if (label) {
+ optionalLabel = {label} ;
+ }
+
+ if (id) {
+ field = cloneElement(children, {
+ id,
+ });
+ } else {
+ field = children;
+ }
+
+ return (
+
+ {/*
+ Order is important here. The label needs to be UNDER the field.
+ We rearrange the flex order in the CSS so the label ends up
+ displaying above the children / input. This allows us to still
+ use sibling selectors against the label that are tiggered by the
+ focus state of the input.
+ */}
+ {field}
+ {optionalLabel}
+ {optionalErrors}
+ {optionalHelpText}
+ {optionalIcon}
+
+ );
+};
+
+KuiFormRow.propTypes = {
+ label: PropTypes.string,
+ id: PropTypes.string,
+ icon: PropTypes.string,
+ invalid: PropTypes.bool,
+ containsSelect: PropTypes.bool,
+ errors: PropTypes.array,
+ helpText: PropTypes.string,
+};
diff --git a/ui_framework/src/components/form/form_row/form_row.test.js b/ui_framework/src/components/form/form_row/form_row.test.js
new file mode 100644
index 0000000000000..9f1d85f2586a6
--- /dev/null
+++ b/ui_framework/src/components/form/form_row/form_row.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { KuiFormRow } from './form_row';
+
+describe('KuiFormRow', () => {
+ test('is rendered', () => {
+ const component = render(
+
+ {options.map((option, index) => {
+ return {option.text} ;
+ })}
+
+ );
+};
+
+KuiSelect.propTypes = {
+ name: PropTypes.string.isRequired,
+ id: PropTypes.string,
+ options: PropTypes.arrayOf(React.PropTypes.object).isRequired,
+};
diff --git a/ui_framework/src/components/form/select/select.test.js b/ui_framework/src/components/form/select/select.test.js
new file mode 100644
index 0000000000000..755d95488561c
--- /dev/null
+++ b/ui_framework/src/components/form/select/select.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { KuiSelect } from './select';
+
+describe('KuiSelect', () => {
+ test('is rendered', () => {
+ const component = render(
+
+
+
+
+
+ {label}
+
+ );
+};
+
+KuiSwitch.propTypes = {
+ name: PropTypes.string.isRequired,
+ id: PropTypes.string,
+ label: PropTypes.string.isRequired,
+ defaultChecked: PropTypes.bool,
+};
+
+KuiSwitch.defaultProps = {
+ defaultChecked: false,
+};
diff --git a/ui_framework/src/components/form/switch/switch.test.js b/ui_framework/src/components/form/switch/switch.test.js
new file mode 100644
index 0000000000000..79bb53b29ac98
--- /dev/null
+++ b/ui_framework/src/components/form/switch/switch.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { KuiSwitch } from './switch';
+
+describe('KuiSwitch', () => {
+ test('is rendered', () => {
+ const component = render(
+
+
+
+
+
+
diff --git a/ui_framework/src/components/icon/assets/lock.svg b/ui_framework/src/components/icon/assets/lock.svg
new file mode 100644
index 0000000000000..4dda0d8f86d1b
--- /dev/null
+++ b/ui_framework/src/components/icon/assets/lock.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/ui_framework/src/components/icon/icon.js b/ui_framework/src/components/icon/icon.js
index 2039fd39ca610..ddd719c1098c1 100644
--- a/ui_framework/src/components/icon/icon.js
+++ b/ui_framework/src/components/icon/icon.js
@@ -16,6 +16,8 @@ import '!!svg-sprite!./assets/search.svg';
import '!!svg-sprite!./assets/user.svg';
import '!!svg-sprite!./assets/help.svg';
import '!!svg-sprite!./assets/cross.svg';
+import '!!svg-sprite!./assets/check.svg';
+import '!!svg-sprite!./assets/lock.svg';
import '!!svg-sprite!./assets/arrow_up.svg';
import '!!svg-sprite!./assets/arrow_down.svg';
import '!!svg-sprite!./assets/arrow_left.svg';
@@ -40,6 +42,8 @@ const typeToIconMap = {
user: 'user',
help: 'help',
cross: 'cross',
+ check: 'check',
+ lock: 'lock',
arrowUp: 'arrow_up',
arrowDown: 'arrow_down',
arrowLeft: 'arrow_left',
diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js
index c3f9ad5b40954..23cb80f7708fc 100644
--- a/ui_framework/src/components/index.js
+++ b/ui_framework/src/components/index.js
@@ -10,6 +10,21 @@ export {
KuiCallOut,
} from './call_out';
+export {
+ KuiForm,
+ KuiCheckbox,
+ KuiFieldNumber,
+ KuiFieldPassword,
+ KuiRadio,
+ KuiRange,
+ KuiFormRow,
+ KuiFieldSearch,
+ KuiSelect,
+ KuiSwitch,
+ KuiFieldText,
+ KuiTextArea,
+} from './form';
+
export {
KuiHeader,
KuiHeaderBreadcrumb,
diff --git a/ui_framework/src/components/index.scss b/ui_framework/src/components/index.scss
index 20d002454b7c8..017c8029b6277 100644
--- a/ui_framework/src/components/index.scss
+++ b/ui_framework/src/components/index.scss
@@ -1,6 +1,7 @@
@import 'avatar/index';
@import 'button/index';
@import 'call_out/index';
+@import 'form/index';
@import 'header/index';
@import 'icon/index';
@import 'key_pad_menu/index';
diff --git a/ui_framework/src/components/popover/_popover.scss b/ui_framework/src/components/popover/_popover.scss
index 2b6fb8efd2a28..61dc0dca34c25 100644
--- a/ui_framework/src/components/popover/_popover.scss
+++ b/ui_framework/src/components/popover/_popover.scss
@@ -10,7 +10,7 @@
.kuiPopover__body {
opacity: 1;
visibility: visible;
- z-index: $kuiZContent;
+ z-index: $kuiZContentMenu;
margin-top: $kuiSizeS;
}
}
diff --git a/ui_framework/src/global_styling/variables/_colors.scss b/ui_framework/src/global_styling/variables/_colors.scss
index cc78279cb3963..841ca00b0bff1 100644
--- a/ui_framework/src/global_styling/variables/_colors.scss
+++ b/ui_framework/src/global_styling/variables/_colors.scss
@@ -56,6 +56,7 @@ $kuiColorFullShade: #000 !default;
// $kuiColorDarkestShade: #F5F5F5;
// $kuiColorFullShade: #FFF;
// $kuiColorPrimary: tint($kuiColorPrimary, 30%);
+// $kuiColorDanger: tint($kuiColorDanger, 30%);
// Every color below must be based mathmatically on the set above.