feat(DatePickerE): Initial updates based on v3 design spec #2841

jpveooys · 2021-11-26T16:53:08Z

Related issue

Resolves #2439

Overview

This makes various updates to the DatePickerE component based on the v3 design spec.

Link to preview

Storybook
Non-Storybook example
(base font size overridden to 100% due to Review the need for font breakpoints and remove if not needed #2761)

Reason

Incremental work towards the v3 release.

Work carried out

Update the styling of the input control
Update the styling of the day picker
Update the styling and positioning of the floating box
Remove isValid prop
Append date format to label automatically
Reuse partials from TextInputE
Add hover shading for intermediate dates in range mode
Update placeholder and automatic opening behaviour

Demo

Single date

Range

Developer notes

Does not include:

updated typing behaviour for single date mode
typing and input date highlighting for range date picker
time and period selection
clear button
month and year buttons
DatePickerE: Preserve invalid typed dates #2863
DatePickerE: Add to example form stories #2864

jpveooys · 2021-12-01T15:20:35Z

packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx

@@ -153,20 +161,20 @@ export const DatePickerE: React.FC<DatePickerEProps> = ({
 >
 <StyledOuterWrapper
 data-testid="datepicker-outer-wrapper"
- $hasFocus={open}
+ $hasFocus={hasFocus && !hasError}


The && !hasError is temporary here to preserve the existing behaviour (which is covered by tests). It will be reviewed as part of #2863.

jpveooys · 2021-12-01T15:25:53Z

packages/react-component-library/src/components/DatePickerE/partials/StyledFloatingBox.tsx

+
+const { color } = selectors
+
+export const StyledFloatingBox = styled(FloatingBox)`


I've left these as overrides for now as it's not yet clear if these will be directly applicable anywhere else.

jpveooys · 2021-12-02T10:49:10Z

@k9dh3zij I've added the outer shadow to the calendar sheet. Please have a look if it's as intended, as how it looks will depend on the origin (in relation to the other borders and shadows).

k9dh3zij · 2021-12-02T15:39:41Z

Thanks @jpveooys loving this! Feedback:

Visual

The button looks slightly squashed - should be consistent with other components:
When filled, the input label should be 2px higher and the user input should be 1px higher. Please note: I think this needs to change across all experimental inputs - not sure if I missed it in previous PRs or if something changed, sorry
Visual comparison with design:
As already discussed, missing Sheet drop shadow

Keyboard controls

When opening the Sheet, can we move focus to the currently selected date? (as in https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html)
When closing the Sheet, can we return focus to the button? (as in the W3 example)
Range date picker: when using the keyboard to select the end-date, the visual highlight between start date and currently focused end date doesn't work
Can we make it so that the Sheet contains its own tab sequence. (Tab and Shift + Tab do not move focus outside the dialog)
Further to the above, can we add Esc as a shortcut to close the Sheet please?

That's all for now, I think 😅 Thanks!

jpveooys · 2021-12-03T11:20:22Z

packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx

 disabled={isDisabled}
 data-testid="datepicker-input-button"
 >
- <StyledSeparator />
- <DropdownIndicatorIcon isOpen={open} />
+ <StyledIconCalendarWrapper>


Just noticed StyledIconCalendarWrapper is misnamed – will rename to StyledIconEventWrapper.

jpveooys · 2021-12-06T11:08:59Z

@k9dh3zij

I've made updates to address those except for the following two:

When opening the Sheet, can we move focus to the currently selected date? (as in https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html)

There was an issue already open in the underlying library we're using (react-day-picker) regarding this. I've created a separate issue #2871 at our end with more info and responded to the issue in the underlying library.

Can we make it so that the Sheet contains its own tab sequence. (Tab and Shift + Tab do not move focus outside the dialog)

I found a library that will add this behaviour (called a 'focus trap'). However, it has a bug where the tab key stops functioning when dates after the first of the month are focused, so I've left that change out and created a separate issue (#2870). I also need to report the bug upstream.

Regarding:

Range date picker: when using the keyboard to select the end-date, the visual highlight between start date and currently focused end date doesn't work

I've added this but note it's not possible at the moment to clear that highlight when tabbing away with react-day-picker v7 (it will be with v8 which is currently in beta). (Have created a separate issue for this as well: #2872.)

I also updated the border radius of the sheet and the hover/pressed/focus styles of the next and previous month buttons, as they seemed wrong before to me. Have another look at those if you can 🙂

thyhjwb6

Looks good 👍

thyhjwb6 · 2021-12-06T12:27:39Z

packages/react-component-library/src/components/DatePickerE/DatePickerE.test.tsx

@@ -605,6 +605,32 @@ describe('DatePickerE', () => {
 expect(wrapper.getByText('December 2019')).toBeInTheDocument()
 })

+ describe.each([


m7kvqbe1 · 2021-12-06T14:41:02Z

Are the disabled state styles correct (currently the picker button is blue and clickable):

m7kvqbe1

LGTM - just a couple of tiny comments

packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx

packages/react-component-library/src/components/TextInputE/TextInputE.test.tsx

jpveooys · 2021-12-06T15:31:59Z

Are the disabled state styles correct (currently the picker button is blue and clickable):

Good spot! Have updated those.

m7kvqbe1

👍

k9dh3zij · 2021-12-07T13:21:10Z

Thanks for the updates @jpveooys looking great!

As discussed, something that we can look to improve when the react-day-picker library allows it, please:

Disabled dates shouldn't get focus. Therefore, the state shown here should not be possible:

Big 👍 from me on this! :)

jpveooys · 2021-12-07T13:25:56Z

Thanks @k9dh3zij !

It looks like that's covered by gpbl/react-day-picker#1320 which was coincidentally opened 30 minutes ago 😄

Update general styling based on the v3 design spec. Includes removing the `isValid` prop.

Make the placeholder big when the input is empty, and don't automatically open the picker when the input is focused. Also append the date format to the label automatically.

Update the styling of the floating box using overrides. (Currently not clear if these styles are applicable for anything else, therefore they are left as overrides for now.)

Add shading of intermediate days on hover, and use a consistent order for the selection of the start and end dates.

sonarcloud · 2021-12-07T13:42:47Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
6 Code Smells

91.2% Coverage
0.0% Duplication

jpveooys force-pushed the feature/date-picker-v3-pt-2 branch from 8ad333d to 07344a5 Compare November 29, 2021 09:19

This was referenced Nov 29, 2021

fix(DatePickerE): Reopen picker on correct date #2842

Merged

feat(FloatingBox): Integrate with DatePickerE #2844

Merged

jpveooys self-assigned this Nov 29, 2021

jpveooys added Package: react-component-library Package/code type Type: Development Related to a design system component labels Nov 29, 2021

jpveooys force-pushed the feature/date-picker-v3-pt-2 branch 6 times, most recently from d9777c7 to d848307 Compare November 30, 2021 17:03

jpveooys changed the title ~~Update DatePickerE behaviour and styling~~ feat(DatePickerE): Initial updates based on v3 design spec Nov 30, 2021

jpveooys force-pushed the feature/date-picker-v3-pt-2 branch 2 times, most recently from 020125c to 8a62cc5 Compare December 1, 2021 14:50

jpveooys commented Dec 1, 2021

View reviewed changes

jpveooys force-pushed the feature/date-picker-v3-pt-2 branch from 8a62cc5 to 4468e51 Compare December 1, 2021 15:33

jpveooys marked this pull request as ready for review December 1, 2021 15:51

jpveooys requested review from m7kvqbe1 and thyhjwb6 as code owners December 1, 2021 15:51

jpveooys requested a review from k9dh3zij December 1, 2021 15:52

jpveooys force-pushed the feature/date-picker-v3-pt-2 branch from 4468e51 to 98289e3 Compare December 1, 2021 15:59

jpveooys commented Dec 3, 2021

View reviewed changes

This was referenced Dec 6, 2021

DatePickerE: Focus date when picker opened #2871

Open

DatePickerE: Add focus trap #2870

Closed

thyhjwb6 reviewed Dec 6, 2021

View reviewed changes

m7kvqbe1 requested changes Dec 6, 2021

View reviewed changes

packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx Show resolved Hide resolved

packages/react-component-library/src/components/TextInputE/TextInputE.test.tsx Show resolved Hide resolved

jpveooys requested a review from m7kvqbe1 December 6, 2021 15:32

m7kvqbe1 approved these changes Dec 6, 2021

View reviewed changes

jpveooys added 11 commits December 7, 2021 13:34

feat(DatePickerE): Update styling of input control and day picker

1a6e5b1

Update general styling based on the v3 design spec. Includes removing the `isValid` prop.

feat(DatePickerE): Reuse TextInputE partials

d93c630

feat(DatePickerE): Adjust placeholder and opening behaviour

28ede47

Make the placeholder big when the input is empty, and don't automatically open the picker when the input is focused. Also append the date format to the label automatically.

feat(DatePickerE): Update floating box styling and positioning

68880d0

Update the styling of the floating box using overrides. (Currently not clear if these styles are applicable for anything else, therefore they are left as overrides for now.)

feat(DatePickerE): Update range behaviour and styling

8e89f76

Add shading of intermediate days on hover, and use a consistent order for the selection of the start and end dates.

feat(DatePickerE): Memoise more IDs

2123094

feat(DatePickerE): Add additional stories

fb9e5c5

fix(TextInputE): Correct label position when shrunk

1e0f80f

feat(DatePickerE): Close picker on escape

4771a5e

feat(DatePickerE): Focus open/close button when day picker is closed

86d4a65

fix(DatePickerE): Drop value prop passed by Formik

a5bdb12

jpveooys force-pushed the feature/date-picker-v3-pt-2 branch from 2f1b21f to a5bdb12 Compare December 7, 2021 13:35

jpveooys merged commit 7802f83 into master Dec 7, 2021

jpveooys deleted the feature/date-picker-v3-pt-2 branch December 7, 2021 14:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(DatePickerE): Initial updates based on v3 design spec #2841

feat(DatePickerE): Initial updates based on v3 design spec #2841

jpveooys commented Nov 26, 2021 •

edited

Loading

jpveooys Dec 1, 2021 •

edited

Loading

jpveooys Dec 1, 2021

jpveooys commented Dec 2, 2021

k9dh3zij commented Dec 2, 2021 •

edited

Loading

jpveooys Dec 3, 2021

jpveooys commented Dec 6, 2021

thyhjwb6 left a comment

thyhjwb6 Dec 6, 2021

m7kvqbe1 commented Dec 6, 2021 •

edited

Loading

m7kvqbe1 left a comment

jpveooys commented Dec 6, 2021

m7kvqbe1 left a comment

k9dh3zij commented Dec 7, 2021

jpveooys commented Dec 7, 2021

sonarcloud bot commented Dec 7, 2021


		const { color } = selectors

		export const StyledFloatingBox = styled(FloatingBox)`

feat(DatePickerE): Initial updates based on v3 design spec #2841

feat(DatePickerE): Initial updates based on v3 design spec #2841

Conversation

jpveooys commented Nov 26, 2021 • edited Loading

Related issue

Overview

Link to preview

Reason

Work carried out

Demo

Single date

Range

Developer notes

jpveooys Dec 1, 2021 • edited Loading

Choose a reason for hiding this comment

jpveooys Dec 1, 2021

Choose a reason for hiding this comment

jpveooys commented Dec 2, 2021

k9dh3zij commented Dec 2, 2021 • edited Loading

jpveooys Dec 3, 2021

Choose a reason for hiding this comment

jpveooys commented Dec 6, 2021

thyhjwb6 left a comment

Choose a reason for hiding this comment

thyhjwb6 Dec 6, 2021

Choose a reason for hiding this comment

m7kvqbe1 commented Dec 6, 2021 • edited Loading

m7kvqbe1 left a comment

Choose a reason for hiding this comment

jpveooys commented Dec 6, 2021

m7kvqbe1 left a comment

Choose a reason for hiding this comment

k9dh3zij commented Dec 7, 2021

jpveooys commented Dec 7, 2021

sonarcloud bot commented Dec 7, 2021

jpveooys commented Nov 26, 2021 •

edited

Loading

jpveooys Dec 1, 2021 •

edited

Loading

k9dh3zij commented Dec 2, 2021 •

edited

Loading

m7kvqbe1 commented Dec 6, 2021 •

edited

Loading