[CMSDS-4042] Complete DatePicker localization#4067
Conversation
jack-ryan-nava-pbc
added this to the
18.0.0 (Do not merge⛔️ it is in approval process!) milestone
jack-ryan-nava-pbc
added
Type: Fixed
| | 'toYear' | ||
| >; | ||
|
|
||
| const getLocale = () => { |
There was a problem hiding this comment.
Going with a switch here in case we decide to localize additional languages. We just add a new case for any additional language
|
|
||
| type MaskType = 'DATE_MASK' | 'PHONE_MASK' | 'ZIP_MASK' | 'SSN_MASK' | 'CURRENCY_MASK'; | ||
| type TaggedFunction = MaskFunction & { __maskType: MaskType }; | ||
| const createTaggedFunction = (fn: MaskFunction, fnType: MaskType) => { |
There was a problem hiding this comment.
Ok, so stick with me here. The idea of the tagged function is to make it easier to check if we're using the correct function in the if checks below. I've only added it for the createDateMask function to reduce the scope of the changes in this PR. The idea is that instead of checking for literal object equality like maskFn === DATE_MASK we append a "tag" to the function in question so we can explicitly control and check that type.
There was a problem hiding this comment.
Ideally everyone of the *_MASK functions in this file would be converted to a Tagged function, but since those functions are used in TextField as well, I don't want to expand the scope and risk breaking things over there.
|
|
||
| return formattedDate; | ||
| }), | ||
| 'DATE_MASK' |
There was a problem hiding this comment.
^ This string is the tag we check for later.
|
|
||
| return formattedDate; | ||
| }); | ||
| export const DATE_MASK: TaggedFunction = createDateMask(); |
There was a problem hiding this comment.
I could in theory remove the export statement here, I'm pretty sure this is only being used in the SingleInputDateField component, but I want to minimize potential downstream changes. Let me know if you disagree.
|
|
||
| // Date mask needs to return the default empty mask when not focused | ||
| if (maskFn === DATE_MASK && !focused) { | ||
| if ('__maskType' in maskFn && maskFn.__maskType === 'DATE_MASK' && !focused) { |
There was a problem hiding this comment.
If I converted every function in this file to a TaggedFunction I could remove the '__maskType' in maskFn but I think that is an increase in scope that I don't want to do just yet.
jack-ryan-nava-pbc
modified the milestones:
18.0.0 (Do not merge⛔️ it is in approval process!),
18.1.0
There was a problem hiding this comment.
Selecting a day greater than 12 while in the Spanish locale appears to break the picker.
- Load the SingleInputDateField With Picker Story.
- Switch to the Spanish locale.
- Select a day of the month greater than 12.
- Click the picker again.
- Verify that a small, blank, white box appears instead of the picker.
@derek-cmsds this should be resolved in the latest commit. |
tamara-corbalt
left a comment
tamara-corbalt
left a comment
There was a problem hiding this comment.
Looks like it's working great in Storybook! Seeing some local unit test failures though — related to where we import es from date-fns/locale
3 participants
Summary
How to test
Checklist
[CMSDS-####] Titleor [NO-TICKET] if this is unticketed work.Type(only one) label for this PR, if it is a breaking change, label should only beType: BreakingImpacts, multiple can be selected.