[Docs] Replace Static HTML Element IDs Generated IDs (Layout Section)

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 () => (
-  <div>
-    <EuiAccordion id="accordion1" buttonContent="Click me to toggle">
-      <EuiPanel color="subdued">
-        Any content inside of <strong>EuiAccordion</strong> will appear here.
-      </EuiPanel>
-    </EuiAccordion>
-  </div>
-);
+export default () => {
+  const simpleAccordionId = useGeneratedHtmlId({ prefix: 'simpleAccordion' });
+
+  return (
+    <div>
+      <EuiAccordion id={simpleAccordionId} buttonContent="Click me to toggle">
+        <EuiPanel color="subdued">
+          Any content inside of <strong>EuiAccordion</strong> will appear here.
+        </EuiPanel>
+      </EuiAccordion>
+    </div>
+  );
+};

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 () => (
-  <EuiAccordion
-    id="accordion11"
-    arrowDisplay="none"
-    buttonContent="This one has it removed entirely"
-  >
-    <EuiPanel color="subdued">
-      Any content inside of <strong>EuiAccordion</strong> will appear here.
-    </EuiPanel>
-  </EuiAccordion>
-);
+export default () => {
+  const noArrowAccordionId = useGeneratedHtmlId({ prefix: 'noArrowAccordion' });
+
+  return (
+    <EuiAccordion
+      id={noArrowAccordionId}
+      arrowDisplay="none"
+      buttonContent="This one has it removed entirely"
+    >
+      <EuiPanel color="subdued">
+        Any content inside of <strong>EuiAccordion</strong> will appear here.
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};

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 () => (
-  <EuiAccordion
-    id="accordion10"
-    arrowDisplay="right"
-    buttonContent="This accordion has the arrow on the right"
-  >
-    <EuiPanel color="subdued">
-      Any content inside of <strong>EuiAccordion</strong> will appear here.
-    </EuiPanel>
-  </EuiAccordion>
-);
+export default () => {
+  const rightArrowAccordionId = useGeneratedHtmlId({
+    prefix: 'rightArrowAccordion',
+  });
+
+  return (
+    <EuiAccordion
+      id={rightArrowAccordionId}
+      arrowDisplay="right"
+      buttonContent="This accordion has the arrow on the right"
+    >
+      <EuiPanel color="subdued">
+        Any content inside of <strong>EuiAccordion</strong> will appear here.
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};

src-docs/src/views/accordion/accordion_extra.js

@@ -1,14 +1,21 @@
 import React from 'react';
 
 import { EuiAccordion, EuiButton } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
-export default () => (
-  <EuiAccordion
-    id="accordionExtraWithLeftArrow"
-    buttonContent="Click to open"
-    extraAction={<EuiButton size="s">Extra action!</EuiButton>}
-    paddingSize="l"
-  >
-    <strong>Opened content.</strong>
-  </EuiAccordion>
-);
+export default () => {
+  const extraActionAccordionId = useGeneratedHtmlId({
+    prefix: 'extraActionAccordion',
+  });
+
+  return (
+    <EuiAccordion
+      id={extraActionAccordionId}
+      buttonContent="Click to open"
+      extraAction={<EuiButton size="s">Extra action!</EuiButton>}
+      paddingSize="l"
+    >
+      <strong>Opened content.</strong>
+    </EuiAccordion>
+  );
+};

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 () => {
       />
       <EuiSpacer />
       <EuiAccordion
-        id={htmlIdGenerator()()}
+        id={forcedStateAccordionId}
         forceState={trigger}
         onToggle={onToggle}
         buttonContent="I am a controlled accordion"

src-docs/src/views/accordion/accordion_form.js

@@ -16,6 +16,7 @@ import {
   EuiTitle,
   EuiButtonIcon,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 const repeatableForm = (
   <EuiForm component="form">
@@ -77,28 +78,39 @@ const extraAction = (
   />
 );
 
-export default () => (
-  <div>
-    <EuiAccordion
-      id="accordionForm1"
-      className="euiAccordionForm"
-      buttonClassName="euiAccordionForm__button"
-      buttonContent={buttonContent}
-      extraAction={extraAction}
-      paddingSize="l"
-    >
-      {repeatableForm}
-    </EuiAccordion>
+export default () => {
+  const formAccordionId__1 = useGeneratedHtmlId({
+    prefix: 'formAccordion',
+    suffix: 'first',
+  });
+  const formAccordionId__2 = useGeneratedHtmlId({
+    prefix: 'formAccordion',
+    suffix: 'second',
+  });
 
-    <EuiAccordion
-      id="accordionForm2"
-      className="euiAccordionForm"
-      buttonClassName="euiAccordionForm__button"
-      buttonContent={buttonContent}
-      extraAction={extraAction}
-      paddingSize="l"
-    >
-      {repeatableForm}
-    </EuiAccordion>
-  </div>
-);
+  return (
+    <div>
+      <EuiAccordion
+        id={formAccordionId__1}
+        className="euiAccordionForm"
+        buttonClassName="euiAccordionForm__button"
+        buttonContent={buttonContent}
+        extraAction={extraAction}
+        paddingSize="l"
+      >
+        {repeatableForm}
+      </EuiAccordion>
+
+      <EuiAccordion
+        id={formAccordionId__2}
+        className="euiAccordionForm"
+        buttonClassName="euiAccordionForm__button"
+        buttonContent={buttonContent}
+        extraAction={extraAction}
+        paddingSize="l"
+      >
+        {repeatableForm}
+      </EuiAccordion>
+    </div>
+  );
+};

src-docs/src/views/accordion/accordion_grow.js

@@ -8,16 +8,18 @@ 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);
   const rows = [];
   for (let i = 1; i <= counter; i++) {
     rows.push(<li key={i}>Row {i}</li>);
   }
-  const growingAccordianDescriptionId = htmlIdGenerator()();
-  const listId = htmlIdGenerator()();
+  const growingAccordianDescriptionId = useGeneratedHtmlId({
+    prefix: 'growingAccordianDescription',
+  });
+  const listId = useGeneratedHtmlId({ prefix: 'list' });
   return (
     <EuiText size="s">
       <EuiScreenReaderOnly>
@@ -52,15 +54,19 @@ const Rows = () => {
   );
 };
 
-export default () => (
-  <EuiAccordion
-    id={htmlIdGenerator()()}
-    buttonContent="Click me to toggle close / open"
-    initialIsOpen={true}
-    paddingSize="s"
-  >
-    <EuiPanel color="subdued">
-      <Rows />
-    </EuiPanel>
-  </EuiAccordion>
-);
+export default () => {
+  const dynamicAccordionId = useGeneratedHtmlId({ prefix: 'dynamicAccordion' });
+
+  return (
+    <EuiAccordion
+      id={dynamicAccordionId}
+      buttonContent="Click me to toggle close / open"
+      initialIsOpen={true}
+      paddingSize="s"
+    >
+      <EuiPanel color="subdued">
+        <Rows />
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};

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 () => {
       </EuiFormRow>
       <EuiSpacer size="m" />
       <EuiAccordion
-        id={htmlIdGenerator()()}
+        id={isLoadingAccordionId}
         initialIsOpen={true}
         paddingSize={isLoadingMessage ? 'm' : 'none'}
         buttonContent="Accordion is loading, click to toggle"