diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index f3c8c27dfbc..831fc73a7b7 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -96,6 +96,8 @@ import { FormControlsExample } from './views/form_controls/form_controls_example
import { FormLayoutsExample } from './views/form_layouts/form_layouts_example';
+import { FormCompressedExample } from './views/form_compressed/form_compressed_example';
+
import { FormValidationExample } from './views/form_validation/form_validation_example';
import { HeaderExample } from './views/header/header_example';
@@ -326,8 +328,9 @@ const navigation = [
{
name: 'Forms',
items: [
- FormLayoutsExample,
FormControlsExample,
+ FormLayoutsExample,
+ FormCompressedExample,
FormValidationExample,
SuperSelectExample,
ComboBoxExample,
diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js
index b9cdd4d55c9..3366f7617ad 100644
--- a/src-docs/src/views/color_picker/kitchen_sink.js
+++ b/src-docs/src/views/color_picker/kitchen_sink.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
-import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { isValidHex } from '../../../../src/services';
+import { EuiColorPicker } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
export class KitchenSink extends Component {
constructor(props) {
@@ -16,55 +16,11 @@ export class KitchenSink extends Component {
};
render() {
- const hasErrors = !isValidHex(this.state.color) && this.state.color !== '';
- const isCompressed = true;
-
- let errors;
- if (hasErrors) {
- errors = ['Provide a valid hex value'];
- }
-
return (
-
-
- console.log('onBlur')}
- onFocus={() => console.log('onFocus')}
- compressed={isCompressed}
- fullWidth={true}
- popoverZIndex={10}
- mode="default"
- swatches={['#333', '#666', '#999', '#CCC', '#FFF']}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ /* DisplayToggles wrapper for Docs only */
+
+
+
);
}
}
diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js
index 015177c6f42..e2144f9db1b 100644
--- a/src-docs/src/views/combo_box/combo_box.js
+++ b/src-docs/src/views/combo_box/combo_box.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { EuiComboBox } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
export default class extends Component {
constructor(props) {
@@ -82,15 +83,18 @@ export default class extends Component {
render() {
const { selectedOptions } = this.state;
return (
-
+ /* DisplayToggles wrapper for Docs only */
+
+
+
);
}
}
diff --git a/src-docs/src/views/date_picker/states.js b/src-docs/src/views/date_picker/states.js
index b1813e50808..eeb6e6eb58d 100644
--- a/src-docs/src/views/date_picker/states.js
+++ b/src-docs/src/views/date_picker/states.js
@@ -5,6 +5,7 @@ import {
EuiSpacer,
EuiFormRow,
} from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
export default class extends Component {
constructor(props) {
@@ -30,15 +31,18 @@ export default class extends Component {
];
return (
+ /* DisplayToggles wrapper for Docs only */
-
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
{
+ this.setState({ color: value });
+ };
+
+ onSwitchChange = () => {
+ this.setState({
+ isSwitchChecked: !this.state.isSwitchChecked,
+ });
+ };
+
+ onRangeChange = e => {
+ this.setState({
+ opacityValue: e.target.value,
+ });
+ };
+
+ onChange = optionId => {
+ this.setState({
+ buttonGroupIdSelected: optionId,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ }
+ endControl={
+
+ }
+ />
+
+
+
+
+
+
+
+
+ {this.selectTooltipContent}
+
+
+
+
+ Label
+
+
+ }
+ display="columnCompressed">
+
+
+
+
+
+
+
+
+
+ }
+ append="px"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+ Border
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/form_compressed/form_compressed.js b/src-docs/src/views/form_compressed/form_compressed.js
new file mode 100644
index 00000000000..00e686db344
--- /dev/null
+++ b/src-docs/src/views/form_compressed/form_compressed.js
@@ -0,0 +1,166 @@
+import React, { Component } from 'react';
+
+import {
+ EuiCheckboxGroup,
+ EuiComboBox,
+ EuiFieldText,
+ EuiFormRow,
+ EuiFilePicker,
+ EuiRange,
+ EuiSelect,
+ EuiSwitch,
+ EuiPanel,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export default class extends Component {
+ constructor(props) {
+ super(props);
+
+ const idPrefix = makeId();
+
+ this.state = {
+ isSwitchChecked: false,
+ checkboxes: [
+ {
+ id: `${idPrefix}0`,
+ label: 'Option one',
+ },
+ {
+ id: `${idPrefix}1`,
+ label: 'Option two is checked by default',
+ },
+ {
+ id: `${idPrefix}2`,
+ label: 'Option three',
+ },
+ ],
+ checkboxIdToSelectedMap: {
+ [`${idPrefix}1`]: true,
+ },
+ radios: [
+ {
+ id: `${idPrefix}4`,
+ label: 'Option one',
+ },
+ {
+ id: `${idPrefix}5`,
+ label: 'Option two is selected by default',
+ },
+ {
+ id: `${idPrefix}6`,
+ label: 'Option three',
+ },
+ ],
+ radioIdSelected: `${idPrefix}5`,
+ comboBoxSelectionOptions: [],
+ value: '20',
+ };
+ }
+
+ onRangeChange = e => {
+ this.setState({
+ value: e.target.value,
+ });
+ };
+
+ onSwitchChange = () => {
+ this.setState({
+ isSwitchChecked: !this.state.isSwitchChecked,
+ });
+ };
+
+ onCheckboxChange = optionId => {
+ const newCheckboxIdToSelectedMap = {
+ ...this.state.checkboxIdToSelectedMap,
+ ...{
+ [optionId]: !this.state.checkboxIdToSelectedMap[optionId],
+ },
+ };
+
+ this.setState({
+ checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,
+ });
+ };
+
+ onRadioChange = optionId => {
+ this.setState({
+ radioIdSelected: optionId,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ this.setState({ comboBoxSelectionOptions })
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/form_compressed/form_compressed_example.js b/src-docs/src/views/form_compressed/form_compressed_example.js
new file mode 100644
index 00000000000..f01395f123e
--- /dev/null
+++ b/src-docs/src/views/form_compressed/form_compressed_example.js
@@ -0,0 +1,214 @@
+import React, { Fragment } from 'react';
+import { Link } from 'react-router';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import {
+ EuiCode,
+ EuiFormRow,
+ EuiToolTip,
+ EuiCallOut,
+ EuiText,
+ EuiSpacer,
+} from '../../../../src/components';
+
+import FormCompressed from './form_compressed';
+const formCompressedSource = require('!!raw-loader!./form_compressed');
+const formCompressedHtml = renderToHtml(FormCompressed);
+
+import FormHorizontal from './form_horizontal';
+const formHorizontalSource = require('!!raw-loader!./form_horizontal');
+const formHorizontalHtml = renderToHtml(FormHorizontal);
+
+import FormHelp from './form_horizontal_help';
+const formHelpSource = require('!!raw-loader!./form_horizontal_help');
+const formHelpHtml = renderToHtml(FormHelp);
+
+import ComplexExample from './complex_example';
+const ComplexExampleSource = require('!!raw-loader!./complex_example');
+const ComplexExampleHtml = renderToHtml(ComplexExample);
+
+export const FormCompressedExample = {
+ title: 'Compressed forms',
+ intro: (
+
+
+
+ Also known as Editor-Style Controls , compressed forms
+ and controls were specifically created for use when space is at a
+ premium. They are not intended for use when the form is the main
+ objective of the page. They work best in editor-style applications
+ where form controls are being used to create or edit content on the
+ page.
+
+
+
+
+
+
+ ),
+ sections: [
+ {
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: formCompressedSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: formCompressedHtml,
+ },
+ ],
+ text: (
+
+ To use compressed forms, pass{' '}
+ display="rowCompressed" to the
+ EuiFormRows and compressed=true to the form
+ controls themselves.
+
+ ),
+ props: {
+ EuiFormRow,
+ },
+ demo: ,
+ snippet: [
+ `
+
+ `,
+ ],
+ },
+ {
+ title: 'Column layout',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: formHorizontalSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: formHorizontalHtml,
+ },
+ ],
+ text: (
+
+
+ Editor-style controls can be displayed in a two column layout for
+ even better use of limited space, just pass{' '}
+ display="columnCompressed" to align the
+ labels and inputs side by side.
+
+
+ EuiSwitches are a special case in which so you must
+ pass columnCompressedSwitch to the EuiFormRow as
+ the display property.
+
+
+ ),
+ props: {
+ EuiFormRow,
+ },
+ demo: ,
+ snippet: [
+ `
+
+ `,
+ `
+
+ `,
+ ],
+ },
+ {
+ title: 'Contextual help',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: formHelpSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: formHelpHtml,
+ },
+ ],
+ text: (
+
+
+ When using compressed, horizontal form styles, it is best not to
+ overload the UI with expansive help text. If it's short and
+ part of the validation, use helpText . However, if
+ it's an explanation of the control, consider wraping the label
+ with an EuiToolTip and appending
+ the questionInCircle icon to it.
+
+
+ ),
+ props: {
+ EuiFormRow,
+ EuiToolTip,
+ },
+ demo: ,
+ snippet: [
+ `
+
+ `,
+ `
+
+ Label
+
+
+ }>
+
+ `,
+ ],
+ },
+ {
+ title: 'Complex example',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: ComplexExampleSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: ComplexExampleHtml,
+ },
+ ],
+ text: (
+
+
+ This is an example of how to combine compressed form controls with
+ from rows, labels, prepend and appends in a column layout.
+
+
+
+ Pay close attention to the patterns of using{' '}
+ htmlFor and aria-label . For
+ best results each form control that is not wrapped in an
+ EuiFormRow should be supplied an id .
+
+
+
+ ),
+ demo: ,
+ },
+ ],
+};
diff --git a/src-docs/src/views/form_compressed/form_horizontal.js b/src-docs/src/views/form_compressed/form_horizontal.js
new file mode 100644
index 00000000000..63f00966b13
--- /dev/null
+++ b/src-docs/src/views/form_compressed/form_horizontal.js
@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+
+import {
+ EuiComboBox,
+ EuiFieldText,
+ EuiFormRow,
+ EuiFilePicker,
+ EuiRange,
+ EuiSelect,
+ EuiSwitch,
+ EuiPanel,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export default class extends Component {
+ constructor(props) {
+ super(props);
+
+ const idPrefix = makeId();
+
+ this.state = {
+ isSwitchChecked: false,
+ checkboxes: [
+ {
+ id: `${idPrefix}0`,
+ label: 'Option one',
+ },
+ {
+ id: `${idPrefix}1`,
+ label: 'Option two is checked by default',
+ },
+ {
+ id: `${idPrefix}2`,
+ label: 'Option three',
+ },
+ ],
+ checkboxIdToSelectedMap: {
+ [`${idPrefix}1`]: true,
+ },
+ radios: [
+ {
+ id: `${idPrefix}4`,
+ label: 'Option one',
+ },
+ {
+ id: `${idPrefix}5`,
+ label: 'Option two is selected by default',
+ },
+ {
+ id: `${idPrefix}6`,
+ label: 'Option three',
+ },
+ ],
+ radioIdSelected: `${idPrefix}5`,
+ comboBoxSelectionOptions: [],
+ value: '20',
+ };
+ }
+
+ onRangeChange = e => {
+ this.setState({
+ value: e.target.value,
+ });
+ };
+
+ onSwitchChange = () => {
+ this.setState({
+ isSwitchChecked: !this.state.isSwitchChecked,
+ });
+ };
+
+ onCheckboxChange = optionId => {
+ const newCheckboxIdToSelectedMap = {
+ ...this.state.checkboxIdToSelectedMap,
+ ...{
+ [optionId]: !this.state.checkboxIdToSelectedMap[optionId],
+ },
+ };
+
+ this.setState({
+ checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,
+ });
+ };
+
+ onRadioChange = optionId => {
+ this.setState({
+ radioIdSelected: optionId,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ this.setState({ comboBoxSelectionOptions })
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/form_compressed/form_horizontal_help.js b/src-docs/src/views/form_compressed/form_horizontal_help.js
new file mode 100644
index 00000000000..9cdc912c92d
--- /dev/null
+++ b/src-docs/src/views/form_compressed/form_horizontal_help.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+
+import {
+ EuiFieldText,
+ EuiFormRow,
+ EuiSelect,
+ EuiPanel,
+ EuiIcon,
+} from '../../../../src/components';
+import { EuiToolTip } from '../../../../src/components/tool_tip';
+
+export default class extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ isSwitchChecked: false,
+ value: '20',
+ };
+ }
+
+ onSwitchChange = () => {
+ this.setState({
+ isSwitchChecked: !this.state.isSwitchChecked,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ Label
+
+
+ }
+ display="columnCompressed">
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/form_controls/checkbox_group.js b/src-docs/src/views/form_controls/checkbox_group.js
index 20679cdd113..9edfd40f885 100644
--- a/src-docs/src/views/form_controls/checkbox_group.js
+++ b/src-docs/src/views/form_controls/checkbox_group.js
@@ -72,21 +72,6 @@ export default class extends Component {
onChange={this.onChange}
disabled
/>
-
-
-
-
- Compressed
-
-
-
-
-
);
}
diff --git a/src-docs/src/views/form_controls/display_toggles.js b/src-docs/src/views/form_controls/display_toggles.js
new file mode 100644
index 00000000000..aa9206c2b3f
--- /dev/null
+++ b/src-docs/src/views/form_controls/display_toggles.js
@@ -0,0 +1,223 @@
+import React, { cloneElement, Component, Fragment } from 'react';
+import { Link } from 'react-router';
+import PropTypes from 'prop-types';
+
+import {
+ EuiFlexGroup,
+ EuiSwitch,
+ EuiFlexItem,
+ EuiToolTip,
+ EuiIcon,
+ EuiButtonEmpty,
+ EuiPopover,
+ EuiSpacer,
+} from '../../../../src/components';
+
+export class DisplayToggles extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ disabled: false,
+ readOnly: false,
+ loading: false,
+ compressed: false,
+ fullWidth: false,
+ prepend: false,
+ append: false,
+ isPopoverOpen: false,
+ invalid: false,
+ };
+ }
+
+ updateProperty = (checked, property) => {
+ const currentState = { ...this.state };
+ currentState[property] = checked;
+ this.setState(currentState);
+ this.props.onUpdate && this.props.onUpdate(currentState);
+ };
+
+ render() {
+ const {
+ canDisabled,
+ canReadOnly,
+ canLoading,
+ canCompressed,
+ canFullWidth,
+ canPrepend,
+ canAppend,
+ canInvalid,
+ children,
+ extras,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ onUpdate,
+ } = this.props;
+
+ const canProps = {};
+ if (canDisabled) canProps.disabled = this.state.disabled;
+ if (canReadOnly) canProps.readOnly = this.state.readOnly;
+ if (canLoading) canProps.isLoading = this.state.loading;
+ if (canFullWidth) canProps.fullWidth = this.state.fullWidth;
+ if (canCompressed) canProps.compressed = this.state.compressed;
+ if (canPrepend && this.state.prepend) canProps.prepend = 'Prepend';
+ if (canAppend && this.state.append) canProps.append = 'Append';
+ if (canInvalid) canProps.isInvalid = this.state.invalid;
+
+ return (
+
+ {cloneElement(children, canProps)}
+
+ {
+ this.setState({ isPopoverOpen: false });
+ }}
+ button={
+ {
+ this.setState({ isPopoverOpen: !this.state.isPopoverOpen });
+ }}>
+ Display toggles
+
+ }>
+
+
+ {canDisabled && (
+
+
+ this.updateProperty(e.target.checked, 'disabled')
+ }
+ />
+
+ )}
+ {canReadOnly && (
+
+
+ this.updateProperty(e.target.checked, 'readOnly')
+ }
+ />
+
+ )}
+ {canLoading && (
+
+
+ this.updateProperty(e.target.checked, 'loading')
+ }
+ />
+
+ )}
+ {canInvalid && (
+
+
+ this.updateProperty(e.target.checked, 'invalid')
+ }
+ />
+
+ )}
+ {canFullWidth && (
+
+
+ this.updateProperty(e.target.checked, 'fullWidth')
+ }
+ />
+
+ )}
+ {canCompressed && (
+
+
+ compressed{' '}
+
+
+
+
+
+
+ }
+ checked={this.state.compressed}
+ onChange={e =>
+ this.updateProperty(e.target.checked, 'compressed')
+ }
+ />
+
+ )}
+ {canPrepend && (
+
+
+ this.updateProperty(e.target.checked, 'prepend')
+ }
+ />
+
+ )}
+ {canAppend && (
+
+
+ this.updateProperty(e.target.checked, 'append')
+ }
+ />
+
+ )}
+ {extras &&
+ extras.map((extra, index) => {
+ return (
+
+ {extra}
+
+ );
+ })}
+
+
+
+
+ );
+ }
+}
+
+DisplayToggles.propTypes = {
+ canDisabled: PropTypes.bool,
+ canReadOnly: PropTypes.bool,
+ canLoading: PropTypes.bool,
+ canCompressed: PropTypes.bool,
+ canFullWidth: PropTypes.bool,
+ canFullWidth: PropTypes.bool,
+ canPrepend: PropTypes.bool,
+ canAppend: PropTypes.bool,
+ canInvalid: PropTypes.bool,
+ extras: PropTypes.arrayOf(PropTypes.node),
+ onUpdate: PropTypes.func,
+};
+
+DisplayToggles.defaultProps = {
+ canDisabled: true,
+ canReadOnly: true,
+ canLoading: true,
+ canCompressed: true,
+ canFullWidth: true,
+ canInvalid: true,
+ canPrepend: false,
+ canAppend: false,
+};
diff --git a/src-docs/src/views/form_controls/field_number.js b/src-docs/src/views/form_controls/field_number.js
index ebfc39dfd18..d1c06a5cdca 100644
--- a/src-docs/src/views/form_controls/field_number.js
+++ b/src-docs/src/views/form_controls/field_number.js
@@ -1,6 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
-import { EuiFieldNumber, EuiSpacer, EuiText } from '../../../../src/components';
+import { EuiFieldNumber } from '../../../../src/components';
+import { DisplayToggles } from './display_toggles';
export default class extends Component {
constructor(props) {
@@ -20,79 +21,15 @@ export default class extends Component {
render() {
return (
-
+ /* DisplayToggles wrapper for Docs only */
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- %
-
- }
- placeholder="0 - 100"
- value={this.state.value}
- onChange={this.onChange}
- aria-label="Use aria labels when no actual label is in use"
- />
-
+
);
}
}
diff --git a/src-docs/src/views/form_controls/field_password.js b/src-docs/src/views/form_controls/field_password.js
index 89ef106d4ba..5b8b44e589c 100644
--- a/src-docs/src/views/form_controls/field_password.js
+++ b/src-docs/src/views/form_controls/field_password.js
@@ -1,6 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
-import { EuiFieldPassword, EuiSpacer } from '../../../../src/components';
+import { EuiFieldPassword } from '../../../../src/components';
+import { DisplayToggles } from './display_toggles';
export default class extends Component {
constructor(props) {
@@ -19,64 +20,15 @@ export default class extends Component {
render() {
return (
-
+ /* DisplayToggles wrapper for Docs only */
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
);
}
}
diff --git a/src-docs/src/views/form_controls/field_search.js b/src-docs/src/views/form_controls/field_search.js
index 2224b22e9a1..a08729a6eb2 100644
--- a/src-docs/src/views/form_controls/field_search.js
+++ b/src-docs/src/views/form_controls/field_search.js
@@ -1,6 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
-import { EuiFieldSearch, EuiSpacer } from '../../../../src/components';
+import { EuiFieldSearch } from '../../../../src/components';
+import { DisplayToggles } from './display_toggles';
export default class extends Component {
constructor(props) {
@@ -19,64 +20,15 @@ export default class extends Component {
render() {
return (
-
+ /* DisplayToggles wrapper for Docs only */
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
);
}
}
diff --git a/src-docs/src/views/form_controls/field_text.js b/src-docs/src/views/form_controls/field_text.js
index 125dc557928..8ee88c5c430 100644
--- a/src-docs/src/views/form_controls/field_text.js
+++ b/src-docs/src/views/form_controls/field_text.js
@@ -1,6 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
-import { EuiFieldText, EuiSpacer } from '../../../../src/components';
+import { EuiFieldText } from '../../../../src/components';
+import { DisplayToggles } from './display_toggles';
export default class extends Component {
constructor(props) {
@@ -19,64 +20,16 @@ export default class extends Component {
render() {
return (
-
+ /* DisplayToggles wrapper for Docs only */
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
);
}
}
diff --git a/src-docs/src/views/form_controls/file_picker.js b/src-docs/src/views/form_controls/file_picker.js
index 68f7acd2799..d57ee542bf3 100644
--- a/src-docs/src/views/form_controls/file_picker.js
+++ b/src-docs/src/views/form_controls/file_picker.js
@@ -1,4 +1,5 @@
import React, { Component, Fragment } from 'react';
+import { DisplayToggles } from './display_toggles';
import {
EuiFilePicker,
@@ -6,6 +7,7 @@ import {
EuiFlexItem,
EuiText,
EuiSpacer,
+ EuiSwitch,
} from '../../../../src/components';
export class FilePicker extends Component {
@@ -13,6 +15,7 @@ export class FilePicker extends Component {
super(props);
this.state = {
files: {},
+ large: true,
};
}
@@ -45,15 +48,30 @@ export class FilePicker extends Component {
return (
-
- {
- this.onChange(files);
- }}
- />
+
+ {/* DisplayToggles wrapper for Docs only */}
+ {
+ this.setState({ large: e.target.checked });
+ }}
+ />,
+ ]}>
+ {
+ this.onChange(files);
+ }}
+ display={this.state.large ? 'large' : 'default'}
+ />
+
+
@@ -62,30 +80,6 @@ export class FilePicker extends Component {
-
-
-
-
-
-
-
- {
- this.onChange(files);
- }}
- />
-
-
-
- {
- this.onChange(files);
- }}
- />
);
}
diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
index 9d186929cd1..cad4de36cfc 100644
--- a/src-docs/src/views/form_controls/form_controls_example.js
+++ b/src-docs/src/views/form_controls/form_controls_example.js
@@ -87,38 +87,38 @@ export const FormControlsExample = {
title: 'Form controls',
sections: [
{
- title: 'Search field',
+ title: 'Text field',
source: [
{
type: GuideSectionTypes.JS,
- code: fieldSearchSource,
+ code: fieldTextSource,
},
{
type: GuideSectionTypes.HTML,
- code: fieldSearchHtml,
+ code: fieldTextHtml,
},
],
props: {
- EuiFieldSearch,
+ EuiFieldText,
},
- demo: ,
+ demo: ,
},
{
- title: 'Text field',
+ title: 'Search field',
source: [
{
type: GuideSectionTypes.JS,
- code: fieldTextSource,
+ code: fieldSearchSource,
},
{
type: GuideSectionTypes.HTML,
- code: fieldTextHtml,
+ code: fieldSearchHtml,
},
],
props: {
- EuiFieldText,
+ EuiFieldSearch,
},
- demo: ,
+ demo: ,
},
{
title: 'Number field',
@@ -154,6 +154,34 @@ export const FormControlsExample = {
},
demo: ,
},
+ {
+ title: 'Select',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: selectSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: selectHtml,
+ },
+ ],
+ text: (
+
+ This component renders a basic HTML <select>
{' '}
+ element. If you need more customization for how the options and/or
+ selected values render, use the{' '}
+ EuiSuperSelect. Another option is
+ to use the EuiComboBox, which has
+ search and multi-select capabilities, but also has restrictions on how
+ items are rendered.
+
+ ),
+ props: {
+ EuiSelect,
+ },
+ demo: ,
+ },
{
title: 'Textarea',
source: [
@@ -202,34 +230,6 @@ export const FormControlsExample = {
demo: ,
props: { EuiFilePicker },
},
- {
- title: 'Select',
- source: [
- {
- type: GuideSectionTypes.JS,
- code: selectSource,
- },
- {
- type: GuideSectionTypes.HTML,
- code: selectHtml,
- },
- ],
- text: (
-
- This component renders a basic HTML <select>
{' '}
- element. If you need more customization for how the options and/or
- selected values render, use the{' '}
- EuiSuperSelect. Another option is
- to use the EuiComboBox, which has
- search and multi-select capabilities, but also has restrictions on how
- items are rendered.
-
- ),
- props: {
- EuiSelect,
- },
- demo: ,
- },
{
title: 'Checkbox',
source: [
diff --git a/src-docs/src/views/form_controls/radio_group.js b/src-docs/src/views/form_controls/radio_group.js
index 1e4cfb4f672..e727f684893 100644
--- a/src-docs/src/views/form_controls/radio_group.js
+++ b/src-docs/src/views/form_controls/radio_group.js
@@ -60,21 +60,6 @@ export default class extends Component {
onChange={this.onChange}
disabled
/>
-
-
-
-
- Compressed
-
-
-
-
-
);
}
diff --git a/src-docs/src/views/form_controls/select.js b/src-docs/src/views/form_controls/select.js
index 1c7774d55c5..2017aae2096 100644
--- a/src-docs/src/views/form_controls/select.js
+++ b/src-docs/src/views/form_controls/select.js
@@ -1,6 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
-import { EuiSelect, EuiSpacer } from '../../../../src/components';
+import { EuiSelect } from '../../../../src/components';
+import { DisplayToggles } from './display_toggles';
export default class extends Component {
constructor(props) {
@@ -25,54 +26,16 @@ export default class extends Component {
render() {
return (
-
+ /* DisplayToggles wrapper for Docs only */
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
);
}
}
diff --git a/src-docs/src/views/form_controls/text_area.js b/src-docs/src/views/form_controls/text_area.js
index 43f04395d50..779627bd991 100644
--- a/src-docs/src/views/form_controls/text_area.js
+++ b/src-docs/src/views/form_controls/text_area.js
@@ -1,6 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
-import { EuiTextArea, EuiSpacer } from '../../../../src/components';
+import { EuiTextArea } from '../../../../src/components';
+import { DisplayToggles } from './display_toggles';
export default class extends Component {
constructor(props) {
@@ -19,43 +20,15 @@ export default class extends Component {
render() {
return (
-
+ /* DisplayToggles wrapper for Docs only */
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
);
}
}
diff --git a/src-docs/src/views/form_layouts/form_compressed.js b/src-docs/src/views/form_layouts/form_compressed.js
deleted file mode 100644
index 8ab9ba27cb8..00000000000
--- a/src-docs/src/views/form_layouts/form_compressed.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, { Component } from 'react';
-
-import {
- EuiButton,
- EuiCheckboxGroup,
- EuiComboBox,
- EuiFieldText,
- EuiForm,
- EuiFormRow,
- EuiFilePicker,
- EuiRange,
- EuiSelect,
- EuiSpacer,
- EuiSwitch,
- EuiPanel,
-} from '../../../../src/components';
-
-import makeId from '../../../../src/components/form/form_row/make_id';
-
-export default class extends Component {
- constructor(props) {
- super(props);
-
- const idPrefix = makeId();
-
- this.state = {
- isSwitchChecked: false,
- checkboxes: [
- {
- id: `${idPrefix}0`,
- label: 'Option one',
- },
- {
- id: `${idPrefix}1`,
- label: 'Option two is checked by default',
- },
- {
- id: `${idPrefix}2`,
- label: 'Option three',
- },
- ],
- checkboxIdToSelectedMap: {
- [`${idPrefix}1`]: true,
- },
- radios: [
- {
- id: `${idPrefix}4`,
- label: 'Option one',
- },
- {
- id: `${idPrefix}5`,
- label: 'Option two is selected by default',
- },
- {
- id: `${idPrefix}6`,
- label: 'Option three',
- },
- ],
- radioIdSelected: `${idPrefix}5`,
- comboBoxSelectionOptions: [],
- value: '20',
- };
- }
-
- onRangeChange = e => {
- this.setState({
- value: e.target.value,
- });
- };
-
- onSwitchChange = () => {
- this.setState({
- isSwitchChecked: !this.state.isSwitchChecked,
- });
- };
-
- onCheckboxChange = optionId => {
- const newCheckboxIdToSelectedMap = {
- ...this.state.checkboxIdToSelectedMap,
- ...{
- [optionId]: !this.state.checkboxIdToSelectedMap[optionId],
- },
- };
-
- this.setState({
- checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,
- });
- };
-
- onRadioChange = optionId => {
- this.setState({
- radioIdSelected: optionId,
- });
- };
-
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this.setState({ comboBoxSelectionOptions })
- }
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Save form
-
-
-
- );
- }
-}
diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js
index 47bb218318a..75570fda683 100644
--- a/src-docs/src/views/form_layouts/form_layouts_example.js
+++ b/src-docs/src/views/form_layouts/form_layouts_example.js
@@ -35,10 +35,6 @@ import InlinePopover from './inline_popover';
const inlinePopoverSource = require('!!raw-loader!./inline_popover');
const inlinePopoverHtml = renderToHtml(InlinePopover);
-import FormCompressed from './form_compressed';
-const formCompressedSource = require('!!raw-loader!./form_compressed');
-const formCompressedHtml = renderToHtml(FormCompressed);
-
export const FormLayoutsExample = {
title: 'Form layouts',
sections: [
@@ -107,49 +103,6 @@ export const FormLayoutsExample = {
`,
},
- {
- title: 'Compressed and horizontal',
- source: [
- {
- type: GuideSectionTypes.JS,
- code: formCompressedSource,
- },
- {
- type: GuideSectionTypes.HTML,
- code: formCompressedHtml,
- },
- ],
- text: (
-
- If the particular form is in an area with a small amount of real
- estate, you can pass{' '}
- display="rowCompressed" to the{' '}
- EuiFormRow s but you will also need to pass{' '}
- compressed=true to the form controls themselves.
- For editor style controls, pass{' '}
- display="columnCompressed" to align the
- labels and inputs horizontally.
-
- ),
- props: {
- EuiFormRow,
- },
- demo:
,
- snippet: [
- `
-
- `,
- `
-
- `,
- ],
- },
{
title: 'Described form groups',
source: [
diff --git a/src-docs/src/views/form_layouts/inline_sizing.js b/src-docs/src/views/form_layouts/inline_sizing.js
index d66e8da3c98..56f70f5bc54 100644
--- a/src-docs/src/views/form_layouts/inline_sizing.js
+++ b/src-docs/src/views/form_layouts/inline_sizing.js
@@ -29,7 +29,7 @@ export default () => (
- Save
+ Save
diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js
index b356b870072..329fca0b554 100644
--- a/src-docs/src/views/super_select/super_select.js
+++ b/src-docs/src/views/super_select/super_select.js
@@ -1,6 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
-import { EuiSuperSelect, EuiSpacer } from '../../../../src/components';
+import { EuiSuperSelect } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
export default class extends Component {
constructor(props) {
@@ -40,68 +41,14 @@ export default class extends Component {
render() {
return (
-
+ /* DisplayToggles wrapper for Docs only */
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
);
}
}
diff --git a/src/components/color_picker/color_picker_swatch.tsx b/src/components/color_picker/color_picker_swatch.tsx
index 5ad759b12c9..f67fb53ef84 100644
--- a/src/components/color_picker/color_picker_swatch.tsx
+++ b/src/components/color_picker/color_picker_swatch.tsx
@@ -15,16 +15,18 @@ export type EuiColorPickerSwatchProps = CommonProps &
export const EuiColorPickerSwatch: FunctionComponent<
EuiColorPickerSwatchProps
-> = forwardRef(({ className, color, ...rest }, ref: Ref
) => {
- const classes = classNames('euiColorPickerSwatch', className);
+> = forwardRef(
+ ({ className, color, style, ...rest }, ref: Ref) => {
+ const classes = classNames('euiColorPickerSwatch', className);
- return (
-
- );
-});
+ return (
+
+ );
+ }
+);
diff --git a/src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss b/src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss
new file mode 100644
index 00000000000..8fc06622454
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss
@@ -0,0 +1,3 @@
+.euiSuperDatePicker__absoluteDateFormRow {
+ padding: 0 $euiSizeS $euiSizeS !important; // override compressed form row
+}
diff --git a/src/components/date_picker/super_date_picker/date_popover/_index.scss b/src/components/date_picker/super_date_picker/date_popover/_index.scss
index d8a2dc7d5a5..e184170cbc1 100644
--- a/src/components/date_picker/super_date_picker/date_popover/_index.scss
+++ b/src/components/date_picker/super_date_picker/date_popover/_index.scss
@@ -1,2 +1,3 @@
+@import 'absolute_tab';
@import 'date_popover_button';
@import 'date_popover_content';
diff --git a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js
index 30269280f05..51f17a14514 100644
--- a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js
+++ b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js
@@ -62,7 +62,7 @@ export class EuiAbsoluteTab extends Component {
onChange={this.handleChange}
/>
= 0' : null}>
-
-
-
+
@@ -113,6 +113,7 @@ export class EuiRelativeTab extends Component {
/>
-
-
-
+ hasNoInitialSelection={false}
+ isLoading={false}
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "text": "Last",
+ "value": "last",
+ },
+ Object {
+ "text": "Next",
+ "value": "next",
+ },
+ ]
+ }
+ value="last"
+ />
-
-
-
+ isLoading={false}
+ onChange={[Function]}
+ value={15}
+ />
-
-
-
+ hasNoInitialSelection={false}
+ isLoading={false}
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "text": "seconds",
+ "value": "s",
+ },
+ Object {
+ "text": "minutes",
+ "value": "m",
+ },
+ Object {
+ "text": "hours",
+ "value": "h",
+ },
+ Object {
+ "text": "days",
+ "value": "d",
+ },
+ Object {
+ "text": "weeks",
+ "value": "w",
+ },
+ Object {
+ "text": "months",
+ "value": "M",
+ },
+ Object {
+ "text": "years",
+ "value": "y",
+ },
+ ]
+ }
+ value="m"
+ />
-
-
- Apply
-
-
+ Apply
+
-
-
-
+ hasNoInitialSelection={false}
+ isLoading={false}
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "text": "Last",
+ "value": "last",
+ },
+ Object {
+ "text": "Next",
+ "value": "next",
+ },
+ ]
+ }
+ value="Next"
+ />
-
-
-
+ isLoading={false}
+ onChange={[Function]}
+ value={32}
+ />
-
-
-
+ hasNoInitialSelection={false}
+ isLoading={false}
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "text": "seconds",
+ "value": "s",
+ },
+ Object {
+ "text": "minutes",
+ "value": "m",
+ },
+ Object {
+ "text": "hours",
+ "value": "h",
+ },
+ Object {
+ "text": "days",
+ "value": "d",
+ },
+ Object {
+ "text": "weeks",
+ "value": "w",
+ },
+ Object {
+ "text": "months",
+ "value": "M",
+ },
+ Object {
+ "text": "years",
+ "value": "y",
+ },
+ ]
+ }
+ value="M"
+ />
-
-
- Apply
-
-
+ Apply
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
- Apply
-
-
+
+ Apply
+
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
index e7f5e52b1cb..4c0f5fcc7bb 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
@@ -5,7 +5,7 @@ import { timeUnits, timeUnitsPlural } from '../time_units';
import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
import { EuiTitle } from '../../../title';
import { EuiSpacer } from '../../../spacer';
-import { EuiFormRow, EuiSelect, EuiFieldNumber } from '../../../form';
+import { EuiSelect, EuiFieldNumber } from '../../../form';
import { EuiButton } from '../../../button';
const refreshUnitsOptions = Object.keys(timeUnits)
@@ -122,40 +122,34 @@ export class EuiRefreshInterval extends Component {
-
-
-
+
-
-
-
+
-
-
- {this.props.isPaused ? 'Start' : 'Stop'}
-
-
+
+ {this.props.isPaused ? 'Start' : 'Stop'}
+
diff --git a/src/components/form/field_number/__snapshots__/field_number.test.js.snap b/src/components/form/field_number/__snapshots__/field_number.test.js.snap
index 15a4aa9df41..ea8bcf26f2b 100644
--- a/src/components/form/field_number/__snapshots__/field_number.test.js.snap
+++ b/src/components/form/field_number/__snapshots__/field_number.test.js.snap
@@ -5,6 +5,7 @@ exports[`EuiFieldNumber is rendered 1`] = `
compressed="false"
fullwidth="false"
icon="alert"
+ inputid="1"
isloading="false"
>
diff --git a/src/components/form/field_number/field_number.js b/src/components/form/field_number/field_number.js
index 1adb63f0408..3509ef0dcab 100644
--- a/src/components/form/field_number/field_number.js
+++ b/src/components/form/field_number/field_number.js
@@ -41,7 +41,8 @@ export const EuiFieldNumber = ({
compressed={compressed}
readOnly={readOnly}
prepend={prepend}
- append={append}>
+ append={append}
+ inputId={id}>
diff --git a/src/components/form/field_text/field_text.js b/src/components/form/field_text/field_text.js
index 25c240f279f..34ab574a2d7 100644
--- a/src/components/form/field_text/field_text.js
+++ b/src/components/form/field_text/field_text.js
@@ -39,7 +39,8 @@ export const EuiFieldText = ({
compressed={compressed}
readOnly={readOnly}
prepend={prepend}
- append={append}>
+ append={append}
+ inputId={id}>
`;
-exports[`EuiFormControlLayout props one append is rendered 1`] = `
+exports[`EuiFormControlLayout props one append node is rendered 1`] = `
@@ -240,7 +240,22 @@ exports[`EuiFormControlLayout props one append is rendered 1`] = `
`;
-exports[`EuiFormControlLayout props one prepend is rendered 1`] = `
+exports[`EuiFormControlLayout props one append string is rendered 1`] = `
+
+`;
+
+exports[`EuiFormControlLayout props one prepend node is rendered 1`] = `
@@ -255,6 +270,21 @@ exports[`EuiFormControlLayout props one prepend is rendered 1`] = `
`;
+exports[`EuiFormControlLayout props one prepend string is rendered 1`] = `
+
+`;
+
exports[`EuiFormControlLayout props readOnly is rendered 1`] = `