Feat/indication for mandatory field (#2775)

* Added mandatory star indication to the text field. Passing showMandatoryIndication to a required text field now shows a star next to the label.

Author: nitzanyiz

src/incubator/TextField/FieldContext.ts

@@ -10,7 +10,8 @@ const FieldContext = createContext<FieldContextType>({
   disabled: false,
   readonly: false,
   validateField: _.noop,
-  checkValidity: () => true
+  checkValidity: () => true,
+  isMandatory: false
 });
 
 export default FieldContext;

src/incubator/TextField/Label.tsx

@@ -6,7 +6,6 @@ import {ColorType, LabelProps, ValidationMessagePosition} from './types';
 import {getColorByState} from './Presenter';
 import FieldContext from './FieldContext';
 
-
 const DEFAULT_LABEL_COLOR: ColorType = {
   default: Colors.$textDefault,
   readonly: Colors.$textNeutral
@@ -19,6 +18,7 @@ const Label = ({
   labelProps,
   validationMessagePosition,
   floatingPlaceholder,
+  showMandatoryIndication,
   testID
 }: LabelProps) => {
   const context = useContext(FieldContext);
@@ -28,6 +28,7 @@ const Label = ({
   const style = useMemo(() => {
     return [styles.label, labelStyle, floatingPlaceholder && styles.dummyPlaceholder];
   }, [labelStyle, floatingPlaceholder]);
+  const shouldRenderIndication = context.isMandatory && showMandatoryIndication;
 
   if ((label || floatingPlaceholder) && !forceHidingLabel) {
     return (
@@ -38,7 +39,7 @@ const Label = ({
         recorderTag={'unmask'}
         {...labelProps}
       >
-        {label}
+        {shouldRenderIndication ? label?.concat('*') : label}
       </Text>
     );
   }

src/incubator/TextField/__tests__/index.spec.js

@@ -83,6 +83,33 @@ describe('TextField', () => {
       const validationMessageElement = renderTree.queryByText(props.validationMessage);
       expect(validationMessageElement).toBe(null);
     });
+
+    describe('Mandatory Indication', () => {
+      it('Should show mandatory star indication - 1', async () => {
+        const renderTree = render(<TestCase testID={'field'} validate={'required'} label={'Label'} showMandatoryIndication/>);
+        const label = renderTree.getByTestId('field.label');
+        const text = label.children[0];
+        expect(text).toEqual('Label*');
+      });
+      it('Should show mandatory star indication - 2', () => {
+        const renderTree = render(<TestCase testID={'field'} validate={['email', 'required']} label={'Label'} showMandatoryIndication/>);
+        const label = renderTree.getByTestId('field.label');
+        const text = label.children[0];
+        expect(text).toEqual('Label*');
+      });
+      it('Should not show mandatory star indication - 1', () => {
+        const renderTree = render(<TestCase testID={'field'} validate={['email', 'required']} label={'Label'}/>);
+        const label = renderTree.getByTestId('field.label');
+        const text = label.children[0];
+        expect(text).not.toEqual('Label*');
+      });
+      it('Should not show mandatory star indication - 2', () => {
+        const renderTree = render(<TestCase testID={'field'} validate={['email']} label={'Label'} showMandatoryIndication/>);
+        const label = renderTree.getByTestId('field.label');
+        const text = label.children[0];
+        expect(text).not.toEqual('Label*');
+      });
+    });
   });
 
   describe('defaultValue', () => {

src/incubator/TextField/index.tsx

@@ -78,6 +78,7 @@ const TextField = (props: InternalTextFieldProps) => {
     children,
     centered,
     readonly = false,
+    showMandatoryIndication,
     ...others
   } = usePreset(props);
   const {ref: leadingAccessoryRef, measurements: leadingAccessoryMeasurements} = useMeasure();
@@ -135,6 +136,7 @@ const TextField = (props: InternalTextFieldProps) => {
           floatingPlaceholder={floatingPlaceholder}
           validationMessagePosition={validationMessagePosition}
           testID={`${props.testID}.label`}
+          showMandatoryIndication={showMandatoryIndication}
         />
         {validationMessagePosition === ValidationMessagePosition.TOP && (
           <ValidationMessage

src/incubator/TextField/textField.api.json

@@ -115,7 +115,8 @@
       "type": "boolean",
       "description": "A UI preset for read only state"
     },
-    {"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"}
+    {"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"},
+    {"name": "showMandatoryIndication", "type": "boolean", "description": "Whether to show a mandatory field indication"}
   ],
   "snippet": [
     "<TextField",

src/incubator/TextField/types.ts

@@ -74,6 +74,7 @@ export interface LabelProps {
   validationMessagePosition?: ValidationMessagePositionType;
   floatingPlaceholder?: boolean;
   testID?: string;
+  showMandatoryIndication?: boolean;
 }
 
 export interface FloatingPlaceholderProps {
@@ -251,6 +252,10 @@ export type TextFieldProps = MarginModifiers &
      * Set an alignment fit for inline behavior (when rendered inside a row container)
      */
     inline?: boolean;
+    /**
+     * Whether to show a mandatory field indication.
+     */
+    showMandatoryIndication?: boolean;
   };
 
 export type InternalTextFieldProps = PropsWithChildren<
@@ -267,6 +272,7 @@ export type FieldContextType = {
   readonly: boolean;
   validateField: () => void;
   checkValidity: () => boolean;
+  isMandatory: boolean;
 };
 
 export interface TextFieldMethods {

src/incubator/TextField/useFieldState.ts

@@ -20,6 +20,8 @@ export default function useFieldState({
   const [isFocused, setIsFocused] = useState(false);
   const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
   const [failingValidatorIndex, setFailingValidatorIndex] = useState<number | undefined>(undefined);
+  const isMandatory = useMemo(() => ((typeof validate === 'string' && validate === 'required') || (Array.isArray(validate) && validate.includes('required'))), [validate]);
+
 
   useEffect(() => {
     if (Constants.isWeb && !props.value && props.defaultValue && props.defaultValue !== value) {
@@ -110,9 +112,10 @@ export default function useFieldState({
       hasValue: !_.isEmpty(value),
       isValid: validationMessage && !validate ? false : isValid ?? true,
       isFocused,
-      failingValidatorIndex
+      failingValidatorIndex,
+      isMandatory
     };
-  }, [value, isFocused, isValid, failingValidatorIndex, validationMessage, validate]);
+  }, [value, isFocused, isValid, failingValidatorIndex, validationMessage, validate, isMandatory]);
 
   return {
     onFocus,