From 4f19135a050b2603d3b8fbe7171f10d1f55e01f3 Mon Sep 17 00:00:00 2001 From: winkerVSbecks Date: Fri, 6 Oct 2023 12:20:52 -0400 Subject: [PATCH 1/4] suggest modes for snapshotting of a component with multiple themes --- src/content/snapshot/snapshots.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/snapshot/snapshots.md b/src/content/snapshot/snapshots.md index a9d194e6..44379c4a 100644 --- a/src/content/snapshot/snapshots.md +++ b/src/content/snapshot/snapshots.md @@ -11,12 +11,14 @@ A snapshot is an image of a story plus some metadata captured by a standardized ## Table of contents: -- [View snapshots for a story](#view-snapshots-for-a-story) -- [How are snapshots captured?](#how-are-snapshots-captured) -- [Improve snapshot consistency](#improve-snapshot-consistency) -- [Debug snapshot rendering](#debug-snapshot-rendering) -- [Rerun builds to retake snapshots](#rerun-builds-to-retake-snapshots) -- [Browser differences between snapshots](#browser-differences-between-snapshots) +- [Snapshots](#snapshots) + - [Table of contents:](#table-of-contents) + - [View snapshots for a story](#view-snapshots-for-a-story) + - [How are snapshots captured?](#how-are-snapshots-captured) + - [Improve snapshot consistency](#improve-snapshot-consistency) + - [Debug snapshot rendering](#debug-snapshot-rendering) + - [Rerun builds to retake snapshots](#rerun-builds-to-retake-snapshots) + - [Browser differences between snapshots](#browser-differences-between-snapshots)
@@ -268,9 +270,7 @@ export const StoryWithDimensions = {
Do you support taking snapshots of a component with multiple themes? -We recommend you render stories multiple times, one for each theme. Here's a [blog post](https://storybook.js.org/blog/how-to-add-a-theme-switcher-to-storybook/) that explains how to enable a theme switcher in Storybook. Using this approach, this is how the snapshots will [appear in Chromatic](https://www.chromatic.com/library?appId=5a375b97f4b14f0020b0cda3&branch=next). - -If you'd only like to see multiple themes side-by-side in Chromatic and not in your local Storybook, use [isChromatic()](/docs/ischromatic). +Yes, check out the Chromatic's [modes feature](/docs/modes) is simplifies the process of visually testing your stories with different global configs such as themes. Check out the [Themes in modes](/docs/themes) guide to get started.
From a2885f1e199866461c23d7225b0d646c005b69d5 Mon Sep 17 00:00:00 2001 From: winkerVSbecks Date: Fri, 6 Oct 2023 13:08:18 -0400 Subject: [PATCH 2/4] add modes video --- src/content/modes/{modes.md => modes.mdx} | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) rename src/content/modes/{modes.md => modes.mdx} (97%) diff --git a/src/content/modes/modes.md b/src/content/modes/modes.mdx similarity index 97% rename from src/content/modes/modes.md rename to src/content/modes/modes.mdx index 38086ce3..195ec5dd 100644 --- a/src/content/modes/modes.md +++ b/src/content/modes/modes.mdx @@ -5,15 +5,20 @@ description: Configure Chromatic to test themes, viewports, locales and more sim sidebar: { order: 1 } --- +import { YouTubeCallout } from "../../components/YouTubeCallout"; + # Modes for testing themes, viewports, locales & more Global-level configurations (globals) such as viewport size, theme (light/dark), and locale impact how a component renders. Chromatic simplifies the process of visually testing your stories with different global configs. + + You can save combinations of globals as a unique "mode" and apply one or multiple modes to a story using the `chromatic.modes` parameter. When Chromatic tests your story, it will capture a snapshot for each applied mode. These modes are treated separately, with independent baselines and distinct approvals. Using modes requires Storybook 6.0 or later. -
Modes are powered by Storybook globals & decorators +
+Modes are powered by Storybook globals & decorators Consider this card component. It supports both light and dark variants, and its layout adjusts based on the viewport size. To switch between themes and viewport sizes, we click on the Storybook toolbar. @@ -378,7 +383,8 @@ export const allModes = { ### Frequently asked questions -
What happens if I remove a mode? +
+What happens if I remove a mode? Each mode has its own independent baselines and distinct approvals. Therefore, if you remove a mode, Chromatic will not capture a snapshot for that mode. From 4c6a92ba49f32f4654ef3d1666cd4d8f077293ab Mon Sep 17 00:00:00 2001 From: winkerVSbecks Date: Fri, 6 Oct 2023 15:59:11 -0400 Subject: [PATCH 3/4] add: What do you need to link a project to a Git provider repository --- src/content/collaborate/access.md | 17 +++++++++++++++++ src/content/collaborate/collaborators.md | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/content/collaborate/access.md b/src/content/collaborate/access.md index 2b6c1728..55b7d3b2 100644 --- a/src/content/collaborate/access.md +++ b/src/content/collaborate/access.md @@ -32,6 +32,23 @@ Depending on your Git provider, Chromatic will request a set of OAuth scopes whe
+
+ What do you need to link a project to a Git provider repository? + +To link a project to a Git provider repository, you need: + +- Write access to the repository. +- Membership in the organization that owns the repository. +- And one of the following roles: + +| Git provider | Role | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- | +| [GitHub](https://docs.github.com/en/organizations/managing-user-access-to-your-organizations-repositories/managing-repository-roles/repository-roles-for-an-organization#repository-roles-for-organizations) | `write`, `maintain`, or `admin` | +| [GitLab](https://docs.gitlab.com/ee/user/permissions.html#project-members-permissions) | `developer`, `maintainer`, or `owner` | +| [Bitbucket](https://support.atlassian.com/bitbucket-cloud/docs/grant-repository-access-to-users-and-groups/) | `admin`, or `write` | + +
+
What permissions does the GitHub App request? diff --git a/src/content/collaborate/collaborators.md b/src/content/collaborate/collaborators.md index f74d6550..96754834 100644 --- a/src/content/collaborate/collaborators.md +++ b/src/content/collaborate/collaborators.md @@ -93,7 +93,7 @@ External collaborators are added and removed manually. Once they create an accou #### Limitations of external collaborator accounts -External collaborator accounts do not have an association with a Git provider. As a result, they cannot link the project to a repository on GitHub, Bitbucket, or GitLab. +External collaborator accounts cannot link the project to a repository on GitHub, Bitbucket, or GitLab. ### Roles From 23c782583ee277ac8ab60afe3ef60da9999bc6ec Mon Sep 17 00:00:00 2001 From: winkerVSbecks Date: Fri, 6 Oct 2023 16:05:13 -0400 Subject: [PATCH 4/4] copy edits --- src/content/collaborate/access.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/collaborate/access.md b/src/content/collaborate/access.md index 55b7d3b2..cb522257 100644 --- a/src/content/collaborate/access.md +++ b/src/content/collaborate/access.md @@ -37,9 +37,8 @@ Depending on your Git provider, Chromatic will request a set of OAuth scopes whe To link a project to a Git provider repository, you need: -- Write access to the repository. - Membership in the organization that owns the repository. -- And one of the following roles: +- Write access to the repository, via one of the following roles: | Git provider | Role | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- |