Merge pull request #20803 from storybookjs/jeppe/fix-blocks

Doc Blocks: Fix styling and parameter bugs

code/e2e-tests/addon-docs.spec.ts

@@ -60,10 +60,11 @@ test.describe('addon-docs', () => {
     // The `<Primary>` block should render the "Basic" story, and the `<Stories/>` block should
     // render both the "Basic" and "Another" story
     const root = sbPage.previewRoot();
-    const stories = root.locator('.sbdocs-h3');
+    const stories = root.locator('.sb-story button');
 
-    await expect(await stories.count()).toBe(2);
+    await expect(await stories.count()).toBe(3);
     await expect(stories.first()).toHaveText('Basic');
+    await expect(stories.nth(1)).toHaveText('Basic');
     await expect(stories.last()).toHaveText('Another');
   });
 });

code/ui/blocks/src/blocks/Anchor.stories.tsx

@@ -3,6 +3,9 @@ import { Anchor } from './Anchor';
 
 const meta = {
   component: Anchor,
+  parameters: {
+    docsStyles: true,
+  },
 } as Meta<typeof Anchor>;
 
 export default meta;

code/ui/blocks/src/blocks/ArgTypes.stories.tsx

@@ -8,6 +8,7 @@ const meta: Meta<typeof ArgTypes> = {
   component: ArgTypes,
   parameters: {
     relativeCsfPaths: ['../examples/ArgTypesParameters.stories'],
+    docsStyles: true,
   },
 };
 export default meta;

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

@@ -25,6 +25,7 @@ const meta: Meta<typeof Canvas> = {
           />`,
       },
     },
+    docsStyles: true,
   },
   decorators: SourceStoriesMeta.decorators,
 };

code/ui/blocks/src/blocks/Controls.stories.tsx

@@ -7,6 +7,7 @@ const meta: Meta<typeof Controls> = {
   component: Controls,
   parameters: {
     relativeCsfPaths: ['../examples/ControlsParameters.stories'],
+    docsStyles: true,
   },
 };
 export default meta;

code/ui/blocks/src/blocks/Description.stories.tsx

@@ -16,6 +16,7 @@ const meta: Meta<typeof Description> = {
     // workaround for https://github.com/storybookjs/storybook/issues/20505
     docs: { source: { type: 'code' } },
     attached: false,
+    docsStyles: true,
   },
 };
 export default meta;

code/ui/blocks/src/blocks/DocsStory.tsx

@@ -10,12 +10,15 @@ import { useOf } from './useOf';
 export const DocsStory: FC<DocsStoryProps> = ({
   of,
   expanded = true,
-  withToolbar = false,
+  withToolbar: withToolbarProp = false,
   __forceInitialArgs = false,
   __primary = false,
 }) => {
   const { story } = useOf(of || 'story', ['story']);
 
+  // use withToolbar from parameters or default to true in autodocs
+  const withToolbar = story.parameters.docs?.canvas?.withToolbar ?? withToolbarProp;
+
   return (
     <Anchor storyId={story.id}>
       {expanded && (

code/ui/blocks/src/blocks/Markdown.stories.tsx

@@ -5,6 +5,7 @@ import mdContent from '../examples/Markdown-content.md?raw';
 
 export default {
   component: MarkdownComponent,
+  parameters: { docsStyles: true },
 };
 
 export const Markdown = {

code/ui/blocks/src/blocks/Primary.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Primary } from './Primary';
+
+const meta = {
+  component: Primary,
+  parameters: {
+    docsStyles: true,
+  },
+} satisfies Meta<typeof Primary>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/Button.stories'],
+  },
+};
+export const WithoutToolbar: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/StoriesParameters.stories'],
+  },
+};

code/ui/blocks/src/blocks/Primary.tsx

@@ -23,6 +23,6 @@ export const Primary: FC<PrimaryProps> = ({ name }) => {
   const storyId = name && docsContext.storyIdByName(name);
   const story = docsContext.storyById(storyId);
   return story ? (
-    <DocsStory of={story.moduleExport} expanded={false} withToolbar __primary />
+    <DocsStory of={story.moduleExport} expanded={false} __primary withToolbar />
   ) : null;
 };

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

@@ -18,6 +18,7 @@ const meta: Meta<typeof Source> = {
         code: `const emitted = 'source';`,
       },
     },
+    docsStyles: true,
   },
   decorators: [
     (Story, { parameters: { snippets = {} } }) => (
@@ -83,6 +84,10 @@ export const CodeUnattached: Story = {
   parameters: { attached: false },
 };
 
+export const EmptyUnattached: Story = {
+  parameters: { attached: false },
+};
+
 export const CodeParameters: Story = {
   args: { of: ParametersStories.Code },
 };

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

@@ -118,8 +118,7 @@ export const useSourceProps = (
       // Always fall back to the primary story for source parameters, even if code is set.
       stories = [docsContext.storyById()];
     } catch (err) {
-      // You are allowed to use <Story code="..." /> unattached.
-      if (!props.code) throw err;
+      // You are allowed to use <Source code="..." /> and <Canvas /> unattached.
     }
   }
 

code/ui/blocks/src/blocks/Stories.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Stories } from './Stories';
+
+const meta = {
+  component: Stories,
+  parameters: { docsStyles: true },
+} satisfies Meta<typeof Stories>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/Button.stories'],
+  },
+};
+export const WithoutPrimary: Story = {
+  args: { includePrimary: false },
+  parameters: {
+    relativeCsfPaths: ['../examples/Button.stories'],
+  },
+};
+export const DifferentToolbars: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/StoriesParameters.stories'],
+  },
+};

code/ui/blocks/src/blocks/Story.stories.tsx

@@ -9,6 +9,7 @@ const meta: Meta<typeof StoryBlock> = {
   component: StoryBlock,
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories', '../examples/StoryParameters.stories'],
+    docsStyles: true,
   },
 };
 export default meta;

code/ui/blocks/src/blocks/Unstyled.mdx

@@ -8,11 +8,19 @@ However sometimes you might want some of your content to not have these styles a
 ```md
 import { Unstyled } from '@storybook/blocks';
 
+# This heading will be styled
+
+<h2>So will this subheading</h2>
+
 > This block quote will be styled
 
 ... and so will this paragraph.
 
 <Unstyled>
+  # This heading will not be styled
+
+  <h2>Neither will this subheading</h2>
+
   > This block quote will not be styled
 
   ... neither will this paragraph, nor the following component:
@@ -22,11 +30,19 @@ import { Unstyled } from '@storybook/blocks';
 
 Yields: 
 
+# This heading will be styled
+
+<h2>So will this subheading</h2>
+
 > This block quote will be styled
 
 ... and so will this paragraph.
 
 <Unstyled>
+  # This heading will not be styled
+
+  <h2>Neither will this subheading</h2>
+
   > This block quote will not be styled
 
   ... neither will this paragraph, nor the following component:

code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx

@@ -14,6 +14,7 @@ const meta: Meta<typeof Canvas> = {
   parameters: {
     theme: 'light',
     relativeCsfPaths: ['../examples/Button.stories', '../examples/CanvasParameters.stories'],
+    docsStyles: true,
   },
   render: (args) => {
     return (
@@ -50,6 +51,23 @@ export const BasicStoryChildUnattached: Story = {
   parameters: { attached: false },
 };
 
+export const NoStoryChildrenUnattached: Story = {
+  parameters: { attached: false },
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <p>This is a plain paragraph, no stories</p>
+      </Canvas>
+    );
+  },
+};
+export const NoStoryChildrenUnattachedWithMDXSource: Story = {
+  ...NoStoryChildrenUnattached,
+  args: {
+    mdxSource: `const customStaticSource = true;`,
+  },
+};
+
 export const WithSourceOpen: Story = {
   args: {
     withSource: SourceState.OPEN,

code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx

@@ -7,6 +7,7 @@ const meta: Meta<typeof Description> = {
   component: Description,
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],
+    docsStyles: true,
   },
   args: {
     of: Button,

code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx

@@ -7,6 +7,7 @@ const meta: Meta<typeof Source> = {
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],
     attached: false,
+    docsStyles: true,
   },
 };
 

code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx

@@ -8,6 +8,7 @@ const meta: Meta<typeof StoryBlock> = {
   component: StoryBlock,
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],
+    docsStyles: true,
   },
 };
 export default meta;

