diff --git a/src/content/collaborate/access.md b/src/content/collaborate/access.md index 2b6c1728..cb522257 100644 --- a/src/content/collaborate/access.md +++ b/src/content/collaborate/access.md @@ -32,6 +32,22 @@ 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: + +- Membership in the organization that owns the repository. +- Write access to the repository, via 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 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. 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.