Visual exploration for component variant treatment

[aagonzales]

WIP Figma file

Docs structure

Deliverable: documented in final spec in Figma

• Tab order
  • Usage | Style | Code (optional) | Accessibility | Details
  • Code tab is for documentation only; resource links live on the details tab.
    • Carbon React (carbon core) component assets will not have a code tab
• Breadcrumb
  • Going back to the old breadcrumb that shows which library the asset sits in.
  • Example: "Carbon React v11.0.03 / Assets / Dropdown"
• Live demo placement
  • Live demo is now separated from the dashboard, it is the first thing people see on the usage tab.
    • Intro paragraph
    • Live Demo
    • Overview (Variant table, When to use)
  • What happens to the live demo if there is no usage tab?
    • If there is no usage tab, then there will likely be a code tab
    • If there is no usage tab, then the live demo goes on code tab Live demo cannot have a conditional placement.
    • Live demo placement is only on the usage tab for component assets. Other assets may have it one a different tab?
  • Is the live demo library-specific will change based on the framework?
    • What happens if a library doesn't have a live demo set up?

Dashboard content with variants

Deliverable: Explorations in Figma, review with team for final decision

• Add a variants table along with the resource links under the Demo Links category to the details tab.
  • What do we want in the table? Variant, Status, ...
• Explore possible directions
  • A: Dashboard that refers to the roll-up category instead of the individual variants.
    • Reducing the dashboard info so that anything that could change per status or framework isn’t in the dashboard anymore.
    • Might need to remove categories (status, framework) from dashboard.
    • Might need to also remove github issue and discussion cards
  • B: Keeping info in dash but changing it to represent the whole roll up
    • Representing all variants under status and frameworks
    • Issues and disc listed for all variants together (one number)
    • Move dashboard info from dash to variant table? like status etc. (The more we pull out of dashboard the more the table needs to do)

Variant names in Catalog

Deliverable: documented in new issue with any changes needed to schema

• How important is it to have these things appear together in the catalog?
  • “Component: Variant” “Pattern: Variant”
    • “Lists: Ordered” “List: Unordered”
    • Is it plural or singular?
  • “Create flows: Modal” “Create flows: Tearsheet”
  • @aubrey-oneal to help make the decision
• What does it take to make this change in the schema/index?

Variant roll-up

Deliverable: Final organization documented in boxnote
Matt will add Canonically schema for roll-ups

• Audit components
• What variants get rolled up/remain independent
• Create an issue to update schema and index names
• Do we want to organize the Storybook structure accordingly? Create an issue if so.
• Defining variants in the Carbon React library #1539

Dev follow-up work

Folders in storybook?