code/ui/blocks/src/blocks/mdx.tsx

@@ -1,7 +1,7 @@
 import type { FC, SyntheticEvent } from 'react';
 import React, { useContext } from 'react';
 import { NAVIGATE_URL } from '@storybook/core-events';
-import { Code, components } from '@storybook/components';
+import { Code, components, nameSpaceClassNames } from '@storybook/components';
 import { global } from '@storybook/global';
 import { styled } from '@storybook/theming';
 import { Source } from '../components';
@@ -120,13 +120,12 @@ export const AnchorMdx: FC<AnchorMdxProps> = (props) => {
   return <A {...props} />;
 };
 
-const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 
 const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
   (acc, headerType) => ({
     ...acc,
-    // @ts-expect-error (Converted from ts-ignore)
-    [headerType]: styled(components[headerType])({
+    [headerType]: styled(headerType)({
       '& svg': {
         visibility: 'hidden',
       },
@@ -213,12 +212,10 @@ export const HeaderMdx: FC<HeaderMdxProps> = (props) => {
       </HeaderWithOcticonAnchor>
     );
   }
-
-  // @ts-expect-error (Converted from ts-ignore)
-  const Header = components[as];
-
   // Make sure it still work if "remark-slug" plugin is not present.
-  return <Header {...props} />;
+  const Component = as as React.ElementType;
+  const { as: omittedAs, ...withoutAs } = props;
+  return <Component {...nameSpaceClassNames(withoutAs, as)} />;
 };
 
 export const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce(

code/ui/blocks/src/components/DocsPage.tsx

@@ -70,6 +70,7 @@ export const Subtitle = styled.h2(withReset, ({ theme }) => ({
   color: transparentize(0.25, theme.color.defaultText),
 }));
 
+// @ts-expect-error don't know why it doesn't accept our returned styles. if we add `...{}` anywhere to the returned object it stops erroring
 export const DocsContent = styled.div(({ theme }) => {
   const reset = {
     fontFamily: theme.typography.fonts.base,
@@ -121,8 +122,6 @@ export const DocsContent = styled.div(({ theme }) => {
   return {
     maxWidth: 1000,
     width: '100%',
-
-    ...reset,
     [toGlobalSelector('a')]: {
       ...reset,
       fontSize: 'inherit',

code/ui/blocks/src/examples/StoriesParameters.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EmptyExample } from './EmptyExample';
+
+const meta = {
+  title: 'examples/Stories for the Stories and Primary Block',
+  component: EmptyExample,
+} satisfies Meta<typeof EmptyExample>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithoutToolbar: Story = {
+  parameters: { docs: { canvas: { withToolbar: false } } },
+};
+
+export const WithToolbar: Story = {
+  parameters: { docs: { canvas: { withToolbar: true } } },
+};
+export const ThirdStory: Story = {};