ArgsTable: Fix story styling & misc warnings

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
+import { styled } from '@storybook/theming';
 import { ArgsTable, ArgsTableError } from './ArgsTable';
 import { NoControlsWarning } from './NoControlsWarning';
 import * as ArgRow from './ArgRow.stories';
@@ -37,11 +38,17 @@ Compact.args = {
   compact: true,
 };
 
+const AddonPanelLayout = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1,
+  background: theme.background.content,
+}));
+
 export const InAddonPanel = Story.bind({});
 InAddonPanel.args = {
   ...Normal.args,
   inAddonPanel: true,
 };
+InAddonPanel.decorators = [(storyFn) => <AddonPanelLayout>{storyFn()}</AddonPanelLayout>];
 
 export const InAddonPanelWithWarning = (args) => (
   <>
@@ -53,6 +60,7 @@ InAddonPanelWithWarning.args = {
   ...InAddonPanel.args,
   updateArgs: null,
 };
+InAddonPanelWithWarning.decorators = InAddonPanel.decorators;
 
 export const Sections = Story.bind({});
 Sections.args = {

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

@@ -189,16 +189,16 @@ const groupRows = (rows: ArgType) => {
     if (category) {
       const section = sections.sections[category] || { ungrouped: [], subsections: {} };
       if (!subcategory) {
-        section.ungrouped.push(row);
+        section.ungrouped.push({ key, ...row });
       } else {
         const subsection = section.subsections[subcategory] || [];
-        subsection.push(row);
+        subsection.push({ key, ...row });
         section.subsections[subcategory] = subsection;
       }
       sections.sections[category] = section;
     } else if (subcategory) {
       const subsection = sections.ungroupedSubsections[subcategory] || [];
-      subsection.push(row);
+      subsection.push({ key, ...row });
       sections.ungroupedSubsections[subcategory] = subsection;
     } else {
       sections.ungrouped.push({ key, ...row });
@@ -227,7 +227,6 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   const { rows, args, updateArgs, compact, inAddonPanel } = props as ArgsTableRowProps;
 
   const groups = groupRows(rows);
-  console.log(groups);
 
   if (
     groups.ungrouped.length === 0 &&

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

@@ -31,7 +31,9 @@ Collapsed.args = { ...Section.args, initialExpanded: false };
 export const Nested = () => (
   <SectionRow {...Section.args}>
     <SectionRow {...Subsection.args}>
-      <div>Some content</div>
+      <tr>
+        <td>Some content</td>
+      </tr>
     </SectionRow>
   </SectionRow>
 );