Open 7studio opened 3 years ago
I don't think that hiding the Controls column is supported; I know you can remove the rows from the table. There seems to be some mentions about hiding the column in #12345 and it might have some workarounds but that is the best Storybook can offer so far
@7studio As a workaround you could wrap the <ArgsTable />
with a <div>
and give it an id and use some CSS to hide the column.
In your stories.mdx file:
<div id="hide-controls-column">
<ArgsTable story="Card" />
</div>
in a .storybook/storybook.css (override) file:
/* Hiding certain control columns from argstable */
#hide-controls-column > div > table > thead > tr > th:last-child,
#hide-controls-column > div > table > tbody > tr > td:last-child {
display: none;
}
#hide-controls-column > div > table > thead > tr th:nth-child(1),
#hide-controls-column > div > table > tbody > tr td:nth-child(1) {
width: 15%;
}
make sure to setup that storybook.css override in .storybook/preview.js:
import '../dist/esm/index.css';
import './storybook.css';
export const parameters = {
viewMode: 'docs',
actions: { argTypesRegex: "^on[A-Z].*" },
}
Controls does not hidden on args table, for that exist another property.
If you want to hidde some property on table, you have to use table.
title: { table: { disable: true } }
That would disable the entire row for an arg, not a specific property of it. What OP wants is to show the row but not the control column in the argsTable, or at least not show the control field itself.
any news? its kind of weird that disabling table (which corresponds to doc page) deletes control, and i cant override it by directly writing "control", according to current api, ArgsTable component has exclude property, but i need to recreate docs markup for each story where i want to disable some properties from doc - it requires a lot of code easier would be to move this property to argTypes or fix current behavior with table disabling
P.S. What is wrong with docs? Why do i get know about "disable" property from issues on github?
Currently https://storybook.js.org/docs/react/writing-docs/doc-block-argstable#argstable does not have info about disable property and about exclue/include
@ops1ops Storybook docs are famously bad. They are more of a blog about storybook than a simple listing of api. I'm not sure why no one does this anymore.
@maeriens Exactly. Have you by any chance found a solution?
Leaving the prop for documentation purposes only and disabling the ability to change the component can be done like so:
component: MyComponent,
title: 'MyComponent',
argTypes: {
multiple: {
control: { type: null }
}
}
I have another problem. For good measure I write this in global argTypes
:
export const argTypes = {
style: {
table: {
disable: true,
},
},
};
But if I do this, style
prop is visible under every story. This does not always happen though. Also, it does not show in Docs tab, but only in Canvas tab. This is very weird.
This is now mentioned here: https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties
argTypes: {
// remove the prop documentation from the table
foo: {
table: {
disable: true,
},
},
},
argTypes: {
// render the prop documentation, but without a control
foo: {
control: false,
},
},
Can we disable controls for the whole story without going into the each and every prop? There are only 2️⃣ , but still...:)
I have the same question as @manavm1990. I am usiong pandacss to style my components, and they can receive hundreds of styling properties, I want to hide them in storybook. And ain't no way Imma disable all of them manually.
@manavm1990 @FilipePfluck you can overwrite extractArgTypes
which is the function used to infer all the arg types of a component.
function extractArgTypes(component) {
// return `argTypes` here
}
{
parameters: {
docs: {
extractArgTypes,
}
}
}
You can check how the default function is implemented here: https://github.com/storybookjs/storybook/blob/aecfa1791f982bef6a06b51d20df3e31dd82b5b4/code/renderers/react/src/docs/extractArgTypes.ts#L5
The function implementation is different between frameworks. The one above is for React. You can look for the others inside the repo.
You can set this in preview.js
to change all stories, in the default export of a file to change all stories in that file or in a single story.
@FilipePfluck and @manavm1990 Took me a while to figure this out, and it may not work for your needs, but I personally use the propFilter
function to filter out props defined in node_modules
via my typescript
config in main.js:
typescript: {
check: false,
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
shouldExtractValuesFromUnion: true,
shouldRemoveUndefinedFromOptional: true,
// filter out props from dependency modules
propFilter: prop =>
!!prop.declarations?.find(
declaration => !declaration.fileName.includes('node_modules')
),
},
},
Source(ish): https://storybook.js.org/docs/react/configure/typescript#extending-the-default-configuration
Describe the bug When I set the
controls
parameter to{ disabled: true }
for a story, the "Control" column into<argsTable story="">
doesn't disappear, even if I overrideargTypes
on story withcontrol: { type: null }
.Case 1:
Control panel
![controls-disabled](https://user-images.githubusercontent.com/835430/128512493-c1bf45ee-4d6e-4e81-9271-c2fd78310d10.jpg)
<Story parameters={{ controls: { disable: true } }}></Story>
argsTableCase 2:
Control panel
![controls-type-null](https://user-images.githubusercontent.com/835430/128512510-dda09a9f-a287-4450-9b74-889a6abcf52c.jpg)
<Story argTypes={{ title: { control: { type: null } } }}></Story>
argsTableTo Reproduce Steps to reproduce the behaviour:
<Meta title="Components/Card" parameters={{ viewMode: 'docs', }} args={{ title: '', }} argTypes={{ title: { name: 'Titre', description: 'Titre de l’article', type: { name: 'string', required: true }, table: { type: { summary: 'string', }, defaultValue: { summary: '' }, }, control: { type: 'text' }, } }} />
export const PlaygroundTmpl = (args) => `
${args.title}
`
Card
System: OS: Windows 10 10.0.19043 CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz Binaries: Node: 14.17.0 - C:\nodejs\node.EXE npm: 6.14.13 - C:\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.423.0), Chromium (92.0.902.62) npmPackages: @storybook/addon-essentials: ^6.3.4 => 6.3.6 @storybook/addon-links: ^6.3.4 => 6.3.6 @storybook/addons: ^6.3.6 => 6.3.6 @storybook/html: ^6.3.4 => 6.3.6 @storybook/preset-scss: ^1.0.3 => 1.0.3 @storybook/theming: ^6.3.4 => 6.3.6