#Description shows (string) for a boolean property

1 messages · Page 1 of 1 (latest)

grim valley
#

Hi, I am migrating from sb6.5 to sb7.2.
I am trying to reuse the same argTypes definition I had, but I noticed that something changes, like the pre announced deprecation of the default value.
I moved from plain JS to TS, but this shouldn't really matter.

What is puzzling me is that I am getting the following docs (see image 1).

But in my argTypes definition I have set the control as boolean, and even the value type, which I am not clear of it's intended purpose.

My argTypes in storybook story definition:
argTypes: { pill: { value: { type: "boolean" }, control: "boolean", description: "<p>Add the <code class=\"language-text\">pill</code> modifier to make badges more rounded with\nsome additional horizontal padding</p>" } }

My component src extract:
`[...]
export interface BadgeProps {
pill?: boolean;
bg?: string;
children?: any;
}

export function Badge (props: React.PropsWithChildren<BadgeProps>) {
const badgeProps:any = Object.assign({}, props);
[...]`

My main.ts has the following configuration:
docs: { autodocs: "tag", },
In version 6.5, the description column didn't have this value, so I can't really compare with my current version.

Thank you in advance

image.png
halcyon storm
#

Hey @grim valley 👋

Now that you're using Typescript your arg types can be inferred by your type interface 🙂

#

What happens if you remove the argTypes from your story file?

#

to get descriptions for your props you can add a JSDoc comment above each prop in the interface 🙂

grim valley
#

Hi, I just found at least a solution trying to figure ho to set the default:

argTypes: { pill: { value: { type: "boolean" }, control: "boolean", description: "<p>Add the <code class=\"language-text\">pill</code> modifier to make badges more rounded with\nsome additional horizontal padding</p>", table: { type: { summary: "boolean" }, defaultValue: { summary: false }, } } }

halcyon storm
# 
export interface BadgeProps {
  /** Add the `pill` modifier to make badges more rounded with some additional horizontal padding */
  pill?: boolean;
  bg?: string;
  children?: any;
}
grim valley
#

because I use tags, the documentation is not autogenerated, at the moment I am trying to undestand how I can set it up manually

halcyon storm
grim valley
#

not in the table apparently

#

that's the only way you can populate the default field in the table

#

earlier i was using it to set the actual default value, but now i need to use args

halcyon storm
#

Ah! confusing, table.defaultValue 🫠

grim valley
#

yes, it makes sense but coming from a prev version it is confusing at first

#

thanks for helping

halcyon storm
#

Yeah, we've never really had good docs around it, until now