Fix docs examples with broken styles on inputs

elastic · Jul 22, 2024 · 9b69e43 · 9b69e43
1 parent e220343
commit 9b69e43
Showing 1 changed file with 22 additions and 44 deletions.
diff --git a/packages/eui/src-docs/src/views/form_controls/form_control_layout_range.tsx b/packages/eui/src-docs/src/views/form_controls/form_control_layout_range.tsx
@@ -18,16 +18,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       fullWidth
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -37,16 +35,14 @@ export default () => (
 
     <EuiFormControlLayoutDelimited
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -57,16 +53,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       append={<EuiFormLabel>px</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -77,16 +71,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       icon="vector"
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -98,16 +90,14 @@ export default () => (
       clear={{ onClick: () => {} }}
       isLoading
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -118,16 +108,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       isLoading
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -138,16 +126,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       compressed
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -158,17 +144,15 @@ export default () => (
     <EuiFormControlLayoutDelimited
       prepend={<EuiFormLabel>Add</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       delimiter="+"
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -179,17 +163,15 @@ export default () => (
     <EuiFormControlLayoutDelimited
       prepend={<EuiFormLabel>Merge</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       delimiter={<EuiIcon type="merge" />}
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -201,17 +183,15 @@ export default () => (
       readOnly
       prepend={<EuiFormLabel>Read only</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           readOnly
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           readOnly
@@ -224,17 +204,15 @@ export default () => (
       isDisabled
       prepend={<EuiFormLabel>Disabled</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           disabled
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           disabled