Skip to content

feat(#1984): style warning-level validation feedback differently from errors #2009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MaryamMehd wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(#1984): style warning-level validation feedback differently from errors #2009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion ...ges/smart-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ interface AttachmentFieldProps extends PropsWithIsTabledAttribute {
itemText: string | undefined;
attachmentValues: AttachmentValues;
feedback: string;
feedbackSeverity?: 'error' | 'warning';
readOnly: boolean;
instructionsId: string | undefined;
onUploadFile: (file: File | null) => void;
Expand All @@ -49,6 +50,7 @@ function AttachmentField(props: AttachmentFieldProps) {
itemText,
attachmentValues,
feedback,
feedbackSeverity,
readOnly,
isTabled,
instructionsId,
Expand Down Expand Up @@ -148,7 +150,12 @@ function AttachmentField(props: AttachmentFieldProps) {
</Stack>
</div>

{feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}
{feedback ? (
<StyledRequiredTypography
sx={feedbackSeverity === 'warning' ? { color: 'warning.main' } : undefined}>
{feedback}
</StyledRequiredTypography>
) : null}
</>
);
}
Expand Down
4 changes: 4 additions & 0 deletions ...rt-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentFieldWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ interface AttachmentFieldWrapperProps
qItem: QuestionnaireItem;
attachmentValues: AttachmentValues;
feedback: string;
feedbackSeverity?: 'error' | 'warning';
readOnly: boolean;
instructionsId: string | undefined;
onUploadFile: (file: File | null) => void;
Expand All @@ -46,6 +47,7 @@ function AttachmentFieldWrapper(props: AttachmentFieldWrapperProps) {
qItem,
attachmentValues,
feedback,
feedbackSeverity,
readOnly,
isRepeated,
isTabled,
Expand All @@ -65,6 +67,7 @@ function AttachmentFieldWrapper(props: AttachmentFieldWrapperProps) {
itemText={qItem.text}
attachmentValues={attachmentValues}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
isTabled={isTabled}
instructionsId={instructionsId}
Expand Down Expand Up @@ -92,6 +95,7 @@ function AttachmentFieldWrapper(props: AttachmentFieldWrapperProps) {
itemText={qItem.text}
attachmentValues={attachmentValues}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
isTabled={isTabled}
instructionsId={instructionsId}
Expand Down
5 changes: 3 additions & 2 deletions ...ages/smart-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import AttachmentFieldWrapper from './AttachmentFieldWrapper';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';
import { createAttachmentAnswer } from '../../../utils/fileUtils';
import useValidationFeedback from '../../../hooks/useValidationFeedback';
import useValidationFeedbackSeverity from '../../../hooks/useValidationFeedbackSeverity';
import { getInstructionsId } from '../ItemParts/ItemFieldGrid';

export interface AttachmentValues {
Expand Down Expand Up @@ -60,7 +60,7 @@ function AttachmentItem(props: BaseItemProps) {
const readOnly = useReadOnly(qItem, parentIsReadOnly);

// Perform validation checks
const feedback = useValidationFeedback(qItem, feedbackFromParent);
const { feedback, feedbackSeverity } = useValidationFeedbackSeverity(qItem, feedbackFromParent);

// Get instructions ID for aria-describedby
const { displayInstructions } = useRenderingExtensions(qItem);
Expand Down Expand Up @@ -114,6 +114,7 @@ function AttachmentItem(props: BaseItemProps) {
qItem={qItem}
attachmentValues={{ uploadedFile: uploadedFile, url: url, fileName: fileName }}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
isRepeated={isRepeated}
isTabled={isTabled}
Expand Down
9 changes: 8 additions & 1 deletion packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ interface BooleanFieldProps {
readOnly: boolean;
valueBoolean: boolean | undefined;
feedback: string;
feedbackSeverity?: 'error' | 'warning';
calcExpUpdated: boolean;
instructionsId: string | undefined;
onCheckedChange: (newValue: string) => void;
Expand All @@ -49,6 +50,7 @@ const BooleanField = memo(function BooleanField(props: BooleanFieldProps) {
readOnly,
valueBoolean,
feedback,
feedbackSeverity,
calcExpUpdated,
instructionsId,
onCheckedChange,
Expand Down Expand Up @@ -182,7 +184,12 @@ const BooleanField = memo(function BooleanField(props: BooleanFieldProps) {
/>
</Box>

{feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}
{feedback ? (
<StyledRequiredTypography
sx={feedbackSeverity === 'warning' ? { color: 'warning.main' } : undefined}>
{feedback}
</StyledRequiredTypography>
) : null}
</>
);
});
Expand Down
7 changes: 5 additions & 2 deletions packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

import Box from '@mui/material/Box';
import useReadOnly from '../../../hooks/useReadOnly';
import useValidationFeedback from '../../../hooks/useValidationFeedback';
import useValidationFeedbackSeverity from '../../../hooks/useValidationFeedbackSeverity';
import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
import { useQuestionnaireStore } from '../../../stores';
import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
Expand All @@ -44,7 +44,7 @@ function BooleanItem(props: BaseItemProps) {
const readOnly = useReadOnly(qItem, parentIsReadOnly);

// Perform validation checks - there's no string-based input here
const feedback = useValidationFeedback(qItem, feedbackFromParent);
const { feedback, feedbackSeverity } = useValidationFeedbackSeverity(qItem, feedbackFromParent);

// Get instructions ID for aria-describedby
const { displayInstructions } = useRenderingExtensions(qItem);
Expand Down Expand Up @@ -90,6 +90,7 @@ function BooleanItem(props: BaseItemProps) {
readOnly={readOnly}
valueBoolean={valueBoolean}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
calcExpUpdated={calcExpUpdated}
instructionsId={instructionsId}
onCheckedChange={handleValueChange}
Expand All @@ -106,6 +107,7 @@ function BooleanItem(props: BaseItemProps) {
readOnly={readOnly}
valueBoolean={valueBoolean}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
calcExpUpdated={calcExpUpdated}
instructionsId={instructionsId}
onCheckedChange={handleValueChange}
Expand All @@ -130,6 +132,7 @@ function BooleanItem(props: BaseItemProps) {
readOnly={readOnly}
valueBoolean={valueBoolean}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
calcExpUpdated={calcExpUpdated}
instructionsId={instructionsId}
onCheckedChange={handleValueChange}
Expand Down
7 changes: 4 additions & 3 deletions ...smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import type { AlertColor } from '@mui/material/Alert';
import useDebounce from '../../../hooks/useDebounce';
import useReadOnly from '../../../hooks/useReadOnly';
import useTerminologyServerQuery from '../../../hooks/useTerminologyServerQuery';
import useValidationFeedback from '../../../hooks/useValidationFeedback';
import useValidationFeedbackSeverity from '../../../hooks/useValidationFeedbackSeverity';
import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
import { useQuestionnaireStore } from '../../../stores';
import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
Expand Down Expand Up @@ -64,7 +64,8 @@ function ChoiceAutocompleteItem(props: BaseItemProps) {
const readOnly = useReadOnly(qItem, parentIsReadOnly);

// Perform validation checks
const validationFeedback = useValidationFeedback(qItem, feedbackFromParent);
const { feedback: validationFeedback, feedbackSeverity: validationFeedbackSeverity } =
useValidationFeedbackSeverity(qItem, feedbackFromParent);
const { displayInstructions } = renderingExtensions;
const instructionsId =
displayInstructions && !validationFeedback ? `instructions-${qItem.linkId}` : undefined;
Expand All @@ -79,7 +80,7 @@ function ChoiceAutocompleteItem(props: BaseItemProps) {
if (terminologyFeedback) {
feedback = terminologyFeedback;
} else if (validationFeedback !== '') {
feedback = { message: validationFeedback, color: 'error' };
feedback = { message: validationFeedback, color: validationFeedbackSeverity };
}

if (!qItem.answerValueSet) {
Expand Down
3 changes: 3 additions & 0 deletions ...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ interface ChoiceCheckboxAnswerOptionFieldsProps {
options: QuestionnaireItemAnswerOption[];
answers: QuestionnaireResponseItemAnswer[];
feedback: string;
feedbackSeverity?: 'error' | 'warning';
readOnly: boolean;
expressionUpdated: boolean;
answerOptionsToggleExpressionsMap: Map<string, boolean>;
Expand All @@ -42,6 +43,7 @@ function ChoiceCheckboxAnswerOptionFields(props: ChoiceCheckboxAnswerOptionField
options,
answers,
feedback,
feedbackSeverity,
readOnly,
expressionUpdated,
answerOptionsToggleExpressionsMap,
Expand All @@ -57,6 +59,7 @@ function ChoiceCheckboxAnswerOptionFields(props: ChoiceCheckboxAnswerOptionField
options={options}
answers={answers}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
expressionUpdated={expressionUpdated}
answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
Expand Down
6 changes: 4 additions & 2 deletions ...rms-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
import useReadOnly from '../../../hooks/useReadOnly';
import useValidationFeedback from '../../../hooks/useValidationFeedback';
import useValidationFeedbackSeverity from '../../../hooks/useValidationFeedbackSeverity';
import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
import { useQuestionnaireStore } from '../../../stores';
import { updateChoiceCheckboxAnswers } from '../../../utils/choice';
Expand Down Expand Up @@ -57,7 +57,7 @@ function ChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
const readOnly = useReadOnly(qItem, parentIsReadOnly);

// Perform validation checks
const feedback = useValidationFeedback(qItem, feedbackFromParent);
const { feedback, feedbackSeverity } = useValidationFeedbackSeverity(qItem, feedbackFromParent);
const instructionsId = getInstructionsId(qItem, displayInstructions, !!feedback);

const options = qItem.answerOption ?? [];
Expand Down Expand Up @@ -95,6 +95,7 @@ function ChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
options={options}
answers={answers}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
Expand Down Expand Up @@ -124,6 +125,7 @@ function ChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
options={options}
answers={answers}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
Expand Down
3 changes: 3 additions & 0 deletions ...renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ interface ChoiceCheckboxAnswerValueSetFieldsProps {
options: QuestionnaireItemAnswerOption[];
answers: QuestionnaireResponseItemAnswer[];
feedback: string;
feedbackSeverity?: 'error' | 'warning';
readOnly: boolean;
expressionUpdated: boolean;
answerOptionsToggleExpressionsMap: Map<string, boolean>;
Expand All @@ -47,6 +48,7 @@ function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetF
options,
answers,
feedback,
feedbackSeverity,
readOnly,
expressionUpdated,
answerOptionsToggleExpressionsMap,
Expand All @@ -64,6 +66,7 @@ function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetF
options={options}
answers={answers}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
expressionUpdated={expressionUpdated}
answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
Expand Down
6 changes: 4 additions & 2 deletions ...s-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
import { useMemo } from 'react';
import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
import useReadOnly from '../../../hooks/useReadOnly';
import useValidationFeedback from '../../../hooks/useValidationFeedback';
import useValidationFeedbackSeverity from '../../../hooks/useValidationFeedbackSeverity';
import useValueSetCodings from '../../../hooks/useValueSetCodings';
import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
import { useQuestionnaireStore } from '../../../stores';
Expand Down Expand Up @@ -55,7 +55,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
const readOnly = useReadOnly(qItem, parentIsReadOnly);

// Perform validation checks
const feedback = useValidationFeedback(qItem, feedbackFromParent);
const { feedback, feedbackSeverity } = useValidationFeedbackSeverity(qItem, feedbackFromParent);
const instructionsId = getInstructionsId(qItem, displayInstructions, !!feedback);

// Get codings/options from valueSet
Expand Down Expand Up @@ -101,6 +101,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
options={options}
answers={answers}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
Expand Down Expand Up @@ -131,6 +132,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
options={options}
answers={answers}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
Expand Down
3 changes: 3 additions & 0 deletions ...orms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ interface ChoiceRadioAnswerOptionFieldsProps {
options: QuestionnaireItemAnswerOption[];
valueRadio: string | null;
feedback: string;
feedbackSeverity?: 'error' | 'warning';
readOnly: boolean;
expressionUpdated: boolean;
answerOptionsToggleExpressionsMap: Map<string, boolean>;
Expand All @@ -38,6 +39,7 @@ function ChoiceRadioAnswerOptionFields(props: ChoiceRadioAnswerOptionFieldsProps
options,
valueRadio,
feedback,
feedbackSeverity,
readOnly,
expressionUpdated,
answerOptionsToggleExpressionsMap,
Expand All @@ -53,6 +55,7 @@ function ChoiceRadioAnswerOptionFields(props: ChoiceRadioAnswerOptionFieldsProps
options={options}
valueRadio={valueRadio}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
expressionUpdated={expressionUpdated}
answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
Expand Down
6 changes: 4 additions & 2 deletions ...-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import Typography from '@mui/material/Typography';
import type { QuestionnaireItemAnswerOption } from 'fhir/r4';
import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
import useReadOnly from '../../../hooks/useReadOnly';
import useValidationFeedback from '../../../hooks/useValidationFeedback';
import useValidationFeedbackSeverity from '../../../hooks/useValidationFeedbackSeverity';
import { ChoiceItemControl } from '../../../interfaces/choice.enum';
import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
import { useQuestionnaireStore } from '../../../stores';
Expand Down Expand Up @@ -51,7 +51,7 @@ function ChoiceRadioAnswerOptionItem(props: BaseItemProps) {
const readOnly = useReadOnly(qItem, parentIsReadOnly);

// Perform validation checks - there's no string-based input here
const feedback = useValidationFeedback(qItem, feedbackFromParent);
const { feedback, feedbackSeverity } = useValidationFeedbackSeverity(qItem, feedbackFromParent);

const { displayInstructions } = renderingExtensions;

Expand Down Expand Up @@ -108,6 +108,7 @@ function ChoiceRadioAnswerOptionItem(props: BaseItemProps) {
options={options}
valueChoice={valueChoice}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
isRepeated={isRepeated}
readOnly={readOnly}
expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
Expand All @@ -128,6 +129,7 @@ function ChoiceRadioAnswerOptionItem(props: BaseItemProps) {
options={options}
valueChoice={valueChoice}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
isRepeated={isRepeated}
isTabled={isTabled}
readOnly={readOnly}
Expand Down
4 changes: 4 additions & 0 deletions ...-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ interface ChoiceRadioAnswerOptionViewProps extends PropsWithIsRepeatedAttribute
options: QuestionnaireItemAnswerOption[];
valueChoice: string | null;
feedback: string;
feedbackSeverity?: 'error' | 'warning';
readOnly: boolean;
expressionUpdated: boolean;
answerOptionsToggleExpressionsMap: Map<string, boolean>;
Expand All @@ -43,6 +44,7 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
options,
valueChoice,
feedback,
feedbackSeverity,
isRepeated,
readOnly,
expressionUpdated,
Expand All @@ -61,6 +63,7 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
options={options}
valueRadio={valueChoice}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
expressionUpdated={expressionUpdated}
answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
Expand Down Expand Up @@ -88,6 +91,7 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
options={options}
valueRadio={valueChoice}
feedback={feedback}
feedbackSeverity={feedbackSeverity}
readOnly={readOnly}
expressionUpdated={expressionUpdated}
answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
Expand Down
Loading
Loading