Help with checkbox props mismatching storybook controls

[acc-nicholas]

Hello,

I'm a big fan of this project and am considering using for my company's design system. We are using storybook js to build it which i think you guys are familiar with since its part of some of the pkgs here.

Currently, i'm just trying to get a very simple Checkbox passthrough component working which is simply a styled version of the radix primitive checkbox.

However i'm running into something weird: i only see 5 controls/props in storybook, but the radix docs show 9 props. The description is also missing.

My controls:

My code:

// Checkbox.tsx
import * as RadixCheckbox from "@radix-ui/react-checkbox";

export const Checkbox: React.FC<RadixCheckbox.CheckboxOwnProps> = (props) => {
  return (
    <StyledCheckbox {...props}>
      <RadixCheckbox.Indicator as={CheckIcon} />
    </StyledCheckbox>
  );
};


// Checkbox.stories.tsx
import * as RadixCheckbox from "@radix-ui/react-checkbox";
const story = {
  title: "Components/Forms/Checkbox",
  component: Checkbox,
};
export default story as Meta;

const Template: Story<RadixCheckbox.CheckboxOwnProps> = (args) => (
  <Checkbox {...args} />
);
export const Default = Template.bind({});

It seems like CheckboxOwnProps is defined here:
https://github.com/radix-ui/primitives/blob/main/packages/react/checkbox/src/Checkbox.tsx#L21
and i can't seem to figure out where the other 4 props are inherited from. Not sure if this is a bug or if i'm doing something wrong.

Any help is much appreciated

[benoitgrelard]

Hi @acc-nicholas, thanks for your question, glad you like the components.

So in the docs I see:

• as
• defaultChecked
• checked
• onCheckedChange
• disabled
• required
• readOnly
• name
• value

and in your story I see:

• defaultChecked
• checked
• onCheckedChange
• required
• readOnly

I understand the confusion. I'll try and point out where the "missing" ones come from.

• as comes from the polymorphic types (here)
• required and readOnly are listed explicitly because we are adding them manually as we render a button and button DOM props doesn't have these
• the rest (disabled, name, value) are standard DOM props that are available on button which are automatically added by our polymorphic types

I hope that helps!

[benoitgrelard]

Oh I just realised also that the way you're setting the types on your component is not right.
I'm a bit confused as well because I see you referencing RadixCheckbox.CheckboxOwnProps but we don't export types so I'm wondering how that even works 🙂

Regardless, as I was saying earlier, CheckboxOwnProps will only contain the props we've explicitly added to it.

If you don't care about polymorphism, you only need React.elementRef and React.ComponentProps (see in link below).
If you do need polymorphism, you can use our type helpers.
Have a look here for an example of both: https://radix-ui.com/primitives/docs/overview/styling#styling-a-part

I don't really know how the controls thing you're doing works, but looking at the code I'm guessing it's based on that template to which you give the props through the generic.
In this case I believe you would then be able to get most of the way by doing this:

type Props = React.ComponentProps<typeof Checkbox>;
const Template: Story<Props> = (args) => (
  <Checkbox {...args} />
);
export const Default = Template.bind({});

I think the only issue you'll have with this is that the type of the as prop will probably be wrong/misleading. It'll probably say button | undefined.

[acc-nicholas]

I think AccordionItem has comments to describe the props here:
https://github.com/radix-ui/primitives/blob/main/packages/react/accordion/src/Accordion.tsx#L266

But checkbox is lacking those comments/descriptions here:
https://github.com/radix-ui/primitives/blob/main/packages/react/checkbox/src/Checkbox.tsx#L24

So that makes sense why they are missing for me. Shall I submit a feature request to add those comments/descriptions?

I'm still unsure why the default values are missing though. Will continue to look into that.

[benoitgrelard]

Yeah we haven't been consistent with adding descriptions like this in code because we currently have to do it manually for our docs so it's duplicated effort and hard to keep in sync.

In an ideal world, we would only describe every prop in code comments, and somehow use the types to generate the props in our docs but we're not quite there yet unfortunately.

[acc-nicholas]

Ah! I think the react-docgen-typescript expects default values to be defined in a certain way:

const Btn = ({
  variants = '',
  size = '',
  children,
  onClick,
  disabled = false,
  type = 'submit',
}: Props) => {
  /* ... */
};

But default values are defined differently in radix primitives:

const Checkbox = React.forwardRef((props, forwardedRef) => {
  const {
    as = CHECKBOX_DEFAULT_TAG,
    'aria-labelledby': ariaLabelledby,
    name,
    checked: checkedProp,
    defaultChecked,
    required,
    disabled,
    readOnly,
    value = 'on',
    onCheckedChange,
    ...checkboxProps
  } = props;

Would you be open to changing this across all components?

[acc-nicholas]

In an ideal world, we would only describe every prop in code comments, and somehow use the types to generate the props in our docs but we're not quite there yet unfortunately.

Seems like this is exactly what that react-docgen-typescript pkg is intended to do. It appears you are using storybook with story files. The doc + controls addons should be able to do this for you as well. So it seems like its possible to remove the manual work and de-dupe? Is storybook not working for you?

[benoitgrelard]

Not really, we don't use storybook for our documentation, we have a custom website for that.