From 6e250ab09a745ba3146c6e31231635fcf19c71b0 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 14 Mar 2020 16:10:47 +0530
Subject: [PATCH 01/24] added documentation for htmlIdGenerator

---
 src-docs/src/routes.js                        |   3 +
 .../html_id_generator/bothPrefixSuffix.js     |  77 +++++++++++++
 .../html_id_generator/htmlIdGenerator.js      |  43 +++++++
 .../htmlIdGeneratorPrefix.js                  |  68 +++++++++++
 .../htmlIdGeneratorSuffix.js                  |  67 +++++++++++
 .../html_id_generator_example.js              | 109 ++++++++++++++++++
 6 files changed, 367 insertions(+)
 create mode 100644 src-docs/src/views/html_id_generator/bothPrefixSuffix.js
 create mode 100644 src-docs/src/views/html_id_generator/htmlIdGenerator.js
 create mode 100644 src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
 create mode 100644 src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
 create mode 100644 src-docs/src/views/html_id_generator/html_id_generator_example.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 6f008e81fe7..e20da1d7c90 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -122,6 +122,8 @@ import { HighlightAndMarkExample } from './views/highlight_and_mark/highlight_an
 
 import { HorizontalRuleExample } from './views/horizontal_rule/horizontal_rule_example';
 
+import { HtmlIdGeneratorExample } from './views/html_id_generator/html_id_generator_example';
+
 import { I18nExample } from './views/i18n/i18n_example';
 
 import { IconExample } from './views/icon/icon_example';
