Studio Paste migration (Office hours: Feb 3, 2022)

[apombo-ux]

The specific questions I have are...

• Get feedback on overall approach to component mapping
• Confirm guidelines for Heading level usage
• Get input on how to approach 'pastifying' Studio canvas editor

Background: Studio is migrating to Console Zen and trying to move on to Paste as part of that effort. Some screens seem straightforward, but others, like the canvas-based Editor, have no clear Paste reference.
Stage of design: Discovery
Research: Notes: https://docs.google.com/document/d/1uu7yUxBcMQsuMLmbps8Rbw2J59Dp950MYlYZ4wegHHw/edit#
Links to mockups or prototype: Figma: https://www.figma.com/file/AwNGiYotrJTXdvTt7CVXbn/DRAFT---2022-Q1-Studio-Paste-Migration-Component-Audit?node-id=450%3A13748

[shleewhite]

Hi @apombo-ux, thanks for posting your questions! Ahead of office hours, I can add some clarification around heading levels.

The best practice is to treat Headings like an outline of a document. There is only one H1 per page and sub-headings are a level lower than the parent heading (ie. an H2 cannot be a sub-heading for an H5).

For example, take the headings on the Delete pattern page

H1 - Delete
   H2 - Ingredients
   H2 - Usage
      H3 - General
   H2 - Variations
      H3 - Low-severity
      H3 - Medium-severity
      H3 - High-severity
   H2 - Post-deletion
   H2 - Starter kits
      H3 - CodeSandbox
      H3 - Figma

If you have any other questions or need help with the headings on a specific page, please let me know!

[apombo-ux]

Thanks @shleewhite. This came up specifically when I was reworking the Studio Dashboard page, which currently starts with an H1, then has a card with an H5 header, then H3 above a table. That's clearly not right, but from your example it seems like giving the card an H3 and the table an H2 to reflect their relative importance on the page would also be poor form. That is, I think you're saying that the Heading guideline to not skip levels is with respect to parent headings, not to the whole page.

So best practice doesn't allow for something like this:

H1 - Studio Dashboard
        H3 - Helpful information (card)
   H2 - Recent Flows

But instead would suggest this:

H1 - Studio Dashboard
   H2 - Helpful information (card)
   H2 - Recent Flows

Is that right, or am I adding rules that aren't there?

Another way to ask: Could H5 be a sub-heading for H2 or only for H4?

[shleewhite]

Your suggestion is correct! However, if visually you wanted the card header to be smaller than the Recent flows header you can use the variant prop (see: https://paste.twilio.design/components/heading/#props).

The as prop controls the semantic level of the heading (the H1/H2/etc) and then the variant prop controls how large it is. So for the card, you could do <Heading as="h2" variant="heading30">.

[apombo-ux]

ah, that variant prop info seems like just the bit I was missing, thanks! I saw them on the Headings documentation page but didn't get what they were doing/for.

[gloriliale]

Hey @apombo-ux - just wanted to share the office hours recording with you in case you'd like to revisit any part of the convo. Here's the video, and the password is posted in the #help-design-system channel. Thanks again for coming to office hours!