Storybook Docs Code Panel Doesn't Update with Controls Changes for Angular Stories

[ositaka]

Summary

Hi everyone! I'm encountering an issue while using Storybook with an Angular component. The Code panel in the Docs tab doesn't update dynamically when I change the story's controls. Instead, the displayed code always reflects the initial state of the story. This behavior makes it difficult to verify the correct props when trying different variants of the button component. Any help would be greatly appreciated!

Additional information

I am working on an Angular project where I display a ButtonComponent in Storybook with multiple variants, such as "primary," "secondary," and "destructive," as well as additional states like counters and icons.

Here’s what happens:

1. I change the props (via controls) to modify the button's appearance, such as switching buttonType from primary to secondary.
2. The changes are reflected in the rendered component in the preview area.
3. However, the Code panel in the Docs tab does not update to reflect these changes dynamically. Instead, it shows only the default initial props of the story.

---

Steps to Reproduce

1. Create a ButtonComponent with several input props, such as buttonType, size, rounded, etc.
2. Use Storybook’s controls to modify these props dynamically during runtime.
3. Observe the rendered component updates correctly in the preview.
4. Check the Code panel: it does not reflect the updated props based on the current state.

---

Expected Behavior

The Code panel should dynamically update to reflect the current state of the controls. For example, if I switch buttonType to secondary, the displayed code in the Docs tab should reflect this change.

Actual Behavior

The rendered component in the preview updates dynamically, but the Code panel in the Docs tab shows the default or initial state of the story. The updated props are not displayed.

---

What I Tried

• I attempted to use docs.source.code and transformSource to dynamically modify the code output in the Docs tab.
• The transformSource function does not seem to dynamically re-render when controls change, and the args context may not be updating as expected.

Here is my attempt at using docs.source.code to customize the code:

Template.parameters = {
    docs: {
        source: {
            code: (context: any) => {
                const { args } = context;
                return `
<div style="background: red; padding: 10px;">
    <button
        mlox-button
        [buttonType]="${args.buttonType || 'primary'}"
        [size]="${args.size || 'normal'}"
        [rounded]="${args.rounded || false}"
        [icon]="${args.icon || ''}"
        [iconLeft]="${args.iconLeft || ''}"
        [iconRight]="${args.iconRight || ''}"
        [counter]="${args.counter || ''}"
        (buttonClick)="buttonClick()"
    >
        ${args.text || 'Button Text'}
    </button>
</div>`;
            },
        },
    },
};

Even with this approach:

1. The preview updates correctly.
2. The Code panel output remains static and does not dynamically reflect the current controls.

---

Attachments

• A screenshot of the rendered component and the Code panel.
• The full stories.ts file for reference.

import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { ButtonComponent } from './button.component';
import { IconComponent } from '../../icon/icon.component';

export default {
    title: 'Components/Button',
    component: ButtonComponent,
    parameters: {
        docs: {
            description: {
                component: `
**ButtonComponent**

The \`ButtonComponent\` is a versatile UI button component designed for different use cases, including primary actions, secondary actions, CTAs, and destructive actions. It supports the following features:
- Icons (left, right, or standalone)
- Counters to display notifications
- Multiple sizes (\`small\` or \`normal\`)
- Rounded and rectangular designs

### Usage
This component is standalone and can be directly imported:
\`\`\`
import { ButtonComponent } from '@my-loxy/ui';
\`\`\`
`,
            },
        },
    },
    argTypes: {
        buttonType: {
            control: 'select',
            options: ['primary', 'secondary', 'cta', 'destructive'],
            description: 'Specifies the button style variant.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'primary' },
            },
        },
        size: {
            control: 'select',
            options: ['small', 'normal'],
            description: 'Defines the size of the button.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'normal' },
            },
        },
        icon: {
            control: 'text',
            description: 'The name of the icon to display in the button.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'null' },
            },
        },
        iconLeft: {
            control: 'text',
            description: 'The name of the icon to display on the left of the content.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'null' },
            },
        },
        iconRight: {
            control: 'text',
            description: 'The name of the icon to display on the right of the content.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'null' },
            },
        },
        counter: {
            control: 'number',
            description: 'A number to display as a counter within the button.',
            table: {
                type: { summary: 'number' },
                defaultValue: { summary: 'null' },
            },
        },
        rounded: {
            control: 'boolean',
            description: 'Applies rounded corners to the button.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
        },
        buttonClick: {
            action: 'buttonClick',
            description: 'Emitted when the button is clicked.',
        },
        text: {
            control: 'text',
            description: 'The text to display inside the button.',
        },
    },
} as Meta<ButtonComponent>;

