diff --git a/MIGRATION.md b/MIGRATION.md index 259b2e6c89fc..c7e2dacfb624 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -38,6 +38,7 @@ - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api) - [storyIndexers](#storyindexers) - [Deprecated docs parameters](#deprecated-docs-parameters) + - [Description Doc block properties](#description-doc-block-properties) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -671,6 +672,11 @@ parameters.docs.source.transformSource // becomes parameters.docs.source.transfo More info [here](#autodocs-changes) and [here](#source-block). +#### Description Doc block properties + +`children`, `markdown` and `type` are now removed in favor of the `of` property. [More info](#doc-blocks). + + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated diff --git a/code/ui/blocks/src/blocks/Description.tsx b/code/ui/blocks/src/blocks/Description.tsx index a6cda58ca930..99b9cf7ce75b 100644 --- a/code/ui/blocks/src/blocks/Description.tsx +++ b/code/ui/blocks/src/blocks/Description.tsx @@ -1,11 +1,5 @@ import type { FC } from 'react'; -import React, { useContext } from 'react'; -import { str } from '@storybook/docs-tools'; -import { deprecate } from '@storybook/client-logger'; - -import type { DocsContextProps } from './DocsContext'; -import { DocsContext } from './DocsContext'; -import type { Component } from './types'; +import React from 'react'; import type { Of } from './useOf'; import { useOf } from './useOf'; import { Markdown } from './Markdown'; @@ -17,39 +11,14 @@ export enum DescriptionType { AUTO = 'auto', } -type Notes = string | any; -type Info = string | any; - -const DEPRECATION_MIGRATION_LINK = - 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo'; - interface DescriptionProps { /** * Specify where to get the description from. Can be a component, a CSF file or a story. * If not specified, the description will be extracted from the meta of the attached CSF file. */ of?: Of; - /** - * @deprecated Manually specifying description type is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo - */ - type?: DescriptionType; - /** - * @deprecated The 'markdown' prop on the Description block is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo - */ - markdown?: string; - /** - * @deprecated The 'children' prop on the Description block is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo - */ - children?: string; } -const getNotes = (notes?: Notes) => - notes && (typeof notes === 'string' ? notes : str(notes.markdown) || str(notes.text)); - -const getInfo = (info?: Info) => info && (typeof info === 'string' ? info : str(info.text)); - -const noDescription = (component?: Component): string | null => null; - const getDescriptionFromResolvedOf = (resolvedOf: ReturnType): string | null => { switch (resolvedOf.type) { case 'story': { @@ -88,73 +57,15 @@ const getDescriptionFromResolvedOf = (resolvedOf: ReturnType): str } }; -const getDescriptionFromDeprecatedProps = ( - { type, markdown, children }: DescriptionProps, - { storyById }: DocsContextProps -): string => { - const { component, parameters } = storyById(); - if (children || markdown) { - return children || markdown; - } - const { notes, info, docs } = parameters; - if (Boolean(notes) || Boolean(info)) { - deprecate( - `Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}` - ); - } - - const { extractComponentDescription = noDescription, description } = docs || {}; - - // override component description - const componentDescriptionParameter = description?.component; - if (componentDescriptionParameter) { - return componentDescriptionParameter; - } - - switch (type) { - case DescriptionType.INFO: - return getInfo(info); - case DescriptionType.NOTES: - return getNotes(notes); - case DescriptionType.DOCGEN: - case DescriptionType.AUTO: - default: - return extractComponentDescription(component, { component, ...parameters }); - } -}; - const DescriptionContainer: FC = (props) => { - const { of, type, markdown: markdownProp, children } = props; + const { of } = props; if ('of' in props && of === undefined) { throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?'); } - const context = useContext(DocsContext); const resolvedOf = useOf(of || 'meta'); - let markdown; - if (type || markdownProp || children) { - // pre 7.0 mode with deprecated props - markdown = getDescriptionFromDeprecatedProps(props, context); - } else { - // 7.0 mode with new 'of' prop - // pre 7.0 with only 'of' prop only supported referencing a component, which 7.0 supports as well here - markdown = getDescriptionFromResolvedOf(resolvedOf); - } - if (type) { - deprecate( - `Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}` - ); - } - if (markdownProp) { - deprecate( - `The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}` - ); - } - if (children) { - deprecate( - `The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}` - ); - } + const markdown = getDescriptionFromResolvedOf(resolvedOf); + return markdown ? {markdown} : null; }; diff --git a/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx deleted file mode 100644 index da4c87728947..000000000000 --- a/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; -import { Description, DescriptionType } from '../Description'; -import { Button } from '../../examples/Button'; - -const meta: Meta = { - component: Description, - parameters: { - relativeCsfPaths: ['../examples/Button.stories'], - docsStyles: true, - }, - args: { - of: Button, - }, -}; -export default meta; - -type Story = StoryObj; - -export const InfoType: Story = { - args: { - type: DescriptionType.INFO, - }, -}; -export const NotesType: Story = { - args: { - type: DescriptionType.NOTES, - }, -}; -export const DocgenType: Story = { - args: { - type: DescriptionType.DOCGEN, - }, -}; -export const AutoType: Story = { - args: { - type: DescriptionType.AUTO, - }, -}; -export const Markdown: Story = { - args: { - markdown: `# My Example Markdown - -An \`inline\` codeblock - -\`\`\`tsx -// TypeScript React code block -export const MyStory = () => { -return ; -}; -\`\`\` - -\`\`\` -code block with with no language -const a = fn({ -b: 2, -}); -\`\`\` -`, - }, -}; -export const Children: Story = { - render: (args) => ( - - {`# My Example Markdown - -An \`inline\` codeblock - -\`\`\`tsx -// TypeScript React code block -export const MyStory = () => { -return ; -}; -\`\`\` - -\`\`\` -code block with with no language -const a = fn({ -b: 2, -}); -\`\`\` -`} - - ), -}; diff --git a/docs/api/doc-block-description.md b/docs/api/doc-block-description.md index 1c188a239349..ce8254d7f572 100644 --- a/docs/api/doc-block-description.md +++ b/docs/api/doc-block-description.md @@ -37,30 +37,6 @@ Specifies where to pull the description from. It can either point to a story or Descriptions are pulled from the JSDoc comments or parameters, and they are rendered as markdown. See [Writing descriptions](#writing-descriptions) for more details. -### `children` - -(⛔️ **Deprecated**) - -Type: `string` - -See [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo). - -### `markdown` - -(⛔️ **Deprecated**) - -Type: `string` - -See [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo). - -### `type` - -(⛔️ **Deprecated**) - -Type: `'info' | 'notes' | 'docgen' | 'auto'` - -See [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo). - ## Writing descriptions There are multiple places to write the description of a component/story, depending on what you want to achieve. Descriptions can be written at the story level to describe each story of a component, or they can be written at the meta or component level to describe the component in general.