Page MenuHomePhabricator

List component level tokens in Storybook
Open, Needs TriagePublic

Description

As a designer, I want to see which alias tokens are being used by the component-level tokens of each design system component in Storybook, so that it helps me to define the tokens for new components.

ACs

  • All component pages in Storybook contain a section where component-level tokens are listed (tbd. After the first story writing, we might need to change the location)
  • The list or table contains both the component-level tokens and their alias values (the concrete values are not needed)

ACs of the current proposal

  • The content of the tokens list is dictated by the selected knob configuration (see mock in Figma in Figma)

tbd: engineers will discuss whether this is feasible

Screenshot 2020-07-16 at 19.26.15.png (1,874×996 px, 150 KB)

Notes/concerns regarding the current visualization approach:

  • The content of the tab is influenced by the Knobs configuration made the user. So, for example, I would only see medium destructive button tokens if that's the typology I select to demo. Is that possible? will be discussed, see above
  • In the list, tokens are grouped under headings: how much of the current viz code could be reused here? Answer: cannot be reused. Have to rethink the grouping to avoid manual efforts where possible.

Will look into an alternative approach (e.g. use of Docs tab, or create a new tokens doc page) after getting feedback from engineers regarding feasibility

Event Timeline

Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE renamed this task from List & illustrate component level tokens in storybook to List component level tokens in storybook.Jul 20 2020, 7:48 AM
Sarai-WMDE renamed this task from List component level tokens in storybook to List component level tokens in Storybook.
raja_wmde updated the task description. (Show Details)