diff --git a/src-docs/src/views/accordion/accordion.js b/src-docs/src/views/accordion/accordion.js
index c1aeba08ff5..c4d75a96e03 100644
--- a/src-docs/src/views/accordion/accordion.js
+++ b/src-docs/src/views/accordion/accordion.js
@@ -1,13 +1,18 @@
import React from 'react';
import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
-export default () => (
-
-
-
- Any content inside of EuiAccordion will appear here.
-
-
-
-);
+export default () => {
+ const simpleAccordionId = useGeneratedHtmlId({ prefix: 'simpleAccordion' });
+
+ return (
+
+
+
+ Any content inside of EuiAccordion will appear here.
+
+
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_arrow.js b/src-docs/src/views/accordion/accordion_arrow.js
index 4a1348ce062..afbee5f3d7d 100644
--- a/src-docs/src/views/accordion/accordion_arrow.js
+++ b/src-docs/src/views/accordion/accordion_arrow.js
@@ -1,15 +1,20 @@
import React from 'react';
import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
-export default () => (
-
-
- Any content inside of EuiAccordion will appear here.
-
-
-);
+export default () => {
+ const noArrowAccordionId = useGeneratedHtmlId({ prefix: 'noArrowAccordion' });
+
+ return (
+
+
+ Any content inside of EuiAccordion will appear here.
+
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_arrow_right.js b/src-docs/src/views/accordion/accordion_arrow_right.js
index 09cab3b0a18..55928f2abbc 100644
--- a/src-docs/src/views/accordion/accordion_arrow_right.js
+++ b/src-docs/src/views/accordion/accordion_arrow_right.js
@@ -1,15 +1,22 @@
import React from 'react';
import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
-export default () => (
-
-
- Any content inside of EuiAccordion will appear here.
-
-
-);
+export default () => {
+ const rightArrowAccordionId = useGeneratedHtmlId({
+ prefix: 'rightArrowAccordion',
+ });
+
+ return (
+
+
+ Any content inside of EuiAccordion will appear here.
+
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
index 4ed9ad196ae..61d79ab3d58 100644
--- a/src-docs/src/views/accordion/accordion_example.js
+++ b/src-docs/src/views/accordion/accordion_example.js
@@ -18,14 +18,14 @@ const accordionArrowRightSource = require('!!raw-loader!./accordion_arrow_right'
import AccordionMultiple from './accordion_multiple';
const accordionMultipleSource = require('!!raw-loader!./accordion_multiple');
const accordionMultipleSnippet = `
@@ -73,13 +73,13 @@ import AccordionIsLoading from './accordion_isLoading';
const accordionIsLoadingSource = require('!!raw-loader!./accordion_isLoading');
const accordionIsLoadingSnippet = [
`
`,
`
@@ -135,7 +135,7 @@ export const AccordionExample = {
playground: accordionConfig,
props: { EuiAccordion },
snippet: `
@@ -163,7 +163,7 @@ export const AccordionExample = {
],
demo: ,
snippet: `
@@ -180,7 +180,7 @@ export const AccordionExample = {
],
demo: ,
snippet: `
@@ -362,7 +362,7 @@ export const AccordionExample = {
),
demo: ,
snippet: ` (
-
-);
+export default () => {
+ const extraActionAccordionId = useGeneratedHtmlId({
+ prefix: 'extraActionAccordion',
+ });
+
+ return (
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js
index ca470d2fb1d..8e221e30637 100644
--- a/src-docs/src/views/accordion/accordion_forceState.js
+++ b/src-docs/src/views/accordion/accordion_forceState.js
@@ -6,11 +6,14 @@ import {
EuiButtonGroup,
EuiSpacer,
} from '../../../../src/components';
-import { htmlIdGenerator } from '../../../../src/services';
+import { htmlIdGenerator, useGeneratedHtmlId } from '../../../../src/services';
const idPrefix = htmlIdGenerator()();
export default () => {
+ const forcedStateAccordionId = useGeneratedHtmlId({
+ prefix: 'forcedStateAccordion',
+ });
const [trigger, setTrigger] = useState('closed');
const [toggleIdSelected, setID] = useState(`${idPrefix}--closed`);
const toggleButtons = [
@@ -45,7 +48,7 @@ export default () => {
/>
@@ -77,28 +78,39 @@ const extraAction = (
/>
);
-export default () => (
-
-
- {repeatableForm}
-
+export default () => {
+ const formAccordionId__1 = useGeneratedHtmlId({
+ prefix: 'formAccordion',
+ suffix: 'first',
+ });
+ const formAccordionId__2 = useGeneratedHtmlId({
+ prefix: 'formAccordion',
+ suffix: 'second',
+ });
-
- {repeatableForm}
-
-
-);
+ return (
+
+
+ {repeatableForm}
+
+
+
+ {repeatableForm}
+
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_grow.js b/src-docs/src/views/accordion/accordion_grow.js
index 473eba0d2a0..6e8a990a4d3 100644
--- a/src-docs/src/views/accordion/accordion_grow.js
+++ b/src-docs/src/views/accordion/accordion_grow.js
@@ -8,7 +8,7 @@ import {
EuiScreenReaderOnly,
} from '../../../../src/components';
import { EuiPanel } from '../../../../src/components/panel';
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
const Rows = () => {
const [counter, setCounter] = useState(1);
@@ -16,8 +16,10 @@ const Rows = () => {
for (let i = 1; i <= counter; i++) {
rows.push(Row {i});
}
- const growingAccordianDescriptionId = htmlIdGenerator()();
- const listId = htmlIdGenerator()();
+ const growingAccordianDescriptionId = useGeneratedHtmlId({
+ prefix: 'growingAccordianDescription',
+ });
+ const listId = useGeneratedHtmlId({ prefix: 'list' });
return (
@@ -52,15 +54,19 @@ const Rows = () => {
);
};
-export default () => (
-
-
-
-
-
-);
+export default () => {
+ const dynamicAccordionId = useGeneratedHtmlId({ prefix: 'dynamicAccordion' });
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_isLoading.js b/src-docs/src/views/accordion/accordion_isLoading.js
index d9e8a76c2bd..b5474e99588 100644
--- a/src-docs/src/views/accordion/accordion_isLoading.js
+++ b/src-docs/src/views/accordion/accordion_isLoading.js
@@ -9,7 +9,7 @@ import {
} from '../../../../src/components';
import { EuiFormRow } from '../../../../src/components/form';
-import { htmlIdGenerator } from '../../../../src/services';
+import { htmlIdGenerator, useGeneratedHtmlId } from '../../../../src/services';
const idPrefix = htmlIdGenerator()();
@@ -31,6 +31,9 @@ const toggleButtons = [
export default () => {
const [label, setLabel] = useState('False');
const [toggleIdSelected, setToggleIdSelected] = useState(`${idPrefix}0`);
+ const isLoadingAccordionId = useGeneratedHtmlId({
+ prefix: 'isLoadingAccordion',
+ });
const onChange = (optionId) => {
setToggleIdSelected(optionId);
@@ -64,7 +67,7 @@ export default () => {
(
-
-
-
- The content inside can be of any height.
- The content inside can be of any height.
- The content inside can be of any height.
-
-
+export default () => {
+ const multipleAccordionsId__1 = useGeneratedHtmlId({
+ prefix: 'multipleAccordions',
+ suffix: 'first',
+ });
+ const multipleAccordionsId__2 = useGeneratedHtmlId({
+ prefix: 'multipleAccordions',
+ suffix: 'second',
+ });
+ const multipleAccordionsId__3 = useGeneratedHtmlId({
+ prefix: 'multipleAccordions',
+ suffix: 'third',
+ });
+ const multipleAccordionsId__4 = useGeneratedHtmlId({
+ prefix: 'multipleAccordions',
+ suffix: 'fourth',
+ });
-
+ return (
+
+
+
+ The content inside can be of any height.
+ The content inside can be of any height.
+ The content inside can be of any height.
+
+
-
-
- The content inside can be of any height.
- The content inside can be of any height.
- The content inside can be of any height.
- The content inside can be of any height.
- The content inside can be of any height.
- The content inside can be of any height.
-
-
+
-
+
+
+ The content inside can be of any height.
+ The content inside can be of any height.
+ The content inside can be of any height.
+ The content inside can be of any height.
+ The content inside can be of any height.
+ The content inside can be of any height.
+
+
-
-
-
- This content area will grow to accommodate when the accordion below
- opens
-
-
-
-
- Any content inside of EuiAccordion will appear here.
-
+
+
+
+
+ This content area will grow to accommodate when the accordion below
+ opens
+
+
+
+
+
+ Any content inside of EuiAccordion will appear
+ here.
+
+
-
-
-);
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_open.js b/src-docs/src/views/accordion/accordion_open.js
index 8177e895a61..b41f74c6f37 100644
--- a/src-docs/src/views/accordion/accordion_open.js
+++ b/src-docs/src/views/accordion/accordion_open.js
@@ -1,18 +1,22 @@
import React from 'react';
import { EuiAccordion, EuiPanel } from '../../../../src/components';
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
-export default () => (
-
-
-
- Any content inside of EuiAccordion will appear here.
-
-
-
-);
+export default () => {
+ const openAccordionId = useGeneratedHtmlId({ prefix: 'openAccordion' });
+
+ return (
+
+
+
+ Any content inside of EuiAccordion will appear here.
+
+
+
+ );
+};
diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js
index 596b41594dd..2c1d0241801 100644
--- a/src-docs/src/views/flyout/flyout.js
+++ b/src-docs/src/views/flyout/flyout.js
@@ -10,8 +10,13 @@ import {
EuiCodeBlock,
} from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
+
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+ const simpleFlyoutTitleId = useGeneratedHtmlId({
+ prefix: 'simpleFlyoutTitle',
+ });
let flyout;
@@ -32,11 +37,11 @@ export default () => {
setIsFlyoutVisible(false)}
- aria-labelledby="flyoutTitle"
+ aria-labelledby={simpleFlyoutTitleId}
>
- A typical flyout
+ A typical flyout
diff --git a/src-docs/src/views/flyout/flyout_banner.js b/src-docs/src/views/flyout/flyout_banner.js
index 5874a43706d..18933e4fa7e 100644
--- a/src-docs/src/views/flyout/flyout_banner.js
+++ b/src-docs/src/views/flyout/flyout_banner.js
@@ -11,9 +11,13 @@ import {
EuiTitle,
} from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
+
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-
+ const bannerFlyoutTitleId = useGeneratedHtmlId({
+ prefix: 'bannerFlyoutTitle',
+ });
const closeFlyout = () => setIsFlyoutVisible(false);
const showFlyout = () => setIsFlyoutVisible(true);
@@ -34,11 +38,11 @@ export default () => {
- A flyout with a banner
+ A flyout with a banner
diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js
index de76084edb5..441da9a8010 100644
--- a/src-docs/src/views/flyout/flyout_complicated.js
+++ b/src-docs/src/views/flyout/flyout_complicated.js
@@ -24,12 +24,17 @@ import {
EuiSuperSelect,
} from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
+
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const [selectedTabId, setSelectedTabId] = useState('1');
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [superSelectvalue, setSuperSelectValue] = useState('option_one');
const [isExpressionOpen, setIsExpressionOpen] = useState(false);
+ const complicatedFlyoutTitleId = useGeneratedHtmlId({
+ prefix: 'complicatedFlyoutTitle',
+ });
const tabs = [
{
@@ -184,11 +189,11 @@ export default () => {
ownFocus
onClose={closeFlyout}
hideCloseButton
- aria-labelledby="flyoutComplicatedTitle"
+ aria-labelledby={complicatedFlyoutTitleId}
>
- Flyout header
+ Flyout header
diff --git a/src-docs/src/views/flyout/flyout_large.js b/src-docs/src/views/flyout/flyout_large.js
index f9d2fc007d3..d6bd1bdbf25 100644
--- a/src-docs/src/views/flyout/flyout_large.js
+++ b/src-docs/src/views/flyout/flyout_large.js
@@ -10,10 +10,13 @@ import {
EuiButtonGroup,
} from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
+
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const [size, setSize] = useState('l');
const [sizeName, setSizeName] = useState('large');
+ const largeFlyoutTitleId = useGeneratedHtmlId({ prefix: 'largeFlyoutTitle' });
const sizes = [
{
@@ -45,11 +48,11 @@ export default () => {
ownFocus
onClose={closeFlyout}
size={size}
- aria-labelledby="flyoutLargeTitle"
+ aria-labelledby={largeFlyoutTitleId}
>
- A {sizeName.toLowerCase()} flyout
+ A {sizeName.toLowerCase()} flyout
diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js
index be304813d87..80db2a0c417 100644
--- a/src-docs/src/views/flyout/flyout_max_width.js
+++ b/src-docs/src/views/flyout/flyout_max_width.js
@@ -15,11 +15,18 @@ import {
EuiSelect,
EuiSpacer,
} from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const [flyoutSize, setFlyoutSize] = useState('m');
const [flyoutMaxWidth, setFlyoutMaxWidth] = useState(false);
+ const maxWidthFlyoutTitleId = useGeneratedHtmlId({
+ prefix: 'maxWidthFlyoutTitle',
+ });
+ const maxWidthFlyoutRangeId = useGeneratedHtmlId({
+ prefix: 'maxWidthFlyoutRange',
+ });
const closeFlyout = () => setIsFlyoutVisible(false);
@@ -49,13 +56,13 @@ export default () => {
- {maxWidthTitle} maxWidth
+ {maxWidthTitle} maxWidth
@@ -93,7 +100,12 @@ export default () => {
-
+
diff --git a/src-docs/src/views/flyout/flyout_padding_medium.js b/src-docs/src/views/flyout/flyout_padding_medium.js
index a422475702f..7c7d1561925 100644
--- a/src-docs/src/views/flyout/flyout_padding_medium.js
+++ b/src-docs/src/views/flyout/flyout_padding_medium.js
@@ -15,10 +15,18 @@ import {
EuiTitle,
} from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
+
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const [paddingSize, setPaddingSize] = useState('l');
const [paddingSizeName, setPaddingSizeName] = useState('large');
+ const mediumPaddingFlyoutTitleId = useGeneratedHtmlId({
+ prefix: 'mediumPaddingFlyoutTitle',
+ });
+ const mediumPaddingFlyoutId = useGeneratedHtmlId({
+ prefix: 'mediumPaddingFlyout',
+ });
const sizes = [
{
@@ -56,12 +64,12 @@ export default () => {
ownFocus
onClose={closeFlyout}
paddingSize={paddingSize}
- id="flyoutMediumPadding"
- aria-labelledby="flyoutMediumPaddingTitle"
+ id={mediumPaddingFlyoutId}
+ aria-labelledby={mediumPaddingFlyoutTitleId}
>
-
+
A flyout with a {paddingSizeName} padding
diff --git a/src-docs/src/views/flyout/flyout_push.js b/src-docs/src/views/flyout/flyout_push.js
index 2a715b909b9..3e6896e4915 100644
--- a/src-docs/src/views/flyout/flyout_push.js
+++ b/src-docs/src/views/flyout/flyout_push.js
@@ -9,10 +9,13 @@ import {
EuiTitle,
EuiFlyoutFooter,
} from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-
+ const pushedFlyoutTitleId = useGeneratedHtmlId({
+ prefix: 'pushedFlyoutTitle',
+ });
let flyout;
if (isFlyoutVisible) {
@@ -21,11 +24,11 @@ export default () => {
type="push"
size="s"
onClose={() => setIsFlyoutVisible(false)}
- aria-labelledby="pushedFlyoutTitle"
+ aria-labelledby={pushedFlyoutTitleId}
>
- A pushed flyout
+ A pushed flyout
diff --git a/src-docs/src/views/flyout/flyout_small.js b/src-docs/src/views/flyout/flyout_small.js
index 16f5813d0f7..f170752727d 100644
--- a/src-docs/src/views/flyout/flyout_small.js
+++ b/src-docs/src/views/flyout/flyout_small.js
@@ -8,7 +8,7 @@ import {
EuiText,
EuiTitle,
} from '../../../../src/components';
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
@@ -17,7 +17,9 @@ export default () => {
const toggleFlyout = () => setIsFlyoutVisible((isVisible) => !isVisible);
- const flyoutTitleId = htmlIdGenerator('flyout')();
+ const withoutFocusFlyoutTitleId = useGeneratedHtmlId({
+ prefix: 'withoutFocusFlyoutTitle',
+ });
let flyout;
if (isFlyoutVisible) {
@@ -25,11 +27,11 @@ export default () => {
- A flyout without ownFocus
+ A flyout without ownFocus
diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js
index 58c5b2d38d8..391887eda30 100644
--- a/src-docs/src/views/header/header.js
+++ b/src-docs/src/views/header/header.js
@@ -25,7 +25,7 @@ import {
EuiSpacer,
EuiText,
} from '../../../../src/components';
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
export default () => {
const renderLogo = () => (
@@ -136,7 +136,9 @@ export default () => {
};
const HeaderUserMenu = () => {
- const id = htmlIdGenerator()();
+ const headerUserPopoverId = useGeneratedHtmlId({
+ prefix: 'headerUserPopover',
+ });
const [isOpen, setIsOpen] = useState(false);
const onMenuButtonClick = () => {
@@ -149,7 +151,7 @@ const HeaderUserMenu = () => {
const button = (
{
return (
{
};
const HeaderSpacesMenu = () => {
- const id = htmlIdGenerator()();
+ const headerSpacesPopoverId = useGeneratedHtmlId({
+ prefix: 'headerSpacesPopover',
+ });
const spacesValues = [
{
label: 'Sales team',
@@ -276,7 +280,7 @@ const HeaderSpacesMenu = () => {
const button = (
{
return (
{
};
const HeaderAppMenu = () => {
- const idGenerator = htmlIdGenerator();
- const popoverId = idGenerator('popover');
- const keypadId = idGenerator('keypad');
+ const headerAppPopoverId = useGeneratedHtmlId({ prefix: 'headerAppPopover' });
+ const headerAppKeyPadMenuId = useGeneratedHtmlId({
+ prefix: 'headerAppKeyPadMenu',
+ });
const [isOpen, setIsOpen] = useState(false);
@@ -350,7 +355,7 @@ const HeaderAppMenu = () => {
const button = (
{
return (
-
+