storybookjs/storybook

[Bug]: Open in a new tab button don't load arguments

Open

#29076 opened on Sep 10, 2024

View on GitHub
 (3 comments) (5 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bughelp wantedpreview-api

Description

Describe the bug

I'm using Storybook.js on a Laravel/Inertia project with tailwind and ShadCN.

Everything is working well except the "Open in new tab" button.

For example, I have a button component which can have 2 sizes: default & small. I can change the size when on the component page but when I open it in a new tab the size is not the right one. I've checked in my URL and I have the params : https://my-app.io/storybook/iframe.html?args=size:small&id=components-button--success&viewMode=story

I have the same problem on local and on production with builded assets.

Here is my config file :

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
const config = {
    stories: ['../resources/js/**/*.stories.@(js|jsx|mjs|ts|tsx|vue)'],
    addons: [
        '@storybook/addon-onboarding',
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@chromatic-com/storybook',
        '@storybook/addon-interactions',
        '@storybook/addon-styling-webpack'
    ],
    framework: {
        name: '@storybook/vue3-vite',
        options: {
            docgen: 'vue-component-meta',
        },
    },
};
export default config;

And here is my component story :

import Button from './Button.vue';
export default {
    argTypes: {
        as: {
            control: { defaultValue: 'button', type: 'select' },
            options: ['button', 'a', 'router-link'],
        },
        class: { control: { type: 'text' }, defaultValue: '' },
        iconRight: {
            control: { type: 'select' },
            options: ['ri-skip-right-fill', 'ri-home-4-line', 'ri-question-answer-fill', null],
        },
        size: {
            control: { defaultValue: 'default', type: 'select' },
            options: ['small', 'default'],
        },
        variant: {
            control: { defaultValue: 'default', type: 'select' },
            options: [
                'danger',
                'default',
                'floating',
                'ghost',
                'outlined-light',
                'outlined-strong',
                'toggle',
                'underlined',
            ],
        },
    },
    component: Button,
    tags: ['autodocs'],
    title: 'Components/Button',
};

export const Default = {
    args: {
        default: 'Default',
        size: 'default',
        variant: 'default',
    },
};

export const Danger = {
    args: {
        default: 'Danger',
        size: 'default',
        variant: 'danger',
    },
};

Did I missconfigured something or it's a problem with Laravel ?

Reproduction link

I'm using Inertia so it's hard to provide a new storybook for testing purposes

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/Library/Application Support/Herd/config/nvm/versions/node/v21.7.3/bin/npm <----- active
    pnpm: 9.4.0 - ~/Library/Application Support/Herd/config/nvm/versions/node/v21.7.3/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.120
    Safari: 17.5
  npmPackages:
    @storybook/addon-essentials: ^8.2.9 => 8.2.9 
    @storybook/addon-interactions: ^8.2.9 => 8.2.9 
    @storybook/addon-links: ^8.2.9 => 8.2.9 
    @storybook/addon-onboarding: ^8.2.9 => 8.2.9 
    @storybook/addon-styling-webpack: ^1.0.0 => 1.0.0 
    @storybook/blocks: ^8.2.9 => 8.2.9 
    @storybook/test: ^8.2.9 => 8.2.9 
    @storybook/vue3: ^8.2.9 => 8.2.9 
    @storybook/vue3-vite: ^8.2.9 => 8.2.9 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.2.9 => 8.2.9

Additional context

No response

Contributor guide