use EUI components for tutorial params

elastic · Sep 22, 2023 · 2a32d85 · 2a32d85
1 parent d52c5a1
commit 2a32d85
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 20 deletions.
diff --git a/src/plugins/home/public/application/components/tutorial/number_parameter.js b/src/plugins/home/public/application/components/tutorial/number_parameter.js
@@ -8,27 +8,17 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 
 export function NumberParameter({ id, label, value, setParameter }) {
   const handleChange = (evt) => {
     setParameter(id, parseFloat(evt.target.value));
   };
 
   return (
-    <div className="visEditorSidebar__formRow">
-      <label className="visEditorSidebar__formLabel" htmlFor={id}>
-        {label}
-      </label>
-      <div className="visEditorSidebar__formControl kuiFieldGroupSection--wide">
-        <input
-          className="kuiTextInput"
-          type="number"
-          value={value}
-          onChange={handleChange}
-          id={id}
-        />
-      </div>
-    </div>
+    <EuiFormRow label={label}>
+      <EuiFieldNumber value={value} onChange={handleChange} fullWidth />
+    </EuiFormRow>
   );
 }
 

diff --git a/src/plugins/home/public/application/components/tutorial/string_parameter.js b/src/plugins/home/public/application/components/tutorial/string_parameter.js
@@ -8,19 +8,17 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EuiFormRow, EuiFieldText } from '@elastic/eui';
 
 export function StringParameter({ id, label, value, setParameter }) {
   const handleChange = (evt) => {
     setParameter(id, evt.target.value);
   };
 
   return (
-    <div className="visEditorSidebar__formRow">
-      <label className="visEditorSidebar__formLabel">{label}</label>
-      <div className="visEditorSidebar__formControl kuiFieldGroupSection--wide">
-        <input className="kuiTextInput" type="text" value={value} onChange={handleChange} />
-      </div>
-    </div>
+    <EuiFormRow label={label}>
+      <EuiFieldText value={value} onChange={handleChange} fullWidth />
+    </EuiFormRow>
   );
 }