From 38fbb4aebe6bf43d3557a44f16bf52517c256bed Mon Sep 17 00:00:00 2001
From: Radek Podrazky <rpodrazky@securityscorecard.io>
Date: Mon, 10 Aug 2020 15:15:49 +0200
Subject: [PATCH 1/3] fix(ArgValue): fix wrong union type splitting

---
 .../src/blocks/ArgsTable/ArgRow.stories.tsx   | 18 +++++++++++++++
 .../src/blocks/ArgsTable/ArgValue.tsx         | 23 +++++++++++++++----
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
index 6277a3f00646..4dacd38b00bf 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
@@ -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,
diff --git a/lib/components/src/blocks/ArgsTable/ArgValue.tsx b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
index 9a08b8e8d2e8..14e15015851f 100644
--- a/lib/components/src/blocks/ArgsTable/ArgValue.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
@@ -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;

From b0e3a98bea95c742de7c108aecf4811df0d83628 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 14 Aug 2020 17:29:37 +0800
Subject: [PATCH 2/3] Update ArgRow.stories.tsx

---
 lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
index 4dacd38b00bf..5928adca91c7 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
@@ -298,7 +298,7 @@ LongEnum.args = {
   },
 };
 
-export const complex_union =
+export const complexUnion =
   '((a: string | SVGSVGElement) => void) | RefObject<SVGSVGElement | number> | [a|b] | {a|b}';
 
 export const ComplexUnion = Template.bind({});
@@ -310,7 +310,7 @@ ComplexUnion.args = {
     type: { required: true },
     table: {
       type: {
-        summary: complex_union,
+        summary: complexUnion,
       },
     },
   },

From f61dc8dd4ab9e1ff6bcb840a7cde0fa205eb3207 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Thu, 20 Aug 2020 15:00:17 +0800
Subject: [PATCH 3/3] Remove duplicates (thanks deepscan)

---
 lib/components/src/blocks/ArgsTable/ArgValue.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/components/src/blocks/ArgsTable/ArgValue.tsx b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
index 87ce92dc562e..14e15015851f 100644
--- a/lib/components/src/blocks/ArgsTable/ArgValue.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
@@ -47,8 +47,6 @@ const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = fa
   paddingTop: '2px',
   paddingBottom: '2px',
   lineHeight: '13px',
-  whiteSpace: 'normal',
-  maxWidth: '100%',
   ...(simple && {
     background: 'transparent',
     border: '0 none',