const Template: StoryFn = (args) => ({
    props: args,
    template: `
        <button
            mlox-button
            [buttonType]="buttonType"
            [size]="size"
            [rounded]="rounded"
            [icon]="icon"
            [iconLeft]="iconLeft"
            [iconRight]="iconRight"
            [counter]="counter"
            (buttonClick)="buttonClick()"
        >
          {{ text }}
        </button>
    `,
});

Template.parameters = {
    docs: {
        source: {
            code: (context: any) => {
                alert(' test');
                const { args } = context;
                return `
<div style="background: red; padding: 10px;">
    <p>Example Wrapper Content</p>
    <button
        mlox-button
        [buttonType]="${args.buttonType || 'primary'}"
        [size]="${args.size || 'normal'}"
        [rounded]="${args.rounded || false}"
        [icon]="${args.icon || ''}"
        [iconLeft]="${args.iconLeft || ''}"
        [iconRight]="${args.iconRight || ''}"
        [counter]="${args.counter || ''}"
        (buttonClick)="buttonClick()"
    >
        ${args.text || 'Button Text'}
    </button>
    <p>More Wrapper Content</p>
</div>`;
            },
        },
    },
};

export const Overview = Template.bind({});
Overview.args = {
    buttonType: 'primary',
    size: 'normal',
    rounded: false,
    icon: null,
    iconLeft: null,
    iconRight: null,
    counter: null,
    text: 'Complete Route',
};
Overview.parameters = {
    docs: {
        storyDescription: 'This is the default state of the ButtonComponent with no additional inputs.',
    },
};

export const Primary = Template.bind({});
Primary.args = {
    buttonType: 'primary',
    size: 'normal',
    rounded: false,
    iconLeft: 'check-circle',
    iconRight: null,
    counter: 5,
    text: 'Complete Route',
};
Primary.parameters = {
    docs: {
        storyDescription: 'The primary button style with an icon on the left and a counter.',
    },
};

export const Secondary = Template.bind({});
Secondary.args = {
    buttonType: 'secondary',
    size: 'normal',
    rounded: true,
    iconLeft: 'arrow-left',
    iconRight: 'arrow-right',
    text: 'Complete Route',
};
Secondary.parameters = {
    docs: {
        storyDescription: 'The secondary button style with icons on both sides and rounded corners.',
    },
};

export const IconOnly = Template.bind({});
IconOnly.args = {
    buttonType: 'cta',
    size: 'small',
    rounded: true,
    icon: 'star',
};
IconOnly.parameters = {
    docs: {
        storyDescription: 'A small, rounded button with only an icon.',
    },
};

export const DestructiveWithCounter = Template.bind({});
DestructiveWithCounter.args = {
    buttonType: 'destructive',
    size: 'normal',
    rounded: false,
    counter: 3,
    text: 'Complete Route',
};
DestructiveWithCounter.parameters = {
    docs: {
        storyDescription: 'A destructive button style with a counter.',
    },
};

export const DisabledStates = Template.bind({});
DisabledStates.args = {
    buttonType: 'primary',
    size: 'normal',
    rounded: false,
    iconLeft: 'lock',
    counter: null,
};
DisabledStates.parameters = {
    docs: {
        storyDescription: `
You can simulate disabled states in the application by applying the \`disabled\` attribute directly in your markup.
Example:
\`\`\`html
<button mlox-button buttonType="primary" [disabled]="true">Disabled Button</button>
\`\`\`
`,
    },
};
DisabledStates.decorators = [
    (storyFunc: any) => {
        const story = storyFunc();
        story.props = { ...story.props, disabled: true };
        return story;
    },
];

export const AllVariations = () => ({
    template: `
        <div>
            <h4>Primary</h4>
            <button mlox-button buttonType="primary">Default</button>
            <button mlox-button buttonType="primary" [iconLeft]="'check-circle'">With Icon Left</button>
            <button mlox-button buttonType="primary" [counter]="5">With Counter</button>
            <h4>Secondary</h4>
            <button mlox-button buttonType="secondary">Default</button>
            <button mlox-button buttonType="secondary" [iconLeft]="'arrow-left'" [iconRight]="'arrow-right'">With Icons</button>
        </div>
    `,
});
AllVariations.parameters = {
    controls: { disable: true }, // Disables the Controls panel
};

---

Environment Details

• Storybook Version: 8.4.2
• Framework: Angular
• Browser: Chrome 131.0.6778.86 (Official Build) (x86_64)

---

Why This is Important

• Accurate code in the Docs tab is critical for developers who rely on Storybook to understand the usage of components.
• Without dynamic updates, the Code panel misrepresents the actual state of the component.

Any guidance or insight into this issue would be incredibly helpful! Thank you. 😊

Create a reproduction

No response