Merge branch 'vnext' of https://github.com/EAVFW/QuickForm into vnext

packages/core/src/components/button/Button.tsx

@@ -2,9 +2,10 @@
 import React, { PropsWithChildren } from "react";
 import { MouseEventHandler, useEffect, useState } from "react";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";
-import { makeStyles, shorthands } from "@griffel/react";
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
 
 type BtnContainerProps = {
+    readonly buttonClassName?: string;
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly disabled?: boolean;
@@ -37,7 +38,7 @@ const useButtonStyles = makeStyles({
     }
 })
 
-export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style }) => {
+export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style, className, buttonClassName }) => {
 
     if (typeof visible !== "undefined" && visible === false) {
         return (<></>);
@@ -60,9 +61,9 @@ export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ childre
     }, []);
 
     return (
-        <div className={styles.container}>
+        <div className={mergeClasses(styles.container, className)}>
             <button
-                className={styles.button}
+                className={mergeClasses(styles.button, buttonClassName)}
                 style={style}
                 disabled={disabled}
                 type="button"

packages/core/src/components/paragraph/Paragraph.tsx

@@ -10,7 +10,7 @@ const useParagraphStyles = makeStyles({
         color: quickformtokens.onSurface,
         fontSize: quickformtokens.questionParagraphFontSize,
         fontWeight: 'unset',
-        lineHeight: '1.4em',
+        lineHeight: quickformtokens.questionParagraphFontSize, // '1.4em',
         ...shorthands.margin(0, 0, quickformtokens.gap1, 0),
         '@media screen and (max-width: 599px)': { fontSize: quickformtokens.paragraphMobileFontSize },
     },

packages/core/src/components/question/Question.tsx

@@ -66,7 +66,7 @@ export const Question: React.FC<QuestionProps> = ({ model, style }) => {
                 questionModel={model}
                 {...model.inputProperties ?? {}}
             />
-            {typeof (model.validationResult?.message) !== "undefined" && model.validationResult?.message !== "" && <ErrorMessage message={model.validationResult?.message} />}
+            {typeof (model.validationResult?.message) !== "undefined" && model.validationResult?.message !== "" && !model.validationResult.isValid && <ErrorMessage message={model.validationResult?.message} />}
         </div>
     );
 }

packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx

@@ -107,12 +107,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
         if (span) {
             span.addEvent("BaseInputComponent:handleChange", { 'value': event.target.value });
         }
-        //EXPLAIN: WHY IS THIS HERE? If no reason, lets remove.
-        if (event.target.value === "")
-            questionModel.errorMsg = "";
 
-
-       // setText(() => event.target.value);
         answerQuestion(questionModel.logicalName, event.target.value, true);
         resize();
     }

packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx

@@ -4,15 +4,19 @@ import { useQuickForm } from '../../../state/QuickFormContext';
 import { Button, Slide } from '../../index';
 import { useHandleEnterKeypress } from '../../../hooks';
 import { quickformtokens } from "../../../style";
