docs(picker): migrate docs to storybook

[jawinn]

Description

Migrates docs site information to Storybook for the Picker component. Creates several docs only stories to represent the missing examples. This also updates the variants test.js data to add coverage for missing states and variants.

Some Storybook updates of note:

• Adds a control for value (currentValue), and separates the concept of value and placeholder, which are different things with different classes. Their text resides in the same element but the is-placeholder class only exists when this text is a placeholder.
• Adds a control for setting the adjacent help text that already exists in the template
• Adds a control for displaying the thumbnail variant (with a workflow icon) from the docs site. This icon has a class associated with it (.spectrum-Picker-icon) that was not previously represented in Storybook.
• Renames content to popoverContent and refactors some of the iconName code in the Picker template to clarify what they are used for.

CSS-936

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.

Validation steps

@marissahuysentruyt

• Relevant docs from the docs site have now exist in the Storybook "Docs" page for Picker
• When currentValue control text is set, it is used instead of the placeholder control text. The is-placeholder class only resides on the element containing the text when the placeholder text is used.
• New "show workflow icon" control is functioning
• New "help text" control is functioning
• Updated testing preview view of Default story covers all variants and states that we should be testing

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

⚠️ No Changeset found

Latest commit: b034228

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

🎉 Published on https://spectrum-css.netlify.app as production
🚀 Deployed on https://670594ea39442544d326d6a4--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 4.31 MB^*

🎉 No changes detected in any packages

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[jawinn]

Note: When viewing the updated chromatic template, I noticed this CSS issue with the invalid icon that will need to be addressed separately. It looks like it may need a flex-shrink: 0.

Edit: the Jira issue created is CSS-977

[rise-erpelding]

These docs are such a great improvement over what we had before! I especially appreciate the added content from the guidelines (when to use quiet, when to use side label, etc.). Also, thank you for adding a card for that invalid icon being so tiny!

Some questions I have on whether we should add extra documentation/coverage that I'd love your opinion on:

• Do we need to talk about withSwitch option on the Docs page at all or is that strictly for checking alignment? (seems like it is, just want to be sure)
• Is there any value to adding documentation/support in the template for the Required picker? (It might be nice, but there's also already SO MUCH going on here.)
• Pickers with and without a label are shown somewhat interchangeably, it might be nice to include that guideline about "always use a label unless it's obvious" somewhere here.
• We're not testing help text with the picker, should we? (Also disabled + invalid + helptext)
• It looks like (but tell me if I have a control on in Storybook somewhere that I shouldn't 😂) we're testing Picker pretty much exclusively with side labels, do we want to test the top label too? (Or are we and I just missed it?)
• Also, not a question about coverage, but is this a good time/place to change the "left" option in the label position controls to "side" to be more logical?

[jawinn]

• Do we need to talk about withSwitch option on the Docs page at all or is that strictly for checking alignment? (seems like it is, just want to be sure)

It's just for catching an edge case with alignment that was brought up a while ago. I've recategorized this under Advanced in the controls.

• Is there any value to adding documentation/support in the template for the Required picker? (It might be nice, but there's also already SO MUCH going on here.)

I think this delves too much into all the options for field label. In the updated docs descriptions, I've included a link to field label.

• Pickers with and without a label are shown somewhat interchangeably, it might be nice to include that guideline about "always use a label unless it's obvious" somewhere here.

I've included docs about this and a link to the guidelines. And to take that even further and follow the guidelines in the other examples, I swapped out the use of Picker with Template in a few cases, so the field label appears for all the examples.

• We're not testing help text with the picker, should we? (Also disabled + invalid + helptext)

There are no picker specific help text styles that I can find (within the picker CSS), and help text is outside of picker, so it doesn't seem like this needs to be in VRTs.

• It looks like (but tell me if I have a control on in Storybook somewhere that I shouldn't 😂) we're testing Picker pretty much exclusively with side labels, do we want to test the top label too? (Or are we and I just missed it?)

All of the others have a top label right now, so please take a look again. I did have to make some adjustments to add display: block because the flex properties of our utility containers were negatively affecting the display of the adjacent components.

• Also, not a question about coverage, but is this a good time/place to change the "left" option in the label position controls to "side" to be more logical?

Seems like as good of a time as any; I've changed this to side and checked to make sure all uses of Picker() were okay.

[marissahuysentruyt]

Wonderful work on this! I think it's safe to say you're our resident picker expert!

I only have one thing that I think actually needs to change (the is-loading/is-hovered test case). The rest of my comments are questions! Thanks for all your work on this!

[marissahuysentruyt]

I saw there was a section about "read-only" pickers in the guidelines: https://spectrum.adobe.com/page/picker/#Read-only

Should we add that to the controls at all? It's not on the docs site, and the S2 picker Figma designs don't look like they have a read only option.

[jawinn]

There are no read-only styles in the CSS, so there isn't anything for us to show currently. It's unclear to me looking at that sparse guideline whether anything is needed for follow-up work related to read-only; it looks like Spectrum Web Components displays read-only like the default and React Spectrum does not have this option.

[marissahuysentruyt]

and also I approve.

[rise-erpelding]

Looks great! Left one small comment about some wording that you can change at your discretion, but otherwise good to go!