Merge pull request #93 from yuvipanda/ref-help-text

Add hint text for ref field

src/ImageBuilder.jsx

@@ -178,6 +178,7 @@ export function ImageBuilder({ name, isActive }) {
         ref={branchFieldRef}
         id={`${name}--ref`}
         label="Git Ref"
+        hint="Branch, Tag or Commit to use. HEAD will use the default branch"
         value={ref}
         validate={
           isActive && {

src/components/form/fields.jsx

@@ -19,16 +19,16 @@ function validateField(value, validateConfig, touched) {
   return;
 }
 
-function Field({ id, label, children, error }) {
+function Field({ id, label, hint, children, error }) {
   return (
     <div className={`profile-option-container ${error ? "has-error" : ""}`}>
       <div className="profile-option-label-container">
         <label htmlFor={id}>{label}</label>
       </div>
       <div className="profile-option-control-container">
         {children}
-
         {error && <div className="profile-option-control-error">{error}</div>}
+        {hint && <div className="profile-option-control-hint">{hint}</div>}
       </div>
     </div>
   );
@@ -37,6 +37,7 @@ function Field({ id, label, children, error }) {
 export function SelectField({
   id,
   label,
+  hint,
   options,
   defaultOption,
   onChange,
@@ -55,7 +56,7 @@ export function SelectField({
   );
 
   return (
-    <Field id={id} label={label} error={error}>
+    <Field id={id} label={label} hint={hint} error={error}>
       <CustomizedSelect
         options={options}
         id={id}
@@ -74,7 +75,7 @@ export function SelectField({
 }
 
 function _TextField(
-  { id, label, value, validate = {}, onChange, tabIndex },
+  { id, label, value, hint, validate = {}, onChange, tabIndex },
   ref,
 ) {
   const [touched, setTouched] = useState(false);
@@ -85,7 +86,7 @@ function _TextField(
   const error = validateField(value, validate, touched);
 
   return (
-    <Field id={id} label={label} error={touched && error}>
+    <Field id={id} label={label} hint={hint} error={touched && error}>
       <input
         ref={ref}
         type="text"

src/form.css

@@ -92,9 +92,16 @@
   border-color: red;
 }
 
+.profile-option-control-hint {
+  color: #555;
+  margin-top: 0.3rem;
+  font-size: 0.9rem;
+}
+
 .profile-option-control-error {
   color: red;
-  margin-top: 0.5rem;
+  margin-top: 0.3rem;
+  font-size: 0.9rem;
 }
 
 .profile-form-error {