[aform] adate refactor

[Alchez]

No description provided.

[agritheory]

@Alchez I'm stuck on a couple of issues here:

1. The emits aren't correct - they should be using the same nomenclature as other form components.
2. The selectDate function does not seem to be working correctly, or at least it's not emitting a value. Might be related to 1.
3. Styling - we need to assume that this picker doesn't only occur in a dropdown/table context.

Can you take a look at this and give me a debrief of the mistakes?

[Alchez]

@agritheory

The emits should now match up with the other form components. Checkbox still seems to be using a slightly different emit event but I haven't changed it in this iteration yet. The selectDate function signature was incorrectly mapped on the template, but it should be emitting a value now (tests are passing though).

As for styling, I'm not too sure how to approach that one. Let's discuss on a call tonight?

[agritheory]

@Alchez Keyboard navigation

• [ENTER] should select the currently highlighted date
• [TAB] should blur and propagate so as to select the next field (outside of ADatePicker)
• [SHIFT] modifier should have the same behavior as [TAB] and [ENTER]
• [ESC] should have the same behavior as [TAB]
• [DEL] Should unset the selected date value

[agritheory]

@Alchez Let's refresh this one

[github-actions]

Coverage Report for ./aform

Status	Category	Percentage	Covered / Total
🔴	Lines	63% (🎯 70%)	739 / 1173
🔴	Statements	63% (🎯 70%)	739 / 1173
🔴	Functions	52% (🎯 70%)	26 / 50
🔴	Branches	68.33% (🎯 70%)	41 / 60

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
aform/src/index.ts	0%	0%	0%	0%	1-29
aform/src/components/form/ADate.vue	0%	0%	0%	0%	1-94
aform/src/components/form/ADatePicker.vue	87.5%	76.92%	54.54%	87.5%	26, 60, 64-65, 86-92, 95-101, 106-107
Unchanged Files
aform/src/components/AForm.vue	92.3%	80%	83.33%	92.3%	41-44, 65-66
aform/src/components/base/CollapseButton.vue	0%	0%	0%	0%	1-36
aform/src/components/form/ACheckbox.vue	100%	100%	100%	100%
aform/src/components/form/AComboBox.vue	0%	0%	0%	0%	1-13
aform/src/components/form/ADropdown.vue	85.43%	89.47%	50%	85.43%	68-70, 77-78, 92-93, 99-103, 108-109, 114-117, 119-122, 124-127, 129-132
aform/src/components/form/AFieldset.vue	0%	0%	0%	0%	1-63
aform/src/components/form/ANumericInput.vue	100%	100%	100%	100%
aform/src/components/form/ATextInput.vue	100%	80%	100%	100%
aform/src/components/utilities/Login.vue	0%	0%	0%	0%	1-72
aform/src/directives/mask.ts	31.73%	28.57%	40%	31.73%	13-22, 28-34, 40-41, 47-60, 62-78, 83-103

Generated in workflow #196

[github-actions]

Coverage Report for ./atable

Status	Category	Percentage	Covered / Total
🔴	Lines	67.11% (🎯 70%)	596 / 888
🔴	Statements	67.11% (🎯 70%)	596 / 888
🔴	Functions	56.52% (🎯 70%)	13 / 23
🔴	Branches	46.29% (🎯 70%)	25 / 54

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
atable/src/components/ACell.vue	82.62%	38.09%	75%	82.62%	19-21, 59-65, 74-76, 79-81, 84-94, 110-114, 144-147, 165
atable/src/components/AExpansionRow.vue	0%	0%	0%	0%	1-91
atable/src/components/ARow.vue	61.11%	20%	25%	61.11%	6-12, 47-68, 73-74, 79-80, 83-98
Unchanged Files
atable/src/index.ts	0%	0%	0%	0%	1-20
atable/src/components/ATable.vue	67.61%	50%	33.33%	67.61%	101-140, 149-155, 159-179
atable/src/components/ATableHeader.vue	98.33%	28.57%	100%	98.33%	1
atable/src/components/ATableModal.vue	96%	100%	0%	96%	21-22
atable/src/components/index.ts	79.66%	84.61%	87.5%	79.66%	47-54, 61-62, 104-117

