From 4b5f29b3fcc5228bcbe8bc5e8cd8f570632cdd12 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Sat, 15 Aug 2020 02:06:00 +0800
Subject: [PATCH] ArgsTable: Add warning when subcomponents is an array

---
 addons/docs/src/blocks/ArgsTable.tsx                   |  5 +++++
 .../stories/addon-docs/array-subcomponents.stories.js  | 10 ++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 examples/official-storybook/stories/addon-docs/array-subcomponents.stories.js

diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/addons/docs/src/blocks/ArgsTable.tsx
index 27994992423..362a672b3aa 100644
--- a/addons/docs/src/blocks/ArgsTable.tsx
+++ b/addons/docs/src/blocks/ArgsTable.tsx
@@ -193,6 +193,11 @@ export const StoryTable: FC<
     }
 
     if (subcomponents) {
+      if (Array.isArray(subcomponents)) {
+        throw new Error(
+          `Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.`
+        );
+      }
       tabs = addComponentTabs(tabs, subcomponents, context, include, exclude);
     }
     return <TabbedArgsTable tabs={tabs} />;
diff --git a/examples/official-storybook/stories/addon-docs/array-subcomponents.stories.js b/examples/official-storybook/stories/addon-docs/array-subcomponents.stories.js
new file mode 100644
index 00000000000..c42ffd6048c
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/array-subcomponents.stories.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import Button from '../../components/TsButton';
+
+export default {
+  title: 'Addons/Docs/Subcomponents array',
+  component: Button,
+  subcomponents: [Button],
+};
+
+export const Basic = () => <Button>Bad subcomponents</Button>;