Addon-controls: Conditional arg disabling

MIGRATION.md

@@ -1,5 +1,8 @@
 <h1>Migration</h1>
 
+- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
+  - [6.3 Deprecations](#63-deprecations)
+    - [Improved args disabling](#improved-args-disabling)
 - [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
   - [MDX pattern tweaked](#mdx-pattern-tweaked)
   - [6.2 Angular overhaul](#62-angular-overhaul)
@@ -151,6 +154,22 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 6.2.x to 6.3.0
+
+### 6.3 Deprecations
+
+#### Improved args disabling
+
+We've simplified disabling arg display in 6.3 by hoisting the `table.disable` property. It is now the `disable` property instead.
+
+```js
+// before
+const argTypes = { foo: { table: { disable: true } } };
+
+// after
+const argTypes = { foo: { disable: true } };
+```
+
 ## From version 6.1.x to 6.2.0
 
 ### MDX pattern tweaked

addons/controls/README.md

@@ -152,7 +152,7 @@ export default {
 
 export const CustomControls = (args) => <Button {...args} />;
 CustomControls.argTypes = {
-  borderWidth: { table: { disable: true } },
+  borderWidth: { disable: true },
   label: { control: { disable: true } },
 };
 ```

addons/docs/docs/multiframework.md

@@ -53,6 +53,7 @@ export interface ArgType {
   name?: string;
   description?: string;
   defaultValue?: any;
+  disable?: boolean;
   [key: string]: any;
 }
 
@@ -106,7 +107,7 @@ The input is the story function and the story context (id, parameters, args, etc
 
 ## Dynamic source rendering
 
-With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function. 
+With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
 
 This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.
 
@@ -151,7 +152,7 @@ import { jsxDecorator } from './jsxDecorator';
 export const decorators = [jsxDecorator];
 ```
 
-This configures the `jsxDecorator` to be run on every story. 
+This configures the `jsxDecorator` to be run on every story.
 
 <div class="aside">
  To learn more and see how it's implemented in context, check out <a href="https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/react/jsxDecorator.tsx">the code</a> .

docs/snippets/common/component-story-disable-controls.js.mdx

@@ -1,18 +1,16 @@
 ```js
 // YourComponent.stories.js | YourComponent.stories.ts
 
-import { YourComponent } from './your-component'
+import { YourComponent } from './your-component';
 
 export default {
   component: YourComponent,
-  title:'My Story',
-  argTypes:{
+  title: 'My Story',
+  argTypes: {
     // foo is the property we want to remove from the UI
-    foo:{
-      table:{
-        disable:true
-      }
-    }
-  }
+    foo: {
+      disable: true,
+    },
+  },
 };
-```
+```

docs/snippets/common/component-story-disable-controls.mdx.mdx

@@ -8,10 +8,8 @@ import { YourComponent } from './your-component'
 <Meta 
   title='My Story' 
   argTypes={{
-    foo:{
-      table:{
-        disable:true
-      }
+    foo: {
+      disable:true
     }
   }} />
 
@@ -22,4 +20,4 @@ export const Template = (args) => <YourComponent {...args} />
     {Template.bind({})}
   </Story>
 </Canvas>
-```
+```

examples/angular-cli/.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     {
       files: ['./src/stories/addon-jest.stories.ts'],
       rules: {
+        '@typescript-eslint/ban-ts-comment': 'warn',
         'import/no-useless-path-segments': ignore,
       },
       settings: {

lib/addons/src/types.ts

@@ -40,6 +40,7 @@ export interface ArgType {
   name?: string;
   description?: string;
   defaultValue?: any;
+  disable?: boolean;
   [key: string]: any;
 }
 

lib/api/src/index.tsx

@@ -116,6 +116,7 @@ export interface ArgType {
   name?: string;
   description?: string;
   defaultValue?: any;
+  disable?: boolean;
   [key: string]: any;
 }
 

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

@@ -2,6 +2,8 @@ import React, { FC } from 'react';
 import pickBy from 'lodash/pickBy';
 import { styled, ignoreSsrWarning } from '@storybook/theming';
 import { opacify, transparentize, darken, lighten } from 'polished';
+import dedent from 'ts-dedent';
+import deprecate from 'util-deprecate';
 import { Icons } from '../../icon/icon';
 import { ArgRow } from './ArgRow';
 import { SectionRow } from './SectionRow';
@@ -10,6 +12,15 @@ import { EmptyBlock } from '../EmptyBlock';
 import { Link } from '../../typography/link/link';
 import { ResetWrapper } from '../../typography/DocumentFormatting';
 
+const warnTableDisableDeprecated = deprecate(
+  () => {},
+  dedent`
+    Use 'disable' instead of 'table.disable' to disable ArgsTable rows.
+
+    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#improved-args-disabling
+  `
+);
+
 export const TableWrapper = styled.table<{ compact?: boolean; inAddonPanel?: boolean }>(
   ({ theme, compact, inAddonPanel }) => ({
     '&&': {
@@ -349,8 +360,12 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     sort = 'none',
   } = props as ArgsTableRowProps;
 
+  if (Object.values(rows).some((row) => row?.table?.disable)) {
+    warnTableDisableDeprecated();
+  }
+
   const groups = groupRows(
-    pickBy(rows, (row) => !row?.table?.disable),
+    pickBy(rows, (row) => !(row?.table?.disable || row?.disable)),
     sort
   );
 

lib/components/src/blocks/ArgsTable/types.ts

@@ -32,6 +32,7 @@ export interface ArgType {
   name?: string;
   description?: string;
   defaultValue?: any;
+  disable?: boolean;
   [key: string]: any;
 }
 

lib/ui/src/components/layout/draggers.tsx

@@ -73,4 +73,4 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
 );
 
 export { Draggable, Handle };
-export type { DraggableEvent, DraggableData };
+export type { DraggableEvent, DraggableData };