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

fix(ArgValue): fix wrong union type splitting

Browse Source
This commit is contained in:
Radek Podrazky 2020-08-10 15:15:49 +02:00
parent 8d2d4e4136
commit 38fbb4aebe
2 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
View File

@ -298,6 +298,24 @@ LongEnum.args = {
},
};
export const complex_union =
'((a: string | SVGSVGElement) => void) | RefObject<SVGSVGElement | number> | [a|b] | {a|b}';
export const ComplexUnion = Template.bind({});
ComplexUnion.args = {
...baseArgs,
row: {
key: 'complexUnion',
name: 'Complex',
type: { required: true },
table: {
type: {
summary: complex_union,
},
},
},
};
export const Markdown = Template.bind({});
Markdown.args = {
...baseArgs,

23
lib/components/src/blocks/ArgsTable/ArgValue.tsx
View File

@ -15,6 +15,7 @@ interface ArgValueProps {
interface ArgTextProps {
text: string;
simple?: boolean;
}
interface ArgSummaryProps {
@ -30,19 +31,27 @@ const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({
flexWrap: 'wrap',
alignItems: 'flex-start',
marginBottom: '-4px',
minWidth: 100,
}));
const Text = styled.span<{}>(codeCommon, ({ theme }) => ({
flex: 0,
const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = false }) => ({
flex: '0 0 auto',
fontFamily: theme.typography.fonts.mono,
fontSize: theme.typography.size.s1,
wordBreak: 'break-word',
whiteSpace: 'normal',
maxWidth: '100%',
margin: 0,
marginRight: '4px',
marginBottom: '4px',
paddingTop: '2px',
paddingBottom: '2px',
lineHeight: '13px',
...(simple && {
background: 'transparent',
border: '0 none',
paddingLeft: 0,
}),
}));
const ExpandButton = styled.button<{}>(({ theme }) => ({
@ -90,8 +99,8 @@ const EmptyArg = () => {
return <span>-</span>;
};
const ArgText: FC<ArgTextProps> = ({ text }) => {
return <Text>{text}</Text>;
const ArgText: FC<ArgTextProps> = ({ text, simple }) => {
return <Text simple={simple}>{text}</Text>;
};
const calculateDetailWidth = memoize(1000)((detail: string): string => {
@ -129,6 +138,12 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
const summaryAsString = typeof summary.toString === 'function' ? summary.toString() : summary;
if (detail == null) {
const cannotBeSafelySplitted = /[(){}[\]<>]/.test(summaryAsString);
if (cannotBeSafelySplitted) {
return <ArgText text={summaryAsString} simple={summaryAsString.includes('|')} />;
}
const summaryItems = getSummaryItems(summaryAsString);
const itemsCount = summaryItems.length;
const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;