From 5f60fa1099f7a5e766ce536b6a7616fca5d1e01a Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Fri, 6 Sep 2019 14:38:31 -0400
Subject: [PATCH 07/20] Into feature/compressed editor docs (#2295)
* Adding a shared component for the different states of each form control
* New docs section for compressed
* Added `columnCompressedSwitch` to display type of EuiFormRow for better alignment of switch style controls
* Account for tooltips as pre/appends
* Allow passing a string as the pre/appends and it automatically wraps it in a form label
* Made all EuiSuperDatePicker form controls compressed (in popover)
* Connection prepend/appends with input via `htmlFor`
* Allowing passing of `style` to EuiColorPickerSwatch
* Allow an array of strings a pre/append
---
src-docs/src/routes.js | 5 +-
.../src/views/color_picker/kitchen_sink.js | 56 +--
src-docs/src/views/combo_box/combo_box.js | 22 +-
src-docs/src/views/date_picker/states.js | 49 +--
src-docs/src/views/focus_trap/focus_trap.js | 2 +-
.../views/form_compressed/complex_example.js | 293 +++++++++++++++
.../views/form_compressed/form_compressed.js | 166 ++++++++
.../form_compressed_example.js | 214 +++++++++++
.../views/form_compressed/form_horizontal.js | 157 ++++++++
.../form_compressed/form_horizontal_help.js | 59 +++
.../src/views/form_controls/checkbox_group.js | 15 -
.../views/form_controls/display_toggles.js | 223 +++++++++++
.../src/views/form_controls/field_number.js | 75 +---
.../src/views/form_controls/field_password.js | 60 +--
.../src/views/form_controls/field_search.js | 62 +--
.../src/views/form_controls/field_text.js | 61 +--
.../src/views/form_controls/file_picker.js | 60 ++-
.../form_controls/form_controls_example.js | 76 ++--
.../src/views/form_controls/radio_group.js | 15 -
src-docs/src/views/form_controls/select.js | 51 +--
src-docs/src/views/form_controls/text_area.js | 39 +-
.../src/views/form_layouts/form_compressed.js | 181 ---------
.../form_layouts/form_layouts_example.js | 47 ---
.../src/views/form_layouts/inline_sizing.js | 2 +-
.../src/views/super_select/super_select.js | 65 +---
.../color_picker/color_picker_swatch.tsx | 26 +-
.../date_popover/_absolute_tab.scss | 3 +
.../date_popover/_index.scss | 1 +
.../date_popover/absolute_tab.js | 3 +-
.../date_popover/relative_tab.js | 17 +-
.../__snapshots__/quick_select.test.js.snap | 354 +++++++-----------
.../quick_select_popover/quick_select.js | 68 ++--
.../quick_select_popover/refresh_interval.js | 56 ++-
.../__snapshots__/field_number.test.js.snap | 1 +
.../form/field_number/field_number.js | 3 +-
.../__snapshots__/field_text.test.js.snap | 1 +
src/components/form/field_text/field_text.js | 3 +-
.../form_control_layout.test.tsx.snap | 34 +-
.../_form_control_layout.scss | 7 +
.../form_control_layout.test.tsx | 16 +-
.../form_control_layout.tsx | 56 ++-
.../__snapshots__/form_row.test.js.snap | 15 +
src/components/form/form_row/_form_row.scss | 20 +
src/components/form/form_row/form_row.js | 4 +
.../select/__snapshots__/select.test.js.snap | 1 +
src/components/form/select/select.js | 3 +-
46 files changed, 1622 insertions(+), 1125 deletions(-)
create mode 100644 src-docs/src/views/form_compressed/complex_example.js
create mode 100644 src-docs/src/views/form_compressed/form_compressed.js
create mode 100644 src-docs/src/views/form_compressed/form_compressed_example.js
create mode 100644 src-docs/src/views/form_compressed/form_horizontal.js
create mode 100644 src-docs/src/views/form_compressed/form_horizontal_help.js
create mode 100644 src-docs/src/views/form_controls/display_toggles.js
delete mode 100644 src-docs/src/views/form_layouts/form_compressed.js
create mode 100644 src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 4fe2080e709..4c176e213dc 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';
@@ -336,8 +338,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 (
+
+
+
+
+
+
+
+
+
+
+
+
+ {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`] = `
`;
@@ -55,6 +57,14 @@ exports[`EuiDualRange is rendered 1`] = `
`;
exports[`EuiDualRange props compressed should render 1`] = `
`;
@@ -116,23 +119,6 @@ exports[`EuiDualRange props custom ticks should render 1`] = `
class="euiRangeTrack"
style="margin-right:0.6em"
>
-
-
@@ -157,6 +143,24 @@ exports[`EuiDualRange props custom ticks should render 1`] = `
100kb
+
+