Custom styles for components based on view mode

[BenjaVR]

Is your feature request related to a problem? Please describe

I want to add custom styles if a component is shown in the 'canvas' tab that are not applied in the 'docs' tab (or the other way around).

An example is stories about full page containers: in de 'docs' tab these should have a fixed height to show smaller examples, however on the 'canvas' tab I want them to fill the whole page.

Describe the solution you'd like

Some way to access some storybook-context variables, such as the viewMode, inside the stories (or decorators) itself. However I'm not sure about the best way to add this.

Describe alternatives you've considered

Right now we have a decorator like this (example with React):

(Story: any) => {
  const isFullscreen = window.location.search.includes("&viewMode=story");
  if (isFullscreen) {
    return <Story />;
  }
  return (
    <div style={{ height: 600 }}>
      <Story />
    </div>
  );
}

I have not found any other solution to get the same results.

Are you able to assist to bring the feature to reality?

If I could get pointed to the right direction, I can contribute to add this feature.

Additional context

/

[shilman]

@BenjaVR the second argument to a story/decorator is the render context, which contains the current viewMode:

export const WithArgs = (args, context: { viewMode }) => {
  console.log(viewMode);
  return <Button {...args} />;
}

@jonniebigodes not sure if this belongs in docs somewhere?

[BenjaVR]

Ah it already exists, great! With this knowledge I peeked into the typings, and found the DecoratorFunction type which indeed shows there is a second parameter:

export declare type DecoratorFunction<StoryFnReturnType = unknown> = (fn: StoryFn<StoryFnReturnType>, c: StoryContext) => ReturnType<StoryFn<StoryFnReturnType>>;

export interface StoryIdentifier {
    id: StoryId;
    kind: StoryKind;
    name: StoryName;
}

export declare type StoryContext = StoryIdentifier & {
    [key: string]: any;
    parameters: Parameters;
    args: Args;
    argTypes: ArgTypes;
    globals: Args;
    hooks?: HooksContext;
    viewMode?: ViewMode;
};

In the docs I now found this: https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking

The second argument to a decorator function is the story context which in particular contains the keys:
args - the story arguments. You can use some args in your decorators and drop them in the story implementation itself.
globals - the Storybook-wide globals. In particular you can use the toolbars feature to allow you to change these values using Storybook’s UI.

So seems like the docs are indeed not complete, compared to the types.