feat(ArgValue): pretiffy output of values in PropsTable

Ref #11681

lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx

@@ -262,6 +262,42 @@ Func.args = {
   },
 };
 
+const enumeration =
+  '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle"';
+
+export const Enum = Template.bind({});
+Enum.args = {
+  ...baseArgs,
+  row: {
+    key: 'enum',
+    name: 'Some enum',
+    type: { required: true },
+    table: {
+      type: {
+        summary: enumeration,
+      },
+    },
+  },
+};
+
+const long_enumeration =
+  '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle" | "chevron-up" | "chevron-down" | "chevron-left" | "chevron-right" | "envelope" | "exchange" | "file" | "file-check" | "file-import" | "file-pdf" | "file-times" | "pencil" | "question" | "question-circle" | "sitemap" | "user" | "times" | "plus" | "exclamation-triangle" | "trash-alt" | "long-arrow-up" | "long-arrow-down" | "long-arrow-left" | "long-arrow-right" | "external-link-alt" | "sticky-note" | "chart-line" | "spinner-third"';
+
+export const LongEnum = Template.bind({});
+LongEnum.args = {
+  ...baseArgs,
+  row: {
+    key: 'longEnum',
+    name: 'Long enum',
+    type: { required: true },
+    table: {
+      type: {
+        summary: long_enumeration,
+      },
+    },
+  },
+};
+
 export const Markdown = Template.bind({});
 Markdown.args = {
   ...baseArgs,

lib/components/src/blocks/ArgsTable/ArgValue.tsx

@@ -19,10 +19,35 @@ interface ArgSummaryProps {
   value: PropSummaryValue;
 }
 
-const Text = styled.span(({ theme }) => ({
+const ITEMS_BEFORE_EXPANSION = 8;
+
+const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({
+  display: 'flex',
+  flexDirection: isExpanded ? 'column' : 'row',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+  marginBottom: '-4px',
+}));
+
+const Text = styled.span<{}>(codeCommon, ({ theme }) => ({
+  flex: 0,
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s1,
   wordBreak: 'break-word',
+  margin: 0,
+  marginRight: '4px',
+  marginBottom: '4px',
+  paddingTop: '2px',
+  paddingBottom: '2px',
+  lineHeight: '13px',
+}));
+
+const ExpandButton = styled.button<{}>(({ theme }) => ({
+  fontFamily: theme.typography.fonts.mono,
+  color: theme.color.secondary,
+  marginBottom: '4px',
+  background: 'none',
+  border: 'none',
 }));
 
 const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
@@ -72,18 +97,52 @@ const calculateDetailWidth = memoize(1000)((detail: string): string => {
   return `${Math.max(...lines.map((x) => x.length))}ch`;
 });
 
+const uniq = (arr: string[]): string[] =>
+  arr.filter((value, index, self) => self.indexOf(value) === index);
+
+const getSummaryItems = (summary: string) => {
+  if (!summary) return [summary];
+  const splittedItems = summary.split('|');
+  const summaryItems = splittedItems.map((value) => value.trim());
+
+  return uniq(summaryItems);
+};
+
+const renderSummaryItems = (summaryItems: string[], isExpanded = true) => {
+  let items = summaryItems;
+  if (!isExpanded) {
+    items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
+  }
+
+  return items.map((item) => <ArgText key={item} text={item === '' ? '""' : item} />);
+};
+
 const ArgSummary: FC<ArgSummaryProps> = ({ value }) => {
   const { summary, detail } = value;
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (summary === undefined || summary === null) return null;
   // summary is used for the default value
   // below check fixes not displaying default values for boolean typescript vars
-  const summaryAsString =
-    summary !== undefined && summary !== null && typeof summary.toString === 'function'
-      ? summary.toString()
-      : summary;
+  const summaryAsString = typeof summary.toString === 'function' ? summary.toString() : summary;
+
   if (detail == null) {
-    return <ArgText text={summaryAsString} />;
+    const summaryItems = getSummaryItems(summaryAsString);
+    const itemsCount = summaryItems.length;
+    const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;
+
+    return hasManyItems ? (
+      <Summary isExpanded={isExpanded}>
+        {renderSummaryItems(summaryItems, isExpanded)}
+        <ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`}
+        </ExpandButton>
+      </Summary>
+    ) : (
+      <Summary>{renderSummaryItems(summaryItems)}</Summary>
+    );
   }
 
   return (