-import { mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { IconResolver } from '../../icons/IconResolver';
 import { SlideModel } from '../../../model';
 
+const useSlideRenderStyles = makeStyles({
+    button: { display: 'flex', alignItems: 'center', justifyContent: 'center' }
+});
 
 export const SlideRenderer: React.FC = () => {
 
     const { state, goToNextSlide } = useQuickForm();
     const [className, setClassName] = useState(state.classes.slide);
+    const styles = useSlideRenderStyles();
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
 
@@ -47,7 +51,8 @@ export const SlideRenderer: React.FC = () => {
         >
             <Slide model={currentSlide} />
             <Button
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                className={state.classes.slideButtonContainer}
+                buttonClassName={mergeClasses(styles.button, state.classes.slideButton)}
                 onClick={goToNextSlide}
                 showPressEnter={showPressEnter}
                 children={

packages/core/src/components/submit/Submit.tsx

@@ -79,6 +79,8 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
             </div>
 
             <Button
+                className={state.classes.slideButtonContainer}
+                buttonClassName={ state.classes.slideButton}
                 showPressEnter={typeof state.showPressEnter !== "undefined" && state.showPressEnter !== false}
                 onClick={handleSubmit}
             >

packages/core/src/model/QuestionModel.ts

@@ -13,12 +13,6 @@ export type QuestionModel<TProps = InputPropertiesTypes> = {
      */
     dataType: "string" | "number" | "boolean";
 
-    /**
-     * Displays an error message adjacent to the question or input component, 
-     * informing the user of validation issues with their input.
-     */
-    errorMsg: string;
-
     /**
      * Optional properties related to the input, defined by the generic type TProps.
      */

packages/core/src/services/defaults/DefaultQuestionTransformer.ts

@@ -21,7 +21,6 @@ function mapJsonQuestionToModelQuestion(questionKey: string, question: QuestionJ
     return {
         answered: hasDefaultValueOrPayload,
         dataType: question.dataType ?? "string",
-        errorMsg: "",
         inputProperties: parseInputProperties(question),
         inputType: question.inputType ?? "text",
         intermediate: false,

packages/core/src/state/QuickformReducer.ts

@@ -57,7 +57,7 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
             }
 
             state = QuestionActionHandler.answerQuestion(state, action);
-
+  
             // Validate the question input
             if (!action.intermediate) {
                 const timestamp = new Date().getTime();

packages/core/src/state/QuickformState.ts

@@ -3,7 +3,15 @@ import { SlideModel } from "../model/SlideModel";
 import { LayoutDefinition, QuickFormModel } from "../model";
 import { IconType } from "../components/icons/IconResolver";
 
-export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string, submit:string, ending:string };
+export type QuickformClassNames = {
+    slide: string,
+    slideButton: string,
+    slideButtonContainer: string;
+    slideIsIn: string,
+    slideIsOut: string,
+    submit: string,
+    ending: string
+};
 export type QuickformState = {
     autoAdvanceSlides?: boolean;
     enableQuestionNumbers?: boolean;
@@ -71,7 +79,6 @@ export const defaultData: QuickFormModel = {
         buttonText: "Submit",
         submitFields: [
             {
-                errorMsg: "",
                 intermediate: false,
                 visited: false,
                 questionKey: "question1",
@@ -85,7 +92,6 @@ export const defaultData: QuickFormModel = {
                 output: {}
             },
             {
-                errorMsg: "",
                 intermediate: false,
                 visited: false,
                 questionKey: "question1",

packages/core/src/state/action-handlers/QuestionActionHandler.ts

@@ -53,17 +53,14 @@ export class QuestionActionHandler {
     };
 
     static answerQuestion = (state: QuickformState, { logicalName, output, intermediate, validationResult }: QuickformAnswerQuestionAction) => {
-        const propertiesToUpdate = {
+        const propertiesToUpdate: Partial<QuestionModel> = {
             answered: output !== undefined && output !== '' && !intermediate,
             intermediate: intermediate,
             visited: true,
             output: output,
-            errorMsg: validationResult?.message,
+            validationResult: undefined
         };
-
-        // DISCUSS, should answer clear error message ?
-        // This is currently undergoing changes since we have decided to move errorMsg to both questionModel and globally.
-        // state.errorMsg = '';
+
 
         return this.updateQuestionProperties(state, logicalName, propertiesToUpdate);
     };
@@ -76,6 +73,15 @@ export class QuestionActionHandler {
         });
     };
 
+    /**
+     * Update the validation result of a question
+     * The actually update is only done if the timestamp of the current validation result matches the timestamp of the action
+     * @param state - the current state
+     * @param logicalName - the logical name of the question
+     * @param validationResult - the new validation result
+     * @param timestamp - the timestamp of the action
+     * @returns the updated state
+     */
     static updateQuestionValidation = (state: QuickformState, logicalName: string, validationResult: ValidationResult, timestamp: number) => {
         const currentValidationResult = findQuestionByLogicalName(logicalName, getAllQuestions(state.slides))?.validationResult;
         if (currentValidationResult?.timestamp !== timestamp) {
@@ -98,4 +104,5 @@ export class QuestionActionHandler {
         }
         return await QuestionActionHandler.inputValidator(questionRef, state);
     }
+
 }