<pre> tag should have white-space: pre

[nfriedly]

See

ui-components/src/scss/lib/vendors/reset/_reset.scss

Line 270 in 78a1eeb

white-space: pre-line; // 2

- it sets white-space: pre, but then overrides it (twice), setteling on white-space: pre-line, which makes my pretty-printed JSON blocks look ugly.

This gets overridden somewhere for pre[class*="language-"] (maybe in the prism css), but I don't see any reason why it shouldn't be the default for other things.

[nfriedly]

Oh, and apparently we set white space: normal on .base--pre somewhere in the CSS - I'm not sure where that comes from...

[jzhang300]

I did that to prevent unwanted spacing when we wrap pre tags around code tags. .base--pre code has white-space: pre.

[germanattanasio]

Nathan when using react I think if you replace the state of the Code component it should reload the new code without you having to change it.

[nfriedly]

Something funky is going on. Here's my code:

        return (
            <div className="tab-panels" role="tabpanel">
                <ul className="tab-panels--tab-list" role="tablist">
                    <li className="tab-panels--tab-list-item base--li" role="presentation">
                        <a className="tab-panels--tab base--a active" href="#display_output_doc"
                           aria-controls="display_output_doc" role="tab">Output document</a>
                    </li>
                    <a title="Download output file" href={`/api/convert?document_id=${this.props.id}&conversion_target=${formats[this.props.format]}&download=true`}
                       className="download--output-icon icon icon-download download--icon"></a>
                </ul>
                <div className="tab-panels--tab-content">
                    <div id="display_output_doc" className="tab-panels--tab-pane active" role="tab-panel">
                        <Code type={this.props.format}>{this.state.output}</Code>
                    </div>
                </div>
            </div>
        );

And this is what it renders as:

The only CSS I'm including on the page is our watson-ui-components.min.css.

If I disable the white-space: normal from .base--pre, then it looks correct:

Should that class maybe be on the <pre> tag rather than the <code> tag? - That comes from the react components: https://github.com/watson-developer-cloud/react-components/blob/master/src/components/Code.js#L30

[nfriedly]

Actually, I think I answered my own question. If I move the .base--preclass off of the <code> and onto the <pre> then things look correct:

I included the fix in watson-developer-cloud/react-components#5

[jzhang300]

I think in the sample documentation, we should say that <PrismCode> needs to be wrapped with <pre class="base--pre"></pre>

Edit: nvm, ignore this message