diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/addons/docs/src/frameworks/react/propTypes/createType.ts
index 6e375478470c..84a9e55f5620 100644
--- a/addons/docs/src/frameworks/react/propTypes/createType.ts
+++ b/addons/docs/src/frameworks/react/propTypes/createType.ts
@@ -2,7 +2,11 @@ import { isNil } from 'lodash';
import { PropType } from '@storybook/components';
import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib';
import { ExtractedProp, DocgenPropType } from '../../../lib/docgen';
-import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature';
+import {
+ generateFuncSignature,
+ generateShortFuncSignature,
+ toMultilineSignature,
+} from './generateFuncSignature';
import {
OBJECT_CAPTION,
ARRAY_CAPTION,
@@ -22,6 +26,8 @@ import {
InspectionArray,
} from '../lib/inspection';
+const MAX_FUNC_LENGTH = 150;
+
enum PropTypesType {
CUSTOM = 'custom',
ANY = 'any',
@@ -146,7 +152,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe
}
default:
short = getCaptionForInspectionType(type);
- compact = value;
+ compact = splitIntoLines(value).length === 1 ? value : null;
full = value;
break;
}
@@ -379,18 +385,18 @@ export function createType(extractedProp: ExtractedProp): PropType {
return createSummaryValue(short, short !== full ? full : undefined);
}
case PropTypesType.FUNC: {
- const { short, compact, full } = generateType(type, extractedProp);
+ const { short, full } = generateType(type, extractedProp);
let summary = short;
- const detail = full;
+ let detail;
- if (!isTooLongForTypeSummary(full)) {
+ if (full.length < MAX_FUNC_LENGTH) {
summary = full;
- } else if (!isNil(compact)) {
- summary = compact;
+ } else {
+ detail = toMultilineSignature(full);
}
- return createSummaryValue(summary, summary !== detail ? detail : undefined);
+ return createSummaryValue(summary, detail);
}
default:
return null;
diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
index e52d33f823b7..63624c418958 100644
--- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
+++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
@@ -63,3 +63,7 @@ export function generateShortFuncSignature(
return funcParts.join(' ');
}
+
+export function toMultilineSignature(signature: string): string {
+ return signature.replace(/,/g, ',\r\n');
+}
diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
index cb3a413468ff..71417d46effe 100644
--- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
+++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
@@ -161,7 +161,7 @@ describe('enhancePropTypesProp', () => {
type: {
name: 'custom',
raw:
- 'Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
',
+ 'Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
',
},
});
@@ -170,7 +170,7 @@ describe('enhancePropTypesProp', () => {
expect(type.summary).toBe('element');
const expectedDetail =
- 'Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
';
+ 'Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
';
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
@@ -303,7 +303,15 @@ describe('enhancePropTypesProp', () => {
name: 'string',
required: false,
},
- anotherAnother: {
+ another2: {
+ name: 'string',
+ required: false,
+ },
+ another3: {
+ name: 'string',
+ required: false,
+ },
+ another4: {
name: 'string',
required: false,
},
@@ -319,7 +327,9 @@ describe('enhancePropTypesProp', () => {
foo: string,
bar: string,
another: string,
- anotherAnother: string
+ another2: string,
+ another3: string,
+ another4: string
}`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
@@ -382,7 +392,8 @@ describe('enhancePropTypesProp', () => {
computed: true,
},
{
- value: '{\n foo: PropTypes.string,\n bar: PropTypes.string,\n}',
+ value:
+ '{\n foo: PropTypes.string,\n bar: PropTypes.string,\n hey: PropTypes.string,\n ho: PropTypes.string,\n}',
computed: true,
},
],
@@ -398,7 +409,9 @@ describe('enhancePropTypesProp', () => {
value: string
} | {
foo: string,
- bar: string
+ bar: string,
+ hey: string,
+ ho: string
}`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
@@ -799,7 +812,7 @@ describe('enhancePropTypesProp', () => {
value: {
name: 'custom',
raw:
- '{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n another: PropTypes.string.isRequired,\n anotherAnother: PropTypes.string.isRequired,\n}',
+ '{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n another: PropTypes.string.isRequired,\n another2: PropTypes.string.isRequired,\n another3: PropTypes.string.isRequired,\n another4: PropTypes.string.isRequired,\n}',
},
},
});
@@ -812,7 +825,9 @@ describe('enhancePropTypesProp', () => {
text: string,
value: string,
another: string,
- anotherAnother: string
+ another2: string,
+ another3: string,
+ another4: string
}]`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
@@ -875,7 +890,15 @@ describe('enhancePropTypesProp', () => {
name: 'string',
required: false,
},
- anotherAnother: {
+ another2: {
+ name: 'string',
+ required: false,
+ },
+ another3: {
+ name: 'string',
+ required: false,
+ },
+ another4: {
name: 'string',
required: false,
},
@@ -892,7 +915,9 @@ describe('enhancePropTypesProp', () => {
foo: string,
bar: string,
another: string,
- anotherAnother: string
+ another2: string,
+ another3: string,
+ another4: string
}]`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
diff --git a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
index 0db4ddeea1c2..0b6a4e7156df 100644
--- a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
+++ b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
@@ -98,7 +98,7 @@ describe('type', () => {
name: 'signature',
type: 'object',
raw:
- '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }',
+ '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }',
signature: {
properties: [
{
@@ -136,6 +136,34 @@ describe('type', () => {
required: true,
},
},
+ {
+ key: 'prop5',
+ value: {
+ name: 'string',
+ required: true,
+ },
+ },
+ {
+ key: 'prop6',
+ value: {
+ name: 'string',
+ required: true,
+ },
+ },
+ {
+ key: 'prop7',
+ value: {
+ name: 'string',
+ required: true,
+ },
+ },
+ {
+ key: 'prop8',
+ value: {
+ name: 'string',
+ required: true,
+ },
+ },
],
constructor: {
name: 'signature',
@@ -163,7 +191,7 @@ describe('type', () => {
expect(type.summary).toBe('object');
expect(type.detail).toBe(
- '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }'
+ '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }'
);
});
diff --git a/addons/docs/src/lib/utils.ts b/addons/docs/src/lib/utils.ts
index db87763a53c6..4a0af2fb7a5b 100644
--- a/addons/docs/src/lib/utils.ts
+++ b/addons/docs/src/lib/utils.ts
@@ -1,6 +1,6 @@
import { PropSummaryValue } from '@storybook/components';
-export const MAX_TYPE_SUMMARY_LENGTH = 70;
+export const MAX_TYPE_SUMMARY_LENGTH = 90;
export const MAX_DEFALUT_VALUE_SUMMARY_LENGTH = 50;
export function isTooLongForTypeSummary(value: string): boolean {
diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
index dd8255f121e9..a314f31bd6a1 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
+++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
@@ -129,6 +129,17 @@ PropTypesProps.propTypes = {
* @returns {ComplexObject} - Returns a complex object.
*/
funcWithJsDoc: PropTypes.func,
+ /**
+ * @param {string} foo - A foo value.
+ * @param {number} bar - A bar value.
+ * @param {number} bar1 - A bar value.
+ * @param {number} bar2 - A bar value.
+ * @param {number} bar3 - A bar value.
+ * @param {number} bar4 - A bar value.
+ * @param {number} bar5 - A bar value.
+ * @returns {ComplexObject} - Returns a complex object.
+ */
+ semiLongFuncWithJsDoc: PropTypes.func,
/**
* @param {string} foo - A foo value.
* @param {number} bar - A bar value.
@@ -138,6 +149,10 @@ PropTypesProps.propTypes = {
* @param {number} bar4 - A bar value.
* @param {number} bar5 - A bar value.
* @param {number} bar6 - A bar value.
+ * @param {number} bar7 - A bar value.
+ * @param {number} bar8 - A bar value.
+ * @param {number} bar9 - A bar value.
+ * @param {number} bar10 - A bar value.
* @returns {ComplexObject} - Returns a complex object.
*/
veryLongFuncWithJsDoc: PropTypes.func,
@@ -314,6 +329,16 @@ PropTypesProps.propTypes = {
shapeShort: PropTypes.shape({
foo: string,
}),
+ shapeLong: PropTypes.shape({
+ foo: string,
+ prop1: string,
+ prop2: string,
+ prop3: string,
+ prop4: string,
+ prop5: string,
+ prop6: string,
+ prop7: string,
+ }),
/**
* propType for shape with nested arrayOf
*