Feat/indication for mandatory field #2775
Conversation
What color should the indication have
src/incubator/TextField/types.ts
Outdated
| @@ -162,13 +162,15 @@ export interface InputProps | |||
| */ | |||
| readonly?: boolean; | |||
| } | |||
| type MandatoryField = {showMandatoryIndication?: boolean} | |||
There was a problem hiding this comment.
since this type contain a single property you might as well add it to the main TextFieldProp list directly
src/incubator/TextField/index.tsx
Outdated
| const textFieldIsRequired = | ||
| (typeof others.validate === 'string' && others.validate === 'required') || | ||
| (Array.isArray(others.validate) && others.validate.includes('required')); |
There was a problem hiding this comment.
Let's move this part of logic to the hook that responsible for the field state (useFieldState)
You can add isMandatory to the fieldState object
src/incubator/TextField/index.tsx
Outdated
| <FieldContext.Provider value={context}> | ||
| <View {...containerProps} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}> | ||
| let textFieldLabel = ( | ||
| <Label |
There was a problem hiding this comment.
Instead of handling this logic in the main index, move it inside the Label component, so it's more encapsulated and less messy for the index file.
Moreover, consider not rendering two labels, but concatenate the * with the original label
I would not color the * with red, today we already have a solution for this in private (in TextField.config) where we don't color the * so better keep it aligned with our UI guidelines.
If you still want to support coloring the asterisk for the community (was it even requested by the user?) there are a bit simpler ways doing that..
There was a problem hiding this comment.
Done. I had to pass the showMandatoryIndication to the label though.
On regard to the red asterisk there was an image attached to the issue where the asterisk was red so I thought this is what we wanted. I removed the coloring for now.
… of the indicator
|
I moved the isMandatory to the useForm hook and the adding of the asterisk and the adding of the asterisk in the label component like we talked. |
nitzanyiz
force-pushed
the
feat/indication-for-mandatory-field
branch
from
b560298 to
2668879
Compare
src/incubator/TextField/Label.tsx
Outdated
| @@ -28,6 +28,7 @@ const Label = ({ | |||
| const style = useMemo(() => { | |||
| return [styles.label, labelStyle, floatingPlaceholder && styles.dummyPlaceholder]; | |||
| }, [labelStyle, floatingPlaceholder]); | |||
| const shouldRenderIdication = context.isMandatory && showMandatoryIndication; | |||
There was a problem hiding this comment.
Notice you have a typo here (shouldRenderIdication -> shouldRenderIndication)
Best way to spot typos is to install VSCode extension Code Spell Checker
Description
Added mandatory indication to the text field. The star (*) symbol is rendered conditionally if the textfield is required, i.e. has a required validator and showMandatoryIndication prop is present.
Changelog
TextField - Supports a mandatory star indication. A red star indication will show if the the TextField is required and showMandatoryIndication props is passed.
Additional info
Issue:
#2770