storybookjs/storybook

[Bug]: a long list within controls should be truncated

Open

#25778 opened on Jan 27, 2024

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
feature requesthelp wantedsev:S4

Description

Describe the bug

When there is a prop that accepts a list of items and a story that passes a long list to that prop, the Control value should be somehow truncated but instead it shows the full list of items

To Reproduce

Check the Button docs in https://stackblitz.com/edit/github-bowmaj?file=src%2Fstories%2FButton.tsx,src%2Fstories%2FButton.stories.ts&preset=node

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.14.0 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.0.0-alpha.15 => 8.0.0-alpha.15 
    @storybook/addon-interactions: ^8.0.0-alpha.15 => 8.0.0-alpha.15 
    @storybook/addon-links: ^8.0.0-alpha.15 => 8.0.0-alpha.15 
    @storybook/addon-onboarding: ^1.0.11 => 1.0.11 
    @storybook/blocks: ^8.0.0-alpha.15 => 8.0.0-alpha.15 
    @storybook/react: ^8.0.0-alpha.15 => 8.0.0-alpha.15 
    @storybook/react-vite: ^8.0.0-alpha.15 => 8.0.0-alpha.15 
    @storybook/test: ^8.0.0-alpha.15 => 8.0.0-alpha.15 
    storybook: ^8.0.0-alpha.15 => 8.0.0-alpha.15

Additional context

No response

Contributor guide

Tech stack
typescriptreact
Domain
frontendtesting
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
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
ReactStorybook basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the controls rendering component in the Storybook codebase, likely in `addons/controls/src`. The issue is about truncating long lists in the control value display. Review the StackBlitz reproduction link to understand the expected behavior. Look for existing truncation logic or CSS overflow handling. The fix may involve adding a truncation function or style to limit the displayed list length.