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

…elastic#5220) * 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 * Revisions from PR * Update src-docs/src/views/resizable_container/resizable_container_reset_values.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update accordion_example.js Created unique IDs in the snapshots for the example components for accordions. Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
ym · Oct 29, 2021 · fc5613a · fc5613a
1 parent 19a05aa
commit fc5613a
Show file tree

Hide file tree

Showing 25 changed files with 383 additions and 216 deletions.
diff --git 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 () => (
-  <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>
+  );
+};
diff --git 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 () => (
-  <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>
+  );
+};
diff --git 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 () => (
-  <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>
+  );
+};
diff --git 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 = `<EuiAccordion
-  id={accordionId}
+  id={accordionId1}
   buttonContent="Clickable title for first item"
   paddingSize="l">
     <!-- Content to show when expanded -->
 </EuiAccordion>
 <EuiSpacer />
 <EuiAccordion
-  id={accordionId}
+  id={accordionId2}
   buttonContent="Clickable title for second item"
   paddingSize="l">
     <!-- Content to show when expanded -->
@@ -73,13 +73,13 @@ import AccordionIsLoading from './accordion_isLoading';
 const accordionIsLoadingSource = require('!!raw-loader!./accordion_isLoading');
 const accordionIsLoadingSnippet = [
   `<EuiAccordion
-  id={accordionId}
+  id={accordionId1}
   isLoading>
     <!-- Content to show when expanded -->
 </EuiAccordion>
 `,
   `<EuiAccordion
-  id={accordionId}
+  id={accordionId2}
   isLoading
   isLoadingMessage={customMessage}>
   <!-- Content that will be replaced by isLoadingMessage -->
@@ -135,7 +135,7 @@ export const AccordionExample = {
       playground: accordionConfig,
       props: { EuiAccordion },
       snippet: `<EuiAccordion
-  id={accordionId}
+  id={accordionId1}
   buttonContent="Clickable title"
   >
     <!-- Content to show when expanded -->
@@ -163,7 +163,7 @@ export const AccordionExample = {
       ],
       demo: <AccordionArrowRight />,
       snippet: `<EuiAccordion
-  id={accordionId}
+  id={accordionId2}
   buttonContent="Clickable title"
   arrowDisplay="right"
   >
@@ -180,7 +180,7 @@ export const AccordionExample = {
       ],
       demo: <AccordionArrow />,
       snippet: `<EuiAccordion
-  id={accordionId}
+  id={accordionId3}
   buttonContent="Clickable title"
   arrowDisplay="none"
   >
@@ -362,7 +362,7 @@ export const AccordionExample = {
       ),
       demo: <AccordionForm />,
       snippet: `<EuiAccordion
-  id={accordionId}
+  id={accordionId4}
   className="euiAccordionForm"
   buttonClassName="euiAccordionForm__button"
   buttonContent={buttonContent}

diff --git a/src-docs/src/views/accordion/accordion_extra.js b/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>
+  );
+};
diff --git 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 () => {
       />
       <EuiSpacer />
       <EuiAccordion
-        id={htmlIdGenerator()()}
+        id={forcedStateAccordionId}
         forceState={trigger}
         onToggle={onToggle}
         buttonContent="I am a controlled accordion"

diff --git a/src-docs/src/views/accordion/accordion_form.js b/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>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_grow.js b/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>
+  );
+};
diff --git 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 () => {
       </EuiFormRow>
       <EuiSpacer size="m" />
       <EuiAccordion
-        id={htmlIdGenerator()()}
+        id={isLoadingAccordionId}
         initialIsOpen={true}
         paddingSize={isLoadingMessage ? 'm' : 'none'}
         buttonContent="Accordion is loading, click to toggle"