search

UX-and-I / storybook-design-token

Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.
https://dev.to/psqrrl/managing-design-tokens-using-storybook-5975
MIT License
648 stars 123 forks source link

Possible bug when reading parameters? #126

Open Smolations opened 2 years ago

Smolations commented 2 years ago

Some lists of tokens, like colors, are often very long. It makes sense to have a search field for them. Others, like line height, will contain just a couple. In trying to disable the search field for just a single set of tokens in MDX fails for me. No errors, just doesn't work (input remains visible). According to the storybook MDX blocks documentation, these should be allowed via the <Meta /> block. However, trying this with with your addon has no effect. Basically, I tried this within the MDX:

<Meta
  title="Design Tokens/Line Height"
  parameters={{ designToken: { showSearch: false } }}
/>

I also tried the same on the provided <DesignTokenDocBlock /> as well, also with no effect. Is this not supported?

Sqrrl commented 2 years ago

I'll look into it. Maybe an oversight.

acherkashin commented 1 year ago

@Smolations DesignTokenDocBlock doesn't use configuration provided to Meta parameters.

To disable search, you just need to use showSearch of the DesignTokenDocBlock component in the following way:

<DesignTokenDocBlock categoryName="Colors" maxHeight="none" viewType="table" showSearch={false}/>