diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index 3cd372eee80..ea232ba2ded 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -3,13 +3,13 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../components'; -import { EuiCallOut } from '../../../../src'; import { EuiLink, EuiCode, EuiComboBox, EuiText, + EuiCallOut, } from '../../../../src/components'; import { EuiComboBoxOptionOption } from '!!prop-loader!../../../../src/components/combo_box/types'; @@ -245,31 +245,36 @@ const labelledbySnippet = ` - -

- Use a EuiComboBox when the input has so many options - that the user needs to be able to search them, the user needs to be - able to select multiple options, and/or the user should have the - ability to specify a custom value in addition to selecting from a - predetermined list. -

- - You must add an accessible label to each instance of{' '} - EuiComboBox - - } + +

+ Use a EuiComboBox when the input has so many options + that the user needs to be able to search them, the user needs to be able + to select multiple options, and/or the user should have the ability to + specify a custom value in addition to selecting from a predetermined + list. If you're unsure of which selection component to use, see{' '} + - Labels can be created by wrapping the combo box in an{' '} - EuiFormRow with a label, adding an{' '} - aria-label prop, or passing a text node ID to the{' '} - aria-labelledby prop. - - - + EUI's in-depth guide to selection components + {' '} + for more information. +

+ + You must add an accessible label to each instance of{' '} + EuiComboBox + + } + > + Labels can be created by wrapping the combo box in an{' '} + EuiFormRow with a label, adding an{' '} + aria-label prop, or passing a text node ID to the{' '} + aria-labelledby prop. + +
), sections: [ { 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 83c618ec61f..04e18077c66 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -321,17 +321,15 @@ export const FormControlsExample = { .

- If you need more customization for how the options and/or selected - values render, you can use an{' '} - - EuiSuperSelect - {' '} - instead. For long lists of options use an{' '} - - EuiComboBox - - , which has search and multi-select capabilities, but also has - restrictions on how items are rendered. + If you need more customization for searching or rendering options, + see{' '} + + EUI's guide on selection components + {' '} + .

), diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index 4a2898c18e0..5cefe6c4537 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -9,6 +9,7 @@ import { EuiSelectableMessage, EuiText, EuiCallOut, + EuiLink, } from '../../../../src'; import { @@ -69,7 +70,14 @@ export const SelectableExample = { {' '} but can be used to simplify the construction of popover navigational menus; i.e. the spaces menu in the{' '} - header. + header. See{' '} + + EUI's in-depth guide on which selection component to use{' '} + {' '} + for more information.

), diff --git a/src-docs/src/views/super_select/super_select_example.js b/src-docs/src/views/super_select/super_select_example.js index cd8e4cac02c..2416c0d0a52 100644 --- a/src-docs/src/views/super_select/super_select_example.js +++ b/src-docs/src/views/super_select/super_select_example.js @@ -2,7 +2,12 @@ import React from 'react'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiSuperSelect } from '../../../../src/components'; +import { + EuiCode, + EuiSuperSelect, + EuiLink, + EuiCallOut, +} from '../../../../src/components'; import SuperSelectBasic from './super_select_basic'; const superSelectBasicSource = require('!!raw-loader!./super_select_basic'); @@ -54,6 +59,23 @@ const superSelectStatesSnippet = ` +

+ See{' '} + + EUI's in-depth guide to selection components{' '} + {' '} + for more information. +

+ + ), sections: [ { source: [