Fix flaky Argos diffs (#21771)

Inputs and selects with a trailing icon (copy button, chevron, etc.)
were flaky in Argos: the icon would intermittently flag as appearing
twice.

The icon's x-position depends on font-rendered content width, and under
Argos's `fit-content` capture the whole row is content-sized. Inter is
loaded from the Google Fonts CDN with `display=swap`, and Argos's font
gate (`document.fonts.status === "loaded"`) doesn't reliably catch the
late swap, so the snapshot sometimes lands pre-swap and sometimes
post-swap. The diff then paints both the old and new icon positions,
which reads as a duplicated icon.

This adds a Storybook loader that force-loads the Inter weights and
awaits `document.fonts.ready` before each story renders, so screenshots
are always taken post-swap. Fixes the whole class at once rather than
per component.

Note: affected trailing-icon stories will need a one-time Argos
re-baseline.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21771?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Raphaël Bosi
2026-06-18 15:05:31 +02:00
committed by GitHub
parent b4113de74a
commit a2d030e97a
+12 -1
View File
@@ -98,6 +98,17 @@ const STORYBOOK_DEFAULT_USER_CONTEXT = {
timeZone: 'UTC',
};
const INTER_FONT_WEIGHTS = ['400', '500', '600'];
const waitForInterFontLoadedBeforeScreenshot = async () => {
await Promise.all(
INTER_FONT_WEIGHTS.map((weight) =>
document.fonts.load(`${weight} 1em Inter`),
),
);
await document.fonts.ready;
};
const preview: Preview = {
decorators: [
(Story) => {
@@ -124,7 +135,7 @@ const preview: Preview = {
resetJotaiStore();
},
loaders: [mswLoader],
loaders: [mswLoader, waitForInterFontLoadedBeforeScreenshot],
parameters: {
controls: {