Storybook: [addon-docs] Props element: add max height and a scrollbar

[lgraziani2712]

Is your feature request related to a problem? Please describe.
It would be great if the <Props/> table had a max height, specially for elements that extends its props from HTMLAttributes.

Describe the solution you'd like
To have a default max height and an optional prop to set a custom max for the Props element. If the table is larger than the max height, will display the scrollbar.

Describe alternatives you've considered
Right now I'm wrapping the Props element in the MDX story:

<div style={{ maxHeight: '600px', overflowY: 'scroll', overflowX: 'hidden' }}>
  <Props of={MyElement} />
</div>

Are you able to assist bring the feature to reality?
Yes! I would really love to do it!

[shilman]

@patricklafrance what do you think? sounds reasonable to me?

[patricklafrance]

+1 to provide a prop to set a max height.

Not sure about settings a default one thought. I would prefer to provide a CSS escape hatch for the props table.

[patricklafrance]

@lgraziani2712 do you have an example of props that take a lot of space in your storybook?

I am working on something that might help with that and I am trying to get as much examples as possible.

[lgraziani2712]

Yep, here it is one!

import React from 'react';

// It will print all of the props
export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
  justified?: boolean;
}

export default function ButtonGroup({
  className,
  justified,
  ...props
}: ButtonGroupProps) {
  return (
    <div className={`button-group ${className || ''} ${justified ? 'justified' : ''}`} {...props}>
      {props.children}
    </div>
  );
}

[lgraziani2712]

I'm going to tackle this. I have a question: where I configure the css props? As part of the theme, as a global config? or as props?

[atanasster]

@lgraziani2712 as far as I can see, the escape hatches were added already by Francis Thibault :
https://github.com/storybookjs/storybook/blob/7256fe638b4f7a38b39552470189fef4604b834b/lib/components/src/blocks/PropsTable/PropsTable.tsx#L197

here is the PR: https://github.com/storybookjs/storybook/commit/4e41694820530e60b8457ae799cfce0eb76a1744#diff-d4b5becaa150028642253d7ea1983c37

[patricklafrance]

Does the escape hatch fix your issue @lgraziani2712 ?

Can we close this issue?

[atanasster]

@lgraziani2712 another option besides using css styles since beta.3 is to configure the docs page blocks any which way you like. Here is an example that follows your initial request

In your config.js/preview.js:

import { addParameters } from '@storybook/react';
import {
  Title,
  Subtitle,
  Description,
  Primary,
  Props,
  Stories,
} from '@storybook/addon-docs/blocks';

addParameters({
  docs: {
    page: () => (
      <>
        <Title />
        <Subtitle />
        <Description />
        <Primary />
        <div style={{ maxHeight: '600px', overflowY: 'scroll', overflowX: 'hidden' }}>
          <Props />
        </div>
        <Stories />
      </>
    ),
  },
});

This will now apply to all your docs pages

[lgraziani2712]

Yep, I'll close the issue!

I could make it with this css snipet based on this post:

.docblock-propstable {
  table-layout: fixed !important;
  width: initial !important;
}

.docblock-propstable tbody {
  display: block;
  width: 100%;
  overflow: auto;
  height: 400px;
}

.docblock-propstable tr {
  display: grid;
  grid-template-columns: 200px 2fr min-content;
}

.docblock-propstable td {
  text-overflow: ellipsis;
  overflow-x: hidden;
}

If anyone want to see it:

• Web: https://lgraziani2712.github.io/sb-8751/?path=/docs/big-propstable--default-story
• Repo: https://github.com/lgraziani2712/sb-8751

Thanks y'all!