diff --git a/src-docs/src/views/accordion/accordion.js b/src-docs/src/views/accordion/accordion.js
index c1aeba08ff5..134ec7e1eeb 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 { htmlIdGenerator } from '../../../../src/services';
-export default () => (
-
-
-
- Any content inside of EuiAccordion will appear here.
-
-
-
-);
+export default () => {
+ const accordionID = htmlIdGenerator('accordion')();
+
+ 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 1308506500e..704ca0b3672 100644
--- a/src-docs/src/views/accordion/accordion_arrow.js
+++ b/src-docs/src/views/accordion/accordion_arrow.js
@@ -1,14 +1,19 @@
import React from 'react';
import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
-export default () => (
-
-
- Any content inside of EuiAccordion will appear here.
-
-
-);
+export default () => {
+ const accordionID = htmlIdGenerator('accordion')();
+
+ 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 c063cef8b04..fcb6dc7800f 100644
--- a/src-docs/src/views/accordion/accordion_arrow_right.js
+++ b/src-docs/src/views/accordion/accordion_arrow_right.js
@@ -1,14 +1,19 @@
import React from 'react';
import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
-export default () => (
-
-
- Any content inside of EuiAccordion will appear here.
-
-
-);
+export default () => {
+ const accordionID = htmlIdGenerator('accordion')();
+
+ return (
+
+
+ Any content inside of EuiAccordion will appear here.
+
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_extra.js b/src-docs/src/views/accordion/accordion_extra.js
index 45001259fba..1a5daf9aba2 100644
--- a/src-docs/src/views/accordion/accordion_extra.js
+++ b/src-docs/src/views/accordion/accordion_extra.js
@@ -1,13 +1,18 @@
import React from 'react';
import { EuiAccordion, EuiButton } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
-export default () => (
-
-);
+export default () => {
+ const accordionID = htmlIdGenerator('accordion')();
+
+ return (
+ Extra action!}
+ paddingSize="l">
+ Opened content.
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js
index b7eae17e9de..e0cf3c25860 100644
--- a/src-docs/src/views/accordion/accordion_forceState.js
+++ b/src-docs/src/views/accordion/accordion_forceState.js
@@ -35,6 +35,8 @@ export default () => {
setID(`${idPrefix}--${newState}`);
};
+ const accordionID = htmlIdGenerator('accordion')();
+
return (
{
/>
@@ -76,26 +77,31 @@ const extraAction = (
/>
);
-export default () => (
-
-
- {repeatableForm}
-
+export default () => {
+ const accordionID__1 = htmlIdGenerator('accordion')();
+ const accordionID__2 = htmlIdGenerator('accordion')();
-
- {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 98a033d3348..8cbc0bfccf7 100644
--- a/src-docs/src/views/accordion/accordion_grow.js
+++ b/src-docs/src/views/accordion/accordion_grow.js
@@ -18,6 +18,7 @@ const Rows = () => {
}
const growingAccordianDescriptionId = htmlIdGenerator()();
const listId = htmlIdGenerator()();
+
return (
@@ -50,14 +51,18 @@ const Rows = () => {
);
};
-export default () => (
-
-
-
-
-
-);
+export default () => {
+ const accordionID = htmlIdGenerator('accordion')();
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/src-docs/src/views/accordion/accordion_multiple.js b/src-docs/src/views/accordion/accordion_multiple.js
index 0d801cfec29..b1b7178a84d 100644
--- a/src-docs/src/views/accordion/accordion_multiple.js
+++ b/src-docs/src/views/accordion/accordion_multiple.js
@@ -6,55 +6,63 @@ import {
EuiSpacer,
EuiPanel,
} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
-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 accordionID__1 = htmlIdGenerator('accordion')();
+ const accordionID__2 = htmlIdGenerator('accordion')();
+ const accordionID__3 = htmlIdGenerator('accordion')();
-
+ 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 407b79fddf3..20074c8a233 100644
--- a/src-docs/src/views/accordion/accordion_open.js
+++ b/src-docs/src/views/accordion/accordion_open.js
@@ -3,15 +3,19 @@ import React from 'react';
import { EuiAccordion, EuiPanel } from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';
-export default () => (
-
-
-
- Any content inside of EuiAccordion will appear here.
-
-
-
-);
+export default () => {
+ const accordionID = htmlIdGenerator('accordion')();
+
+ return (
+
+
+
+ Any content inside of EuiAccordion will appear here.
+
+
+
+ );
+};
diff --git a/src-docs/src/views/button/split_button.js b/src-docs/src/views/button/split_button.js
index 3fe88a99fc1..9b6e8cdf18d 100644
--- a/src-docs/src/views/button/split_button.js
+++ b/src-docs/src/views/button/split_button.js
@@ -10,8 +10,11 @@ import {
EuiPopover,
} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
export default () => {
const [isPopoverOpen, setPopover] = useState(false);
+ const buttonID = htmlIdGenerator('button')();
const onButtonClick = () => {
setPopover(!isPopoverOpen);
@@ -43,7 +46,7 @@ export default () => {
{
const [isPopoverOpen, setPopover] = useState(false);
+ const popoverID = htmlIdGenerator('popover')();
const onButtonClick = () => {
setPopover(!isPopoverOpen);
@@ -29,7 +32,7 @@ export default () => {
return (
{
const [isPopoverOpen, setPopover] = useState(false);
+ const switchID__1 = htmlIdGenerator('switch')();
+ const switchID__2 = htmlIdGenerator('switch')();
+ const popoverID = htmlIdGenerator('popover')();
const onButtonClick = () => {
setPopover(!isPopoverOpen);
@@ -108,7 +113,7 @@ export default () => {
{}}
@@ -119,7 +124,7 @@ export default () => {
hasChildLabel={false}>
{}}
@@ -140,7 +145,7 @@ export default () => {
return (