[Bug]: Open in a new tab button don't load arguments
#29076 opened on Sep 10, 2024
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