component: table for typography page

[janchild]

This issue is for dev support in creating a table to be used on the Guidelines > Typography page to illustrate the differences between the productive and expressive experiences.

The table would use a sticky content switcher with two tabs (labeled Productive and Expressive) allowing the user to switch to see the differences between the type sets. It would work in a similar way to the Color Usage tab, but the switcher would not span full width.

We are still determining the behavior of the content switcher on scroll. Will update this issue shortly. @jeanservaas will be spec'ing this out.

Invision prototype of table: https://projects.invisionapp.com/d/main?origin=v7#/console/21476859/453822548/preview?scrollOffset=0

Draft PR: carbon-design-system/carbon-website#2410

Link to Notion table with type set information that is changing (descriptions, headings, intro paragraphs, and new type styles): https://www.notion.so/carbondesignsystem/type-set-info-cdd5e63d6dc9452c9f62b805637c6ca4

Note: The fluid heading slider should look like the slider on the IDL site, not the Carbon site. (Carbon site has a drop shadow that we don't want.) Thank you!

Note: The descriptions of the type styles are being updated. Please let me know the best way to get the content to you. A Notion document?

[jeanservaas]

@janchild am working on this now.

Just a quick comment about the content on the type set page.

At first glance there was something odd about the anchor link names:

My first feeling is, why does "Differences between the type sets" come before "The type sets" — it feels like they're being talk talked about before being introduced.

Seems like it's much clearer to just include all of this information under 'Overview' rather than making 'Differences between the type sets' an H2

[janchild]

@jeanservaas Thank you! Yes, obvious now I look at it. Making the change now.

[jeanservaas]

Design specs

@sstrubberg coming soon

[janchild]

@sstrubberg Some feedback from the team after our Big Carbon meeting... could you please remove the "fixed" suffix from all of the fixed heading names? We are going to only use a suffix (fluid) for the fluid styles. Thank you!

[janchild]

@sstrubberg, we had a review of all the content today and we have changed Small styles to Utility styles so if you want to make any changes on your side to match the new name for the "littlies", I guess now would be the time. 8-)

And here is the final list of type token names, FYI. This has the removal of fixed as I mentioned earlier. (This is the list that @tw15egan is working from for the type token additions this sprint.)

Typography type token list.xlsx

[janchild]

@sstrubberg Hi Scott, there were a couple of meetings today with @tw15egan, @laurenmrice, @oliviaflory, and @aagonzales having a final discussions and review of the type styles.

We decided to include $helper-text-01 and $helper-text-02 in the Utility styles section. The addition back is more about usage guidance and making sure that we communicate the type of information that should be included in each part of the UI.

The values would be exactly the same as $label-01 and $label-02. This should be the last change. Let me know if you have any questions at all! Thank you.

[tw15egan]

Dev PR is up for review at : #9480

Tokens can be seen at: https://deploy-preview-9480--carbon-elements.netlify.app/type/examples/preview/

Right-click on the token example to inspect that the values are correct (I've gone ahead and matched them to the notion doc so they should be correct)