Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Strange vue3 code snippet behavior with "icon" based properties in alpha #23224

Closed
2 tasks
KevinCarnaille2 opened this issue Jun 27, 2023 · 7 comments
Closed
2 tasks
Assignees
Milestone

Comments

@KevinCarnaille2
Copy link

KevinCarnaille2 commented Jun 27, 2023

Describe the bug

While migrating to 7.1.0-alpha-40, in a vue3-vite SB project, I'm facing a strange issue when my components contain properties with the string "icon"

Instead of simply displaying the property and its string value, it renders a kind of function :

export const Default = {
    args: {
        icon: 'I am the icon property',
        iconSize: 'small',
        color: 'blue'
    }
}

And the code snippet result :

<template>
  <MyCmp icon="()=>({})" icon-size="()=>({})" color="blue" />
</template>

You can preview the issue with the github repository below, I reproduced the issue pretty easily :)
Thanks !

To Reproduce

https://github.com/KevinCarnaille2/sb-vue3-sourcecode-issue

System

Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
Browsers:
    Chrome: 114.0.5735.106
npmPackages:
    @storybook/addon-essentials: ^7.1.0-alpha.40 => 7.1.0-alpha.40 
    @storybook/addon-interactions: ^7.1.0-alpha.40 => 7.1.0-alpha.40 
    @storybook/addon-links: ^7.1.0-alpha.40 => 7.1.0-alpha.40 
    @storybook/blocks: ^7.1.0-alpha.40 => 7.1.0-alpha.40 
    @storybook/testing-library: ^0.2.0-next.1 => 0.2.0 
    @storybook/vue3: ^7.1.0-alpha.40 => 7.1.0-alpha.40 
    @storybook/vue3-vite: ^7.1.0-alpha.40 => 7.1.0-alpha.40

Additional context

You can have a look at the "ButtonIcon" story in the docs

No response

Tasks

@timonbandit
Copy link

same things
You cannot use any props with on inside
check https://github.com/storybookjs/storybook/blame/next/code/renderers/vue3/src/docs/utils.ts#L23

@vanessayuenn
Copy link
Contributor

@chakAs3 @kasperpeulen looks like we are incorrectly treating everything with /^on/ as event handler

@vanessayuenn vanessayuenn added this to the 8.0-RC milestone Jan 9, 2024
@chakAs3
Copy link
Contributor

chakAs3 commented Jan 13, 2024

@timonbandit using props with on will be treated as an event handler and be considered as action, ideally avoid attributes starting with 'on' or override this in actions property in your preview

Image

@shilman
Copy link
Member

shilman commented Jan 26, 2024

@chakAs3 icon does not match the regex ^on[A-Z]. so either the problem is elsewhere (my guess) or the argTypeRegex code is buggy (also possible).

@chakAs3
Copy link
Contributor

chakAs3 commented Jan 27, 2024

@chakAs3 icon does not match the regex ^on[A-Z]. so either the problem is elsewhere (my guess) or the argTypeRegex code is buggy (also possible).

funny the argTypeRegex is buggy because there is 'on' in 'icon' i will see what we can do to fix this

@tfoxkiu
Copy link

tfoxkiu commented Jan 28, 2024

@vanessayuenn
Copy link
Contributor

Indeed this should be fixed already by #25219. I am closing this issue for now. But please let me know if it isn't fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Status: No status
Development

No branches or pull requests

7 participants