storybookjs/storybook

[Bug]: Action in object disappears in Controls panel

Open

#29207 opened on Sep 25, 2024

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bughelp wantedsev:S3

Description

Describe the bug

After upgrading from Storybook 6 to Storybook 8, we are experiencing an issue when trying to show an object with an Action (import { action } from '@storybook/addon-actions';) in our Controls.

This is our link arg:

This is what we expect, and is shown on the Docs page: image

This is what actually happens: image

The Action does work as expected and is shown in the Actions tab when clicking the link, but it isn't shown in the link object on the Controls.

Reproduction link

https://stackblitz.com/edit/github-39beua?file=src%2Fstories%2FButton.stories.ts

Reproduction steps

  1. Set up a story with controls.
  2. Add an argument with type object to your args, one of the properties should contain an action. (import { action } from '@storybook/addon-actions;)

Expected result: Object is fully shown in controls. Actual result: The property containing an action is missing from the Object in the controls.

System

Storybook Environment Info:

  System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm <----- active
    pnpm: 9.5.0 - ~/.nvm/versions/node/v18.18.2/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.59
    Edge: 129.0.2792.52
    Safari: 17.6
  npmPackages:
    @storybook/addon-actions: ^8.3.0 => 8.3.0 
    @storybook/addon-essentials: ^8.3.0 => 8.3.0 
    @storybook/addon-links: ^8.3.0 => 8.3.0 
    @storybook/addon-storysource: ^8.3.0 => 8.3.0 
    @storybook/addon-styling-webpack: ^1.0.0 => 1.0.0 
    @storybook/ember: ^8.3.0 => 8.3.0 
    @storybook/ember-cli-storybook: ^0.6.1 => 0.6.1 
    storybook: ^8.3.0 => 8.3.0

Additional context

No response

Contributor guide

Tech stack
typescriptreact
Domain
frontenddeveloper experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Storybook basicsReactaddon actions concept
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Start by examining the provided Stackblitz reproduction to understand the setup. Then explore the Storybook codebase, focusing on the controls addon (packages/addons/controls) and how object args are rendered. Look at the serialization of action functions in the addon actions package (packages/addons/actions). Check recent commits or PRs that might have changed the representation of actions in controls. The issue likely stems from a mismatch in how actions are filtered or displayed in the controls panel compared to the docs page. Investigate the 'link' object structure and why the action property is not shown.