From 15a5e591b78fbd7720e276c6d3c6ec1867ff57fa Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 18 Jul 2023 15:31:01 -0700 Subject: [PATCH 1/2] docs: add more chromatic/storybook info --- CONTRIBUTING.md | 6 ++++++ .../conventions/Documentation.md | 19 ++++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 56202dcb6a2..32fdbb7abf5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -230,3 +230,9 @@ See the [conventional commits doc](https://www.conventionalcommits.org/en/v1.0.0 In order to ensure conventional commits are followed, pull requests will run a check to indicate whether the PR is following the convention or not. The [Semantic Pull Request](https://github.com/amannn/action-semantic-pull-request) status check will ensure your pull requests are semantic before you merge them. You can update the PR title any time before merging the PR. This may be necessary when the scope or type of the PR changes, or if additional details are needed for the changelog entry. + +By default, the PR body will be used for the commit message when squash merging, so make sure to add any relevant details there. + +Once you are ready to run Chromatic to create visual snapshots, add the `pr ready for visual snapshots` label to the PR. Removing and re-adding the label is required for rerunning snapshots, e.g. when pushing additional updates. + +If visual snapshots are not necessary for the PR (e.g. changes to doc, ci, storybook, etc.), you can add the `skip visual snapshots` label instead. The `skip visual snapshots` label can also be used to prevent rerunning Chromatic after pushing minor cleanup changes before merging. diff --git a/packages/calcite-components/conventions/Documentation.md b/packages/calcite-components/conventions/Documentation.md index 6f22bb5c4af..1e6472ea5c9 100644 --- a/packages/calcite-components/conventions/Documentation.md +++ b/packages/calcite-components/conventions/Documentation.md @@ -96,7 +96,7 @@ export default { - Should have one story per unique, supported use case - Stories that can be covered by adding a new prop/knob should instead update an existing playground story (with the exception of `_TestOnly` stories, explained below) -#### Screenshot test-only stories +#### Screenshot TestOnly stories - Should have the minimal HTML needed to reproduce the test scenario - Should not have knobs since screenshot tests cannot interact with them @@ -105,6 +105,23 @@ export default { - The `simple` story and any other significant configuration should have a matching `darkModeRTL_TestOnly` story - In order to reduce snapshot count, dark mode and RTL visual tests have been combined +Any stories used for snapshot testing should have animations disabled using the `--calcite-duration-factor` CSS variable so they don't cause diffs on every build. `NoTest` stories are the only ones that should have animations. See [`loader`'s stories](../src/components/loader/loader.stories.ts) as an example for how to setup stories for components with animation. For example: + +```ts +export const simple_TestOnly = (): string => html` + + +`; +``` + ### Using utilities There are a variety of Storybook [helpers](../.storybook/helpers.ts) and [utilities](../.storybook/utils.tsx) that should be used for common patterns. You can use existing stories as a reference for when/how the utilities and helpers should be used. From 478566320a072c5004bbacd1614cf0ca915fd858 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 20 Jul 2023 12:46:04 -0700 Subject: [PATCH 2/2] docs: cleanup --- .../conventions/Documentation.md | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/packages/calcite-components/conventions/Documentation.md b/packages/calcite-components/conventions/Documentation.md index 1e6472ea5c9..6f22bb5c4af 100644 --- a/packages/calcite-components/conventions/Documentation.md +++ b/packages/calcite-components/conventions/Documentation.md @@ -96,7 +96,7 @@ export default { - Should have one story per unique, supported use case - Stories that can be covered by adding a new prop/knob should instead update an existing playground story (with the exception of `_TestOnly` stories, explained below) -#### Screenshot TestOnly stories +#### Screenshot test-only stories - Should have the minimal HTML needed to reproduce the test scenario - Should not have knobs since screenshot tests cannot interact with them @@ -105,23 +105,6 @@ export default { - The `simple` story and any other significant configuration should have a matching `darkModeRTL_TestOnly` story - In order to reduce snapshot count, dark mode and RTL visual tests have been combined -Any stories used for snapshot testing should have animations disabled using the `--calcite-duration-factor` CSS variable so they don't cause diffs on every build. `NoTest` stories are the only ones that should have animations. See [`loader`'s stories](../src/components/loader/loader.stories.ts) as an example for how to setup stories for components with animation. For example: - -```ts -export const simple_TestOnly = (): string => html` - - -`; -``` - ### Using utilities There are a variety of Storybook [helpers](../.storybook/helpers.ts) and [utilities](../.storybook/utils.tsx) that should be used for common patterns. You can use existing stories as a reference for when/how the utilities and helpers should be used.