Skip to content
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

Fixed position of EuiCodeBlock controls #2459

Merged
merged 13 commits into from
Oct 25, 2019
Merged

Fixed position of EuiCodeBlock controls #2459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7c9f95e
Adjusted control icon placement based on overall padding
Oct 21, 2019
0e78cad
Change height to maxHeight when overflowHeight is provided
Oct 21, 2019
7abe6c1
Beefed up tests for EuiCodeBlock
Oct 21, 2019
ade9de4
TEMP: Doc examples
Oct 21, 2019
5e1fb31
Revert "Change height to maxHeight when overflowHeight is provided"
Oct 21, 2019
e2d5122
cl
Oct 21, 2019
88082e9
Remove `inline` test
Oct 23, 2019
8befa81
Merge branch 'master' into code-block-extras
cchaos Oct 23, 2019
2789fb3
Merge branch 'master' into code-block-extras
cchaos Oct 24, 2019
4d1efb0
Revert "TEMP: Doc examples"
Oct 24, 2019
7b81ecd
Merge branch 'code-block-extras' of https://github.com/cchaos/eui int…
Oct 24, 2019
7306b94
Merge branch 'master' into code-block-extras
cchaos Oct 24, 2019
ec3c42c
Merge branch 'master' into code-block-extras
cchaos Oct 25, 2019
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 @@ -6,6 +6,7 @@

- Normalized button `moz-focus-inner` ([#2445](https://github.com/elastic/eui/pull/2445))
- Fixed typo to correct `aria-modal` attribute in`EuiPopover` ([#2488](https://github.com/elastic/eui/pull/2488))
- Fixed position of `EuiCodeBlock` controls and added more tests ([#2459](https://github.com/elastic/eui/pull/2459))

## [`14.8.0`](https://github.com/elastic/eui/tree/v14.8.0)

Expand Down
234 changes: 234 additions & 0 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,239 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingLarge"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
</div>
`;

exports[`EuiCodeBlock props fontSize m is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontMedium euiCodeBlock--paddingLarge"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
</div>
`;

exports[`EuiCodeBlock props fontSize s is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
</div>
`;

exports[`EuiCodeBlock props isCopyable is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
<div
class="euiCodeBlock__controls"
>
<div
class="euiCodeBlock__copyButton"
>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Copy"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</button>
</span>
</div>
</div>
</div>
`;

exports[`EuiCodeBlock props language is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code html"
>
var some = 'code';
console.log(some);
</code>
</pre>
</div>
`;

exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls"
style="height:200px"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
<div
class="euiCodeBlock__controls"
>
<button
aria-label="Expand"
class="euiButtonIcon euiButtonIcon--text euiCodeBlock__fullScreenButton"
type="button"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</button>
</div>
</div>
`;

exports[`EuiCodeBlock props paddingSize l is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
</div>
`;

exports[`EuiCodeBlock props paddingSize m is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingMedium"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
</div>
`;

exports[`EuiCodeBlock props paddingSize none is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
</div>
`;

exports[`EuiCodeBlock props paddingSize s is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
</div>
`;

exports[`EuiCodeBlock props transparentBackground is rendered 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
>
<pre
class="euiCodeBlock__pre"
>
<code
class="euiCodeBlock__code"
>
var some = 'code';
console.log(some);
</code>
</pre>
</div>
`;

exports[`EuiCodeBlock renders a code block 1`] = `
<div
class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
Expand Down
2 changes: 1 addition & 1 deletion src/components/code/_code_block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export class EuiCodeBlockImpl extends Component {
{
'euiCodeBlock--transparentBackground': transparentBackground,
'euiCodeBlock--inline': inline,
'euiCodeBlock-isCopyable': isCopyable,
'euiCodeBlock--hasControls': isCopyable || overflowHeight,
},
className
);
Expand Down
37 changes: 31 additions & 6 deletions src/components/code/_code_block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@
overflow: auto;
display: block;
white-space: pre-wrap;
// sass-lint:disable-block no-important
padding-right: $euiSizeXXL !important; // Space for controls
}

.euiCodeBlock__code {
Expand All @@ -22,14 +20,18 @@
font-size: inherit;
}

.euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton {
margin-top: $euiSizeXS;
&.euiCodeBlock--hasControls {
padding-right: $euiSizeL + $euiSizeXS;
}

.euiCodeBlock__controls {
position: absolute;
top: $euiSizeM;
right: $euiSize;
top: 0;
right: 0;
}

.euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton {
margin-top: $euiSizeXS;
}

&.euiCodeBlock-isFullScreen {
Expand All @@ -43,6 +45,11 @@
// sass-lint:disable-block no-important
padding: $euiSizeXL !important;
}

.euiCodeBlock__controls {
top: $euiSizeXS;
right: $euiSizeXS;
}
}

&.euiCodeBlock--fontSmall {
Expand All @@ -57,22 +64,40 @@
font-size: $euiFontSize;
}

// Small padding
&.euiCodeBlock--paddingSmall {
.euiCodeBlock__pre {
padding: $euiSizeS;
}

.euiCodeBlock__controls {
top: $euiSizeS;
right: $euiSizeS;
}
}

// Medium padding
&.euiCodeBlock--paddingMedium {
.euiCodeBlock__pre {
padding: $euiSize;
}

.euiCodeBlock__controls {
top: $euiSize;
right: $euiSize;
}
}

// Large padding
&.euiCodeBlock--paddingLarge {
.euiCodeBlock__pre {
padding: $euiSizeL;
}

.euiCodeBlock__controls {
top: $euiSizeL;
right: $euiSizeL;
}
}

/**
Expand Down
Loading