Storybook: Feature request: Set user agent from viewport plugin

[SimenB]

Issue details

We set a class on the body of the iframe so that we can style differently depending on whether we think it's a touch device or not (bigger buttons, less focus state etc). Currently this is just in an interval polling navigator.userAgent and passing it though bowser. This is updated if one uses the mobile emulator in Chrome.

I'd like to use the viewport plugin instead of the one built into chrome, but as the user agent remains unchanged the correct class is not set on body.

Steps to reproduce

With the viewport plugin installed, select a mobile viewport and call navigator.userAgent from within the iframe. Observe that it's still a desktop browser.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 3.3.15
• @storybook/addon-viewport 3.3.15

Affected platforms

N/A

Screenshots / Screencast / Code Snippets (Optional)

I think having a callback every time the viewport changes would be enough for my use case.

Current implementation:

function updateProbablyTouch() {
    const bowserDetect = bowser.detect(navigator.userAgent);

    const probablyTouch = Boolean(
        bowserDetect.mobile || bowserDetect.tablet
    );
    document.body.classList.toggle('probably-touch', probablyTouch);
    document.body.classList.toggle('probably-not-touch', !probablyTouch);
}

I don't need the actual userAgent to be changed, it's enough if my callback is invoked with the user agent of the viewport chosen

[Hypnosphi]

Looks like a valuable feature, please open a PR

[mshaaban088]

@SimenB @Hypnosphi As we have an open PR #3099 to make the viewport addon configurable, we can add that callback function to the options, let say
onViewportChange(prevViewport, newViewport) if you want to make comparison between the previous and new one, or just
onViewportChange(viewport)

and we should also include a property in every device to identify its type (e.g. desktop/mobile/tablet)

What do you think?

[Hypnosphi]

Looks cool. I'm going to merge #3099 since we've branched off release/3.4

[mshaaban088]

@Hypnosphi thanks :)

[SimenB]

@mshaaban088 that sounds perfect to me! 🙂

[mshaaban088]

Let's agree on a signature and I'm willing to work on it.

My proposal is to provide two callbacks

1. Whenever viewport changes

/*
DeviceType = desktop | mobile | tablet

Orientation = landscape | portrait

Viewport = {
  name: string,
  styles: {
    width: number,
    height: number
  },
  type: DeviceType,
  initialOrientation: Orientation
}
*/
function onViewportChange(newViewport: Viewport) { }

1. Whenever device orientation changes

function onOrientationChange(newOrientation: Orientation) { }

What do you think, @SimenB

[SimenB]

For my use case orientation at least is not relevant - isn't that just different height/width anyways? I have no real feelings either way, though.

onViewportChange looks perfect! 🙂

It might be interesting to have DeviceType as separate radio buttons in addition to choosing from a list av devices, but that's not really related to this issue

[mshaaban088]

I was just mentioning it as one might need to react on device rotation changes, but you're right, let's not add too much at once.

Regarding the radio-buttons, apart from the current issue, do you mean like filter viewports based on selected device type?

[SimenB]

I mean instead of selecting iphone version x, android version y or kindle version z, just selecting "mobile" or "tablet" might be enough. Might also not make sense, just throwing it out there :D

[mshaaban088]

I'm not sure if it makes sense in this case, sorry 😊

[SimenB]

Should be covered by #3283, thanks!

[Hypnosphi]

Released as 4.0.0-alpha.0