new mechanism to handle help more in line with how carbon works

This commit is contained in:
burnettk 2023-01-30 11:53:35 -05:00
parent bd9ef740e6
commit 799ea492dd
3 changed files with 18 additions and 7 deletions

View File

@ -85,6 +85,11 @@ export default function BaseInputTemplate<
labelToUse = `${labelToUse}*`; labelToUse = `${labelToUse}*`;
} }
let helperText = null;
if (uiSchema && uiSchema['ui:help']) {
helperText = uiSchema['ui:help'];
}
let invalid = false; let invalid = false;
let errorMessageForField = null; let errorMessageForField = null;
if (rawErrors && rawErrors.length > 0) { if (rawErrors && rawErrors.length > 0) {
@ -103,6 +108,7 @@ export default function BaseInputTemplate<
name={id} name={id}
className="input" className="input"
labelText={labelToUse} labelText={labelToUse}
helperText={helperText}
invalid={invalid} invalid={invalid}
invalidText={errorMessageForField} invalidText={errorMessageForField}
autoFocus={autofocus} autoFocus={autofocus}

View File

@ -7,10 +7,8 @@ import FormHelperText from '@mui/material/FormHelperText';
* @param props - The `FieldHelpProps` to be rendered * @param props - The `FieldHelpProps` to be rendered
*/ */
export default function FieldHelpTemplate(props: FieldHelpProps) { export default function FieldHelpTemplate(props: FieldHelpProps) {
const { idSchema, help } = props; // ui:help is handled by helperText in all carbon widgets.
if (!help) { // see BaseInputTemplate/BaseInputTemplate.tsx and
return null; // SelectWidget/SelectWidget.tsx
} return null;
const id = `${idSchema.$id}__help`;
return <FormHelperText id={id}>{help}</FormHelperText>;
} }

View File

@ -41,6 +41,10 @@ function SelectWidget({
} else if (schema && schema.title) { } else if (schema && schema.title) {
labelToUse = schema.title; labelToUse = schema.title;
} }
let helperText = null;
if (uiSchema && uiSchema['ui:help']) {
helperText = uiSchema['ui:help'];
}
if (required) { if (required) {
labelToUse = `${labelToUse}*`; labelToUse = `${labelToUse}*`;
} }
@ -52,13 +56,16 @@ function SelectWidget({
errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`; errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
} }
// maybe use placeholder somehow. it was previously jammed into the helperText field,
// but allowing ui:help to grab that spot seems much more appropriate.
return ( return (
<Select <Select
id={id} id={id}
name={id} name={id}
labelText={labelToUse} labelText={labelToUse}
select select
helperText={placeholder} helperText={helperText}
value={typeof value === 'undefined' ? emptyValue : value} value={typeof value === 'undefined' ? emptyValue : value}
disabled={disabled || readonly} disabled={disabled || readonly}
autoFocus={autofocus} autoFocus={autofocus}