docs(S2): add Typography search view

[reidbarber]

Adds a new Typography section to the search menu that allows you to preview different typography styles and copy the code snippets.

This should also improve the discoverability of how typography works in S2.

Notes:

• The search value currently gets used as the rendered preview text. I thought it wasn't worth filtering the items down here sense there aren't too many.
• Not sure we can get syntax highlighting here since it isn't rendered on the server.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Open search menu: https://d1pzu54gtk2aed.cloudfront.net/pr/58c8a596dd0346bcb3b85a167dba51ea0051bc5a/

🧢 Your Project:

[yihuiliao]

i like the look of it! feels pretty intuitive to use. a bit unrelated but i think we should placement of the text next to the info icon consistent, so either center align it like the Color/Icon search or make the other's left aligned

i wonder how this will look on mobile tho since it doesn't seem like that's been implemented yet. would we maybe use a picker to change between heading, title, body, etc?

[snowystinger]

I think we're missing it in mobile, when I click the Typography tab on my iphone, I get nothing.

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[reidbarber]

a bit unrelated but i think we should placement of the text next to the info icon consistent, so either center align it like the Color/Icon search or make the other's left aligned

Agreed, just pushed a fix to left-align all these.

i wonder how this will look on mobile tho since it doesn't seem like that's been implemented yet. would we maybe use a picker to change between heading, title, body, etc?

Just added to mobile. It keeps the same layout, and is scrollable. Open to changing this experience if we think a Picker would be better, but I think the current experience is fine (and less taps required).

[LFDanLu]

I like this view a lot, definitely helpful as a playground for people to get a visual representation of the typography. Here are some initial thoughts from preliminary testing:

• is it confusing that what was a search field becomes an input field for the sample text? Perhaps for a sighted user this might not be as confusing, but the aria labeling for the field still states "Search React Spectrum"
• I personally found it a bit confusing that tabbing and ArrowLeft/Right didn't move me to the Title/Body sections when keyboard focused on a option in the Heading list. Instead I had to just use ArrowDown which then brought me to those columns
• In a similar vein, I wasn't able to tab to the row h1/<div> etc, nor to the copy snippet button

Some of these focus issues be the fault of the autocomplete, but maybe we can explore some other ways to lay it out to make this more keyboard accessible

[reidbarber]

@LFDanLu

is it confusing that what was a search field becomes an input field for the sample text?

We discussed this and decided to revert it back to where the search value filters the list of styles. I've made the preview text editable via a RAC TextField, so we can see how we like that experience.

I personally found it a bit confusing that tabbing and ArrowLeft/Right didn't move me to the Title/Body

Not sure there is much we can do here. If we made this a grid layout, the columns would no longer semantically be sections. I guess we could potentially use a RAC Table here instead to achieve that though? Then we'd need horizontal scrolling instead of having it wrap, which isn't ideal.

In a similar vein, I wasn't able to tab to the row

I think this is a pretty big issue, I assume it has something to do with these focusable items being within the Autocomplete. I'll try to figure out what to do here, but I think this might be enough to hold off on merging this.

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs