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

Args (controls) of enum/array type are not being passed to "open in new tab" (canvas in iframe) #17517

Closed
toli444 opened this issue Feb 16, 2022 · 5 comments

Comments

@toli444
Copy link

toli444 commented Feb 16, 2022

I get a lot of use out of opening a canvas in a new tab in my storybook for React app. However, I find that args are not passed to the component in the new tab if the component's prop-types are PropTypes.oneOf, PropTypes.oneOfType. According to docs, argTypes for Rect components can be generated from docgen info. For the component in which I see the problem:

  • __docgenInfo looks like this:
"colour": {
  "type": {
    "name": "enum",
    "value": [{
      "value": "'orange'",
      "computed": false
    }, {
      "value": "'blue'",
      "computed": false
    }]
  },
  "required": false,
  "description": ""
},
  • PropTypes looks like this:
ColouredBox.propTypes = {
    colour: PropTypes.oneOf(['orange', 'blue', 'green', 'purple']),
};
  • Story looks like this:
export default {
    title: 'Atoms/ColouredBox',
    component: ColouredBox,
    parameters: { layout: 'centered' }
};

export const WithExampleProps = args => (
    <ColouredBox {...args} />
);

WithExampleProps.args = {
    colour: 'blue'
};

With all the above, colour prop is not applied on the component if it is opened in canvas in new tab.

If I change PropTypes:

ColouredBox.propTypes = {
-    colour: PropTypes.oneOf(['orange', 'blue', 'green', 'purple']),
+    colour: PropTypes.string
};

Or directly replace __docgenInfo with:

"colour": {
  "type": {
-    "name": "enum",
-    "value": [{
-      "value": "'orange'",
-      "computed": false
-    }, {
-      "value": "'blue'",
-      "computed": false
-    }]
+    "name": "string"
  },
  "required": false,
  "description": ""
},

Colour prop applied as expected

It would be great to have new tab mode work with complex argTypes as it used to

System
everything worked fine on Storybook v16.3.12. The problem appeared after v16.4.0 update (tested on v16.4.19 as well).

Additional Info
Might be connected with #17413

@toli444 toli444 changed the title enum/array type args are not being passed to canvas in iframe Args of enum/array type are not being passed to "open in new tab" (canvas in iframe) Feb 16, 2022
@toli444
Copy link
Author

toli444 commented Mar 23, 2022

any updates on this one?

@toli444
Copy link
Author

toli444 commented Apr 12, 2022

any updates on this one?

@toli444 toli444 changed the title Args of enum/array type are not being passed to "open in new tab" (canvas in iframe) Args (controls) of enum/array type are not being passed to "open in new tab" (canvas in iframe) Apr 22, 2022
@msDestiny14
Copy link

Hello there. Is there any update or ETA on this? :)

@ozgurbaserdem
Copy link

I would also like to know if there is any ETA on this or at least if the team is aware of this issue.

@shilman shilman added args and removed needs triage labels Jun 8, 2023
@shilman
Copy link
Member

shilman commented Jun 8, 2023

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

@shilman shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants