From dc47294f84f9ebc4382e527dd949d47644eda84f Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 10 Nov 2017 09:31:15 -0800 Subject: [PATCH 1/7] inline and transparentBackground props added to code block --- CHANGELOG.md | 1 + src-docs/src/views/code/code_block.js | 13 ++++++++++++- src-docs/src/views/code/code_example.js | 2 ++ src/components/code/_code_block.scss | 16 ++++++++++++++++ src/components/code/_code_block_light.scss | 1 + src/components/code/code_block.js | 15 ++++++++++++--- 6 files changed, 44 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a2cc60453c..de25dc55aef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # [`master`](https://github.com/elastic/eui/tree/master) - Changed the hover states of `EuiButtonEmpty` to look more like links. +- Added `inline` and `transparentBackground` props to `EuiCodeBlock`. Made light theme the default. # [`0.0.1`](https://github.com/elastic/eui/tree/v0.0.1) Initial Release diff --git a/src-docs/src/views/code/code_block.js b/src-docs/src/views/code/code_block.js index eead4e66392..1d7b376c7c6 100644 --- a/src-docs/src/views/code/code_block.js +++ b/src-docs/src/views/code/code_block.js @@ -21,8 +21,19 @@ export default () => ( - + {jsCode} + + + +
+ {/* You should probably vertically align your content against the code block for centering. */} + Inline code with a transparent background: + + {htmlCode} + +
+ ); diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 3af457c7a60..f0c36ce1f44 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -62,6 +62,8 @@ export default props => (
  • paddingSize accepts "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.
    • +
  • inlineWill display the passed code in an inline format.
    • } diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss index 1d588d406b1..7d9041a65df 100644 --- a/src/components/code/_code_block.scss +++ b/src/components/code/_code_block.scss @@ -35,4 +35,20 @@ &.euiCodeBlock--paddingLarge { padding: $euiSizeL; } + + &.euiCodeBlock--inline { + display: inline; + padding: 0; + background: transparent; + vertical-align: middle; + + .euiCodeBlock__pre, .euiCodeBlock__code { + display: inline; + white-space: normal; + } + } + + &.euiCodeBlock--transparentBackground { + background: transparent; + } } diff --git a/src/components/code/_code_block_light.scss b/src/components/code/_code_block_light.scss index 392f94b63e6..e578c8f60a9 100644 --- a/src/components/code/_code_block_light.scss +++ b/src/components/code/_code_block_light.scss @@ -1,3 +1,4 @@ + .euiCodeBlock--light { background: #F5F5F5; color: #3F3F3F; diff --git a/src/components/code/code_block.js b/src/components/code/code_block.js index be6417ae8bf..086d4c27430 100644 --- a/src/components/code/code_block.js +++ b/src/components/code/code_block.js @@ -51,11 +51,13 @@ export class EuiCodeBlock extends Component { const { children, className, - language, color, fontSize, - paddingSize, + inline, + language, overflowHeight, + paddingSize, + transparentBackground, ...otherProps } = this.props; @@ -64,6 +66,12 @@ export class EuiCodeBlock extends Component { colorToClassNameMap[color], fontSizeToClassNameMap[fontSize], paddingSizeToClassNameMap[paddingSize], + { + 'euiCodeBlock--transparentBackground': transparentBackground, + }, + { + 'euiCodeBlock--inline': inline, + }, className ); @@ -109,7 +117,8 @@ EuiCodeBlock.propTypes = { }; EuiCodeBlock.defaultProps = { - color: 'dark', + color: 'light', + transparentBackground: false, paddingSize: 'l', fontSize: 's', }; From 6239126ed47577d2e578a09bfd6ba5efb8a00746 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 10 Nov 2017 09:33:15 -0800 Subject: [PATCH 2/7] docs --- src-docs/src/views/code/code_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index f0c36ce1f44..ecea78748fd 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -63,7 +63,7 @@ export default props => (
  • fontSize accepts "s" (default) / "m" / "l".
  • overflowHeight accepts a number. By default it is not set.
  • transparentBackground set to false will remove the background.
    • -
  • inlineWill display the passed code in an inline format.
    • +
  • inline will display the passed code in an inline format. Will also remove any margins set.
    • } From 4266c8303806e073488e5a40cb0fa9aa5b6c5e95 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 10 Nov 2017 10:41:18 -0800 Subject: [PATCH 3/7] inline and transparentBackground props added to code block --- src-docs/src/views/code/code.js | 16 +++++++++++++++- .../code/__snapshots__/code.test.js.snap | 19 ++++++++++++++----- src/components/code/_code.scss | 10 ---------- src/components/code/_code_block.scss | 8 +++++--- src/components/code/_index.scss | 1 - src/components/code/code.js | 15 ++++++++++++--- src/components/code/code_block.js | 4 ---- 7 files changed, 46 insertions(+), 27 deletions(-) delete mode 100644 src/components/code/_code.scss diff --git a/src-docs/src/views/code/code.js b/src-docs/src/views/code/code.js index 43c935b84e9..6efd523f0fd 100644 --- a/src-docs/src/views/code/code.js +++ b/src-docs/src/views/code/code.js @@ -5,8 +5,22 @@ import { EuiText, } from '../../../../src/components'; +const htmlCode = ` +
    + asdf +
    +`; + export default () => ( -

    Sometimes you need to highlight code like this.

    +

    + Sometimes you need to highlight code like this. +

    +

    + You can also pass a language in like {htmlCode}. +

    +

    + Make the background transparent like this {htmlCode}. +

    ); diff --git a/src/components/code/__snapshots__/code.test.js.snap b/src/components/code/__snapshots__/code.test.js.snap index 4538cce1c4b..3ed109ef6cb 100644 --- a/src/components/code/__snapshots__/code.test.js.snap +++ b/src/components/code/__snapshots__/code.test.js.snap @@ -1,9 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiCode is rendered 1`] = ` - +
    + 
    +    
