refactor(datepicker)!: diy token migration

[jenndiaz]

Description

Migrates DatePicker to new tokens.
DatePicker does not have a figma or XD files, however it is similar to Combo box which does.

Additionally:

• addresses an issue with the invalid icons being hidden behind the picker button (see screenshots)
• ensures WHCM
• add quiet variant to storybook
• as per design feedback, border of the picker button has been updated to match the border of text-field

Jira Ticket 579

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Testing Outline

@jawinn

1. open the docs site for the DatePicker component:

• with the exception of the invalid icon positioning, styling should match production
• Invalid icon should be positioned to the left of the picker button and match styling of invalid icon on ComboBox

2. open the storybook for the DatePicker component

• default and quiet variants are displayed
• controls work as expected

Regression testing

Validate:

1. A legacy documentation page (such as accordion), including:

• The page renders correctly
• The page is accessible
• The page is responsive

4. A migrated documentation page (such as action group), including:

• The page renders correctly
• The page is accessible
• The page is responsive

Screenshots

Before

After

To-do list

• I have read the contribution guidelines.

• I have updated relevant storybook stories and templates.

• I have tested these changes in Windows High Contrast mode.

• If my change impacts other components, I have tested to make sure they don't break.

• If my change impacts documentation, I have updated the documentation accordingly.

• ✨ This pull request is ready to merge. ✨

[github-actions]

🚀 Deployed on https://pr-2185--spectrum-css.netlify.app

[jawinn]

This looks great. The only thing I see that needs adjustment is related to the spacing around the invalid icon. The quiet in particular has too much right padding, which causes the values to turn to ellipsis sooner than they should:

The regular one ("Range", invalid) also has 2px more padding than combobox has between the text and the invalid icon, which when fixed would mean a value like "10/30/2022" would no longer turn to ellipsis there. The placeholder format still would though, which leads me to...

Possible design change:
I'm wondering if it would be a good idea to increase the overall min-width of the range inputs, so that the placeholders and values do not turn to ellipsis when there is an invalid icon. This may be something to validate with the design team, as it'd be a change from what it is now. Otherwise the user experience of visually comparing what might be wrong or entering a value is hindered by not being able to see the entire value or expected format.

High contrast, quiet:
I saw this as well; the invalid icon is a little too close to the button border:

[jenndiaz]

This looks great. The only thing I see that needs adjustment is related to the spacing around the invalid icon. The quiet in particular has too much right padding, which causes the values to turn to ellipsis sooner than they should: The regular one ("Range", invalid) also has 2px more padding than combobox has between the text and the invalid icon, which when fixed would mean a value like "10/30/2022" would no longer turn to ellipsis there. The placeholder format still would though, which leads me to...

Possible design change: I'm wondering if it would be a good idea to increase the overall min-width of the range inputs, so that the placeholders and values do not turn to ellipsis when there is an invalid icon. This may be something to validate with the design team, as it'd be a change from what it is now. Otherwise the user experience of visually comparing what might be wrong or entering a value is hindered by not being able to see the entire value or expected format.

High contrast, quiet: I saw this as well; the invalid icon is a little too close to the button border:

I ensured the values for the right padding on the inputs matches what we are using for Combobox. This address the high contrast right padding and lessened the impact of the right padding on trimming the placeholder text. I ran it by design and they suggested this is okay since those using the component can adjust the width of the inputs if desired. They also pointed out an issue with the button border not matching the input border which I addressed as well.

Slack conversation with design