Generated in workflow #196

[Alchez]

@agritheory, there seems to be a dependency resolution issue with @stonecrop/utilities in both aform and atable, but only for the GHA environments. The tests are working and passing as expected locally for me.

I am tracking an open issue that was active a couple of weeks ago, so I'll try the workarounds mentioned in that.

[agritheory]

@Alchez Some issues I noticed in the ADatePicker story:

• page up/down increments the month for both interfaces in the story
• enter should select the current date

In the ADate story I expected to see the ADatePicker interface show below the input. It is also very wide, is that because it's not in a fieldset?
I would expect typing (or pasting) in the ADate field to update the values in ADatePicker, kind of like a mask

@crabinak Design dilemma: how do we visually communicate "today", "selected" and "cursor" in this interface without relying on a theme color?

[crabinak]

@agritheory I'll take a look but, I'm thinking something along the lines of:

Today: Filled background.
Selected: Dashed line border.
Cursor: Solid line border.

Or vice versa with selected and cursor, I just think of the marching ants border of selection tools which is why I went for dashes. Dashes might look terrible, so it might be a thicker or thinner border instead. I'll try a few options and see what works.

[Alchez]

@agritheory

• page up/down increments the month for both interfaces in the story

I can replicate this on my end, but I'm not sure why it's happening. I'm guessing since the pgUp event listener is loaded up on every cell, it gets triggered for both tables everytime it's pressed?

• enter should select the current date

I've added a commit that sets up this behaviour.

In the ADate story I expected to see the ADatePicker interface show below the input.

I looked into the <input type="date"> documentation, and as far as I can tell, the extent to which you can override the datepicker is just styling. I couldn't see any way to replace the datepicker with our version.

It is also very wide, is that because it's not in a fieldset?

I think that might be true. I'm using a simple <input> tag without any special styling. There is an import for aform stylesheets, but those might only apply for inputs within a fieldset?

I would expect typing (or pasting) in the ADate field to update the values in ADatePicker, kind of like a mask

Technically this does work for the ADate input, but if we want ADate to work with ADatePicker, then I think we'll have to design something. Maybe an <input> tag with the type="date" attribute? And then we insert the modal ourselves?

[agritheory]

@Alchez The UX I think we want is based on the user tabbing versus clicking into a date field. If they've clicked on it the field we can assume they want a datepicker interface and should only evaporate it after they blur from the field. On the other hand, when they tab into the field, we can assume hands stay on the keyboard and we can respect their text-based input.

[agritheory]

I can replicate this on my end, but I'm not sure why it's happening. I'm guessing since the pgUp event listener is loaded up on every cell, it gets triggered for both tables everytime it's pressed?

I don't think we want page up/down listeners on every cell, is this based on the utility composable?

[crabinak]

@agritheory I just updated the style on the date picker. I bolded and underlined the current day so that is it emphasized but does not overpower/compete with the selected day. Let me know if something isn't looking right.

Additionally, all days that have already passed could be given a lighter gray color, but I wasn't sure if the user would still be able to select these days (in which case graying them out might give them the impression they are unselectable).

[Alchez]

@agritheory I had to move the map from v-model to value since the two-way sync was causing some issues with the v-model setup in the story. Let's discuss this change.

[Alchez]

@agritheory I was looking to use useFocusTrap to avoid the pgUp and pgDown events to trigger on both the datepickers in the AForm story, but that didn't work as intended.

I tried implementing it in just the Histoire story as well as trying to apply it to the ADatePicker component (although I'm not sure if this would have worked as intended since the focus trap would have been applied twice?).

Should we switch approaches and apply/remove keyboard navigation listeners conditionally? Maybe using useFocusWithin?

What do you suggest?

[agritheory]

@Alchez I think its worth experimenting with useFocusWithin, it sounds promising.