Revised element IDs within the Compressed Forms section of src/docs t…

…o use IDs generated by the htmlIdGenerator utility function
elastic · Aug 30, 2021 · e804279 · e804279
1 parent 7000dd7
commit e804279
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src-docs/src/views/form_compressed/complex_example.js b/src-docs/src/views/form_compressed/complex_example.js
@@ -86,6 +86,12 @@ export default () => {
     setGranularityToggleButtonsIdSelected,
   ] = useState(`${idPrefix}4`);
 
+  const rangeID__1 = htmlIdGenerator('range')();
+  const rangeID__2 = htmlIdGenerator('range')();
+  const selectID__1 = htmlIdGenerator('select')();
+  const selectID__2 = htmlIdGenerator('select')();
+  const selectToolTipID = htmlIdGenerator('select-tooltip')();
+
   const onPopoverSliderValueChange = (e) => {
     setPopoverSliderValues(e.target.value);
   };
@@ -144,7 +150,7 @@ export default () => {
           min={0}
           max={100}
           name="range"
-          id="range"
+          id={rangeID__1}
           showInput
           compressed
           value={opacityValue}
@@ -156,7 +162,7 @@ export default () => {
       <EuiSpacer size="s" />
 
       <EuiScreenReaderOnly>
-        <span id="docsExampleSelectTooltipContent">{selectTooltipContent}</span>
+        <span id={selectToolTipID}>{selectTooltipContent}</span>
       </EuiScreenReaderOnly>
       <EuiFormRow
         label={
@@ -261,7 +267,7 @@ export default () => {
       <EuiFormRow label="Label" display="columnCompressed">
         <div>
           <EuiSelect
-            id="docsExampleLabelFont"
+            id={selectID__1}
             options={[
               { value: 'inter', text: 'Inter UI' },
               { value: 'roboto', text: 'Roboto' },
@@ -312,7 +318,7 @@ export default () => {
       <EuiFlexGroup gutterSize="s" responsive={false} wrap>
         <EuiFlexItem style={{ flexBasis: 72 }}>
           <EuiRange
-            id="docsExampleBorderSize"
+            id={rangeID__2}
             showInput="inputWithPopover"
             min={0}
             max={32}
@@ -324,7 +330,7 @@ export default () => {
         </EuiFlexItem>
         <EuiFlexItem grow={4} style={{ minWidth: 160 }}>
           <EuiSelect
-            id="docsExampleBorderStyle"
+            id={selectID__2}
             options={[
               { value: 'dashed', text: 'Dashed' },
               { value: 'dotted', text: 'Dotted' },

diff --git a/src-docs/src/views/form_compressed/form_compressed.js b/src-docs/src/views/form_compressed/form_compressed.js
@@ -17,6 +17,7 @@ import { htmlIdGenerator } from '../../../../src/services';
 
 export default () => {
   const idPrefix = htmlIdGenerator()();
+  const rangeID = htmlIdGenerator('range')();
 
   const [checkboxes] = useState([
     {
@@ -102,7 +103,7 @@ export default () => {
           min={0}
           max={100}
           name="range"
-          id="range"
+          id={rangeID}
           showInput
           compressed
           value={value}

diff --git a/src-docs/src/views/form_compressed/form_horizontal.js b/src-docs/src/views/form_compressed/form_horizontal.js
@@ -11,10 +11,13 @@ import {
   EuiPanel,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isSwitchChecked, setIsSwitchChecked] = useState(false);
   const [comboBoxSelectionOptions, setComboBoxSelectionOptions] = useState([]);
   const [value, setValue] = useState('20');
+  const rangeID = htmlIdGenerator('range')();
 
   const onRangeChange = (e) => {
     setValue(e.target.value);
@@ -68,7 +71,7 @@ export default () => {
           min={0}
           max={100}
           name="range"
-          id="range"
+          id={rangeID}
           showInput
           compressed
           value={value}