From 857c65c42d3bda5464baa4b9e70675c9077846ba Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 13 Jul 2022 13:58:55 -0700 Subject: [PATCH 01/13] Remove shared dependency in favor of simply copying and pasting - The local import was preventing CodeSandbox demos from being generated, and DRYness is not as much a concern here as much as having useful demos/code that people can quickly modify - .TSX source change is required for `<>` typing additions --- src-docs/src/views/selectable/data.ts | 39 --------- src-docs/src/views/selectable/selectable.tsx | 44 +++++++++- .../views/selectable/selectable_example.js | 8 +- .../views/selectable/selectable_exclusion.tsx | 44 +++++++++- .../views/selectable/selectable_search.tsx | 80 ++++++++++++++----- .../views/selectable/selectable_single.tsx | 47 +++++++++-- 6 files changed, 183 insertions(+), 79 deletions(-) delete mode 100644 src-docs/src/views/selectable/data.ts diff --git a/src-docs/src/views/selectable/data.ts b/src-docs/src/views/selectable/data.ts deleted file mode 100644 index 67f425d3394..00000000000 --- a/src-docs/src/views/selectable/data.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { EuiSelectableOption } from '../../../../src/components/selectable/selectable_option'; - -export const Options: EuiSelectableOption[] = [ - { - label: 'Titan', - 'data-test-subj': 'titanOption', - }, - { - label: 'Enceladus is disabled', - disabled: true, - }, - { - label: 'Mimas', - checked: 'on', - }, - { - label: 'Dione', - }, - { - label: 'Iapetus', - checked: 'on', - }, - { - label: 'Phoebe', - }, - { - label: 'Rhea', - }, - { - label: - "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", - }, - { - label: 'Tethys', - }, - { - label: 'Hyperion', - }, -]; diff --git a/src-docs/src/views/selectable/selectable.tsx b/src-docs/src/views/selectable/selectable.tsx index b2aa524fd3e..587a0b0d7ab 100644 --- a/src-docs/src/views/selectable/selectable.tsx +++ b/src-docs/src/views/selectable/selectable.tsx @@ -1,10 +1,48 @@ import React, { useState } from 'react'; -import { EuiSelectable } from '../../../../src/components/selectable'; -import { Options } from './data'; +import { + EuiSelectable, + EuiSelectableOption, +} from '../../../../src/components/selectable'; export default () => { - const [options, setOptions] = useState(Options); + const [options, setOptions] = useState([ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus is disabled', + disabled: true, + }, + { + label: 'Mimas', + checked: 'on', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + checked: 'on', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, + ]); return ( { - const [options, setOptions] = useState(Options); + const [options, setOptions] = useState([ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus is disabled', + disabled: true, + }, + { + label: 'Mimas', + checked: 'on', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + checked: 'on', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, + ]); return ( { - const [options, setOptions] = useState(Options); + const [options, setOptions] = useState([ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus is disabled', + disabled: true, + }, + { + label: 'Mimas', + checked: 'on', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + checked: 'on', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, + ]); return ( - - setOptions(newOptions)} - > - {(list, search) => ( - - {search} - {list} - - )} - - + setOptions(newOptions)} + > + {(list, search) => ( + <> + {search} + {list} + + )} + ); }; diff --git a/src-docs/src/views/selectable/selectable_single.tsx b/src-docs/src/views/selectable/selectable_single.tsx index 45900f88adf..066b0b92491 100644 --- a/src-docs/src/views/selectable/selectable_single.tsx +++ b/src-docs/src/views/selectable/selectable_single.tsx @@ -1,15 +1,46 @@ import React, { useState } from 'react'; -import { EuiSelectable } from '../../../../src/components/selectable'; -import { Options } from './data'; +import { + EuiSelectable, + EuiSelectableOption, +} from '../../../../src/components/selectable'; export default () => { - const [options, setOptions] = useState( - Options.map((option) => { - const { checked, ...checklessOption } = option; - return { ...checklessOption }; - }) - ); + const [options, setOptions] = useState([ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus is disabled', + disabled: true, + }, + { + label: 'Mimas', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, + ]); return ( Date: Wed, 13 Jul 2022 14:20:18 -0700 Subject: [PATCH 02/13] Greatly simplify popover/flyout example + convert to TSX - rename to Sizing since it's not just a popover example - move example all the way down the page - it's a more complex example and doesn't honestly feel like it makes sense where it is, and it's a - remove data store, just use more moon names - clean up unnecessary const declarations, preferring inline JS - remove need for generated IDs - this is a one time demo - remove unnecessary array sorting - it's not relevant to what's being demo'd --- .../views/selectable/selectable_example.js | 88 ++++++------ ...table_popover.js => selectable_sizing.tsx} | 135 +++++++++--------- 2 files changed, 112 insertions(+), 111 deletions(-) rename src-docs/src/views/selectable/{selectable_popover.js => selectable_sizing.tsx} (55%) diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index f5e1671485a..de64cab49c3 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -18,9 +18,6 @@ import { import Selectable from './selectable'; const selectableSource = require('!!raw-loader!./selectable'); -import SelectablePopover from './selectable_popover'; -const selectablePopoverSource = require('!!raw-loader!./selectable_popover'); - import SelectableSearch from './selectable_search'; const selectableSearchSource = require('!!raw-loader!./selectable_search'); @@ -33,6 +30,9 @@ const selectableExclusionSource = require('!!raw-loader!./selectable_exclusion') import SelectableMessages from './selectable_messages'; const selectableMessagesSource = require('!!raw-loader!./selectable_messages'); +import SelectableSizing from './selectable_sizing'; +const selectableSizingSource = require('!!raw-loader!./selectable_sizing'); + import SelectableCustomRender from './selectable_custom_render'; const selectableCustomRenderSource = require('!!raw-loader!./selectable_custom_render'); @@ -197,47 +197,6 @@ export const SelectableExample = { {list => list} `, }, - { - title: 'Sizing and containers', - source: [ - { - type: GuideSectionTypes.JS, - code: selectablePopoverSource, - }, - ], - text: ( - -

- The component's children, list, search, are - returned via the children function, which means - you can wrap the indivial elements in anything you want. -

-

Width and height

-

- The width has been made to always be 100% of its container, - including stretching the search input. When used inside of{' '} - - EuiPopover - - , we recommend setting a width (or min/max values) via CSS on the - element containing the list to avoid expansion and contraction. By - default, the height is capped at showing up to 7.5 items. It shows - half of the last one to help indicate that there are more options to - scroll to. To stretch the box to fill its container, pass - 'full' to the height prop. -

-

Flexbox

-

- Be aware that display: flex with - column layout is applied to the wrapping container. This is so that - you can opt in to allow the height of the list stretch to fill its - container. See the flyout example. -

- - ), - props: { EuiSelectable }, - demo: , - }, { title: 'Options can be excluded', source: [ @@ -311,6 +270,47 @@ export const SelectableExample = { `, ], }, + { + title: 'Sizing and containers', + text: ( + +

+ The component's children, list, search, are + returned via the children function, which means + you can wrap the indivial elements in anything you want. +

+

Width and height

+

+ The width has been made to always be 100% of its container, + including stretching the search input. When used inside of{' '} + + EuiPopover + + , we recommend setting a width (or min/max values) via CSS on the + element containing the list to avoid expansion and contraction. By + default, the height is capped at showing up to 7.5 items. It shows + half of the last one to help indicate that there are more options to + scroll to. To stretch the box to fill its container, pass + 'full' to the height prop. +

+

Flexbox

+

+ Be aware that display: flex with + column layout is applied to the wrapping container. This is so that + you can opt in to allow the height of the list stretch to fill its + container. See the flyout example. +

+ + ), + demo: , + source: [ + { + type: GuideSectionTypes.TSX, + code: selectableSizingSource, + }, + ], + props: { EuiSelectable }, + }, { title: 'Rendering the options', source: [ diff --git a/src-docs/src/views/selectable/selectable_popover.js b/src-docs/src/views/selectable/selectable_sizing.tsx similarity index 55% rename from src-docs/src/views/selectable/selectable_popover.js rename to src-docs/src/views/selectable/selectable_sizing.tsx index d32a8404faf..fa4b0cf4934 100644 --- a/src-docs/src/views/selectable/selectable_popover.js +++ b/src-docs/src/views/selectable/selectable_sizing.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useState } from 'react'; +import React, { useState } from 'react'; import { EuiButton, EuiCode, @@ -9,75 +9,76 @@ import { EuiPopoverFooter, EuiPopoverTitle, EuiSelectable, + EuiSelectableOption, EuiSpacer, EuiTitle, } from '../../../../src/components'; -import { Comparators } from '../../../../src/services/sort'; - -import { Options } from './data'; -import { createDataStore } from '../tables/data_store'; -import { useGeneratedHtmlId } from '../../../../src/services'; export default () => { - const countriesStore = createDataStore().countries.map((country) => { - return { - id: country.code, - label: `${country.name}`, - append: country.flag, - }; - }); - - const [options, setOptions] = useState(Options); - const [countries, setCountries] = useState(countriesStore); const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); - const flexboxSelectablePopoverId = useGeneratedHtmlId({ - prefix: 'flexboxSelectablePopover', - }); - const flexboxSelectableFlyoutTitleId = useGeneratedHtmlId({ - prefix: 'flexboxSelectableFlyoutTitle', - }); - - const onButtonClick = () => { - setOptions(options.slice().sort(Comparators.property('checked'))); - setIsPopoverOpen(!isPopoverOpen); - }; - - const closePopover = () => { - setIsPopoverOpen(false); - }; - - const onChange = (options) => { + const [options, setOptions] = useState([ + { label: 'Titan' }, + { label: 'Enceladus' }, + { label: 'Mimas', checked: 'on' }, + { label: 'Dione' }, + { label: 'Iapetus', checked: 'on' }, + { label: 'Phoebe' }, + { label: 'Rhea' }, + { label: 'Pandora' }, + { label: 'Tethys' }, + { label: 'Hyperion' }, + { label: 'Pan' }, + { label: 'Atlas' }, + { label: 'Prometheus' }, + { label: 'Janus' }, + { label: 'Epimetheus' }, + { label: 'Amalthea' }, + { label: 'Thebe' }, + { label: 'Io' }, + { label: 'Europa' }, + { label: 'Ganymede' }, + { label: 'Callisto' }, + { label: 'Himalia' }, + { label: 'Phobos' }, + { label: 'Deimos' }, + { label: 'Puck' }, + { label: 'Miranda' }, + { label: 'Ariel' }, + { label: 'Umbriel' }, + { label: 'Titania' }, + { label: 'Oberon' }, + { label: 'Despina' }, + { label: 'Galatea' }, + { label: 'Larissa' }, + { label: 'Triton' }, + { label: 'Nereid' }, + { label: 'Charon' }, + { label: 'Styx' }, + { label: 'Nix' }, + { label: 'Kerberos' }, + { label: 'Hydra' }, + ]); + const onChange = (options: EuiSelectableOption[]) => { setOptions(options); }; - const onFlyoutChange = (options) => { - setCountries(options); - }; - - const closeFlyout = () => { - setIsFlyoutVisible(false); - }; - - const showFlyout = () => { - setIsFlyoutVisible(true); - }; - - const button = ( - - Show popover - - ); - return ( - + <> setIsPopoverOpen(!isPopoverOpen)} + > + Show popover + + } isOpen={isPopoverOpen} - closePopover={closePopover} + closePopover={() => setIsPopoverOpen(false)} > { - Show flyout + setIsFlyoutVisible(true)}> + Show flyout + {isFlyoutVisible && ( setIsFlyoutVisible(false)} + aria-labelledby="selectableFlyout" > {(list, search) => ( - + <> -

- Be mindful of the flexbox -

+

Be mindful of the flexbox

 {search} {list} - + )} @@ -158,12 +159,12 @@ export default () => { {}} + onChange={onChange} style={{ width: 300 }} listProps={{ bordered: true, paddingSize: 'none' }} > {(list) => list} - + ); }; From c66e4a99339a88c6e0122bb998be6609bf3aebcb Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 13 Jul 2022 15:23:52 -0700 Subject: [PATCH 03/13] Simplify custom render example and convert to TSX - remove need for data store dependency, copy countries array - default to custom content being shown - inline more code, simplify conditional props to ternaries - make secondary text display smaller - Fix `showIcons` type error: it should be passed by the list, not to individual options --- .../selectable/selectable_custom_render.js | 112 ---------------- .../selectable/selectable_custom_render.tsx | 122 ++++++++++++++++++ .../views/selectable/selectable_example.js | 12 +- 3 files changed, 128 insertions(+), 118 deletions(-) delete mode 100644 src-docs/src/views/selectable/selectable_custom_render.js create mode 100644 src-docs/src/views/selectable/selectable_custom_render.tsx diff --git a/src-docs/src/views/selectable/selectable_custom_render.js b/src-docs/src/views/selectable/selectable_custom_render.js deleted file mode 100644 index ef4c3dcea12..00000000000 --- a/src-docs/src/views/selectable/selectable_custom_render.js +++ /dev/null @@ -1,112 +0,0 @@ -import React, { useState } from 'react'; - -import { - EuiBadge, - EuiHighlight, - EuiSpacer, - EuiTextColor, - EuiSwitch, -} from '../../../../src/components'; -import { EuiSelectable } from '../../../../src/components/selectable'; -import { createDataStore } from '../tables/data_store'; - -export default () => { - const [useCustomContent, setUseCustomContent] = useState(false); - const [isVirtualized, setIsVirtualized] = useState(true); - - const countries = createDataStore().countries.map((country) => { - return { - label: `${country.name}`, - searchableLabel: `${country.name} ${'I am secondary content, I am!'}`, - prepend: country.flag, - append: {country.code}, - showIcons: false, - data: { - secondaryContent: 'I am secondary content, I am!', - }, - }; - }); - - countries.unshift({ - label: 'Country options', - isGroupLabel: true, - }); - - const [options, setOptions] = useState(countries); - - const onChange = (options) => { - setOptions(options); - }; - - const onCustom = (e) => { - setUseCustomContent(e.currentTarget.checked); - }; - - const onVirtualized = (e) => { - setIsVirtualized(e.currentTarget.checked); - }; - - const renderCountryOption = (option, searchValue) => { - return ( - <> - {option.label} - {/*
*/} - - - - {option.secondaryContent} - - - - - ); - }; - - let listProps = { - isVirtualized, - }; - - let customProps; - if (useCustomContent) { - customProps = { - height: 240, - renderOption: renderCountryOption, - }; - listProps = { - rowHeight: 50, - isVirtualized, - }; - } - - return ( - <> - {' '} -   - - - - {(list, search) => ( - <> - {search} - {list} - - )} - - - ); -}; diff --git a/src-docs/src/views/selectable/selectable_custom_render.tsx b/src-docs/src/views/selectable/selectable_custom_render.tsx new file mode 100644 index 00000000000..10f76d327a9 --- /dev/null +++ b/src-docs/src/views/selectable/selectable_custom_render.tsx @@ -0,0 +1,122 @@ +import React, { useState } from 'react'; + +import { + EuiBadge, + EuiHighlight, + EuiSpacer, + EuiText, + EuiSwitch, + EuiSelectable, + EuiSelectableOption, +} from '../../../../src/components'; + +const countryData = [ + { code: 'NL', name: 'Netherlands', flag: '🇳🇱' }, + { code: 'CZ', name: 'Czech Republic', flag: '🇨🇿' }, + { code: 'ZA', name: 'South Africa', flag: '🇿🇦' }, + { code: 'US', name: 'United States', flag: '🇺🇲' }, + { code: 'AU', name: 'Australia', flag: '🇦🇺' }, + { code: 'IL', name: 'Israel', flag: '🇮🇱' }, + { code: 'NO', name: 'Norway', flag: '🇳🇴' }, + { code: 'IT', name: 'Italy', flag: '🇮🇹' }, + { code: 'CA', name: 'Canada', flag: '🇨🇦' }, + { code: 'CG', name: 'Congo', flag: '🇨🇬' }, + { code: 'CL', name: 'Chile', flag: '🇨🇱' }, + { code: 'FJ', name: 'Fiji', flag: '🇫🇯' }, + { code: 'GB', name: 'United Kingdom', flag: '🇬🇧' }, + { code: 'GR', name: 'Greece', flag: '🇬🇷' }, + { code: 'HT', name: 'Haiti', flag: '🇭🇹' }, + { code: 'LB', name: 'Lebanon', flag: '🇱🇧' }, + { code: 'MM', name: 'Myanmar', flag: '🇲🇲' }, + { code: 'MX', name: 'Mexico', flag: '🇲🇽' }, + { code: 'NG', name: 'Nigeria', flag: '🇳🇬' }, + { code: 'SG', name: 'Singapore', flag: '🇸🇬' }, + { code: 'SO', name: 'Somalia', flag: '🇸🇴' }, + { code: 'TN', name: 'Tunisia', flag: '🇹🇳' }, + { code: 'VE', name: 'Venezuela', flag: '🇻🇪' }, + { code: 'ZM', name: 'Zambia', flag: '🇿🇲' }, +]; + +interface OptionData { + secondaryContent?: string; +} + +export default () => { + const [options, setOptions] = useState< + Array> + >([ + { + label: 'Country options', + isGroupLabel: true, + }, + ...countryData.map( + (country): EuiSelectableOption => ({ + label: `${country.name}`, + searchableLabel: `${country.name} ${'I am secondary content, I am!'}`, + prepend: country.flag, + append: {country.code}, + data: { + secondaryContent: 'I am secondary content, I am!', + }, + }) + ), + ]); + + const renderCountryOption = ( + option: EuiSelectableOption, + searchValue: string + ) => { + return ( + <> + {option.label} + + + + {option.secondaryContent || ''} + + + + + ); + }; + + const [useCustomContent, setUseCustomContent] = useState(true); + const [isVirtualized, setIsVirtualized] = useState(true); + + return ( + <> + setIsVirtualized(e.target.checked)} + /> +    + setUseCustomContent(e.target.checked)} + /> + + setOptions(options)} + listProps={{ + isVirtualized, + rowHeight: useCustomContent ? 50 : undefined, + showIcons: false, + }} + renderOption={useCustomContent ? renderCountryOption : undefined} + height={240} + > + {(list, search) => ( + <> + {search} + {list} + + )} + + + ); +}; diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index de64cab49c3..b7cba278bda 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -315,7 +315,7 @@ export const SelectableExample = { title: 'Rendering the options', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: selectableCustomRenderSource, }, ], @@ -332,10 +332,10 @@ export const SelectableExample = {

Selection icons

You can choose not to display the check and cross icons indicating - selection by passing{' '} - showIcons=false. This is useful for - instances that navigate elsewhere on selection or hide their - selected options from the list. + selection by setting{' '} + listProps.showIcons to false. This + is useful for instances that navigate elsewhere on selection or hide + their selected options from the list.

Group labels

@@ -364,7 +364,7 @@ export const SelectableExample = {

While it is best to stick to the{' '} option.label, option.append, option.prepend and{' '} - showIcons props, you can pass a custom{' '} + listProps.showIcons props, you can pass a custom{' '} renderOption function which will pass back the single option object and the{' '} searchValue to use for highlighting. From 96f6ecb173a9ddc77cbf8c887016f7ec882b98f7 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 14 Jul 2022 09:20:44 -0700 Subject: [PATCH 04/13] [Organization] Move EuiSelectableTemplateSitewide to its own folder - It was confusing having it amongst the EuiSelectable docs when it's its own completely separate page/documentation - gave it its own subdir with the same name that it lives in in src/components - renamed its file names to be clearer and less generic + fix onWindowKeyDown useEffect cleanup removing the wrong event + optimize window keyup/keydown fns to not re-init on every rerender --- src-docs/src/routes.js | 2 +- src-docs/src/views/_index.scss | 2 +- .../_sitewide.scss} | 0 .../sitewide_example.js} | 18 +++---- .../sitewide_option.tsx | 8 ++-- .../sitewide_search.tsx} | 48 ++++++++++--------- 6 files changed, 42 insertions(+), 36 deletions(-) rename src-docs/src/views/selectable/{_search.scss => selectable_templates/_sitewide.scss} (100%) rename src-docs/src/views/selectable/{selectable_sitewide_template_example.js => selectable_templates/sitewide_example.js} (93%) rename src-docs/src/views/selectable/{ => selectable_templates}/sitewide_option.tsx (86%) rename src-docs/src/views/selectable/{search.tsx => selectable_templates/sitewide_search.tsx} (86%) diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 75dc7d0fdaa..fd2cf2b3615 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -30,7 +30,7 @@ import { import { PageTemplateExample } from './views/page/page_template_example'; -import { SitewideSearchExample } from './views/selectable/selectable_sitewide_template_example'; +import { SitewideSearchExample } from './views/selectable/selectable_templates/sitewide_example'; // Services diff --git a/src-docs/src/views/_index.scss b/src-docs/src/views/_index.scss index 57cb58195e3..ebb7ebe225f 100644 --- a/src-docs/src/views/_index.scss +++ b/src-docs/src/views/_index.scss @@ -11,7 +11,7 @@ $guideDemoHighlightColor: transparentize($euiColorPrimary, .9); @import './horizontal_rule/horizontal_rule'; @import './page/page'; @import './notification_event/notification_event'; -@import './selectable/search'; +@import './selectable/selectable_templates/sitewide'; @import './spacer/spacer'; @import './suggest/index'; @import './text/text_scaling'; diff --git a/src-docs/src/views/selectable/_search.scss b/src-docs/src/views/selectable/selectable_templates/_sitewide.scss similarity index 100% rename from src-docs/src/views/selectable/_search.scss rename to src-docs/src/views/selectable/selectable_templates/_sitewide.scss diff --git a/src-docs/src/views/selectable/selectable_sitewide_template_example.js b/src-docs/src/views/selectable/selectable_templates/sitewide_example.js similarity index 93% rename from src-docs/src/views/selectable/selectable_sitewide_template_example.js rename to src-docs/src/views/selectable/selectable_templates/sitewide_example.js index 660167dfe95..90cc2280afe 100644 --- a/src-docs/src/views/selectable/selectable_sitewide_template_example.js +++ b/src-docs/src/views/selectable/selectable_templates/sitewide_example.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import { Link } from 'react-router-dom'; -import { GuideSectionTypes } from '../../components'; +import { GuideSectionTypes } from '../../../components'; import { EuiCode, @@ -10,13 +10,13 @@ import { EuiCodeBlock, EuiAccordion, EuiCallOut, -} from '../../../../src/components'; +} from '../../../../../src/components'; -import { Options, MetaData } from './props'; +import { Options, MetaData } from '../props'; -import SearchOption from './sitewide_option'; -import Search from './search'; -const searchSource = require('!!raw-loader!./search'); +import SitewideOption from './sitewide_option'; +import SitewideSearch from './sitewide_search'; +const sitewideSearchSource = require('!!raw-loader!./sitewide_search'); export const SitewideSearchExample = { title: 'Sitewide search', @@ -38,7 +38,7 @@ export const SitewideSearchExample = { source: [ { type: GuideSectionTypes.JS, - code: searchSource, + code: sitewideSearchSource, }, ], text: ( @@ -94,7 +94,7 @@ export const SitewideSearchExample = { ), props: { EuiSelectableTemplateSitewide, Options, MetaData }, - demo: , + demo: , }, { title: 'Options', @@ -107,7 +107,7 @@ export const SitewideSearchExample = { parts are optional with the exception of the label (A).

- + { const props = { diff --git a/src-docs/src/views/selectable/search.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx similarity index 86% rename from src-docs/src/views/selectable/search.tsx rename to src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx index 5dbc65136fe..ce52eceff59 100644 --- a/src-docs/src/views/selectable/search.tsx +++ b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx @@ -1,12 +1,15 @@ import React, { useState, useEffect } from 'react'; -import { EuiText } from '../../../../src/components/text'; -import { EuiBadge } from '../../../../src/components/badge'; -import { EuiSelectableTemplateSitewide } from '../../../../src/components/selectable'; -import { EuiSelectableTemplateSitewideOption } from '../../../../src/components/selectable/selectable_templates/selectable_template_sitewide_option'; -import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; -import { EuiLink } from '../../../../src/components/link'; -import { EuiButton } from '../../../../src/components/button'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiText, + EuiLink, + EuiBadge, + EuiButton, + EuiSelectableTemplateSitewide, + EuiSelectableTemplateSitewideOption, +} from '../../../../../src/components'; export default () => { const [searchValue, setSearchValue] = useState(''); @@ -47,25 +50,26 @@ export default () => { * Hook up the keyboard shortcut for command+k to initiate focus into search input */ useEffect(() => { - window.addEventListener('keydown', onWindowKeyDown); + const onWindowKeyUp = () => { + searchRef?.focus(); + setLoading(true); + window.removeEventListener('keyup', onWindowKeyUp); + }; - return function cleanup() { - window.removeEventListener('resize', onWindowKeyDown); + const onWindowKeyDown = (e: any) => { + if (e.metaKey && e.key.toLowerCase() === 'k') { + e.preventDefault(); + window.addEventListener('keyup', onWindowKeyUp); + } }; - }); - const onWindowKeyDown = (e: any) => { - if (e.metaKey && e.key.toLowerCase() === 'k') { - e.preventDefault(); - window.addEventListener('keyup', onWindowKeyUp); - } - }; + window.addEventListener('keydown', onWindowKeyDown); - const onWindowKeyUp = () => { - searchRef && searchRef.focus(); - setLoading(true); - window.removeEventListener('keyup', onWindowKeyUp); - }; + return () => { + window.removeEventListener('keydown', onWindowKeyDown); + window.removeEventListener('keyup', onWindowKeyUp); + }; + }, [searchRef]); const onKeyUpCapture = (e: any) => { setSearchValue(e.currentTarget.value); From 0f44ac8432ad779fe629c29f5eba224d7d1a3b03 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Fri, 22 Jul 2022 11:42:30 -0700 Subject: [PATCH 05/13] Improve singleSelection example - allow consumers to toggle between `always` and `true` to observe functional difference --- .../views/selectable/selectable_single.tsx | 33 +++++++++++++------ 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/src-docs/src/views/selectable/selectable_single.tsx b/src-docs/src/views/selectable/selectable_single.tsx index 066b0b92491..2538076208d 100644 --- a/src-docs/src/views/selectable/selectable_single.tsx +++ b/src-docs/src/views/selectable/selectable_single.tsx @@ -1,15 +1,18 @@ import React, { useState } from 'react'; import { + EuiSwitch, + EuiSpacer, EuiSelectable, EuiSelectableOption, -} from '../../../../src/components/selectable'; +} from '../../../../src/components'; export default () => { const [options, setOptions] = useState([ { label: 'Titan', 'data-test-subj': 'titanOption', + checked: 'on', }, { label: 'Enceladus is disabled', @@ -42,15 +45,25 @@ export default () => { }, ]); + const [always, setAlways] = useState(true); + return ( - setOptions(newOptions)} - singleSelection={true} - listProps={{ bordered: true }} - > - {(list) => list} - + <> + setAlways(e.target.checked)} + /> + + setOptions(newOptions)} + singleSelection={always ? 'always' : true} + listProps={{ bordered: true }} + > + {(list) => list} + + ); }; From 79d72e10a3d9dc4919dbd9a5c0f1903acc6380c3 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Fri, 22 Jul 2022 12:07:07 -0700 Subject: [PATCH 06/13] Improve snippets documentation - Remove props that are not specifically relevant to the documentation section - Move ending bracket on newline & other misc prettier syntax cleanup --- .../views/selectable/selectable_example.js | 67 ++++++++++++------- 1 file changed, 44 insertions(+), 23 deletions(-) diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index b7cba278bda..c3d29d82aa3 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -108,7 +108,8 @@ export const SelectableExample = { aria-label="Basic example" options={[{ label: '' }, { label: '' }]} onChange={newOptions => setOptions(newOptions)} - listProps={{ bordered: true }}> + listProps={{ bordered: true }} +> {list => list} `, }, @@ -151,12 +152,16 @@ export const SelectableExample = { demo: , snippet: ` setOptions(newOptions)} searchable searchProps={{ 'data-test-subj': dataTestSubj, }} - options={[]} - onChange={newOptions => setOptions(newOptions)}> +> {(list, search) => ( {search} @@ -187,13 +192,21 @@ export const SelectableExample = { ), props: { EuiSelectable }, demo: , - snippet: ` - setOptions(newOptions)} - singleSelection={true} - listProps={{ bordered: true }}> + singleSelection +> + {list => list} + + + setOptions(newOptions)} + singleSelection="always" +> {list => list} `, }, @@ -218,9 +231,10 @@ export const SelectableExample = { demo: , snippet: ` setOptions(newOptions)}> + onChange={newOptions => setOptions(newOptions)} + allowExclusions +> {list => list} `, }, @@ -253,20 +267,23 @@ export const SelectableExample = { ` + noMatchesMessage={customNoMatchesMessage} +> {list => list} `, ` - {list => isLoading ? You have no spice : list} + isLoading={isLoading} +> + {list => isLoading + ? You have no spice + : list + } `, ], }, @@ -310,6 +327,17 @@ export const SelectableExample = { }, ], props: { EuiSelectable }, + snippet: ` setOptions(newOptions)} + height="full" + listProps={{ + bordered: true, + paddingSize: 'none', + }} +> + {list => list} +`, }, { title: 'Rendering the options', @@ -386,22 +414,15 @@ export const SelectableExample = { ), demo: , snippet: ` setOptions(newOptions)} - height={240} renderOption={renderCountryOption} listProps={{ rowHeight: 50, showIcons: false, }} > - {(list, search) => ( - - {search} - {list} - - )} + {list => list} `, }, ], From bc080e3e7a45904d0187c3b788b094519722f8df Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Fri, 22 Jul 2022 12:28:40 -0700 Subject: [PATCH 07/13] Standardize props tab display - prefer to display all props, as there are links within EuiSelectable that no longer do anything if all child props aren't displayed --- .../views/selectable/selectable_example.js | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index c3d29d82aa3..b956c2d1529 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -38,6 +38,13 @@ const selectableCustomRenderSource = require('!!raw-loader!./selectable_custom_r import { EuiCallOut } from '../../../../src/components/call_out'; +const props = { + EuiSelectable, + EuiSelectableOptionProps, + EuiSelectableOptionsList, + EuiSelectableSearchProps, +}; + export const SelectableExample = { title: 'Selectable', intro: ( @@ -98,11 +105,7 @@ export const SelectableExample = { ), - props: { - EuiSelectable, - EuiSelectableOptionProps, - EuiSelectableOptionsList, - }, + props, demo: , snippet: ` ), - props: { - EuiSelectable, - EuiSelectableOptionProps, - EuiSelectableOptionsList, - EuiSelectableSearchProps, - }, + props, demo: , snippet: ` ), - props: { EuiSelectable }, + props, demo: , snippet: ` ), - props: { EuiSelectable }, + props, demo: , snippet: ` ), - props: { EuiSelectable, EuiSelectableMessage }, + props: { EuiSelectableMessage, ...props }, demo: , snippet: [ ` setOptions(newOptions)} @@ -424,6 +422,7 @@ export const SelectableExample = { > {list => list} `, + props, }, ], }; From c529cdb9e9f50e75f2ec993cb7e9198d7bc188c9 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Fri, 22 Jul 2022 12:07:55 -0700 Subject: [PATCH 08/13] Misc documentation fixes - Fix broken link - Remove random documentation copy that doesn't look like it belongs - Fix import statement --- src-docs/src/views/selectable/selectable_example.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index b956c2d1529..5562d41f3e2 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -8,6 +8,7 @@ import { EuiSelectable, EuiSelectableMessage, EuiText, + EuiCallOut, } from '../../../../src/components'; import { @@ -36,8 +37,6 @@ const selectableSizingSource = require('!!raw-loader!./selectable_sizing'); import SelectableCustomRender from './selectable_custom_render'; const selectableCustomRenderSource = require('!!raw-loader!./selectable_custom_render'); -import { EuiCallOut } from '../../../../src/components/call_out'; - const props = { EuiSelectable, EuiSelectableOptionProps, @@ -221,7 +220,6 @@ export const SelectableExample = {

Currently, adding allowExclusions simply allows cycling through the checked options (on {'-> off ->'} undefined). - Should this be allowed by holding down a modifier key instead?

), @@ -240,7 +238,7 @@ export const SelectableExample = { title: 'Messages and loading', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: selectableMessagesSource, }, ], @@ -298,7 +296,7 @@ export const SelectableExample = {

The width has been made to always be 100% of its container, including stretching the search input. When used inside of{' '} - + EuiPopover , we recommend setting a width (or min/max values) via CSS on the From 7ad7b6e96b1affcba357657036e80d6372700928 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 25 Jul 2022 15:25:01 -0700 Subject: [PATCH 09/13] [PR feedback] Just import from 'src' --- src-docs/src/views/selectable/props.tsx | 5 +---- src-docs/src/views/selectable/selectable.tsx | 5 +---- src-docs/src/views/selectable/selectable_custom_render.tsx | 2 +- src-docs/src/views/selectable/selectable_example.js | 2 +- src-docs/src/views/selectable/selectable_exclusion.tsx | 5 +---- src-docs/src/views/selectable/selectable_messages.tsx | 4 +--- src-docs/src/views/selectable/selectable_search.tsx | 5 +---- src-docs/src/views/selectable/selectable_single.tsx | 2 +- src-docs/src/views/selectable/selectable_sizing.tsx | 2 +- .../selectable/selectable_templates/sitewide_example.js | 2 +- .../selectable/selectable_templates/sitewide_option.tsx | 6 +----- .../selectable/selectable_templates/sitewide_search.tsx | 2 +- 12 files changed, 12 insertions(+), 30 deletions(-) diff --git a/src-docs/src/views/selectable/props.tsx b/src-docs/src/views/selectable/props.tsx index 428914e2fa7..eb0a39e7af0 100644 --- a/src-docs/src/views/selectable/props.tsx +++ b/src-docs/src/views/selectable/props.tsx @@ -3,12 +3,9 @@ import { EuiSelectableOption, EuiSelectableOptionsListProps, EuiSelectableSearchableSearchProps, -} from '../../../../src/components/selectable'; - -import { EuiSelectableTemplateSitewideOption, EuiSelectableTemplateSitewideMetaData, -} from '../../../../src/components/selectable/selectable_templates/selectable_template_sitewide_option'; +} from '../../../../src'; export const EuiSelectableOptionProps: FunctionComponent = () => (

diff --git a/src-docs/src/views/selectable/selectable.tsx b/src-docs/src/views/selectable/selectable.tsx index 587a0b0d7ab..316641c4c76 100644 --- a/src-docs/src/views/selectable/selectable.tsx +++ b/src-docs/src/views/selectable/selectable.tsx @@ -1,9 +1,6 @@ import React, { useState } from 'react'; -import { - EuiSelectable, - EuiSelectableOption, -} from '../../../../src/components/selectable'; +import { EuiSelectable, EuiSelectableOption } from '../../../../src'; export default () => { const [options, setOptions] = useState([ diff --git a/src-docs/src/views/selectable/selectable_custom_render.tsx b/src-docs/src/views/selectable/selectable_custom_render.tsx index 10f76d327a9..23f0759a9e3 100644 --- a/src-docs/src/views/selectable/selectable_custom_render.tsx +++ b/src-docs/src/views/selectable/selectable_custom_render.tsx @@ -8,7 +8,7 @@ import { EuiSwitch, EuiSelectable, EuiSelectableOption, -} from '../../../../src/components'; +} from '../../../../src'; const countryData = [ { code: 'NL', name: 'Netherlands', flag: '🇳🇱' }, diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index 5562d41f3e2..a3da8d8a0ad 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -9,7 +9,7 @@ import { EuiSelectableMessage, EuiText, EuiCallOut, -} from '../../../../src/components'; +} from '../../../../src'; import { EuiSelectableOptionProps, diff --git a/src-docs/src/views/selectable/selectable_exclusion.tsx b/src-docs/src/views/selectable/selectable_exclusion.tsx index 3973b0cb7ce..fc49a7d131a 100644 --- a/src-docs/src/views/selectable/selectable_exclusion.tsx +++ b/src-docs/src/views/selectable/selectable_exclusion.tsx @@ -1,9 +1,6 @@ import React, { useState } from 'react'; -import { - EuiSelectable, - EuiSelectableOption, -} from '../../../../src/components/selectable'; +import { EuiSelectable, EuiSelectableOption } from '../../../../src'; export default () => { const [options, setOptions] = useState([ diff --git a/src-docs/src/views/selectable/selectable_messages.tsx b/src-docs/src/views/selectable/selectable_messages.tsx index 35799e69d8f..b261dc7024e 100644 --- a/src-docs/src/views/selectable/selectable_messages.tsx +++ b/src-docs/src/views/selectable/selectable_messages.tsx @@ -1,8 +1,6 @@ import React, { useState, Fragment } from 'react'; -import { EuiSelectable } from '../../../../src/components/selectable'; -import { EuiSwitch } from '../../../../src/components/form/switch'; -import { EuiSpacer } from '../../../../src/components/spacer'; +import { EuiSelectable, EuiSwitch, EuiSpacer } from '../../../../src'; export default () => { const [useCustomMessage, setUseCustomMessage] = useState(false); diff --git a/src-docs/src/views/selectable/selectable_search.tsx b/src-docs/src/views/selectable/selectable_search.tsx index 9ce2a9b761d..934590f5e27 100644 --- a/src-docs/src/views/selectable/selectable_search.tsx +++ b/src-docs/src/views/selectable/selectable_search.tsx @@ -1,9 +1,6 @@ import React, { useState } from 'react'; -import { - EuiSelectable, - EuiSelectableOption, -} from '../../../../src/components/selectable'; +import { EuiSelectable, EuiSelectableOption } from '../../../../src'; export default () => { const [options, setOptions] = useState([ diff --git a/src-docs/src/views/selectable/selectable_single.tsx b/src-docs/src/views/selectable/selectable_single.tsx index 2538076208d..01348ff7b39 100644 --- a/src-docs/src/views/selectable/selectable_single.tsx +++ b/src-docs/src/views/selectable/selectable_single.tsx @@ -5,7 +5,7 @@ import { EuiSpacer, EuiSelectable, EuiSelectableOption, -} from '../../../../src/components'; +} from '../../../../src'; export default () => { const [options, setOptions] = useState([ diff --git a/src-docs/src/views/selectable/selectable_sizing.tsx b/src-docs/src/views/selectable/selectable_sizing.tsx index fa4b0cf4934..db6cb59549f 100644 --- a/src-docs/src/views/selectable/selectable_sizing.tsx +++ b/src-docs/src/views/selectable/selectable_sizing.tsx @@ -12,7 +12,7 @@ import { EuiSelectableOption, EuiSpacer, EuiTitle, -} from '../../../../src/components'; +} from '../../../../src'; export default () => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_example.js b/src-docs/src/views/selectable/selectable_templates/sitewide_example.js index 90cc2280afe..5ba5f03b162 100644 --- a/src-docs/src/views/selectable/selectable_templates/sitewide_example.js +++ b/src-docs/src/views/selectable/selectable_templates/sitewide_example.js @@ -10,7 +10,7 @@ import { EuiCodeBlock, EuiAccordion, EuiCallOut, -} from '../../../../../src/components'; +} from '../../../../../src'; import { Options, MetaData } from '../props'; diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_option.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_option.tsx index 300b3f6cf25..51417264a97 100644 --- a/src-docs/src/views/selectable/selectable_templates/sitewide_option.tsx +++ b/src-docs/src/views/selectable/selectable_templates/sitewide_option.tsx @@ -1,10 +1,6 @@ import React from 'react'; -import { - EuiPanel, - EuiAvatar, - EuiSelectableListItem, -} from '../../../../../src/components'; +import { EuiPanel, EuiAvatar, EuiSelectableListItem } from '../../../../../src'; export default () => { const props = { diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx index ce52eceff59..bd853142c55 100644 --- a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx +++ b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx @@ -9,7 +9,7 @@ import { EuiButton, EuiSelectableTemplateSitewide, EuiSelectableTemplateSitewideOption, -} from '../../../../../src/components'; +} from '../../../../../src'; export default () => { const [searchValue, setSearchValue] = useState(''); From cfe5447b0ffec5c4e6684ce5c47002003e60e6d3 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 25 Jul 2022 15:26:21 -0700 Subject: [PATCH 10/13] [PR feedback] Remove Fragment --- .../views/selectable/selectable_example.js | 34 +++++++++---------- .../views/selectable/selectable_messages.tsx | 6 ++-- .../selectable_templates/sitewide_example.js | 6 ++-- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index a3da8d8a0ad..62050d29f5f 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../components'; @@ -80,7 +80,7 @@ export const SelectableExample = { }, ], text: ( - + <>

At its simplest, EuiSelectable requires an array of{' '} options and an onChange{' '} @@ -102,7 +102,7 @@ export const SelectableExample = { when allowExclusions = false.

- + ), props, demo: , @@ -124,7 +124,7 @@ export const SelectableExample = { }, ], text: ( - + <>

To add a search component to the list, simply add the{' '} searchable prop. You can optionally pass in a{' '} @@ -143,7 +143,7 @@ export const SelectableExample = { } /> - + ), props, demo: , @@ -160,10 +160,10 @@ export const SelectableExample = { }} > {(list, search) => ( - + <> {search} {list} - + )} `, }, @@ -176,7 +176,7 @@ export const SelectableExample = { }, ], text: ( - + <>

Selection can be restricted to a single option at a time with the{' '} singleSelection prop. Passing{' '} @@ -185,7 +185,7 @@ export const SelectableExample = { option to be selected at all times. The default value is{' '} false.

- + ), props, demo: , @@ -216,12 +216,12 @@ export const SelectableExample = { }, ], text: ( - + <>

Currently, adding allowExclusions simply allows cycling through the checked options (on {'-> off ->'} undefined).

- + ), props, demo: , @@ -243,7 +243,7 @@ export const SelectableExample = { }, ], text: ( - + <>

The component comes with pre-composed messages for loading, empty, and no search result states. To display your own messages, pass{' '} @@ -255,7 +255,7 @@ export const SelectableExample = { custom message in an EuiSelectableMessage{' '} component.

- + ), props: { EuiSelectableMessage, ...props }, demo: , @@ -286,7 +286,7 @@ export const SelectableExample = { { title: 'Sizing and containers', text: ( - + <>

The component's children, list, search, are returned via the children function, which means @@ -313,7 +313,7 @@ export const SelectableExample = { you can opt in to allow the height of the list stretch to fill its container. See the flyout example.

- + ), demo: , source: [ @@ -344,7 +344,7 @@ export const SelectableExample = { }, ], text: ( - + <>

There are two object properties you can add to enhance the content of your options, option.prepend and{' '} @@ -406,7 +406,7 @@ export const SelectableExample = { listProps.rowHeight of 32px{' '} tall, you will need to pass in a custom value to this prop.

- + ), demo: , snippet: ` { const errorMessage = 'Error!'; return ( - + <> setUseCustomMessage(e.target.checked)} @@ -43,6 +43,6 @@ export default () => { > {(list) => list} - + ); }; diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_example.js b/src-docs/src/views/selectable/selectable_templates/sitewide_example.js index 5ba5f03b162..4b7b455d815 100644 --- a/src-docs/src/views/selectable/selectable_templates/sitewide_example.js +++ b/src-docs/src/views/selectable/selectable_templates/sitewide_example.js @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../../components'; @@ -42,7 +42,7 @@ export const SitewideSearchExample = { }, ], text: ( - + <>

Search input

The search ability of{' '} @@ -91,7 +91,7 @@ export const SitewideSearchExample = { the popoverButton if the window size matches named breakpoint(s).

- + ), props: { EuiSelectableTemplateSitewide, Options, MetaData }, demo: , From fc001b21dddc0f74bb44fef4564c9d42ba353f15 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 25 Jul 2022 15:31:01 -0700 Subject: [PATCH 11/13] [PR feedback] Misc snippet feedback --- src-docs/src/views/selectable/selectable_example.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index 62050d29f5f..fc135875f72 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -150,7 +150,7 @@ export const SelectableExample = { snippet: ` setOptions(newOptions)} @@ -189,16 +189,16 @@ export const SelectableExample = { ), props, demo: , - snippet: ` setOptions(newOptions)} singleSelection > {list => list} - - -`, + ` setOptions(newOptions)} @@ -206,6 +206,7 @@ export const SelectableExample = { > {list => list} `, + ], }, { title: 'Options can be excluded', @@ -263,6 +264,7 @@ export const SelectableExample = { ` Date: Mon, 25 Jul 2022 15:32:37 -0700 Subject: [PATCH 12/13] [PR feedback] Fix EuiSwitch label --- src-docs/src/views/selectable/selectable_single.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/selectable/selectable_single.tsx b/src-docs/src/views/selectable/selectable_single.tsx index 01348ff7b39..61a2819e0a6 100644 --- a/src-docs/src/views/selectable/selectable_single.tsx +++ b/src-docs/src/views/selectable/selectable_single.tsx @@ -50,7 +50,7 @@ export default () => { return ( <> setAlways(e.target.checked)} /> From f55de07807b649c1483baf566fe0d67525e324a2 Mon Sep 17 00:00:00 2001 From: Constance Date: Mon, 25 Jul 2022 15:47:31 -0700 Subject: [PATCH 13/13] [PR feedback] TSX Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- .../views/selectable/selectable_templates/sitewide_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_example.js b/src-docs/src/views/selectable/selectable_templates/sitewide_example.js index 4b7b455d815..28dd06525ca 100644 --- a/src-docs/src/views/selectable/selectable_templates/sitewide_example.js +++ b/src-docs/src/views/selectable/selectable_templates/sitewide_example.js @@ -37,7 +37,7 @@ export const SitewideSearchExample = { title: 'Basic setup', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: sitewideSearchSource, }, ],