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:
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user