GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-10 00:12:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11069 from matheo/feat/docs-merge-args

Browse Source 
Addon-docs: Add `docs.forceExtractedArgTypes` parameter
This commit is contained in:
Michael Shilman 2020-06-08 15:30:57 +08:00 committed by GitHub
commit 5b4967f441
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
addons/controls/README.md
View File

@ -242,7 +242,14 @@ This generates the following UI with a custom range slider:
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-reflow-slider.png" width="80%" /> <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-reflow-slider.png" width="80%" />
</center> </center>
<h4>Angular</h4> **Note:** If you add an `ArgType` that is not part of the component, Storybook will *only* use your argTypes definitions.
If you want to merge new controls with the existing component properties, you must enable this parameter:
```jsx
docs: { forceExtractedArgTypes: true },
```
#### Angular
To achieve this within an angular-cli build. To achieve this within an angular-cli build.

7
addons/docs/src/frameworks/common/enhanceArgTypes.ts
View File

@ -13,17 +13,18 @@ const isSubset = (kind: string, subset: object, superset: object) => {
export const enhanceArgTypes: ArgTypesEnhancer = (context) => { export const enhanceArgTypes: ArgTypesEnhancer = (context) => {
const { component, argTypes: userArgTypes = {}, docs = {}, args = {} } = context.parameters; const { component, argTypes: userArgTypes = {}, docs = {}, args = {} } = context.parameters;
const { extractArgTypes } = docs; const { extractArgTypes, forceExtractedArgTypes = false } = docs;
const namedArgTypes = mapValues(userArgTypes, (val, key) => ({ name: key, ...val })); const namedArgTypes = mapValues(userArgTypes, (val, key) => ({ name: key, ...val }));
const inferredArgTypes = inferArgTypes(args); const inferredArgTypes = inferArgTypes(args);
let extractedArgTypes: ArgTypes = extractArgTypes && component ? extractArgTypes(component) : {}; let extractedArgTypes: ArgTypes = extractArgTypes && component ? extractArgTypes(component) : {};
if ( if (
(Object.keys(userArgTypes).length > 0 && !forceExtractedArgTypes &&
((Object.keys(userArgTypes).length > 0 &&
!isSubset(context.kind, userArgTypes, extractedArgTypes)) || !isSubset(context.kind, userArgTypes, extractedArgTypes)) ||
(Object.keys(inferredArgTypes).length > 0 && (Object.keys(inferredArgTypes).length > 0 &&
!isSubset(context.kind, inferredArgTypes, extractedArgTypes)) !isSubset(context.kind, inferredArgTypes, extractedArgTypes)))
) { ) {
extractedArgTypes = {}; extractedArgTypes = {};
} }