Merge pull request #20880 from storybookjs/jeppe/blocks-deprecations

Blocks: Added deprecation warnings

MIGRATION.md

@@ -51,7 +51,7 @@
       - [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo)
       - [Story block](#story-block)
       - [Source block](#source-block)
-    - [Canvas block](#canvas-block)
+      - [Canvas block](#canvas-block)
       - [ArgsTable block](#argstable-block)
     - [Configuring Autodocs](#configuring-autodocs)
     - [MDX2 upgrade](#mdx2-upgrade)
@@ -956,7 +956,7 @@ The source block now references a single story, the component, or a CSF file its
 
 Referencing stories by `id="xyz--abc"` is deprecated and should be replaced with `of={}` as above. Referencing multiple stories via `ids={["xyz--abc"]}` is now deprecated and should be avoided (instead use two source blocks).
 
-#### Canvas block
+##### Canvas block
 
 The Canvas block follows the same changes as [the Story block described above](#story-block).
 

code/ui/blocks/src/blocks/ArgsTable.tsx

@@ -11,6 +11,8 @@ import {
   RESET_STORY_ARGS,
   GLOBALS_UPDATED,
 } from '@storybook/core-events';
+import { deprecate } from '@storybook/client-logger';
+import dedent from 'ts-dedent';
 import type { ArgsTableProps as PureArgsTableProps, SortType } from '../components';
 import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components';
 
@@ -213,6 +215,10 @@ export const ComponentsTable: FC<ComponentsProps> = (props) => {
 };
 
 export const ArgsTable: FC<ArgsTableProps> = (props) => {
+  deprecate(dedent`The ArgsTable doc block is deprecated. Instead use the ArgTypes doc block for static tables or the Controls doc block for tables with controls.
+    
+  Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
+  `);
   const context = useContext(DocsContext);
   const {
     parameters: { controls },

code/ui/blocks/src/blocks/Canvas.tsx

@@ -188,25 +188,25 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   if (props.withSource) {
     deprecate(dedent`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead. 
     
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
     `);
   }
   if (props.mdxSource) {
     deprecate(dedent`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead. 
     
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
     `);
   }
   if (props.isColumn !== undefined || props.columns !== undefined) {
     deprecate(dedent`\`isColumn\` and \`columns\` props are deprecated as the Canvas block now only supports showing a single story. 
     
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
     `);
   }
   if (children) {
     deprecate(dedent`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story. 
     
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
   `);
     return isLoading ? (
       <PreviewSkeleton />

code/ui/blocks/src/blocks/Source.tsx

@@ -3,6 +3,8 @@ import React, { useContext } from 'react';
 import type { StoryId, PreparedStory, ModuleExport } from '@storybook/types';
 import { SourceType } from '@storybook/docs-tools';
 
+import { deprecate } from '@storybook/client-logger';
+import dedent from 'ts-dedent';
 import type { SourceCodeProps } from '../components/Source';
 import { Source as PureSource, SourceError } from '../components/Source';
 import type { DocsContextProps } from './DocsContext';
@@ -161,6 +163,18 @@ export const useSourceProps = (
  * the source for the current story if nothing is provided.
  */
 export const Source: FC<SourceProps> = (props) => {
+  if (props.id) {
+    deprecate(dedent`The \`id\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story. 
+    
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
+  `);
+  }
+  if (props.ids) {
+    deprecate(dedent`The \`ids\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story. 
+    
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
+  `);
+  }
   const sourceContext = useContext(SourceContext);
   const docsContext = useContext(DocsContext);
   const { state, ...sourceProps } = useSourceProps(props, docsContext, sourceContext);