From c92914a38156baa971c86a149ae35879f968df0e Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Thu, 14 Oct 2021 12:16:16 -0400 Subject: [PATCH] [Docs] Replace Static HTML Element IDs Generated IDs (Nav Section) (#5224) * Revised element IDs within the Accordion section of src/docs to use IDs generated the htmlIdGenerator utility function * Revised element IDs within the Accordion section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Flyout section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Header section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Header section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Header section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Modal section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Test commit * Revised element IDs within the Resizable Panel section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Resizable Panel section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Button section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Button section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Collapsible Nav section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Context Menu section of src/docs to use the useGeneratedHtmlId utility function * Revisions from PR * Revised element IDs within the Keypad and Tabs sections of src/docs to use the useGeneratedHtmlId utility function --- src-docs/src/views/button/button_group.js | 43 ++-- .../views/button/button_group_compressed.js | 28 ++- src-docs/src/views/button/split_button.js | 6 +- .../collapsible_nav/collapsible_nav_all.tsx | 209 +++++++++--------- .../src/views/context_menu/content_panel.js | 7 +- .../src/views/context_menu/context_menu.js | 20 +- .../context_menu/context_menu_with_content.js | 12 +- .../src/views/context_menu/single_panel.js | 7 +- src-docs/src/views/context_menu/small.js | 6 +- .../key_pad_menu/key_pad_menu_checkable.js | 30 ++- .../key_pad_menu_checkable_multi.js | 19 +- .../key_pad_menu/key_pad_menu_item_button.js | 58 +++-- src-docs/src/views/tabs/tabs_flyout.tsx | 8 +- src-docs/src/views/tabs/tabs_small.tsx | 4 +- 14 files changed, 290 insertions(+), 167 deletions(-) diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js index 3766e4a815e..f6b8d0fded4 100644 --- a/src-docs/src/views/button/button_group.js +++ b/src-docs/src/views/button/button_group.js @@ -6,61 +6,72 @@ import { EuiTitle, } from '../../../../src/components'; -import { htmlIdGenerator } from '../../../../src/services'; - -const idPrefix = htmlIdGenerator()(); -const idPrefix2 = htmlIdGenerator()(); +import { useGeneratedHtmlId } from '../../../../src/services'; export default () => { + const basicButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'basicButtonGroup', + }); + const multiSelectButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'multiSelectButtonGroup', + }); + const disabledButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'disabledButtonGroup', + }); + const toggleButtons = [ { - id: `${idPrefix}0`, + id: `${basicButtonGroupPrefix}__0`, label: 'Option one', }, { - id: `${idPrefix}1`, + id: `${basicButtonGroupPrefix}__1`, label: 'Option two is selected by default', }, { - id: `${idPrefix}2`, + id: `${basicButtonGroupPrefix}__2`, label: 'Option three', }, ]; const toggleButtonsDisabled = [ { - id: `${idPrefix}3`, + id: `${disabledButtonGroupPrefix}__0`, label: 'Option one', }, { - id: `${idPrefix}4`, + id: `${disabledButtonGroupPrefix}__1`, label: 'Option two is selected by default', }, { - id: `${idPrefix}5`, + id: `${disabledButtonGroupPrefix}__2`, label: 'Option three', }, ]; const toggleButtonsMulti = [ { - id: `${idPrefix2}0`, + id: `${multiSelectButtonGroupPrefix}__0`, label: 'Option 1', }, { - id: `${idPrefix2}1`, + id: `${multiSelectButtonGroupPrefix}__1`, label: 'Option 2 is selected by default', }, { - id: `${idPrefix2}2`, + id: `${multiSelectButtonGroupPrefix}__2`, label: 'Option 3', }, ]; - const [toggleIdSelected, setToggleIdSelected] = useState(`${idPrefix}1`); - const [toggleIdDisabled, setToggleIdDisabled] = useState(`${idPrefix}4`); + const [toggleIdSelected, setToggleIdSelected] = useState( + `${basicButtonGroupPrefix}__1` + ); + const [toggleIdDisabled, setToggleIdDisabled] = useState( + `${disabledButtonGroupPrefix}__1` + ); const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({ - [`${idPrefix2}1`]: true, + [`${multiSelectButtonGroupPrefix}__1`]: true, }); const onChange = (optionId) => { diff --git a/src-docs/src/views/button/button_group_compressed.js b/src-docs/src/views/button/button_group_compressed.js index 1f18f82e351..6cd55c890ee 100644 --- a/src-docs/src/views/button/button_group_compressed.js +++ b/src-docs/src/views/button/button_group_compressed.js @@ -6,49 +6,53 @@ import { EuiPanel, } from '../../../../src/components'; -import { htmlIdGenerator } from '../../../../src/services'; - -const idPrefix2 = htmlIdGenerator()(); -const idPrefix3 = htmlIdGenerator()(); +import { useGeneratedHtmlId } from '../../../../src/services'; export default () => { + const compressedToggleButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'compressedToggleButtonGroup', + }); + const multiSelectButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'multiSelectButtonGroup', + }); + const toggleButtonsCompressed = [ { - id: `${idPrefix2}3`, + id: `${compressedToggleButtonGroupPrefix}__0`, label: 'fine', }, { - id: `${idPrefix2}4`, + id: `${compressedToggleButtonGroupPrefix}__1`, label: 'rough', }, { - id: `${idPrefix2}5`, + id: `${compressedToggleButtonGroupPrefix}__2`, label: 'coarse', }, ]; const toggleButtonsIconsMulti = [ { - id: `${idPrefix3}3`, + id: `${multiSelectButtonGroupPrefix}__0`, label: 'Bold', name: 'bold', iconType: 'editorBold', }, { - id: `${idPrefix3}4`, + id: `${multiSelectButtonGroupPrefix}__1`, label: 'Italic', name: 'italic', iconType: 'editorItalic', isDisabled: true, }, { - id: `${idPrefix3}5`, + id: `${multiSelectButtonGroupPrefix}__2`, label: 'Underline', name: 'underline', iconType: 'editorUnderline', }, { - id: `${idPrefix3}6`, + id: `${multiSelectButtonGroupPrefix}__3`, label: 'Strikethrough', name: 'strikethrough', iconType: 'editorStrike', @@ -60,7 +64,7 @@ export default () => { setToggleIconIdToSelectedMapIcon, ] = useState({}); const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState( - `${idPrefix2}4` + `${compressedToggleButtonGroupPrefix}__1` ); const onChangeCompressed = (optionId) => { diff --git a/src-docs/src/views/button/split_button.js b/src-docs/src/views/button/split_button.js index d813de7f6d1..61c6519a37c 100644 --- a/src-docs/src/views/button/split_button.js +++ b/src-docs/src/views/button/split_button.js @@ -9,9 +9,13 @@ import { EuiContextMenuItem, EuiPopover, } from '../../../../src/components'; +import { useGeneratedHtmlId } from '../../../../src/services'; export default () => { const [isPopoverOpen, setPopover] = useState(false); + const splitButtonPopoverId = useGeneratedHtmlId({ + prefix: 'splitButtonPopover', + }); const onButtonClick = () => { setPopover(!isPopoverOpen); @@ -43,7 +47,7 @@ export default () => { { return `Unpin ${listItem.label}`; } - const collapsibleNav = ( - setNavIsOpen(!navIsOpen)} - > - + + ); + }; const leftSectionItems = [ collapsibleNav, diff --git a/src-docs/src/views/context_menu/content_panel.js b/src-docs/src/views/context_menu/content_panel.js index 8c1335874d5..fec20bd20ec 100644 --- a/src-docs/src/views/context_menu/content_panel.js +++ b/src-docs/src/views/context_menu/content_panel.js @@ -6,8 +6,13 @@ import { EuiPopover, } from '../../../../src/components'; +import { useGeneratedHtmlId } from '../../../../src/services'; + export default () => { const [isPopoverOpen, setPopover] = useState(false); + const customContextMenuPopoverId = useGeneratedHtmlId({ + prefix: 'customContextMenuPopover', + }); const onButtonClick = () => { setPopover(!isPopoverOpen); @@ -30,7 +35,7 @@ export default () => { return ( { const [isPopoverOpen, setPopover] = useState(false); + const embeddedCodeSwitchId__1 = useGeneratedHtmlId({ + prefix: 'embeddedCodeSwitch', + suffix: 'first', + }); + const embeddedCodeSwitchId__2 = useGeneratedHtmlId({ + prefix: 'embeddedCodeSwitch', + suffix: 'second', + }); + const contextMenuPopoverId = useGeneratedHtmlId({ + prefix: 'contextMenuPopover', + }); + const onButtonClick = () => { setPopover(!isPopoverOpen); }; @@ -108,7 +122,7 @@ export default () => { {}} @@ -120,7 +134,7 @@ export default () => { > {}} @@ -141,7 +155,7 @@ export default () => { return ( { const [isPopoverOpen, setPopover] = useState(false); const [isDynamicPopoverOpen, setDynamicPopover] = useState(false); + const normalContextMenuPopoverId = useGeneratedHtmlId({ + prefix: 'normalContextMenuPopover', + }); + const dynamicContextMenuPopoverId = useGeneratedHtmlId({ + prefix: 'dynamicContextMenuPopover', + }); + const onButtonClick = () => { setPopover(!isPopoverOpen); }; @@ -112,7 +120,7 @@ export default () => { return ( { { const [isPopoverOpen, setPopover] = useState(false); const [rowSize, setRowSize] = useState(50); + const singleContextMenuPopoverId = useGeneratedHtmlId({ + prefix: 'singleContextMenuPopover', + }); + const onButtonClick = () => { setPopover(!isPopoverOpen); }; @@ -79,7 +84,7 @@ export default () => { return ( { const [isPopoverOpen, setPopover] = useState(false); + const smallContextMenuPopoverId = useGeneratedHtmlId({ + prefix: 'smallContextMenuPopover', + }); const onButtonClick = () => { setPopover(!isPopoverOpen); @@ -38,7 +42,7 @@ export default () => { return ( { - const radioGroupName = 'singleKeypadSelect'; + const radioGroupName = useGeneratedHtmlId({ prefix: 'radioGroup' }); + + const keypadRadioButtonId__1 = useGeneratedHtmlId({ + prefix: 'keypadRadioButton', + suffix: 'first', + }); + const keypadRadioButtonId__2 = useGeneratedHtmlId({ + prefix: 'keypadRadioButton', + suffix: 'second', + }); + const keypadRadioButtonId__3 = useGeneratedHtmlId({ + prefix: 'keypadRadioButton', + suffix: 'third', + }); + const [singleSelectedID, setSingleSelectedID] = useState( - 'singleKeypadSelect1' + keypadRadioButtonId__1 ); return ( @@ -17,31 +33,31 @@ export default () => { { setSingleSelectedID(id); }} - isSelected={singleSelectedID === 'singleKeypadSelect1'} + isSelected={singleSelectedID === keypadRadioButtonId__1} > { setSingleSelectedID(id); }} - isSelected={singleSelectedID === 'singleKeypadSelect2'} + isSelected={singleSelectedID === keypadRadioButtonId__2} > diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js b/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js index 43b3712a54c..7d710475215 100644 --- a/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js +++ b/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js @@ -5,8 +5,22 @@ import { EuiKeyPadMenu, EuiKeyPadMenuItem, } from '../../../../src/components'; +import { useGeneratedHtmlId } from '../../../../src/services'; export default () => { + const keypadMultiSelectButtonId__1 = useGeneratedHtmlId({ + prefix: 'keypadMultiSelectButton', + suffix: 'first', + }); + const keypadMultiSelectButtonId__2 = useGeneratedHtmlId({ + prefix: 'keypadMultiSelectButton', + suffix: 'second', + }); + const keypadMultiSelectButtonId__3 = useGeneratedHtmlId({ + prefix: 'keypadMultiSelectButton', + suffix: 'third', + }); + const [multiSelect1isSelected, setmultiSelect1isSelected] = useState(true); const [multiSelect3isSelected, setmultiSelect2isSelected] = useState(false); @@ -15,6 +29,7 @@ export default () => { { setmultiSelect1isSelected((selected) => !selected); @@ -25,7 +40,7 @@ export default () => { { setmultiSelect2isSelected((selected) => !selected); @@ -35,7 +50,7 @@ export default () => { diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js b/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js index 180d3954da8..c1166921f81 100644 --- a/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js +++ b/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js @@ -5,54 +5,80 @@ import { EuiKeyPadMenu, EuiKeyPadMenuItem, } from '../../../../src/components'; +import { useGeneratedHtmlId } from '../../../../src/services'; export default () => { - const [selectedID, setSelectedID] = useState('keypadButton6'); + const keypadButtonId__1 = useGeneratedHtmlId({ + prefix: 'keypadButton', + suffix: 'first', + }); + const keypadButtonId__2 = useGeneratedHtmlId({ + prefix: 'keypadButton', + suffix: 'second', + }); + const keypadButtonId__3 = useGeneratedHtmlId({ + prefix: 'keypadButton', + suffix: 'third', + }); + const keypadButtonId__4 = useGeneratedHtmlId({ + prefix: 'keypadButton', + suffix: 'fourth', + }); + const keypadButtonId__5 = useGeneratedHtmlId({ + prefix: 'keypadButton', + suffix: 'fifth', + }); + const keypadButtonId__6 = useGeneratedHtmlId({ + prefix: 'keypadButton', + suffix: 'sixth', + }); + + const [selectedID, setSelectedID] = useState(keypadButtonId__6); return ( setSelectedID('keypadButton1')} + isSelected={selectedID === keypadButtonId__1} + onClick={() => setSelectedID(keypadButtonId__1)} > setSelectedID('keypadButton3')} + isSelected={selectedID === keypadButtonId__2} + onClick={() => setSelectedID(keypadButtonId__2)} > - + setSelectedID('keypadButton4')} + isSelected={selectedID === keypadButtonId__4} + onClick={() => setSelectedID(keypadButtonId__4)} > setSelectedID('keypadButton5')} + isSelected={selectedID === keypadButtonId__5} + onClick={() => setSelectedID(keypadButtonId__5)} > diff --git a/src-docs/src/views/tabs/tabs_flyout.tsx b/src-docs/src/views/tabs/tabs_flyout.tsx index 11d858bc945..f79bdbd929f 100644 --- a/src-docs/src/views/tabs/tabs_flyout.tsx +++ b/src-docs/src/views/tabs/tabs_flyout.tsx @@ -15,10 +15,14 @@ import { EuiText, EuiTitle, } from '../../../../src/components'; +import { useGeneratedHtmlId } from '../../../../src/services'; export default () => { const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); const [selectedTabId, setSelectedTabId] = useState('1'); + const complicatedFlyoutTitleId = useGeneratedHtmlId({ + prefix: 'complicatedFlyoutTitle', + }); const tabs = [ { @@ -54,11 +58,11 @@ export default () => { -

Flyout header

+

Flyout header

 diff --git a/src-docs/src/views/tabs/tabs_small.tsx b/src-docs/src/views/tabs/tabs_small.tsx index d59712e1aab..286f30ae5e7 100644 --- a/src-docs/src/views/tabs/tabs_small.tsx +++ b/src-docs/src/views/tabs/tabs_small.tsx @@ -8,6 +8,7 @@ import { EuiPopover, EuiSpacer, } from '../../../../src/components'; +import { useGeneratedHtmlId } from '../../../../src/services'; const tabs = [ { @@ -31,6 +32,7 @@ const tabs = [ export default () => { const [isPopoverOpen, setPopover] = useState(false); const [selectedTabId, setSelectedTabId] = useState('cobalt'); + const contentPopoverId = useGeneratedHtmlId({ prefix: 'contentPopover' }); const onSelectedTabChanged = (id: string) => { setSelectedTabId(id); @@ -66,7 +68,7 @@ export default () => { return (