Open stackdiver opened 2 weeks ago
I'm a bit confused about the viewports option. Especially when it comes to overriding the global setting.
viewports
In our Storybook preview.tsx, we define the following viewports for screenshots:
screenshot: { viewports: { laptop: { width: 1920, height: 1080, }, tablet: 'iPad', phone: { width: 360, height: 1054, }, }, },
Then in some particular stories that should only be captured for mobile devices (tablet and phone), we override the viewports in the story params:
export const OnlyMobileStory: Story = { play: async ({ canvasElement }) => { await selectCar(canvasElement) await selectAmount(canvasElement) await selectAccount(canvasElement) await clickConfirm(canvasElement) }, parameters: { screenshot: { viewports: { tablet: 'iPad', phone: { width: 360, height: 1054, }, }, }, }, }
The problem is, that the laptop image is still generated.
I played around a little bit and found, that "resetting" the viewports for all stories in that file helps:
const meta: Meta = { ... parameters: { screenshot: { viewports: [], }, }, } export default meta
But then I have to specify the viewports again in every single story. Any ideas? Possible bug?
Due to some internal infrastructure limitations, we still use Storybook 7.6.19 together with Storycap 4.3.1.
I'm a bit confused about the
viewports
option. Especially when it comes to overriding the global setting.In our Storybook preview.tsx, we define the following viewports for screenshots:
Then in some particular stories that should only be captured for mobile devices (tablet and phone), we override the viewports in the story params:
The problem is, that the laptop image is still generated.
I played around a little bit and found, that "resetting" the viewports for all stories in that file helps:
But then I have to specify the viewports again in every single story. Any ideas? Possible bug?
Due to some internal infrastructure limitations, we still use Storybook 7.6.19 together with Storycap 4.3.1.