#Args in url not working

8 messages · Page 1 of 1 (latest)

proper marlin
#

I have a component (Button).

When I go in the canvas tab and, for example, change the prop disabled to true, the button becomes disabled. But when I click "Open canvas in new tab", the button is back to normal (not disabled) state, even though the changed props are kept in the url:

When I go to the canvas tab and change disabled to true:
?path=/story/general-button--element&args=disabled:true

When I click "Open canvas in new tab":
?args=disabled:true&id=general-button--element&viewMode=story

Apparently these props aren't being considered in the new tab. I tried other props, same problem. Another component I tried doesn't have this problem, though.

Is there any way I can debug this?

proper marlin
#

Apparently it happens to props that aren't in args

#

Eg:
?args=disabled:true&id=general-button--element&viewMode=story

import { Button, ButtonProps } from "...";

export default {
  title: "general/Button",
  component: Button,
  argTypes: {
    disabled: {
      type: { required: false },
      control: {
        type: "boolean",
      },
    },
  },
};

export const Element = (argTypes: ButtonProps): JSX.Element => {
  console.log("argTypes:", argTypes);
  return <Button {...argTypes}>Button</Button>;
};

here argTypes is {}.

import { Button, ButtonProps } from "...";

export default {
  title: "general/Button",
  component: Button,
  argTypes: {
    disabled: {
      type: { required: false },
      control: {
        type: "boolean",
      },
    },
  },
  args: {
    disabled: null,
  },
};

export const Element = (argTypes: ButtonProps): JSX.Element => {
  console.log("argTypes:", argTypes);
  return <Button {...argTypes}>Button</Button>;
};

but here argTypes is {disabled: 'true'}.

#

This is storybook 6.5.16

#

Can anyone replicate this?

#

Do you think this is a bug?

proper marlin
#

Args in url not working

nimble scaffold