storybook-readme: Props description not rendering as expected

I’ve installed this module this morning and it all seems to be working as expected apart from rendering a description in the <!-- PROPS --> table. I wonder if I am doing something wrong for the props table to not recognise the description?

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Label from '../Partials/Label/Label';

const Textfield = styled(({ type, label, id, required, placeholder, defaultValue }) => (
  <div>
    <Label id={id} text={label} />
    <input
      type={type}
      defaultValue={defaultValue ? defaultValue : null}
      placeholder={placeholder ? placeholder : null}
      required={required ? true : false}
      id={id}
    />
  </div>
))`
  margin: 0;
  border: 1px solid #ccc;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  font-size: 13px;
  font-family: Arial;
  box-sizing: content-box;
`;

Textfield.propTypes = {
  /* Type of text field, this will grow as we progress */
  type: PropTypes.oneOf(['text']),
  /* Label for text field, this is required for accessibiity reasons */
  label: PropTypes.string.isRequired,
  /** Unique ID for field, this allows the label to reference the input field */
  id: PropTypes.string.isRequired,
  /** Is the form required? if true a required attribute will be added to the input */
  required: PropTypes.bool,
  /** Placeholder text to appear within the input field, probably best not to put instructions in here as they disappear on change */
  placeholder: PropTypes.string,
  /** A default value for the form when it is first loaded, useful if you are a logged in user etc. */
  defaultValue: PropTypes.string,
};

export default Textfield;

The output is as follows: storybook-readme

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Comments: 26 (9 by maintainers)

Commits related to this issue

Most upvoted comments

published 5.0.2

Leave this issue open for few day. Maybe some bugs or feedback

@renemn Thanks for more cases for investigation. So far, this problem is kind of intertwined… some limitations from react-docgen and we use datas from storybook Let’s see how it can be solved from our side.

Trying to find the problem.

Docs are generated by https://github.com/storybooks/babel-plugin-react-docgen. This addon comes with storybook. Issues with docs generation may relate to it.

This babel-plugin-react-docgen PR https://github.com/storybooks/babel-plugin-react-docgen/pull/68 (Add forward ref support) is related to my issues but not sure it is common problem with props info generation.

Trying to find some bugs at storytbook-readme codebase but still cant see errors. Still looking for.

I have a similar issue only for me the table renders, but adds extra rows on coment line breaks

 /**
   * statusColor dictates the color of the button
   * can be.
   */
  statusColor: ButtonStatusColor,
  

with it rendering like so image

@jephjohnson yes, will add to examples with next release