Addon-docs: Fix newline handling in ArgsTable code blocks

[niklasmh]

Issue: #11358 (propTypes) and #12848 (interface)

What I did

Added white-space: pre-wrap; on code blocks (specifically). This does not affect inline code.

Before:

After:

How to test

• Is this testable with Jest or Chromatic screenshots?
  • No, unless ArgsTables are included in the screenshots
• Does this need a new example in the kitchen sink apps?
  • Yes
  • Added a propTypes example in cra-kitchen-sink\src\components\Container.js together with an ArgsTable in the test story: cra-kitchen-sink\src\stories\test.stories.mdx.
  • Added an interface example in cra-ts-kitchen-sink\src\components\Button.tsx.
• Does this need an update to the documentation?
  • No

If your answer is yes to any of these, please make sure to include it in your PR.

[niklasmh]

This is how the examples that were added looks like:

For the cra-kitchen-sink app:

For the cra-ts-kitchen-sink app:

[stale]

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!

[MichaelArestad]

It looks like the code block is missing styles. Compare the inline code examples to the block:

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit bd5889f. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[niklasmh]

Thanks for the feedback, @MichaelArestad!

Do you mean making the inline code (here in red) to become a single block when it breaks, like the block in the green area?

[MichaelArestad]

@niklasmh Not quite. I'm referring for the differences in styles between this:

and this:

It's somewhat tricky to spot, but you'll see they actually have different font and color styles.

[niklasmh]

@MichaelArestad Nice spotted! I can attempt to do something about it. I assume the first style is preferred? As it is the default for inline code.

[MichaelArestad]

@niklasmh That would be great. Yes. The styles for the inline code are preferred. Thank you!

[niklasmh]

@MichaelArestad As far I could find the only difference was the font-size which made the text appear darker. I also saw that setting a smaller font-size on inline code blocks is a normal practice (e.g. GitHub) - therefore it seems like a reasonable change to add.

Now it looks like this:

[MichaelArestad]

Thank you for making these changes. This PR is so close! The only thing it's missing is a font-family declaration to match:

[niklasmh]

Now the font should be good too! Thanks for guiding me through my first PR here at storybook, @MichaelArestad :)

[MichaelArestad]

I'm seeing some visual diffs of changes that are unrelated to this PR. I suspect a rebase or merging an updated next branch will resolve those changes. As for the changes you made, they look great. Thank you!

[MichaelArestad]

@shilman I think this one is ready to 🚢

[shilman]

Thanks @niklasmh !!! 🙏