Just a quick note... Storybook defaults with a way of quickly switching between viewports, good for bouncing between Desktop-ish vs more mobile or tablet sizes:
The trouble is it resets when the page is reloaded, so since I'm working on a mobile-scale problem, I'd prefer to (at least temporarily) change the default.
Easy enough according to the storybook docs - I didn't really want to modify the menu item, just figure out what the defaults were named, so the only code I needed to add to our preview.tsx was
export const parameters = { viewport: { defaultViewport: 'mobile2', },
I suppose a team should figure out if responsive, full-width is the best starting default always, or if they want to lean into being more "mobile-first" by changing the default. It's all too easy for developers to get into a mode of "well it looks good on my large laptop in chrome, so it's probably fine." (of course narrowing the viewport is just one factor of proper mobile testing - but an important one.)
(Of course, I could have gotten similar results by using Devtools' device toolbar, but then there are other complications in terms of the rest of the Storybook trimmings around the content.)
No comments:
Post a Comment