new mechanism to handle help more in line with how carbon works
This commit is contained in:
parent
af5374fa04
commit
a35a177bd1
|
@ -85,6 +85,11 @@ export default function BaseInputTemplate<
|
|||
labelToUse = `${labelToUse}*`;
|
||||
}
|
||||
|
||||
let helperText = null;
|
||||
if (uiSchema && uiSchema['ui:help']) {
|
||||
helperText = uiSchema['ui:help'];
|
||||
}
|
||||
|
||||
let invalid = false;
|
||||
let errorMessageForField = null;
|
||||
if (rawErrors && rawErrors.length > 0) {
|
||||
|
@ -103,6 +108,7 @@ export default function BaseInputTemplate<
|
|||
name={id}
|
||||
className="input"
|
||||
labelText={labelToUse}
|
||||
helperText={helperText}
|
||||
invalid={invalid}
|
||||
invalidText={errorMessageForField}
|
||||
autoFocus={autofocus}
|
||||
|
|
|
@ -7,10 +7,8 @@ import FormHelperText from '@mui/material/FormHelperText';
|
|||
* @param props - The `FieldHelpProps` to be rendered
|
||||
*/
|
||||
export default function FieldHelpTemplate(props: FieldHelpProps) {
|
||||
const { idSchema, help } = props;
|
||||
if (!help) {
|
||||
return null;
|
||||
}
|
||||
const id = `${idSchema.$id}__help`;
|
||||
return <FormHelperText id={id}>{help}</FormHelperText>;
|
||||
// ui:help is handled by helperText in all carbon widgets.
|
||||
// see BaseInputTemplate/BaseInputTemplate.tsx and
|
||||
// SelectWidget/SelectWidget.tsx
|
||||
return null;
|
||||
}
|
||||
|
|
|
@ -41,6 +41,10 @@ function SelectWidget({
|
|||
} else if (schema && schema.title) {
|
||||
labelToUse = schema.title;
|
||||
}
|
||||
let helperText = null;
|
||||
if (uiSchema && uiSchema['ui:help']) {
|
||||
helperText = uiSchema['ui:help'];
|
||||
}
|
||||
if (required) {
|
||||
labelToUse = `${labelToUse}*`;
|
||||
}
|
||||
|
@ -52,13 +56,16 @@ function SelectWidget({
|
|||
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 (
|
||||
<Select
|
||||
id={id}
|
||||
name={id}
|
||||
labelText={labelToUse}
|
||||
select
|
||||
helperText={placeholder}
|
||||
helperText={helperText}
|
||||
value={typeof value === 'undefined' ? emptyValue : value}
|
||||
disabled={disabled || readonly}
|
||||
autoFocus={autofocus}
|
||||
|
|
Loading…
Reference in New Issue