Add helperText prop to Field and FieldContainer (#1562)

Alongside `error` and `warning` messages for `Field` there is now a a `helperText` prop. Errors and warnings override the helper message. --------- Co-authored-by: Thomas Dax <[email protected]>
vivid-planet · Jan 24, 2024 · 921f637 · 921f637
1 parent c4a3fa9
commit 921f637
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/eleven-impalas-attack.md b/.changeset/eleven-impalas-attack.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": minor
+---
+
+Add `helperText` prop to `Field` and `FieldContainer` to provide additional information
diff --git a/packages/admin/admin-stories/src/docs/form/components/stories/FieldContainer.stories.tsx b/packages/admin/admin-stories/src/docs/form/components/stories/FieldContainer.stories.tsx
@@ -28,6 +28,9 @@ storiesOf("stories/Form/Components", module).add("FieldContainer", () => {
             <FieldContainer label="Warning" warning="This is a warning">
                 <InputBase onChange={handleChange} value={value} placeholder="Placeholder" />
             </FieldContainer>
+            <FieldContainer label="Helper" helperText="This is a helper">
+                <InputBase onChange={handleChange} value={value} placeholder="Placeholder" />
+            </FieldContainer>
         </form>
     );
 });
diff --git a/packages/admin/admin/src/form/Field.tsx b/packages/admin/admin/src/form/Field.tsx
@@ -16,6 +16,7 @@ const composeValidators =
 export interface FieldProps<FieldValue = any, T extends HTMLElement = HTMLElement> {
     name: string;
     label?: React.ReactNode;
+    helperText?: React.ReactNode;
     component?: React.ComponentType<any> | string;
     children?: (props: FieldRenderProps<FieldValue, T>) => React.ReactNode;
     required?: boolean;
@@ -34,6 +35,7 @@ export function Field<FieldValue = any, FieldElement extends HTMLElement = HTMLE
     component,
     name,
     label,
+    helperText,
     required,
     validate,
     validateWarning,
@@ -76,6 +78,7 @@ export function Field<FieldValue = any, FieldElement extends HTMLElement = HTMLE
                 disabled={disabled}
                 error={shouldShowError(meta) && (meta.error || meta.submitError)}
                 warning={shouldShowWarning(meta) && meta.data?.warning}
+                helperText={helperText}
                 variant={variant}
                 fullWidth={fullWidth}
                 scrollTo={shouldScrollToField(meta)}

diff --git a/packages/admin/admin/src/form/FieldContainer.tsx b/packages/admin/admin/src/form/FieldContainer.tsx
@@ -13,6 +13,7 @@ export interface FieldContainerProps {
     warning?: string;
     scrollTo?: boolean;
     fieldMargin?: "always" | "never" | "onlyIfNotLast";
+    helperText?: React.ReactNode;
 }
 
 export type FieldContainerClassKey =
@@ -30,7 +31,8 @@ export type FieldContainerClassKey =
     | "hasError"
     | "error"
     | "hasWarning"
-    | "warning";
+    | "warning"
+    | "helperText";
 
 const styles = (theme: Theme) => {
     return createStyles<FieldContainerClassKey, FieldContainerProps>({
@@ -99,6 +101,9 @@ const styles = (theme: Theme) => {
         warning: {
             color: theme.palette.warning.main,
         },
+        helperText: {
+            color: theme.palette.grey["300"],
+        },
     });
 };
 
@@ -115,6 +120,7 @@ export const FieldContainerComponent: React.FC<WithStyles<typeof styles> & Field
     warning,
     scrollTo = false,
     fieldMargin = "onlyIfNotLast",
+    helperText,
 }) => {
     const hasError = !!error;
     const hasWarning = !!warning;
@@ -156,6 +162,7 @@ export const FieldContainerComponent: React.FC<WithStyles<typeof styles> & Field
                         </FormHelperText>
                     )}
                     {hasWarning && !hasError && <FormHelperText classes={{ root: classes.warning }}>{warning}</FormHelperText>}
+                    {helperText && !hasError && !hasWarning && <FormHelperText classes={{ root: classes.helperText }}>{helperText}</FormHelperText>}
                 </div>
             </>
         </FormControl>