-
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
{
+ 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 (
+
+
+
+
+
+
+
+
+
+
+
+
+ {this.selectTooltipContent}
+
+
+
+
+ Label
+
+ }
+ display="columnCompressed">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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:
+ `,
+ ],
+ },
+ {
+ 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:
+ `,
+ `
+ `,
+ ],
+ },
+ {
+ 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 questionInCircle icon to it.
+
+
+ ),
+ props: {
+ EuiFormRow,
+ EuiToolTip,
+ },
+ demo:
+ `,
+ `
+
+ 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:
+
+
+
+
+
+
+
+
+
+
+
+ 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
-
-
-
+ {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:
+ This component renders a basic HTML <select>{' '}
+ element. If you need more customization for how the options and/or
+ selected values render, use the{' '}
+
+ ),
+ props: {
+ EuiSelect,
+ },
+ demo:
- This component renders a basic HTML <select>{' '}
- element. If you need more customization for how the options and/or
- selected values render, use the{' '}
-
- ),
- props: {
- EuiSelect,
- },
- demo:
- Compressed
-
-
-
+ /* 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 (
-
= 0' : null}>
-
-
+
-
-
+ 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
+
-
-
+
-
-
+
-
-
- {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}>
@@ -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`] = `