Revised element IDs within the Resizble Container section of src/docs…

… to use IDs generated by the htmlIdGenerator utility function
elastic · Aug 30, 2021 · dd6e46b · dd6e46b
1 parent 5d763bf
commit dd6e46b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/src-docs/src/views/resizable_container/resizable_container_reset_values.js b/src-docs/src/views/resizable_container/resizable_container_reset_values.js
@@ -9,6 +9,7 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 import { fake } from 'faker';
+import { htmlIdGenerator } from '../../../../src/services';
 
 const text = (
   <>
@@ -18,13 +19,15 @@ const text = (
   </>
 );
 
-const firstPanelId = 'resizable-panel__1';
-const secondPanelId = 'resizable-panel__2';
+//const firstPanelId = 'resizable-panel__1';
+//const secondPanelId = 'resizable-panel__2';
+const panelID__1 = htmlIdGenerator('panel')();
+const panelID__2 = htmlIdGenerator('panel')();
 const stored = localStorage.getItem('resizableContainer');
 const storedSizes = stored && JSON.parse(stored);
 const defaultSizes = storedSizes || {
-  [firstPanelId]: 50,
-  [secondPanelId]: 50,
+  [panelID__1]: 50,
+  [panelID__2]: 50,
 };
 
 export default () => {
@@ -40,16 +43,16 @@ export default () => {
   const onClick30x70 = useCallback(
     () =>
       setSizes({
-        [firstPanelId]: 30,
-        [secondPanelId]: 70,
+        [panelID__1]: 30,
+        [panelID__2]: 70,
       }),
     []
   );
   const onClick80x20 = useCallback(
     () =>
       setSizes({
-        [firstPanelId]: 80,
-        [secondPanelId]: 20,
+        [panelID__1]: 80,
+        [panelID__2]: 20,
       }),
     []
   );
@@ -88,8 +91,8 @@ export default () => {
         {(EuiResizablePanel, EuiResizableButton) => (
           <>
             <EuiResizablePanel
-              id={firstPanelId}
-              size={sizes[firstPanelId]}
+              id={panelID__1}
+              size={sizes[panelID__1]}
               minSize="30%">
               <EuiText>
                 <div>{text}</div>
@@ -99,8 +102,8 @@ export default () => {
             <EuiResizableButton />
 
             <EuiResizablePanel
-              id={secondPanelId}
-              size={sizes[secondPanelId]}
+              id={panelID__2}
+              size={sizes[panelID__2]}
               minSize="200px">
               <EuiText>
                 <div>{text}</div>

diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js
@@ -10,6 +10,7 @@ import {
   EuiFlexItem,
   EuiText,
 } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
 const toggleButtons = [
   {
@@ -26,6 +27,9 @@ export default () => {
   const collapseFn = useRef(() => {});
 
   const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({});
+  const panelID__1 = htmlIdGenerator('panel')();
+  const panelID__2 = htmlIdGenerator('panel')();
+  const panelID__3 = htmlIdGenerator('panel')();
 
   const onCollapse = (optionId) => {
     const newToggleIdToSelectedMap = {
@@ -61,7 +65,7 @@ export default () => {
             togglePanel(id, { direction });
           return (
             <>
-              <EuiResizablePanel id="panel1" initialSize={30} minSize="10%">
+              <EuiResizablePanel id={panelID__1} initialSize={30} minSize="10%">
                 <EuiPanel paddingSize="l" style={{ height: '100%' }}>
                   <EuiTitle>
                     <p>Panel 1</p>
@@ -71,7 +75,10 @@ export default () => {
 
               <EuiResizableButton />
 
-              <EuiResizablePanel id="panel2" initialSize={35} minSize="50px">
+              <EuiResizablePanel
+                id={panelID__2}
+                initialSize={35}
+                minSize="50px">
                 <EuiPanel paddingSize="l" style={{ height: '100%' }}>
                   <EuiTitle>
                     <p>Panel 2</p>
@@ -83,7 +90,7 @@ export default () => {
 
               <EuiResizablePanel
                 mode={['custom', { position: 'top' }]}
-                id="panel3"
+                id={panelID__3}
                 initialSize={35}
                 minSize="10%">
                 <EuiPanel paddingSize="l" style={{ height: '100%' }}>