Feedback for /contribute/documentation-updates docs page

[storybook-bot]

👍	👎
0	1

[storybook-bot]

/docs/8.0/contribute/documentation-updates

👎	v8.0	react	ts

These instructions are incorrect. Clicking the edit icon on Github gives you instructions to fork the repo to be able to edit the file.

[jonniebigodes]

Thanks for reaching out to us with your feedback. We appreciate it 🙏 ! I've checked, and nothing has changed in terms of the GitHub workflow on how to edit the documentation, as mentioned in our documentation. It all checks out. For context, here's a small recording of it.

documentantion-contribution-workflow.mp4

However, suppose the change involves a bigger documentation change, including snippets. In that case, we recommend that you or anyone else contribute to fork the repository and set it up locally, similar to other open-source projects.

[elyseholladay]

[jonniebigodes]

@elyseholladay thanks for reaching out to us with your feedback. We appreciate it 🙏 ! When you have a moment, can you check my comment here that addresses this question?

Looking forward to hearing from you.

Have a great day.

Stay safe

[elyseholladay]

FWIW I have a docs update for the new visual testing docs to add a missing step, but I don't want to fork the entire repo to update a docs change 🤷🏼‍♀️

Here's the suggested change:

### Install the addon

If you initialize a new project in Storybook 8 using `npx storybook@next init`, the addon will be installed automatically. Otherwise, you will need to install the addon.

Add visual tests to your project by installing `@chromatic-com/storybook`, the official addon by Storybook maintainers:

<!-- prettier-ignore-start -->

<CodeSnippets
  paths={[
    'common/chromatic-storybook-add.npm.js.mdx',
    'common/chromatic-storybook-add.pnpm.js.mdx',
    'common/chromatic-storybook-add.yarn.js.mdx'
  ]}
/>

<!-- prettier-ignore-end -->


<Callout variant="info">

Storybook 7.6 or higher is required. Read the [migration guide](../migration-guide.md) to upgrade your project.

</Callout>

Update your Storybook configuration file `.storybook/main.js|ts` file to include the addon:

<!-- prettier-ignore-start -->

<CodeSnippets
  paths={[
    'common/addons-chromatic-config.js.mdx'
  ]}
/>

<!-- prettier-ignore-end -->

When you start Storybook, you'll then see an addon panel for Visual Tests where you can run tests and view results.

![Visual Tests addon enabled](./vta-enable.png)

### Enable visual tests

To enable visual testing, sign up for [Chromatic](https://www.chromatic.com/start?startWithSignup=true&ref=storybook_site) and create a project. [Follow the instructions for setup in the Chromatic docs](https://www.chromatic.com/docs/storybook/setup/).

Once you have set up Chromatic, finish setup in your local Storybook. In the visual tests addon panel, select a project from your project list. 

![Visual Tests addon project selection](./vta-select-project.png)

If you're setting up the addon for the first time, the configuration files and necessary project identifiers (such as your `projectId`) will be added for you automatically to a `chromatic.config.json` file. This will sync tests with Chromatic. Commit this change into your project to complete setup.