Skip to content

Remove extra div wrapping around EuiCode contents #2820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chandlerprall merged 4 commits into from
Feb 3, 2020
Merged

Remove extra div wrapping around EuiCode contents #2820

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ef67f2
Remove extra div wrapping around EuiCode contents
chandlerprall Feb 3, 2020
05d820f
changelog
chandlerprall Feb 3, 2020
9fa2b0d
unchangelog
chandlerprall Feb 3, 2020
be901d0
kinda changelog
chandlerprall Feb 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

- Exported missing `EuiSelectProps` type ([#2815](https://github.com/elastic/eui/pull/2815))
- Fixed `EuiCode`'s & `EuiCodeBlock`'s ability to accept non-string children ([#2792](https://github.com/elastic/eui/pull/2792))
- Reverted a bug in `EuiCode`'s & `EuiCodeBlock` layout positioning on Firefox ([#2820](https://github.com/elastic/eui/pull/2820))
Comment thread
chandlerprall marked this conversation as resolved.
Outdated
- Fixed `EuiSearchBar`, `Query`, and `AST`'s ability to accept literal parenthesis characters ([#2791](https://github.com/elastic/eui/pull/2791))

**Breaking changes**
Expand Down
24 changes: 6 additions & 18 deletions src/components/code/__snapshots__/_code_block.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`
>
<code
class="euiCodeBlock__code js hljs javascript"
>
<div />
</code>
/>
</pre>
</div>
`;
Expand All @@ -28,10 +26,8 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
class="euiCodeBlock__code"
data-test-subj="test subject string"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -46,9 +42,7 @@ exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
>
<code
class="euiCodeBlock__code"
>
<div />
</code>
/>
</pre>
</div>
`;
Expand All @@ -59,9 +53,7 @@ exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1
>
<code
class="euiCodeBlock__code js hljs javascript"
>
<div />
</code>
/>
</span>
`;

Expand All @@ -74,10 +66,8 @@ exports[`EuiCodeBlockImpl inline renders an inline code tag 1`] = `
class="euiCodeBlock__code"
data-test-subj="test subject string"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</span>
`;
Expand All @@ -88,8 +78,6 @@ exports[`EuiCodeBlockImpl inline renders with transparent background 1`] = `
>
<code
class="euiCodeBlock__code"
>
<div />
</code>
/>
</span>
`;
4 changes: 1 addition & 3 deletions src/components/code/__snapshots__/code.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,8 @@ exports[`EuiCode renders a code snippet 1`] = `
class="euiCodeBlock__code"
data-test-subj="test subject string"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</span>
`;
60 changes: 16 additions & 44 deletions src/components/code/__snapshots__/code_block.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,8 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 1`] = `
<div class=\\"euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge\\">
<pre class=\\"euiCodeBlock__pre\\">
<code class=\\"euiCodeBlock__code javascript hljs\\">
<div>
<span class=\\"hljs-keyword\\">const</span>value =
<span class=\\"hljs-string\\">'State 1'</span>
</div>
<span class=\\"hljs-keyword\\">const</span>value =
<span class=\\"hljs-string\\">'State 1'</span>
</code>
</pre>
</div>
Expand All @@ -20,10 +18,8 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 2`] = `
<div class=\\"euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge\\">
<pre class=\\"euiCodeBlock__pre\\">
<code class=\\"euiCodeBlock__code javascript hljs\\">
<div>
<span class=\\"hljs-keyword\\">const</span>value =
<span class=\\"hljs-string\\">'State 2'</span>
</div>
<span class=\\"hljs-keyword\\">const</span>value =
<span class=\\"hljs-string\\">'State 2'</span>
</code>
</pre>
</div>
Expand All @@ -40,10 +36,8 @@ exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -59,10 +53,8 @@ exports[`EuiCodeBlock props fontSize m is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -78,10 +70,8 @@ exports[`EuiCodeBlock props fontSize s is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -97,10 +87,8 @@ exports[`EuiCodeBlock props isCopyable is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
<div
Expand Down Expand Up @@ -144,10 +132,8 @@ exports[`EuiCodeBlock props language is rendered 1`] = `
<code
class="euiCodeBlock__code html hljs xml"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -165,10 +151,8 @@ exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
<div
Expand Down Expand Up @@ -204,10 +188,8 @@ exports[`EuiCodeBlock props paddingSize l is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -223,10 +205,8 @@ exports[`EuiCodeBlock props paddingSize m is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -242,10 +222,8 @@ exports[`EuiCodeBlock props paddingSize none is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -261,10 +239,8 @@ exports[`EuiCodeBlock props paddingSize s is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -280,10 +256,8 @@ exports[`EuiCodeBlock props transparentBackground is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -301,10 +275,8 @@ exports[`EuiCodeBlock renders a code block 1`] = `
class="euiCodeBlock__code"
data-test-subj="test subject string"
>
<div>
var some = 'code';
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/code/_code_block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export class EuiCodeBlockImpl extends Component {
if (inline) {
return (
<>
{createPortal(<div>{children}</div>, this.codeTarget)}
{createPortal(children, this.codeTarget)}
<span {...wrapperProps}>{codeSnippet}</span>
</>
);
Expand Down Expand Up @@ -272,7 +272,7 @@ export class EuiCodeBlockImpl extends Component {

return (
<>
{createPortal(<div>{children}</div>, this.codeTarget)}
{createPortal(children, this.codeTarget)}
<EuiInnerText fallback="">
{(innerTextRef, innerText) => {
const codeBlockControls = getCodeBlockControls(innerText);
Expand Down