addon-controls > description column > multiline code forced to whitespace: nowrap;

[jayt08]

Describe the bug Impossible to describe multiline code fragment at description column with argTypes, it forced to whitespace: nowrap; by jss

To Reproduce Write a story. Describe argTypes with multiline code at description parameter.

Expected behavior

object: {
  key: value;
}

at description column

Fact behavior

object: { key: value; }

at description column

Screenshots expected:

fact:

Code snippets

export default {
  ...
  argTypes: {
    propName: {
      ...
      description: `some text

4 spaces does not help

    object: {
      key: value;
    }

triple backticks wont work too

\`\`\`
object: {
  key: value;
}
\`\`\`

some more text`;
      ...
    }
  }
}

System

Environment Info:

System: OS: macOS 10.15.7 CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz Binaries: Node: 12.13.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.5 - /usr/local/bin/npm Browsers: Chrome: 86.0.4240.198 Firefox: 80.0.1 Safari: 14.0 npmPackages: @storybook/addon-actions: ^6.1.0-rc.4 => 6.1.0-rc.4 @storybook/addon-controls: ^6.0.28 => 6.0.28 @storybook/addon-knobs: ^6.1.0-rc.4 => 6.1.0-rc.4 @storybook/addon-links: ^6.1.0-rc.4 => 6.1.0-rc.4 @storybook/addon-storysource: ^6.1.0-rc.4 => 6.1.0-rc.4 @storybook/addon-viewport: ^6.1.0-rc.4 => 6.1.0-rc.4 @storybook/addons: ^6.1.0-rc.4 => 6.1.0-rc.4 @storybook/cli: ^6.1.0-rc.4 => 6.1.0-rc.4 @storybook/preset-create-react-app: ^3.1.5 => 3.1.5 @storybook/react: ^6.1.0-rc.4 => 6.1.0-rc.4 @storybook/theming: ^6.1.0-rc.4 => 6.1.0-rc.4

Additional context Maybe it is possible to add some css-modification for multiline code sections, to override whitespace: nowrap; or inject some styles for description cell if necessary?

Edit Actually, the problem is sb's jss dont recognize <pre><code /></pre> Possible solution is just add some pre > code jss, which will overwrite whitespace: nowrap; to whitespace: pre;

Edit2 Solved this with <style /> section added into ./storybook/manager-head.html. This works but looks hacky.

[github-actions[bot]]

Automention: Hey @patricklafrance @shilman, you've been tagged! Can you give a hand here?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ndelangen]

Is this still an issue in 7.0 beta @jayt08 ?