Skip to content

Commit 1dfd176

Browse files
bevacquabevacqua
authored
Keep using <pre> for code blocks. (elastic#139)
* Keep using <pre> for code blocks. * bunch of tests, address @cjcenizal's comments * Update tests and cleanup the changelog * but inline
1 parent d9bad70 commit 1dfd176

11 files changed

Lines changed: 423 additions & 151 deletions

‎CHANGELOG.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
# [`master`](https://github.com/elastic/eui/tree/master)
22

3-
- Changed the hover states of `EuiButtonEmpty` to look more like links. [#135](https://github.com/elastic/eui/pull/135)
4-
- Added `transparentBackground` prop to `EuiCodeBlock`. Made light theme the default.
5-
`EuiCode` now just wraps `EuiCodeBlock` so you can do inline highlighting. [#138](https://github.com/elastic/eui/pull/138)
6-
- `EuiFormRow` generates its own unique `id` prop if none is provided. [(#130)](https://github.com/elastic/eui/pull/130)
7-
- `EuiFormRow` associates help text and errors with the field element via ARIA attributes. [(#130)](https://github.com/elastic/eui/pull/130)
3+
- Changed the hover states of `<EuiButtonEmpty>` to look more like links. [(#135)](https://github.com/elastic/eui/pull/135)
4+
- `<EuiCode>` now wraps `<EuiCodeBlock>`, so it can do everything `<EuiCodeBlock>` could, but inline [(#138)](https://github.com/elastic/eui/pull/138)
5+
- Added `transparentBackground` prop to `<EuiCodeBlock>` [(#138)](https://github.com/elastic/eui/pull/138)
6+
- `<EuiCodeBlock>` now uses the `light` theme by default [(#138)](https://github.com/elastic/eui/pull/138)
7+
- `<EuiFormRow>` generates its own unique `id` prop if none is provided. [(#130)](https://github.com/elastic/eui/pull/130)
8+
- `<EuiFormRow>` associates help text and errors with the field element via ARIA attributes. [(#130)](https://github.com/elastic/eui/pull/130)
89

910
# [`0.0.1`](https://github.com/elastic/eui/tree/v0.0.1) Initial Release
1011

‎src/components/code/__snapshots__/_code_block.test.js.snap‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`] = `
4+
<div
5+
class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
6+
style="height:auto"
7+
>
8+
<pre
9+
class="euiCodeBlock__pre"
10+
>
11+
<code
12+
class="euiCodeBlock__code js"
13+
/>
14+
</pre>
15+
</div>
16+
`;
17+
18+
exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
19+
<div
20+
class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
21+
style="height:auto"
22+
>
23+
<pre
24+
class="euiCodeBlock__pre"
25+
>
26+
<code
27+
aria-label="aria-label"
28+
class="euiCodeBlock__code"
29+
data-test-subj="test subject string"
30+
>
31+
var some = 'code';
32+
console.log(some);
33+
</code>
34+
</pre>
35+
</div>
36+
`;
37+
38+
exports[`EuiCodeBlockImpl block renders with dark theme 1`] = `
39+
<div
40+
class="euiCodeBlock euiCodeBlock--dark euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
41+
style="height:auto"
42+
>
43+
<pre
44+
class="euiCodeBlock__pre"
45+
>
46+
<code
47+
class="euiCodeBlock__code"
48+
/>
49+
</pre>
50+
</div>
51+
`;
52+
53+
exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
54+
<div
55+
class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
56+
style="height:auto"
57+
>
58+
<pre
59+
class="euiCodeBlock__pre"
60+
>
61+
<code
62+
class="euiCodeBlock__code"
63+
/>
64+
</pre>
65+
</div>
66+
`;
67+
68+
exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1`] = `
69+
<span
70+
class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
71+
style="height:auto"
72+
>
73+
<code
74+
class="euiCodeBlock__code js"
75+
/>
76+
</span>
77+
`;
78+
79+
exports[`EuiCodeBlockImpl inline renders an inline code tag 1`] = `
80+
<span
81+
class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline testClass1 testClass2"
82+
style="height:auto"
83+
>
84+
<code
85+
aria-label="aria-label"
86+
class="euiCodeBlock__code"
87+
data-test-subj="test subject string"
88+
>
89+
var some = 'code';
90+
console.log(some);
91+
</code>
92+
</span>
93+
`;
94+
95+
exports[`EuiCodeBlockImpl inline renders with dark theme 1`] = `
96+
<span
97+
class="euiCodeBlock euiCodeBlock--dark euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
98+
style="height:auto"
99+
>
100+
<code
101+
class="euiCodeBlock__code"
102+
/>
103+
</span>
104+
`;
105+
106+
exports[`EuiCodeBlockImpl inline renders with transparent background 1`] = `
107+
<span
108+
class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground euiCodeBlock--inline"
109+
style="height:auto"
110+
>
111+
<code
112+
class="euiCodeBlock__code"
113+
/>
114+
</span>
115+
`;

‎src/components/code/__snapshots__/code.test.js.snap‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`EuiCode is rendered 1`] = `
3+
exports[`EuiCode renders a code snippet 1`] = `
44
<span
55
class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline testClass1 testClass2"
66
style="height:auto"
77
>
8-
<span
9-
class="euiCodeBlock__pre"
8+
<code
9+
aria-label="aria-label"
10+
class="euiCodeBlock__code"
11+
data-test-subj="test subject string"
1012
>
11-
<code
12-
aria-label="aria-label"
13-
class="euiCodeBlock__code"
14-
data-test-subj="test subject string"
15-
/>
16-
</span>
13+
var some = 'code';
14+
console.log(some);
15+
</code>
1716
</span>
1817
`;

‎src/components/code/__snapshots__/code_block.test.js.snap‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`EuiCodeBlock renders a code block 1`] = `
4+
<div
5+
class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
6+
style="height:auto"
7+
>
8+
<pre
9+
class="euiCodeBlock__pre"
10+
>
11+
<code
12+
aria-label="aria-label"
13+
class="euiCodeBlock__code"
14+
data-test-subj="test subject string"
15+
>
16+
var some = 'code';
17+
console.log(some);
18+
</code>
19+
</pre>
20+
</div>
21+
`;

‎src/components/code/_code_block.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React, {
2+
Component,
3+
} from 'react';
4+
import PropTypes from 'prop-types';
5+
import classNames from 'classnames';
6+
7+
import hljs from 'highlight.js';
8+
9+
const colorToClassNameMap = {
10+
light: 'euiCodeBlock--light',
11+
dark: 'euiCodeBlock--dark',
12+
};
13+
14+
export const COLORS = Object.keys(colorToClassNameMap);
15+
16+
const fontSizeToClassNameMap = {
17+
s: 'euiCodeBlock--fontSmall',
18+
m: 'euiCodeBlock--fontMedium',
19+
l: 'euiCodeBlock--fontLarge',
20+
};
21+
22+
export const FONT_SIZES = Object.keys(fontSizeToClassNameMap);
23+
24+
const paddingSizeToClassNameMap = {
25+
s: 'euiCodeBlock--paddingSmall',
26+
m: 'euiCodeBlock--paddingMedium',
27+
l: 'euiCodeBlock--paddingLarge',
28+
};
29+
30+
export const PADDING_SIZES = Object.keys(paddingSizeToClassNameMap);
31+
32+
export class EuiCodeBlockImpl extends Component {
33+
static propTypes = {
34+
children: PropTypes.node,
35+
className: PropTypes.string,
36+
}
37+
38+
constructor(props) {
39+
super(props);
40+
}
41+
42+
componentDidMount() {
43+
this.highlight();
44+
}
45+
46+
componentDidUpdate() {
47+
this.highlight();
48+
}
49+
50+
render() {
51+
const {
52+
inline,
53+
children,
54+
className,
55+
color,
56+
fontSize,
57+
language,
58+
overflowHeight,
59+
paddingSize,
60+
transparentBackground,
61+
...otherProps
62+
} = this.props;
63+
64+
const classes = classNames(
65+
'euiCodeBlock',
66+
colorToClassNameMap[color],
67+
fontSizeToClassNameMap[fontSize],
68+
paddingSizeToClassNameMap[paddingSize],
69+
{
70+
'euiCodeBlock--transparentBackground': transparentBackground,
71+
'euiCodeBlock--inline': inline,
72+
},
73+
className
74+
);
75+
76+
const codeClasses = classNames('euiCodeBlock__code', language);
77+
78+
let optionalOverflowHeight = 'auto';
79+
80+
if (overflowHeight) {
81+
optionalOverflowHeight = overflowHeight;
82+
}
83+
84+
const codeSnippet = (
85+
<code
86+
ref={ref => { this.code = ref; }}
87+
className={codeClasses}
88+
{...otherProps}
89+
>
90+
{children}
91+
</code>
92+
);
93+
94+
const wrapperProps = {
95+
className: classes,
96+
style: { height: optionalOverflowHeight }
97+
};
98+
99+
if (inline) {
100+
return (
101+
<span {...wrapperProps}>
102+
{codeSnippet}
103+
</span>
104+
);
105+
}
106+
107+
return (
108+
<div {...wrapperProps}>
109+
<pre className="euiCodeBlock__pre">
110+
{codeSnippet}
111+
</pre>
112+
</div>
113+
);
114+
}
115+
116+
highlight() {
117+
if (this.props.language) {
118+
hljs.highlightBlock(this.code);
119+
}
120+
}
121+
}
122+
123+
EuiCodeBlockImpl.propTypes = {
124+
children: PropTypes.node,
125+
className: PropTypes.string,
126+
color: PropTypes.string,
127+
paddingSize: PropTypes.oneOf(PADDING_SIZES),
128+
fontSize: PropTypes.oneOf(FONT_SIZES),
129+
transparentBackground: PropTypes.bool,
130+
inline: PropTypes.bool,
131+
};
132+
133+
EuiCodeBlockImpl.defaultProps = {
134+
color: 'light',
135+
transparentBackground: false,
136+
paddingSize: 'l',
137+
fontSize: 's',
138+
};

‎src/components/code/_code_block.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
padding: 0 $euiSizeXS;
5151
background: $euiColorLightestShade;
5252

53-
.euiCodeBlock__pre, .euiCodeBlock__code {
53+
.euiCodeBlock__code {
5454
display: inline;
5555
white-space: normal;
5656
}

0 commit comments

Comments
 (0)