Skip to content

Commit

Permalink
more tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
winkerVSbecks committed Sep 4, 2023
1 parent 3ddb282 commit 5cdd6df
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 4 deletions.
2 changes: 1 addition & 1 deletion custom-decorators.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: Wire up custom decorators with modes to test different variants of
# Custom decorator and globals in modes

<div class="aside" style="margin-bottom: 2rem;">
ℹ️&nbsp;&nbsp;This feature uses the modes API. To learn more, checkout the <a href="/docs/modes#using-modes">getting started guide</a>.
ℹ️&nbsp;&nbsp;This feature uses the modes API. Learn how to <a href="/docs/modes">get started</a>.
</div>

[Decorators](https://storybook.js.org/docs/react/writing-stories/decorators#page-top) are a Storybook mechanism that allows you to augment stories with extra rendering functionality. They enable you to provide mock context, translations, or any other project-level settings that a component depends on.
Expand Down
2 changes: 1 addition & 1 deletion themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: Configure Chromatic to test components with different themes
# Themes in modes

<div class="aside" style="margin-bottom: 2rem;">
ℹ️&nbsp;&nbsp;This feature uses the modes API. To learn more, checkout the <a href="/docs/modes#using-modes">getting started guide</a>.
ℹ️&nbsp;&nbsp;This feature uses the modes API. Learn how to <a href="/docs/modes">get started</a>.
</div>

Themes control the visual characteristics of UI—color palette, typography, white space, border styles, shadows, radii, etc. Using modes enables Chromatic to test the same story with multiple themes.
Expand Down
4 changes: 2 additions & 2 deletions viewports.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ description: Configure Chromatic to test responsive components at various viewpo
# Viewports for responsive UIs

<div class="aside" style="margin-bottom: 2rem;">
<p>ℹ️&nbsp;&nbsp;This page documents viewports using the modes API. To learn more, checkout the <a href="/docs/modes#using-modes">getting started guide</a>.</p>
<p>ℹ️&nbsp;&nbsp;This page documents viewports using the modes API. Learn how to <a href="/docs/modes">get started</a>.</p>

<p style="margin-bottom: 0;">If you are transitioning from the <code>chromatic.viewports</code> API to the modes API, please consult the <a href="#migration-from-viewports-legacy-to-modes">migration guide</a>.</p>
</div>

## Define viewport modes

Modes are defined in the `.storybook/modes.js|ts` file. If your project doesn't have this file yet, go ahead and create it. To set viewport in a mode, specify the screen width and/or height using the `chromatic[mode_name].viewport` parameter.
Modes are defined in the `.storybook/modes.js|ts` file. If your project doesn't have this file yet, go ahead and create it. To set viewport in a mode, specify the screen width and/or height using the `chromatic[<your-mode-name>].viewport` parameter.

The following are all acceptable viewport values:

Expand Down

0 comments on commit 5cdd6df

Please sign in to comment.