diff --git a/code/ui/blocks/src/blocks/Controls.stories.tsx b/code/ui/blocks/src/blocks/Controls.stories.tsx index 9d32d9fe12f1..598485dd93a6 100644 --- a/code/ui/blocks/src/blocks/Controls.stories.tsx +++ b/code/ui/blocks/src/blocks/Controls.stories.tsx @@ -6,17 +6,19 @@ import * as ExampleStories from '../examples/ControlsParameters.stories'; import * as SubcomponentsExampleStories from '../examples/ControlsWithSubcomponentsParameters.stories'; import { within } from '@storybook/test'; import type { PlayFunctionContext } from '@storybook/csf'; +import * as EmptyArgTypesStories from '../examples/EmptyArgTypes.stories'; -const meta: Meta = { +const meta = { component: Controls, parameters: { relativeCsfPaths: [ '../examples/ControlsParameters.stories', + '../examples/EmptyArgTypes.stories', '../examples/ControlsWithSubcomponentsParameters.stories', ], docsStyles: true, }, -}; +} satisfies Meta; export default meta; type Story = StoryObj; @@ -142,3 +144,12 @@ export const SubcomponentsSortProp: Story = { sort: 'alpha', }, }; + +/** + * When a story is defined without any argTypes or args, the Docs UI should not display the control component. + */ +export const EmptyArgTypes: Story = { + args: { + of: EmptyArgTypesStories.Default, + }, +}; diff --git a/code/ui/blocks/src/blocks/Controls.tsx b/code/ui/blocks/src/blocks/Controls.tsx index 2adef888e66a..f47194033f1d 100644 --- a/code/ui/blocks/src/blocks/Controls.tsx +++ b/code/ui/blocks/src/blocks/Controls.tsx @@ -59,6 +59,9 @@ export const Controls: FC = (props) => { const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents).length > 0; if (!hasSubcomponents) { + if (!(Object.keys(filteredArgTypes).length > 0 || Object.keys(args).length > 0)) { + return null; + } return (
I am a story without args or argTypes
, + parameters: { chromatic: { disableSnapshot: true } }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +/** + * There are no argTypes or args, so this story won't show any controls in the docs page. + * In the control addon it will show a UI how to set up controls. + */ +export const Default: Story = {};