Merge pull request #14669 from storybookjs/fix-args-table-sort-prop-w…

…hen-using-of

Addon-docs: Fix ArgsTable sorting when using of={Component}

addons/docs/src/blocks/ArgsTable.tsx

@@ -195,10 +195,10 @@ export const StoryTable: FC<
 
 export const ComponentsTable: FC<ComponentsProps> = (props) => {
   const context = useContext(DocsContext);
-  const { components, include, exclude } = props;
+  const { components, include, exclude, sort } = props;
 
   const tabs = addComponentTabs({}, components, context, include, exclude);
-  return <TabbedArgsTable tabs={tabs} />;
+  return <TabbedArgsTable tabs={tabs} sort={sort} />;
 };
 
 export const ArgsTable: FC<ArgsTableProps> = (props) => {
@@ -222,7 +222,8 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     } catch (err) {
       mainProps = { error: err.message };
     }
-    return <PureArgsTable {...mainProps} />;
+
+    return <PureArgsTable {...mainProps} sort={sort} />;
   }
 
   if (components) {

examples/cra-ts-kitchen-sink/src/stories/PropsSort.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 export const PropsSort = () => <div>PropsSort!</div>;
 PropsSort.propTypes = {
-  foo: PropTypes.string,
+  foo: PropTypes.string.isRequired,
   middleWithDefaultValue: PropTypes.string,
   bar: PropTypes.string,
   endWithDefaultValue: PropTypes.string,

examples/cra-ts-kitchen-sink/src/stories/props-sort.stories.mdx

@@ -1,7 +1,12 @@
 import { PropsSort } from './PropsSort';
 import { ArgsTable, Meta } from '@storybook/addon-docs/blocks';
+import { SortType } from "@storybook/components";
 
-<Meta title="PropsSort" />
+<Meta 
+    title="PropsSort"
+/>
 
 <ArgsTable of={PropsSort} />
 <ArgsTable of={PropsSort} exclude={['foo']} />
+<ArgsTable of={PropsSort} sort="alpha" />
+<ArgsTable of={PropsSort} sort="requiredFirst" />