diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24b596e4952..3bba489a897 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
# [`master`](https://github.com/elastic/eui/tree/master)
-No public interface changes since `0.0.14`.
+- `EuiCodeBlock` now only shows fullscreen icons if `overflowHeight` prop is set. Also forces large fonts and padding while expanded. [(#325)](https://github.com/elastic/eui/pull/325)
# [`0.0.14`](https://github.com/elastic/eui/tree/v0.0.14)
diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
index 3f6404175e8..1f4a8fcf383 100644
--- a/src-docs/src/views/code/code_example.js
+++ b/src-docs/src/views/code/code_example.js
@@ -53,7 +53,10 @@ export const CodeExample = {
- language sets the syntax highlighting for a specific language.
- - paddingSize accepts “s” / “m” / “l” (default).
+ -
+ paddingSize accepts “none” / “s” / “m” / “l”
+ (default).
+
- fontSize accepts “s” (default) / “m” / “l”.
- overflowHeight accepts a number. By default it is not set.
- transparentBackground set to false will remove the background.
diff --git a/src/components/code/__snapshots__/_code_block.test.js.snap b/src/components/code/__snapshots__/_code_block.test.js.snap
index 97d3b97b850..b8a20d13d4e 100644
--- a/src/components/code/__snapshots__/_code_block.test.js.snap
+++ b/src/components/code/__snapshots__/_code_block.test.js.snap
@@ -11,25 +11,6 @@ exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`
class="euiCodeBlock__code js"
/>
-
`;
@@ -49,25 +30,6 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
console.log(some);
-
`;
@@ -82,25 +44,6 @@ exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
class="euiCodeBlock__code"
/>
-
`;
diff --git a/src/components/code/__snapshots__/code_block.test.js.snap b/src/components/code/__snapshots__/code_block.test.js.snap
index dbfa7a3b826..93accaa3b7c 100644
--- a/src/components/code/__snapshots__/code_block.test.js.snap
+++ b/src/components/code/__snapshots__/code_block.test.js.snap
@@ -16,24 +16,5 @@ exports[`EuiCodeBlock renders a code block 1`] = `
console.log(some);
-
`;
diff --git a/src/components/code/_code_block.js b/src/components/code/_code_block.js
index 9fcbf67f758..62d7d5e3cb5 100644
--- a/src/components/code/_code_block.js
+++ b/src/components/code/_code_block.js
@@ -25,6 +25,7 @@ const fontSizeToClassNameMap = {
export const FONT_SIZES = Object.keys(fontSizeToClassNameMap);
const paddingSizeToClassNameMap = {
+ none: '',
s: 'euiCodeBlock--paddingSmall',
m: 'euiCodeBlock--paddingMedium',
l: 'euiCodeBlock--paddingLarge',
@@ -139,13 +140,14 @@ export class EuiCodeBlockImpl extends Component {
let fullScreenButton;
- if (!inline) {
+ if (!inline && overflowHeight) {
fullScreenButton = (
);
@@ -154,7 +156,15 @@ export class EuiCodeBlockImpl extends Component {
let fullScreenDisplay;
if (this.state.isFullScreen) {
- const fullScreenClasses = classNames(classes, 'euiCodeBlock-isFullScreen');
+ {/*
+ Force fullscreen to use large font and padding.
+ */}
+ const fullScreenClasses = classNames(
+ 'euiCodeBlock',
+ 'euiCodeBlock--fontLarge',
+ 'euiCodeBlock-paddingLarge',
+ 'euiCodeBlock-isFullScreen',
+ );
fullScreenDisplay = (