@@ -414,6 +416,7 @@ const navigation = [
       ErrorBoundaryExample,
       FocusTrapExample,
       HighlightAndMarkExample,
+      HtmlIdGeneratorExample,
       InnerTextExample,
       I18nExample,
       IsColorDarkExample,
diff --git a/src-docs/src/views/html_id_generator/bothPrefixSuffix.js b/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
new file mode 100644
index 00000000000..23076f72fc3
--- /dev/null
+++ b/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
@@ -0,0 +1,77 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiButton,
+  EuiCode,
+} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
+export class PrefixSufix extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      prefix: '',
+      suffix: '',
+      id1: htmlIdGenerator('')(''),
+    };
+  }
+
+  onPrefixChange = e => {
+    const prefix = e.target.value;
+    this.setState({
+      prefix,
+    });
+  };
+
+  onSuffixChange = e => {
+    const suffix = e.target.value;
+    this.setState({
+      suffix,
+    });
+  };
+
+  reGenerate = () => {
+    const { prefix, suffix } = this.state;
+    this.setState({
+      id1: htmlIdGenerator(prefix)(suffix),
+    });
+  };
+
+  render() {
+    const { prefix, suffix, id1 } = this.state;
+    return (
+      <Fragment>
+        <EuiFlexGroup
+          justifyContent="flexStart"
+          gutterSize="m"
+          alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiFieldSearch
+              value={prefix}
+              onChange={this.onPrefixChange}
+              placeholder="Prefix"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFieldSearch
+              value={suffix}
+              onChange={this.onSuffixChange}
+              placeholder="Suffix"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={this.reGenerate}>Generate</EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        <EuiSpacer size="m" />
+        <EuiCode>{id1} </EuiCode>
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/html_id_generator/htmlIdGenerator.js b/src-docs/src/views/html_id_generator/htmlIdGenerator.js
new file mode 100644
index 00000000000..d534e049226
--- /dev/null
+++ b/src-docs/src/views/html_id_generator/htmlIdGenerator.js
@@ -0,0 +1,43 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiCode,
+} from '../../../../src/components';
+
+import { htmlIdGenerator } from '../../../../src/services';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: htmlIdGenerator()(),
+    };
+  }
+
+  reGenerate = () => {
+    this.setState({ value: htmlIdGenerator()() });
+  };
+
+  render() {
+    const { value } = this.state;
+    return (
+      <Fragment>
+        <EuiFlexGroup
+          justifyContent="flexStart"
+          gutterSize="m"
+          alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiCode>{value}</EuiCode>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={this.reGenerate}>Regenerate</EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js b/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
new file mode 100644
index 00000000000..cd311184193
--- /dev/null
+++ b/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
@@ -0,0 +1,68 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiButton,
+  EuiCode,
+} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
+export class HtmlIdGeneratorPrefix extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      prefix: '',
+      id1: htmlIdGenerator('')(),
+      id2: htmlIdGenerator('')(),
+      id3: htmlIdGenerator('')(),
+    };
+  }
+
+  onSearchChange = e => {
+    const prefix = e.target.value;
+    this.setState({
+      prefix,
+    });
+  };
+
+  reGenerate = () => {
+    const { prefix } = this.state;
+    this.setState({
+      id1: htmlIdGenerator(prefix)(),
+      id2: htmlIdGenerator(prefix)(),
+      id3: htmlIdGenerator(prefix)(),
+    });
+  };
+
+  render() {
+    const { prefix, id1, id2, id3 } = this.state;
+    return (
+      <Fragment>
+        <EuiFlexGroup
+          justifyContent="flexStart"
+          gutterSize="m"
+          alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiFieldSearch value={prefix} onChange={this.onSearchChange} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={this.reGenerate}>Generate</EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        <EuiSpacer size="m" />
+        <EuiCode>{id1} </EuiCode>
+        <EuiSpacer size="m" />
+        <EuiSpacer size="m" />
+        <EuiCode>{id2} </EuiCode>
+        <EuiSpacer size="m" />
+        <EuiSpacer size="m" />
+        <EuiCode>{id3} </EuiCode>
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js b/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
new file mode 100644
index 00000000000..be4e967cc0c
--- /dev/null
+++ b/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
@@ -0,0 +1,67 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiButton,
+  EuiCode,
+} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
+export class HtmlIdGeneratorSuffix extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      suffix: '',
+      id1: htmlIdGenerator()(''),
+      id2: htmlIdGenerator()(''),
+    };
+  }
+
+  onSuffixChange = e => {
+    const suffix = e.target.value;
+    this.setState({
+      suffix,
+    });
+  };
+
+  reGenerate = () => {
+    const { suffix } = this.state;
+    this.setState({
+      id1: htmlIdGenerator()(suffix),
+      id2: htmlIdGenerator()(suffix),
+    });
+  };
+
+  render() {
+    const { suffix, id1, id2 } = this.state;
+    return (
+      <Fragment>
+        <EuiFlexGroup
+          justifyContent="flexStart"
+          gutterSize="m"
+          alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiFieldSearch
+              value={suffix}
+              onChange={this.onSuffixChange}
+              placeholder="Suffix"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={this.reGenerate}>Generate</EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        <EuiSpacer size="m" />
+        <EuiCode>{id1} </EuiCode>
+        <EuiSpacer size="m" />
+        <EuiSpacer size="m" />
+        <EuiCode>{id2} </EuiCode>
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
new file mode 100644
index 00000000000..a3349fea20a
--- /dev/null
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -0,0 +1,109 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+import { EuiCode } from '../../../../src/components';
+
+import IdGenerator from './htmlIdGenerator';
+import { HtmlIdGeneratorPrefix } from './htmlIdGeneratorPrefix';
+import { HtmlIdGeneratorSuffix } from './htmlIdGeneratorSuffix';
+import { PrefixSufix } from './bothPrefixSuffix';
+
+const htmlIdGeneratorSource = require('!!raw-loader!./htmlIdGenerator');
+const htmlIdGeneratorHtml = renderToHtml(IdGenerator);
+
+const htmlIdGeneratorPrefixSource = require('!!raw-loader!./htmlIdGeneratorPrefix');
+const htmlIdGeneratorPrefixHtml = renderToHtml(HtmlIdGeneratorPrefix);
+
+const HtmlIdGeneratorSuffixSource = require('!!raw-loader!./htmlIdGeneratorSuffix');
+const HtmlIdGeneratorSuffixHtml = renderToHtml(HtmlIdGeneratorSuffix);
+
+const PrefixSufixSource = require('!!raw-loader!./bothPrefixSuffix');
+const PrefixSufixHtml = renderToHtml(PrefixSufix);
+
+export const HtmlIdGeneratorExample = {
+  title: 'Html Id Generator',
+  sections: [
+    {
+      title: 'Id Generator',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: htmlIdGeneratorSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: htmlIdGeneratorHtml,
+        },
+      ],
+      text: (
+        <p>
+          Use <EuiCode>HtmlIdGenerator</EuiCode> to generate unique ID and avoid
+          accessibility issues.
+        </p>
+      ),
+      demo: <IdGenerator />,
+    },
+    {
+      title: 'Id Generator with prefix',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: htmlIdGeneratorPrefixSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: htmlIdGeneratorPrefixHtml,
+        },
+      ],
+      text: (
+        <p>
+          Provide <EuiCode>prefix</EuiCode> to generator to get ID with a
+          specific prefix.
+        </p>
+      ),
+      demo: <HtmlIdGeneratorPrefix />,
+    },
+    {
+      title: 'Id Generator with suffix',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: HtmlIdGeneratorSuffixSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: HtmlIdGeneratorSuffixHtml,
+        },
+      ],
+      text: (
+        <p>
+          Provide <EuiCode>suffix</EuiCode> to generator to get ID with a
+          specific suffix.
+        </p>
+      ),
+      demo: <HtmlIdGeneratorSuffix />,
+    },
+    {
+      title: 'Id Generator with both prefix and sufix',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: PrefixSufixSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: PrefixSufixHtml,
+        },
+      ],
+      text: (
+        <p>
+          HtmlIdGenerator is caplable of generating ID with specific prefix and
+          suffix.
+        </p>
+      ),
+      demo: <PrefixSufix />,
+    },
+  ],
+};