+
    +
    `; diff --git a/src/components/code/_code.scss b/src/components/code/_code.scss deleted file mode 100644 index 3cb49d44773..00000000000 --- a/src/components/code/_code.scss +++ /dev/null @@ -1,10 +0,0 @@ -.euiCode { - @include euiCodeFont; - display: inline-block; - white-space: pre; - background: $euiColorLightestShade; - color: $euiColorAccent; - border: $euiBorderThin; - font-size: $euiFontSizeXS; - padding: 0 $euiSizeXS; -} diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss index 7d9041a65df..61aa41b1b5c 100644 --- a/src/components/code/_code_block.scss +++ b/src/components/code/_code_block.scss @@ -37,10 +37,12 @@ } &.euiCodeBlock--inline { - display: inline; - padding: 0; - background: transparent; vertical-align: middle; + display: inline-block; + white-space: pre; + color: $euiTextColor; + font-size: $euiFontSizeXS; + padding: 0 $euiSizeXS; .euiCodeBlock__pre, .euiCodeBlock__code { display: inline; diff --git a/src/components/code/_index.scss b/src/components/code/_index.scss index a893d614186..e3793b9f58c 100644 --- a/src/components/code/_index.scss +++ b/src/components/code/_index.scss @@ -1,4 +1,3 @@ -@import 'code'; @import 'code_block'; @import 'code_block_dark'; @import 'code_block_light'; diff --git a/src/components/code/code.js b/src/components/code/code.js index eae52f22f9d..5c08ab01b83 100644 --- a/src/components/code/code.js +++ b/src/components/code/code.js @@ -2,24 +2,33 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { + EuiCodeBlock, +} from '../../components'; + export const EuiCode = ({ children, + transparentBackground, + language, className, ...rest }) => { - const classes = classNames('euiCode', className); + const classes = classNames('euiCodeBlock--inline', className); return ( - {children} - +     ); }; EuiCode.propTypes = { children: PropTypes.node, className: PropTypes.string, + transparentBackground: false, }; diff --git a/src/components/code/code_block.js b/src/components/code/code_block.js index 086d4c27430..7eb31f1fce4 100644 --- a/src/components/code/code_block.js +++ b/src/components/code/code_block.js @@ -53,7 +53,6 @@ export class EuiCodeBlock extends Component { className, color, fontSize, - inline, language, overflowHeight, paddingSize, @@ -69,9 +68,6 @@ export class EuiCodeBlock extends Component { { 'euiCodeBlock--transparentBackground': transparentBackground, }, - { - 'euiCodeBlock--inline': inline, - }, className ); From 2fec2772a49959fc09c01bf8aac236db1f7fccd1 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 10 Nov 2017 10:51:17 -0800 Subject: [PATCH 4/7] trim space from code for padding --- src-docs/src/views/code/code.js | 6 +++--- src-docs/src/views/code/code_block.js | 8 -------- src/components/code/__snapshots__/code.test.js.snap | 10 +++++----- src/components/code/_code_block.scss | 2 ++ src/components/code/code.js | 2 +- src/components/code/code_block.js | 13 +++++++------ 6 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src-docs/src/views/code/code.js b/src-docs/src/views/code/code.js index 6efd523f0fd..9d33eafab4a 100644 --- a/src-docs/src/views/code/code.js +++ b/src-docs/src/views/code/code.js @@ -14,13 +14,13 @@ const htmlCode = ` export default () => (

    - Sometimes you need to highlight code like this. + Sometimes you need to emphasize code like this.

    - You can also pass a language in like {htmlCode}. + You can also pass a language in like {htmlCode.trim()}.

    - Make the background transparent like this {htmlCode}. + Make the background transparent like this {htmlCode.trim()}.

    ); diff --git a/src-docs/src/views/code/code_block.js b/src-docs/src/views/code/code_block.js index 1d7b376c7c6..4b8106caaca 100644 --- a/src-docs/src/views/code/code_block.js +++ b/src-docs/src/views/code/code_block.js @@ -27,13 +27,5 @@ export default () => ( -
    - {/* You should probably vertically align your content against the code block for centering. */} - Inline code with a transparent background: - - {htmlCode} - -
    - ); diff --git a/src/components/code/__snapshots__/code.test.js.snap b/src/components/code/__snapshots__/code.test.js.snap index 3ed109ef6cb..e071b0eab9f 100644 --- a/src/components/code/__snapshots__/code.test.js.snap +++ b/src/components/code/__snapshots__/code.test.js.snap @@ -1,18 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiCode is rendered 1`] = ` -
    - 
    -    
