Skip to content

Fix EuiCode / EuiCodeBlock's support for non-string values #2792

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 5 commits into from
Feb 3, 2020
Merged

Fix EuiCode / EuiCodeBlock's support for non-string values #2792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
945a920
Effective reverting of #2324
chandlerprall Jan 14, 2020
ec4f479
Made EuiCodeBlock updates React-safe
chandlerprall Jan 16, 2020
c5249ac
Updated all EuiCode* tests working as full mounts
chandlerprall Jan 24, 2020
4efa5ce
Merge branch 'master' into bug/2437-euihighlight-euicode-fixing
chandlerprall Feb 3, 2020
5beb6cb
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 @@ -10,6 +10,7 @@
**Bug fixes**

- 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))

**Breaking changes**

Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/responsive/responsive_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function renderSizes(size, index) {
code += ' +';
}

return `${code}\n`;
return <div key={index}>{code}</div>;
}

export const ResponsiveExample = {
Expand Down
28 changes: 20 additions & 8 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 @@ -8,8 +8,10 @@ exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code js"
/>
class="euiCodeBlock__code js hljs javascript"
>
<div />
</code>
</pre>
</div>
`;
Expand All @@ -26,8 +28,10 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
class="euiCodeBlock__code"
data-test-subj="test subject string"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -42,7 +46,9 @@ exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
>
<code
class="euiCodeBlock__code"
/>
>
<div />
</code>
</pre>
</div>
`;
Expand All @@ -52,8 +58,10 @@ exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
>
<code
class="euiCodeBlock__code js"
/>
class="euiCodeBlock__code js hljs javascript"
>
<div />
</code>
</span>
`;

Expand All @@ -66,8 +74,10 @@ exports[`EuiCodeBlockImpl inline renders an inline code tag 1`] = `
class="euiCodeBlock__code"
data-test-subj="test subject string"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</span>
`;
Expand All @@ -78,6 +88,8 @@ exports[`EuiCodeBlockImpl inline renders with transparent background 1`] = `
>
<code
class="euiCodeBlock__code"
/>
>
<div />
</code>
</span>
`;
4 changes: 3 additions & 1 deletion 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,8 +9,10 @@ exports[`EuiCode renders a code snippet 1`] = `
class="euiCodeBlock__code"
data-test-subj="test subject string"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</span>
`;
84 changes: 69 additions & 15 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
@@ -1,5 +1,35 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiCodeBlock dynamic content updates DOM when input changes 1`] = `
"<div>
<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>
</code>
</pre>
</div>
</div>"
`;

exports[`EuiCodeBlock dynamic content updates DOM when input changes 2`] = `
"<div>
<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>
</code>
</pre>
</div>
</div>"
`;

exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingLarge"
Expand All @@ -10,8 +40,10 @@ exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -27,8 +59,10 @@ exports[`EuiCodeBlock props fontSize m is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -44,8 +78,10 @@ exports[`EuiCodeBlock props fontSize s is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -61,8 +97,10 @@ exports[`EuiCodeBlock props isCopyable is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
<div
Expand Down Expand Up @@ -104,10 +142,12 @@ exports[`EuiCodeBlock props language is rendered 1`] = `
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code html"
class="euiCodeBlock__code html hljs xml"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -116,17 +156,19 @@ console.log(some);
exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls"
style="max-height:200px"
style="max-height: 200px;"
>
<pre
class="euiCodeBlock__pre"
style="max-height:200px"
style="max-height: 200px;"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
<div
Expand Down Expand Up @@ -162,8 +204,10 @@ exports[`EuiCodeBlock props paddingSize l is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -179,8 +223,10 @@ exports[`EuiCodeBlock props paddingSize m is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -196,8 +242,10 @@ exports[`EuiCodeBlock props paddingSize none is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -213,8 +261,10 @@ exports[`EuiCodeBlock props paddingSize s is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -230,8 +280,10 @@ exports[`EuiCodeBlock props transparentBackground is rendered 1`] = `
<code
class="euiCodeBlock__code"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand All @@ -249,8 +301,10 @@ exports[`EuiCodeBlock renders a code block 1`] = `
class="euiCodeBlock__code"
data-test-subj="test subject string"
>
var some = 'code';
<div>
var some = 'code';
console.log(some);
</div>
</code>
</pre>
</div>
Expand Down
Loading