Wednesday, December 1, 2021

storybook: consider changing your default viewport (mobile view to default)

 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