Merge pull request #36 from gsoft-inc/docs/new-screenshots

docs: New screenshots

docs/best-practices.md

@@ -14,13 +14,13 @@ You can log into [Chromatic](https://www.chromatic.com/) and navigate to a build
 :white_check_mark: Good
 
 :::align-image-left
-![](./static/turbosnap_good.png)
+![](./static/turbosnap-good.png)
 :::
 
 :no_entry_sign: Bad
 
 :::align-image-left
-![](./static/turbosnap_bad.png)
+![](./static/turbosnap-bad.png)
 :::
 
 ## Merge PRs quickly
@@ -31,6 +31,8 @@ As a general rule, once a PR is open and ready for review, there should be **no
 
 To help with this, if you need to share a PR that isn’t ready for review, you can open it as a [draft](https://learn.microsoft.com/en-us/azure/devops/repos/git/pull-requests?view=azure-devops&tabs=browser#create-draft-prs). The Chromatic CLI "step" will not run for PRs marked as "draft".
 
+> If you expect to use "draft" PR, make sure to either add the `drafts: false` to your pipeline configuration or that your build policies do not run for "draft" PRs.
+
 ## Create small, fast-merging PRs for changes that disable TurboSnap
 
 Some changes can disable TurboSnap for a build. These changes include:

docs/getting-started.md

@@ -29,6 +29,12 @@ Chromado is compatible with [TurboSnap](https://www.chromatic.com/docs/turbosnap
 Using TurboSnap is important because we pay for every snapshot taken by Chromatic. We still pay for TurnoSnaps, but they cost **1/5th** of a regular snapshot.
 !!!
 
+If TurboSnap is disabled for your build, the PR message will indicate so. In some cases, such as for a _"rebuild"_, this is fine. However, in most cases, you should review the details of your Chromatic build to understand why TurboSnap was disabled.
+
+:::align-image-left
+![TurboSnap disabled warning example](./static/pr-turbosnap-disabled.png)
+:::
+
 ### Squash merge
 
 Chromatic doesn't offer any mechanism to support [squash merge](https://learn.microsoft.com/en-us/azure/devops/repos/git/merging-with-squash?view=azure-devops) on Azure DevOps. This means that when using Azure DevOps as a Git provider, if you wish to keep your Chromatic [baselines](https://www.chromatic.com/docs/branching-and-baselines/) up-to-date, you would be constrained to merging your pull requests with regular merge commits. Fortunately, Chromado implements a workflow based on Chromatic's [auto-accept-changes](https://www.chromatic.com/docs/azure-pipelines/#azure-squashrebase-merge-and-the-main-branch) feature, allowing pull requests to be completed with squash merges.
@@ -73,19 +79,21 @@ First, let's create a new [Chromatic project](#create-a-new-chromatic-project),
 
 2.1. If your project already includes a [template file](https://learn.microsoft.com/en-us/azure/devops/pipelines/process/templates?view=azure-devops&pivots=templates-includes) to set up your pipelines, then paste the following configuration:
 
-```yaml !#19,22,27,29-30 chromatic.yml
+```yaml !#14,21,24,29,31-32 chromatic.yml
 # Run Chromatic on the "main" branch after a pull request has been merged
 # (currently required to update the baseline when doing "squash" merge for pull requests).
 trigger:
   branches:
     include:
       - main
 
-# Run Chromatic on every pull request targeting the "main" branch as destination.
+# Run Chromatic on every pull request targeting the "main" branch as destination
+# that is ready for review (not a draft).
 pr:
   branches:
     include:
       - main
+  drafts: false
 
 steps:
   # Chromatic needs the full Git history to compare the baselines.
@@ -112,19 +120,21 @@ Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuratio
 
 2.2. If your project doesn't include a template file to set up your pipelines, paste the following configuration:
 
-```yaml #19,54,56-57 chromatic.yml
+```yaml #14,21,56,58-59 chromatic.yml
 # Run Chromatic on the "main" branch after a pull request has been merged
 # (currently required to update the baseline when doing "squash" merge for pull requests).
 trigger:
   branches:
     include:
       - main
 
-# Run Chromatic on every pull request targeting the "main" branch as destination.
+# Run Chromatic on every pull request targeting the "main" branch as destination
+# that is ready for review (not a draft).
 pr:
   branches:
     include:
       - main
+  drafts: false
 
 steps:
   # Chromatic needs the full Git history to compare the baselines.

src/bin.ts

@@ -136,7 +136,7 @@ ${changeCount === 0
         <td>
 ${output.inheritedCaptureCount !== 0
         ? `✅&nbsp; Captured ${output.actualCaptureCount} snapshots and inherited from ${output.inheritedCaptureCount} TurboSnaps`
-        : "❌&nbsp; This build is not using TurboSnaps. Be sure to read Workleap's <a href=\"https://gsoft-inc.github.io/wl-chromado/best-practices/\" target=\"blank\" aria-label=\"https://gsoft-inc.github.io/wl-chromado/best-practices/ (Opens in a new window or tab)\">best practices<a/> for Chromatic."
+        : "❌&nbsp; This build is not using <a href=\"https://www.chromatic.com/docs/turbosnap\" target=\"blank\" aria-label=\"https://www.chromatic.com/docs/turbosnap (Opens in a new window or tab)\">TurboSnap</a>. Be sure to read Workleap's <a href=\"https://gsoft-inc.github.io/wl-chromado/best-practices\" target=\"blank\" aria-label=\"https://gsoft-inc.github.io/wl-chromado/best-practices (Opens in a new window or tab)\">best practices<a/> for Chromatic."
 }
         </td>
         </tr>