chore(ci): reconfigure percy to only snapshot mobile in the white theme

[tay1orjones]

Closes #14779

Based on our discussion of ideas, this reconfigures percy so that components are only snapshotted at the mobile breakpoint in the white theme. Components snapshotted in g10, g90, and g100 will only snapshot at the default 1366 width.

Changelog

Changed

• reconfigure percy to only snapshot mobile in the white theme

Testing / Reviewing

• I'm not sure if percy will use this new config for this PR. We might need to merge it into main to test it, I'm not totally sure.
• Double check the syntax and options, I think I used them right?
  • https://docs.percy.io/docs/cli-configuration#per-snapshot-configuration

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	681e887
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/65293378c1ed1d0008a164b1
😎 Deploy Preview	https://deploy-preview-14886--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	681e887
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/652933783bc4f60009cf86d5
😎 Deploy Preview	https://deploy-preview-14886--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alisonjoseph]

🤞

[tay1orjones]

We hit the snapshot limit before we could test this 😞

We'll have a new allotment on Monday to test this.

[tay1orjones]

Something's not right, Percy still shows 920 snapshots being used for this PR. I think we should be seeing a diff of some snapshots being deleted on this PR.

[tay1orjones]

Looking into this further, it appears the snapshot "count" in the percy dashboard does not reflect the true count of snapshots.

Build #12923 is the most recent build on main. It's listed as 920 snapshots within this build. You can see in this screenshot that the currently selected snapshot is taken in two browser widths (top right corner):

Meanwhile, a recent build from this PR shows the update made here to restrict that same snapshot to a single browser width:

In both cases the total snapshot "count" for the build is 920. Based on this support article, browser widths do count as a snapshot each:

Percy calculates your usage based on the number of snapshots/screenshots you are trying to take per build.

As an example, if you snapshot one page on:

• Chrome across 3 widths (say 1024, 1366, 375)

• Edge across 3 widths (say 1024, 1366, 375)

The above would result in 6 snapshots (i.e., 1 snapshot x 3 widths per browser).

Overall this means we have no way to verify that the billed snapshots per build are less than before this change.

[tay1orjones]

Update: you can view the total screenshots by viewing the additional build information behind the info icon next to the build information in the top left of the percy build screen

Main	This PR 🎉