Addon-docs: Remove leading pipe if using raw value for Flow union

addons/docs/src/lib/docgen/flow/createPropDef.test.ts

@@ -317,6 +317,32 @@ describe('type', () => {
     expect(type.summary).toBe('"minimum" | "maximum" | UserSize');
   });
 
+  it('removes a leading | if raw union value is used', () => {
+    const docgenInfo = createDocgenInfo({
+      flowType: {
+        name: 'union',
+        raw: '| "minimum" | "maximum" | UserSize',
+      },
+    });
+
+    const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
+
+    expect(type.summary).toBe('"minimum" | "maximum" | UserSize');
+  });
+
+  it('even removes extra spaces after a leading | if raw union value is used', () => {
+    const docgenInfo = createDocgenInfo({
+      flowType: {
+        name: 'union',
+        raw: '|     "minimum" | "maximum" | UserSize',
+      },
+    });
+
+    const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
+
+    expect(type.summary).toBe('"minimum" | "maximum" | UserSize');
+  });
+
   it('should support intersection', () => {
     const docgenInfo = createDocgenInfo({
       flowType: {

addons/docs/src/lib/docgen/flow/createType.ts

@@ -40,7 +40,8 @@ function generateUnion({ name, raw, elements }: DocgenFlowUnionType): PropType {
   }
 
   if (raw != null) {
-    return createSummaryValue(raw);
+    // Flow Unions can be defined with or without a leading `|` character, so try to remove it.
+    return createSummaryValue(raw.replace(/^\|\s*/, ''));
   }
 
   return createSummaryValue(name);