From e3dafb2ef3396eba19abb6fbaa3cf35b5b2abeae Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 18 Mar 2020 15:19:58 +0530
Subject: [PATCH 02/24] use lables and formRow

---
 .../html_id_generator/bothPrefixSuffix.js     | 42 +++++++++----------
 .../htmlIdGeneratorPrefix.js                  | 29 ++++++-------
 .../htmlIdGeneratorSuffix.js                  | 31 ++++++--------
 3 files changed, 46 insertions(+), 56 deletions(-)

diff --git a/src-docs/src/views/html_id_generator/bothPrefixSuffix.js b/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
index 23076f72fc3..8be4ee26146 100644
--- a/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
+++ b/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from 'react';
 
 import {
-  EuiFieldSearch,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiButton,
   EuiCode,
+  EuiFormRow,
 } from '../../../../src/components';
 import { htmlIdGenerator } from '../../../../src/services';
 
@@ -23,21 +23,20 @@ export class PrefixSufix extends Component {
 
   onPrefixChange = e => {
     const prefix = e.target.value;
+    const { suffix } = this.state;
+
     this.setState({
       prefix,
+      id1: htmlIdGenerator(prefix)(suffix),
     });
   };
 
   onSuffixChange = e => {
     const suffix = e.target.value;
-    this.setState({
-      suffix,
-    });
-  };
+    const { prefix } = this.state;
 
-  reGenerate = () => {
-    const { prefix, suffix } = this.state;
     this.setState({
+      suffix,
       id1: htmlIdGenerator(prefix)(suffix),
     });
   };
@@ -51,21 +50,22 @@ export class PrefixSufix extends Component {
           gutterSize="m"
           alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiFieldSearch
-              value={prefix}
-              onChange={this.onPrefixChange}
-              placeholder="Prefix"
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiFieldSearch
-              value={suffix}
-              onChange={this.onSuffixChange}
-              placeholder="Suffix"
-            />
+            <EuiFormRow label="Prefix">
+              <EuiFieldText
+                value={prefix}
+                onChange={this.onPrefixChange}
+                placeholder="Enter prefix"
+              />
+            </EuiFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.reGenerate}>Generate</EuiButton>
+            <EuiFormRow label="Suffix">
+              <EuiFieldText
+                value={suffix}
+                onChange={this.onSuffixChange}
+                placeholder="Enter suffix"
+              />
+            </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
diff --git a/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js b/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
index cd311184193..445b5971d04 100644
--- a/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
+++ b/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from 'react';
 
 import {
-  EuiFieldSearch,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiButton,
   EuiCode,
+  EuiFormRow,
 } from '../../../../src/components';
 import { htmlIdGenerator } from '../../../../src/services';
 
@@ -15,10 +15,10 @@ export class HtmlIdGeneratorPrefix extends Component {
     super(props);
 
     this.state = {
-      prefix: '',
-      id1: htmlIdGenerator('')(),
-      id2: htmlIdGenerator('')(),
-      id3: htmlIdGenerator('')(),
+      prefix: 'Id',
+      id1: htmlIdGenerator('Id')(),
+      id2: htmlIdGenerator('Id')(),
+      id3: htmlIdGenerator('Id')(),
     };
   }
 
@@ -26,12 +26,6 @@ export class HtmlIdGeneratorPrefix extends Component {
     const prefix = e.target.value;
     this.setState({
       prefix,
-    });
-  };
-
-  reGenerate = () => {
-    const { prefix } = this.state;
-    this.setState({
       id1: htmlIdGenerator(prefix)(),
       id2: htmlIdGenerator(prefix)(),
       id3: htmlIdGenerator(prefix)(),
@@ -47,10 +41,13 @@ export class HtmlIdGeneratorPrefix extends Component {
           gutterSize="m"
           alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiFieldSearch value={prefix} onChange={this.onSearchChange} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.reGenerate}>Generate</EuiButton>
+            <EuiFormRow label="Prefix">
+              <EuiFieldText
+                value={prefix}
+                onChange={this.onSearchChange}
+                placeholder="Enter prefix"
+              />
+            </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
diff --git a/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js b/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
index be4e967cc0c..e4b9e452355 100644
--- a/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
+++ b/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from 'react';
 
 import {
-  EuiFieldSearch,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiButton,
   EuiCode,
+  EuiFormRow,
 } from '../../../../src/components';
 import { htmlIdGenerator } from '../../../../src/services';
 
@@ -15,9 +15,9 @@ export class HtmlIdGeneratorSuffix extends Component {
     super(props);
 
     this.state = {
-      suffix: '',
-      id1: htmlIdGenerator()(''),
-      id2: htmlIdGenerator()(''),
+      suffix: 'Id',
+      id1: htmlIdGenerator()('Id'),
+      id2: htmlIdGenerator()('Id'),
     };
   }
 
@@ -25,12 +25,6 @@ export class HtmlIdGeneratorSuffix extends Component {
     const suffix = e.target.value;
     this.setState({
       suffix,
-    });
-  };
-
-  reGenerate = () => {
-    const { suffix } = this.state;
-    this.setState({
       id1: htmlIdGenerator()(suffix),
       id2: htmlIdGenerator()(suffix),
     });
@@ -45,14 +39,13 @@ export class HtmlIdGeneratorSuffix extends Component {
           gutterSize="m"
           alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiFieldSearch
-              value={suffix}
-              onChange={this.onSuffixChange}
-              placeholder="Suffix"
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.reGenerate}>Generate</EuiButton>
+            <EuiFormRow label="Suffix">
+              <EuiFieldText
+                value={suffix}
+                onChange={this.onSuffixChange}
+                placeholder="Enter suffix"
+              />
+            </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />

From 52355778cdb31ea53444d3471e71b75d3309bc50 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Thu, 19 Mar 2020 12:20:17 +0530
Subject: [PATCH 03/24] only one exapmle per section

---
 .../src/views/html_id_generator/bothPrefixSuffix.js  |  6 +++---
 .../views/html_id_generator/htmlIdGeneratorPrefix.js | 12 +-----------
 .../views/html_id_generator/htmlIdGeneratorSuffix.js |  7 +------
 3 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/src-docs/src/views/html_id_generator/bothPrefixSuffix.js b/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
index 8be4ee26146..d789f985a28 100644
--- a/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
+++ b/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
@@ -15,9 +15,9 @@ export class PrefixSufix extends Component {
     super(props);
 
     this.state = {
-      prefix: '',
-      suffix: '',
-      id1: htmlIdGenerator('')(''),
+      prefix: 'Some',
+      suffix: 'Id',
+      id1: htmlIdGenerator('Some')('Id'),
     };
   }
 
diff --git a/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js b/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
index 445b5971d04..e73ba2911af 100644
--- a/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
+++ b/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
@@ -17,8 +17,6 @@ export class HtmlIdGeneratorPrefix extends Component {
     this.state = {
       prefix: 'Id',
       id1: htmlIdGenerator('Id')(),
-      id2: htmlIdGenerator('Id')(),
-      id3: htmlIdGenerator('Id')(),
     };
   }
 
@@ -27,13 +25,11 @@ export class HtmlIdGeneratorPrefix extends Component {
     this.setState({
       prefix,
       id1: htmlIdGenerator(prefix)(),
-      id2: htmlIdGenerator(prefix)(),
-      id3: htmlIdGenerator(prefix)(),
     });
   };
 
   render() {
-    const { prefix, id1, id2, id3 } = this.state;
+    const { prefix, id1 } = this.state;
     return (
       <Fragment>
         <EuiFlexGroup
@@ -53,12 +49,6 @@ export class HtmlIdGeneratorPrefix extends Component {
         <EuiSpacer size="m" />
         <EuiSpacer size="m" />
         <EuiCode>{id1} </EuiCode>
-        <EuiSpacer size="m" />
-        <EuiSpacer size="m" />
-        <EuiCode>{id2} </EuiCode>
-        <EuiSpacer size="m" />
-        <EuiSpacer size="m" />
-        <EuiCode>{id3} </EuiCode>
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js b/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
index e4b9e452355..3da214e9f86 100644
--- a/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
+++ b/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
@@ -17,7 +17,6 @@ export class HtmlIdGeneratorSuffix extends Component {
     this.state = {
       suffix: 'Id',
       id1: htmlIdGenerator()('Id'),
-      id2: htmlIdGenerator()('Id'),
     };
   }
 
@@ -26,12 +25,11 @@ export class HtmlIdGeneratorSuffix extends Component {
     this.setState({
       suffix,
       id1: htmlIdGenerator()(suffix),
-      id2: htmlIdGenerator()(suffix),
     });
   };
 
   render() {
-    const { suffix, id1, id2 } = this.state;
+    const { suffix, id1 } = this.state;
     return (
       <Fragment>
         <EuiFlexGroup
@@ -51,9 +49,6 @@ export class HtmlIdGeneratorSuffix extends Component {
         <EuiSpacer size="m" />
         <EuiSpacer size="m" />
         <EuiCode>{id1} </EuiCode>
-        <EuiSpacer size="m" />
-        <EuiSpacer size="m" />
-        <EuiCode>{id2} </EuiCode>
       </Fragment>
     );
   }

From 5320d37e9dac325c55649fc457270b61e8ead8e9 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:34:05 +0530
Subject: [PATCH 04/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index a3349fea20a..482d0ac5342 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -26,7 +26,6 @@ export const HtmlIdGeneratorExample = {
   title: 'Html Id Generator',
   sections: [
     {
-      title: 'Id Generator',
       source: [
         {
           type: GuideSectionTypes.JS,

From b57fbea025963f1a10a8b9b432d5f940e35f8ad9 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:34:15 +0530
Subject: [PATCH 05/24] Update
 src-docs/src/views/html_id_generator/bothPrefixSuffix.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 src-docs/src/views/html_id_generator/bothPrefixSuffix.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src-docs/src/views/html_id_generator/bothPrefixSuffix.js b/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
index d789f985a28..7c20d4a5e34 100644
--- a/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
+++ b/src-docs/src/views/html_id_generator/bothPrefixSuffix.js
@@ -68,8 +68,7 @@ export class PrefixSufix extends Component {
             </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiSpacer size="m" />
-        <EuiSpacer size="m" />
+        <EuiSpacer size="xl" />
         <EuiCode>{id1} </EuiCode>
       </Fragment>
     );

From 3a73690071c82e4486687f1100791f0cdb06a9d4 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:34:48 +0530
Subject: [PATCH 06/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 482d0ac5342..7bc32bde1df 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -78,8 +78,8 @@ export const HtmlIdGeneratorExample = {
       ],
       text: (
         <p>
-          Provide <EuiCode>suffix</EuiCode> to generator to get ID with a
-          specific suffix.
+          Provide a <EuiCode>suffix</EuiCode> to the generator to get an ID that starts with the
+          specified suffix.
         </p>
       ),
       demo: <HtmlIdGeneratorSuffix />,

From d370ccb4f67ad905f2f95e5595e3924dc6942d40 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:35:07 +0530
Subject: [PATCH 07/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 7bc32bde1df..e74cf6f869c 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -85,7 +85,7 @@ export const HtmlIdGeneratorExample = {
       demo: <HtmlIdGeneratorSuffix />,
     },
     {
-      title: 'Id Generator with both prefix and sufix',
+      title: 'ID generator with both prefix and suffix',
       source: [
         {
           type: GuideSectionTypes.JS,

From 78ac3cbac88428b0dd8b0f93878bcc38729963c2 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:35:21 +0530
Subject: [PATCH 08/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index e74cf6f869c..6995c4bc05c 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -65,7 +65,7 @@ export const HtmlIdGeneratorExample = {
       demo: <HtmlIdGeneratorPrefix />,
     },
     {
-      title: 'Id Generator with suffix',
+      title: 'ID generator with suffix',
       source: [
         {
           type: GuideSectionTypes.JS,

From 49d23f2498ec464cc45e6aa3395bc1ee30a404ed Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:35:43 +0530
Subject: [PATCH 09/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 6995c4bc05c..a2bf1242042 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -58,8 +58,8 @@ export const HtmlIdGeneratorExample = {
       ],
       text: (
         <p>
-          Provide <EuiCode>prefix</EuiCode> to generator to get ID with a
-          specific prefix.
+          Provide a <EuiCode>prefix</EuiCode> to the generator to get an ID that starts with the
+          specified prefix.
         </p>
       ),
       demo: <HtmlIdGeneratorPrefix />,

From d3bbc575ddb0225cfe79d33fa7c2dc514e3d6987 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:38:00 +0530
Subject: [PATCH 10/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index a2bf1242042..2c5da9fbe38 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -98,7 +98,7 @@ export const HtmlIdGeneratorExample = {
       ],
       text: (
         <p>
-          HtmlIdGenerator is caplable of generating ID with specific prefix and
+          The <strong>HtmlIdGenerator</strong> is capable of generating an ID with both a specified prefix <strong>and</strong>
           suffix.
         </p>
       ),

From bdb0935084ca18382020b9a71ac72e6b22aead8e Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:38:14 +0530
Subject: [PATCH 11/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 2c5da9fbe38..87b45c34c22 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -45,7 +45,7 @@ export const HtmlIdGeneratorExample = {
       demo: <IdGenerator />,
     },
     {
-      title: 'Id Generator with prefix',
+      title: 'ID generator with prefix',
       source: [
         {
           type: GuideSectionTypes.JS,

From 34633f191e0c08da0bc9f9cbe61a19267dbf08cf Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:38:23 +0530
Subject: [PATCH 12/24] Update
 src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js b/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
index e73ba2911af..2bd726415d2 100644
--- a/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
+++ b/src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js
@@ -46,8 +46,7 @@ export class HtmlIdGeneratorPrefix extends Component {
             </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiSpacer size="m" />
-        <EuiSpacer size="m" />
+        <EuiSpacer size="xl" />
         <EuiCode>{id1} </EuiCode>
       </Fragment>
     );

From e196fecbe8c90a1301e7be356b6824e3e977b1a0 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Thu, 19 Mar 2020 19:38:31 +0530
Subject: [PATCH 13/24] Update
 src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js b/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
index 3da214e9f86..3f837874ff3 100644
--- a/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
+++ b/src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js
@@ -46,8 +46,7 @@ export class HtmlIdGeneratorSuffix extends Component {
             </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiSpacer size="m" />
-        <EuiSpacer size="m" />
+        <EuiSpacer size="xl" />
         <EuiCode>{id1} </EuiCode>
       </Fragment>
     );

From 259d56468862273a84a1939f92f6fd94f3e26ba0 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Thu, 19 Mar 2020 22:19:44 +0530
Subject: [PATCH 14/24] added snippets

---
 .../html_id_generator_example.js              | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 87b45c34c22..0bfbda46ba7 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -12,15 +12,19 @@ import { PrefixSufix } from './bothPrefixSuffix';
 
 const htmlIdGeneratorSource = require('!!raw-loader!./htmlIdGenerator');
 const htmlIdGeneratorHtml = renderToHtml(IdGenerator);
+const htmlIdGeneratorSnippet = ' htmlIdGenerator()()';
 
 const htmlIdGeneratorPrefixSource = require('!!raw-loader!./htmlIdGeneratorPrefix');
 const htmlIdGeneratorPrefixHtml = renderToHtml(HtmlIdGeneratorPrefix);
+const htmlIdGeneratorPrefixSnippet = " htmlIdGenerator('Id')()";
 
 const HtmlIdGeneratorSuffixSource = require('!!raw-loader!./htmlIdGeneratorSuffix');
 const HtmlIdGeneratorSuffixHtml = renderToHtml(HtmlIdGeneratorSuffix);
+const suffixSnippet = " htmlIdGenerator()('Id')";
 
 const PrefixSufixSource = require('!!raw-loader!./bothPrefixSuffix');
 const PrefixSufixHtml = renderToHtml(PrefixSufix);
+const prefixSuffixSnippet = " htmlIdGenerator('Some')('Id')";
 
 export const HtmlIdGeneratorExample = {
   title: 'Html Id Generator',
@@ -42,6 +46,7 @@ export const HtmlIdGeneratorExample = {
           accessibility issues.
         </p>
       ),
+      snippet: htmlIdGeneratorSnippet,
       demo: <IdGenerator />,
     },
     {
@@ -58,10 +63,11 @@ export const HtmlIdGeneratorExample = {
       ],
       text: (
         <p>
-          Provide a <EuiCode>prefix</EuiCode> to the generator to get an ID that starts with the
-          specified prefix.
+          Provide a <EuiCode>prefix</EuiCode> to the generator to get an ID that
+          starts with the specified prefix.
         </p>
       ),
+      snippet: htmlIdGeneratorPrefixSnippet,
       demo: <HtmlIdGeneratorPrefix />,
     },
     {
@@ -78,10 +84,11 @@ export const HtmlIdGeneratorExample = {
       ],
       text: (
         <p>
-          Provide a <EuiCode>suffix</EuiCode> to the generator to get an ID that starts with the
-          specified suffix.
+          Provide a <EuiCode>suffix</EuiCode> to the generator to get an ID that
+          starts with the specified suffix.
         </p>
       ),
+      snippet: suffixSnippet,
       demo: <HtmlIdGeneratorSuffix />,
     },
     {
@@ -98,10 +105,12 @@ export const HtmlIdGeneratorExample = {
       ],
       text: (
         <p>
-          The <strong>HtmlIdGenerator</strong> is capable of generating an ID with both a specified prefix <strong>and</strong>
+          The <strong>HtmlIdGenerator</strong> is capable of generating an ID
+          with both a specified prefix <strong>and</strong>
           suffix.
         </p>
       ),
+      snippet: prefixSuffixSnippet,
       demo: <PrefixSufix />,
     },
   ],

From ace212efe76efcc1461a75b668369db741b221bd Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Thu, 19 Mar 2020 22:26:25 +0530
Subject: [PATCH 15/24] improved description

---
 .../src/views/html_id_generator/html_id_generator_example.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 0bfbda46ba7..e4da22f7d22 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -43,7 +43,10 @@ export const HtmlIdGeneratorExample = {
       text: (
         <p>
           Use <EuiCode>HtmlIdGenerator</EuiCode> to generate unique ID and avoid
-          accessibility issues.
+          accessibility issues. It is capable of generating ID&apos;s with
+          specific <EuiCode>prefix</EuiCode> or <EuiCode>suffix</EuiCode>, in
+          the first run it genrates a function which generates ID with a prefix
+          and in the second run it adds a suffix to the ID if specified
         </p>
       ),
       snippet: htmlIdGeneratorSnippet,

From ba7472a19fcc6c44a4e454049910a9d93fc9bafa Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Fri, 20 Mar 2020 23:06:14 +0530
Subject: [PATCH 16/24] updated description

---
 .../html_id_generator/html_id_generator_example.js    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index e4da22f7d22..087a4fa4e61 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -42,11 +42,12 @@ export const HtmlIdGeneratorExample = {
       ],
       text: (
         <p>
-          Use <EuiCode>HtmlIdGenerator</EuiCode> to generate unique ID and avoid
-          accessibility issues. It is capable of generating ID&apos;s with
-          specific <EuiCode>prefix</EuiCode> or <EuiCode>suffix</EuiCode>, in
-          the first run it genrates a function which generates ID with a prefix
-          and in the second run it adds a suffix to the ID if specified
+          Use <EuiCode>htmlIdGenerator</EuiCode> to generate unique IDs for
+          elements with an optional <EuiCode>prefix</EuiCode> and/or{' '}
+          <EuiCode>suffix</EuiCode>. The first call to{' '}
+          <EuiCode>htmlIdGenerator</EuiCode> accepts the prefix as an optional
+          argument and returns a second function which accepts an optional
+          suffix and returns the generated ID.
         </p>
       ),
       snippet: htmlIdGeneratorSnippet,

From a1a90ea3620098dfc186c6d4e8e6d7587177172d Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Fri, 20 Mar 2020 23:45:20 +0530
Subject: [PATCH 17/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 087a4fa4e61..944e6417c40 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -16,7 +16,7 @@ const htmlIdGeneratorSnippet = ' htmlIdGenerator()()';
 
 const htmlIdGeneratorPrefixSource = require('!!raw-loader!./htmlIdGeneratorPrefix');
 const htmlIdGeneratorPrefixHtml = renderToHtml(HtmlIdGeneratorPrefix);
-const htmlIdGeneratorPrefixSnippet = " htmlIdGenerator('Id')()";
+const htmlIdGeneratorPrefixSnippet = " htmlIdGenerator('prefix')()";
 
 const HtmlIdGeneratorSuffixSource = require('!!raw-loader!./htmlIdGeneratorSuffix');
 const HtmlIdGeneratorSuffixHtml = renderToHtml(HtmlIdGeneratorSuffix);

From 40b74c01d20224774938898a6a2dafa1714080c0 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Fri, 20 Mar 2020 23:45:29 +0530
Subject: [PATCH 18/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 944e6417c40..7dc7bd743e5 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -24,7 +24,7 @@ const suffixSnippet = " htmlIdGenerator()('Id')";
 
 const PrefixSufixSource = require('!!raw-loader!./bothPrefixSuffix');
 const PrefixSufixHtml = renderToHtml(PrefixSufix);
-const prefixSuffixSnippet = " htmlIdGenerator('Some')('Id')";
+const prefixSuffixSnippet = " htmlIdGenerator('prefix')('suffix')";
 
 export const HtmlIdGeneratorExample = {
   title: 'Html Id Generator',

From f983ea1b66274d05966dcb857b5fa44d01205fc3 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Fri, 20 Mar 2020 23:46:09 +0530
Subject: [PATCH 19/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../src/views/html_id_generator/html_id_generator_example.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 7dc7bd743e5..bc83fffd92b 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -20,7 +20,7 @@ const htmlIdGeneratorPrefixSnippet = " htmlIdGenerator('prefix')()";
 
 const HtmlIdGeneratorSuffixSource = require('!!raw-loader!./htmlIdGeneratorSuffix');
 const HtmlIdGeneratorSuffixHtml = renderToHtml(HtmlIdGeneratorSuffix);
-const suffixSnippet = " htmlIdGenerator()('Id')";
+const suffixSnippet = " htmlIdGenerator()('suffix')";
 
 const PrefixSufixSource = require('!!raw-loader!./bothPrefixSuffix');
 const PrefixSufixHtml = renderToHtml(PrefixSufix);

From 84dda401ec8a8dba4e961e67fd8f6286785ebb55 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 21 Mar 2020 02:16:58 +0530
Subject: [PATCH 20/24] updated ID generattor

---
 src/services/accessibility/html_id_generator.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/services/accessibility/html_id_generator.ts b/src/services/accessibility/html_id_generator.ts
index 21a8d80ac3b..92b9b540162 100644
--- a/src/services/accessibility/html_id_generator.ts
+++ b/src/services/accessibility/html_id_generator.ts
@@ -7,7 +7,7 @@ import uuid from 'uuid';
  * specify it, it generates a random id prefix. If you specify a custom prefix
  * it should begin with an letter to be HTML4 compliant.
  */
-export function htmlIdGenerator(idPrefix?: string) {
-  const prefix = idPrefix || `i${uuid.v1()}`;
+export function htmlIdGenerator(idPrefix: string = '') {
+  const prefix = `${idPrefix}i${uuid.v1()}`;
   return (suffix?: string) => `${prefix}_${suffix || uuid.v1()}`;
 }

From ae5fbe57742a4948bd048b6ac8ca47c7abb31c50 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 21 Mar 2020 12:53:43 +0530
Subject: [PATCH 21/24] added _ to prefix

---
 src/services/accessibility/html_id_generator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/accessibility/html_id_generator.ts b/src/services/accessibility/html_id_generator.ts
index 92b9b540162..33af956b4f3 100644
--- a/src/services/accessibility/html_id_generator.ts
+++ b/src/services/accessibility/html_id_generator.ts
@@ -8,6 +8,6 @@ import uuid from 'uuid';
  * it should begin with an letter to be HTML4 compliant.
  */
 export function htmlIdGenerator(idPrefix: string = '') {
-  const prefix = `${idPrefix}i${uuid.v1()}`;
+  const prefix = `${idPrefix}${idPrefix !== '' ? '_' : 'i'}${uuid.v1()}`;
   return (suffix?: string) => `${prefix}_${suffix || uuid.v1()}`;
 }

From a86ca30973bf226d409f7127c87b7172d84b3405 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 24 Mar 2020 23:41:50 +0530
Subject: [PATCH 22/24] updated generator

---
 src/services/accessibility/html_id_generator.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/services/accessibility/html_id_generator.ts b/src/services/accessibility/html_id_generator.ts
index 33af956b4f3..2ff468933b5 100644
--- a/src/services/accessibility/html_id_generator.ts
+++ b/src/services/accessibility/html_id_generator.ts
@@ -8,6 +8,10 @@ import uuid from 'uuid';
  * it should begin with an letter to be HTML4 compliant.
  */
 export function htmlIdGenerator(idPrefix: string = '') {
-  const prefix = `${idPrefix}${idPrefix !== '' ? '_' : 'i'}${uuid.v1()}`;
-  return (suffix?: string) => `${prefix}_${suffix || uuid.v1()}`;
+  const staticUuid = uuid.v1();
+  return (idSuffix: string = '') => {
+    const prefix = `${idPrefix}${idPrefix !== '' ? '_' : 'i'}`;
+    const suffix = idSuffix ? `_${idSuffix}` : '';
+    return `${prefix}${suffix ? staticUuid : uuid.v1()}${suffix}`;
+  };
 }

From 77cec444e640fdc5913b685b35a724bb98a69629 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Wed, 25 Mar 2020 19:09:51 -0400
Subject: [PATCH 23/24] Update
 src-docs/src/views/html_id_generator/html_id_generator_example.js

---
 .../src/views/html_id_generator/html_id_generator_example.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index bc83fffd92b..96f11225a19 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -110,7 +110,7 @@ export const HtmlIdGeneratorExample = {
       text: (
         <p>
           The <strong>HtmlIdGenerator</strong> is capable of generating an ID
-          with both a specified prefix <strong>and</strong>
+          with both a specified prefix <strong>and</strong>{' '}
           suffix.
         </p>
       ),

From 831a8ca88cf6340d1848afd3e291c5ec78bcc3ed Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Thu, 26 Mar 2020 13:51:35 +0530
Subject: [PATCH 24/24] added change Log

---
 CHANGELOG.md                                                   | 1 +
 .../src/views/html_id_generator/html_id_generator_example.js   | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fadf630d538..ee705df6c6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Improved `htmlIdGenerator` util ([#3076](https://github.com/elastic/eui/pull/3076))
 - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007))
 - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043))
 - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039))
diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js
index 96f11225a19..9affbf5a201 100644
--- a/src-docs/src/views/html_id_generator/html_id_generator_example.js
+++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js
@@ -110,8 +110,7 @@ export const HtmlIdGeneratorExample = {
       text: (
         <p>
           The <strong>HtmlIdGenerator</strong> is capable of generating an ID
-          with both a specified prefix <strong>and</strong>{' '}
-          suffix.
+          with both a specified prefix <strong>and</strong> suffix.
         </p>
       ),
       snippet: prefixSuffixSnippet,