-
    -
    + + `; diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss index 61aa41b1b5c..60ae7bba992 100644 --- a/src/components/code/_code_block.scss +++ b/src/components/code/_code_block.scss @@ -1,7 +1,9 @@ .euiCodeBlock { + display: block; overflow: auto; .euiCodeBlock__pre { + display: block; white-space: pre-wrap; } diff --git a/src/components/code/code.js b/src/components/code/code.js index 5c08ab01b83..d322741990b 100644 --- a/src/components/code/code.js +++ b/src/components/code/code.js @@ -30,5 +30,5 @@ export const EuiCode = ({ EuiCode.propTypes = { children: PropTypes.node, className: PropTypes.string, - transparentBackground: false, + transparentBackground: PropTypes.bool, }; diff --git a/src/components/code/code_block.js b/src/components/code/code_block.js index 7eb31f1fce4..9260b69a03d 100644 --- a/src/components/code/code_block.js +++ b/src/components/code/code_block.js @@ -80,20 +80,20 @@ export class EuiCodeBlock extends Component { } return ( -
    - 
    -          
+           { this.code = ref; }}
             className={codeClasses}
             {...otherProps}
           >
             {children}
-          
-
    -
    + + + ); } @@ -110,6 +110,7 @@ EuiCodeBlock.propTypes = { color: PropTypes.string, paddingSize: PropTypes.oneOf(PADDING_SIZES), fontSize: PropTypes.oneOf(FONT_SIZES), + transparentBackground: PropTypes.bool, }; EuiCodeBlock.defaultProps = { From 9922972490efbc38a7149bfad5d64605e6eb2d7d Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 10 Nov 2017 10:55:53 -0800 Subject: [PATCH 5/7] size based off inherited text --- src-docs/src/views/code/code_example.js | 3 ++- src/components/code/_code_block.scss | 5 ++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index ecea78748fd..0bfe63e0022 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -33,7 +33,8 @@ export default props => ( }]} text={

    - Description needed: how to use the Code component. + Code is for making inline code snippets that can work + within or next to bodies of text.

    } demo={ diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss index 60ae7bba992..b6445461c2c 100644 --- a/src/components/code/_code_block.scss +++ b/src/components/code/_code_block.scss @@ -38,12 +38,15 @@ padding: $euiSizeL; } + /** + ** 1. Size the code against the text its embedded within. + **/ &.euiCodeBlock--inline { vertical-align: middle; display: inline-block; white-space: pre; color: $euiTextColor; - font-size: $euiFontSizeXS; + font-size: 75%; // 1 padding: 0 $euiSizeXS; .euiCodeBlock__pre, .euiCodeBlock__code { From 6ce14f489d3e50a94df9ce645391043777cfa3e7 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 10 Nov 2017 10:58:27 -0800 Subject: [PATCH 6/7] fix changelog --- CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de25dc55aef..54ed2a2927e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,8 @@ # [`master`](https://github.com/elastic/eui/tree/master) -- Changed the hover states of `EuiButtonEmpty` to look more like links. -- Added `inline` and `transparentBackground` props to `EuiCodeBlock`. Made light theme the default. +- Changed the hover states of `EuiButtonEmpty` to look more like links. [#135](https://github.com/elastic/eui/pull/135) +- Added `transparentBackground` prop to `EuiCodeBlock`. Made light theme the default. +`EuiCode` now just wraps `EuiCodeBlock` so you can do inline highlighting. [#138](https://github.com/elastic/eui/pull/138) # [`0.0.1`](https://github.com/elastic/eui/tree/v0.0.1) Initial Release From a18c9c5b2509a378e9185c9f59e913fb9441c0dc Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 10 Nov 2017 11:31:30 -0800 Subject: [PATCH 7/7] semantics and feedback --- src/components/code/__snapshots__/code.test.js.snap | 2 +- src/components/code/_code_block.scss | 1 + src/components/code/code.js | 5 ----- src/components/code/code_block.js | 4 ++-- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/code/__snapshots__/code.test.js.snap b/src/components/code/__snapshots__/code.test.js.snap index e071b0eab9f..829926c389b 100644 --- a/src/components/code/__snapshots__/code.test.js.snap +++ b/src/components/code/__snapshots__/code.test.js.snap @@ -8,7 +8,7 @@ exports[`EuiCode is rendered 1`] = ` - { @@ -17,8 +15,6 @@ export const EuiCode = ({ return ( @@ -30,5 +26,4 @@ export const EuiCode = ({ EuiCode.propTypes = { children: PropTypes.node, className: PropTypes.string, - transparentBackground: PropTypes.bool, }; diff --git a/src/components/code/code_block.js b/src/components/code/code_block.js index 9260b69a03d..40d2316a1f1 100644 --- a/src/components/code/code_block.js +++ b/src/components/code/code_block.js @@ -85,13 +85,13 @@ export class EuiCodeBlock extends Component { style={{ height: optionalOverflowHeight }} > - { this.code = ref; }} className={codeClasses} {...otherProps} > {children} - +     );