diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d4f265d8d3..9f20bda72d8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,16 @@ # [`master`](https://github.com/elastic/eui/tree/master) - Added Apache, Nginx, MySQL logos [(#270)](https://github.com/elastic/eui/pull/270) -- Fixed `` to pass the `event` argument to a ``'s `onClick` handler even when a panel is defined. [(#265)](https://github.com/elastic/eui/pull/265) - Added small version of `EuiCallOut` [(#269)](https://github.com/elastic/eui/pull/269) +**Bug fixes** + +- Fixed `` to pass the `event` argument to a ``'s `onClick` handler even when a panel is defined. [(#265)](https://github.com/elastic/eui/pull/265) + +**Breaking changes** + +- Removed `color` prop from ``. This component's highlighting now matches whichever theme is currently active. [(#259)](https://github.com/elastic/eui/pull/259) + # [`0.0.11`](https://github.com/elastic/eui/tree/v0.0.11) - Added `` component to allow for image sizing and zooms. [(#262)](https://github.com/elastic/eui/pull/262) diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js index 66fc64688e5..f13b75c7e9e 100644 --- a/src-docs/src/components/guide_section/guide_section.js +++ b/src-docs/src/components/guide_section/guide_section.js @@ -1,5 +1,5 @@ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { GuideSandboxChrome, @@ -119,7 +119,6 @@ export class GuideSection extends Component {
{source.code} @@ -144,9 +143,11 @@ export class GuideSection extends Component { } render() { + const chrome = this.renderChrome(); + return (
- {this.renderChrome()} + {chrome} {this.renderContent()}
); diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 4a827efd6e9..3f6404175e8 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -53,7 +53,6 @@ export const CodeExample = {

  • language sets the syntax highlighting for a specific language.
    • -
  • color accepts dark (default) or light.
  • paddingSize accepts “s” / “m” / “l” (default).
  • fontSize accepts “s” (default) / “m” / “l”.
  • overflowHeight accepts a number. By default it is not set.
    • diff --git a/src/components/code/__snapshots__/_code_block.test.js.snap b/src/components/code/__snapshots__/_code_block.test.js.snap index 349d682780e..8e0867adb39 100644 --- a/src/components/code/__snapshots__/_code_block.test.js.snap +++ b/src/components/code/__snapshots__/_code_block.test.js.snap @@ -2,7 +2,7 @@ exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`] = `
    +
    `; exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
    -
    -`; - -exports[`EuiCodeBlockImpl block renders with dark theme 1`] = ` -
    - 
    -    
-
    + +
    `; exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
    +
    `; exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1`] = ` `; -exports[`EuiCodeBlockImpl inline renders with dark theme 1`] = ` - - - -`; - exports[`EuiCodeBlockImpl inline renders with transparent background 1`] = `
    +
`; diff --git a/src/components/code/_code_block.js b/src/components/code/_code_block.js index d2c37f33c56..9fcbf67f758 100644 --- a/src/components/code/_code_block.js +++ b/src/components/code/_code_block.js @@ -3,15 +3,18 @@ import React, { } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; - +import FocusTrap from 'focus-trap-react'; import hljs from 'highlight.js'; -const colorToClassNameMap = { - light: 'euiCodeBlock--light', - dark: 'euiCodeBlock--dark', -}; +import { + EuiButtonIcon, +} from '../button'; -export const COLORS = Object.keys(colorToClassNameMap); +import { + EuiOverlayMask, +} from '../overlay_mask'; + +import { keyCodes } from '../../services'; const fontSizeToClassNameMap = { s: 'euiCodeBlock--fontSmall', @@ -37,8 +40,40 @@ export class EuiCodeBlockImpl extends Component { constructor(props) { super(props); + + this.state = { + isFullScreen: false, + }; + } + + highlight = () => { + if (this.props.language) { + hljs.highlightBlock(this.code); + + if (this.codeFullScreen) { + hljs.highlightBlock(this.codeFullScreen); + } + } } + onKeyDown = event => { + if (event.keyCode === keyCodes.ESCAPE) { + this.closeFullScreen(); + } + }; + + toggleFullScreen = () => { + this.setState(prevState => ({ + isFullScreen: !prevState.isFullScreen, + })); + }; + + closeFullScreen = () => { + this.setState({ + isFullScreen: false, + }); + }; + componentDidMount() { this.highlight(); } @@ -52,7 +87,6 @@ export class EuiCodeBlockImpl extends Component { inline, children, className, - color, fontSize, language, overflowHeight, @@ -63,7 +97,6 @@ export class EuiCodeBlockImpl extends Component { const classes = classNames( 'euiCodeBlock', - colorToClassNameMap[color], fontSizeToClassNameMap[fontSize], paddingSizeToClassNameMap[paddingSize], { @@ -104,26 +137,72 @@ export class EuiCodeBlockImpl extends Component { ); } + let fullScreenButton; + + if (!inline) { + fullScreenButton = ( + + ); + } + + let fullScreenDisplay; + + if (this.state.isFullScreen) { + const fullScreenClasses = classNames(classes, 'euiCodeBlock-isFullScreen'); + + fullScreenDisplay = ( + this.codeFullScreen, + }} + > + +
+ 
+                 { this.codeFullScreen = ref; }}
+                  className={codeClasses}
+                  tabIndex={0}
+                  onKeyDown={this.onKeyDown}
+                >
+                  {children}
+                
+
+ + {fullScreenButton} +
+ + + ); + } + return ( 
           {codeSnippet}
+ + {/* + If the below fullScreen code renders, it actually attaches to the body because of + EuiOverlayMask's React portal usage. + */} + {fullScreenButton} + {fullScreenDisplay}
); } - - highlight() { - if (this.props.language) { - hljs.highlightBlock(this.code); - } - } } EuiCodeBlockImpl.propTypes = { children: PropTypes.node, className: PropTypes.string, - color: PropTypes.string, paddingSize: PropTypes.oneOf(PADDING_SIZES), fontSize: PropTypes.oneOf(FONT_SIZES), transparentBackground: PropTypes.bool, @@ -131,7 +210,6 @@ EuiCodeBlockImpl.propTypes = { }; EuiCodeBlockImpl.defaultProps = { - color: 'light', transparentBackground: false, paddingSize: 'l', fontSize: 's', diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss index a941371f674..16369874ac6 100644 --- a/src/components/code/_code_block.scss +++ b/src/components/code/_code_block.scss @@ -1,8 +1,13 @@ .euiCodeBlock { display: block; - overflow: auto; + position: relative; + background: $euiCodeBlockBackgroundColor; + color: $euiCodeBlockColor; + position: relative; .euiCodeBlock__pre { + height: 100%; + overflow: auto; display: block; white-space: pre-wrap; } @@ -14,6 +19,24 @@ font-weight: $euiFontWeightRegular; } + .euiCodeBlock__fullScreenButton { + position: absolute; + top: $euiSizeM; + right: $euiSizeL; + } + + &.euiCodeBlock-isFullScreen { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + + .euiCodeBlock__pre { + padding: $euiSizeXL !important; + } + } + &.euiCodeBlock--fontSmall { font-size: $euiFontSizeXS; } @@ -27,15 +50,21 @@ } &.euiCodeBlock--paddingSmall { - padding: $euiSizeS; + .euiCodeBlock__pre { + padding: $euiSizeS; + } } &.euiCodeBlock--paddingMedium { - padding: $euiSize; + .euiCodeBlock__pre { + padding: $euiSize; + } } &.euiCodeBlock--paddingLarge { - padding: $euiSizeL; + .euiCodeBlock__pre { + padding: $euiSizeL; + } } /** @@ -47,9 +76,12 @@ white-space: pre; color: $euiTextColor; font-size: 75%; // 1 - padding: 0 $euiSizeXS; background: $euiColorLightestShade; + .euiCodeBlock__pre { + padding: 0 $euiSizeXS; + } + .euiCodeBlock__code { display: inline; white-space: normal; @@ -59,4 +91,118 @@ &.euiCodeBlock--transparentBackground { background: transparent; } + + .hljs > *::selection { + background-color: $euiCodeBlockSelectedBackgroundColor; + } + + .hljs-comment, + .hljs-quote { + color: $euiCodeBlockCommentColor; + font-style: italic; + } + + .hljs-selector-tag { + color: $euiCodeBlockSelectorTagColor; + font-weight: bold; + } + + .hljs-string, + .hljs-subst, + .hljs-doctag { + color: $euiCodeBlockStringColor; + } + + .hljs-number, + .hljs-literal, + .hljs-regexp, + .hljs-variable, + .hljs-template-variable, + .hljs-tag .hljs-attr { + color: $euiCodeBlockNumberColor; + } + + .hljs-keyword { + color: $euiCodeBlockKeywordColor; + font-weight: bold; + } + + .hljs-function > .hljs-title { + color: $euiCodeBlockFunctionTitleColor; + } + + .hljs-tag { + color: $euiCodeBlockTagColor; + } + + .hljs-name { + color: euiCodeBlockNameColor; + } + + .hljs-type, + .hljs-class .hljs-title { + color: $euiCodeBlockTypeColor; + } + + .hljs-attribute { + color: $euiCodeBlockAttributeColor; + } + + .hljs-symbol, + .hljs-bullet, + .hljs-built_in, + .hljs-builtin-name, + .hljs-link { + color: $euiCodeBlockSymbolColor; + } + + .hljs-params { + color: $euiCodeBlockParamsColor; + } + + .hljs-meta { + color: $euiCodeBlockMetaColor; + } + + .hljs-title { + color: $euiCodeBlockTitleColor; + } + + .hljs-section { + color: $euiCodeBlockSectionColor; + } + + .hljs-addition { + background-color: $euiCodeBlockAdditionBackgroundColor; + color: $euiCodeBlockAdditionColor; + display: inline-block; + width: 100%; + } + + .hljs-deletion { + background-color: $euiCodeBlockDeletionBackgroundColor; + color: $euiCodeBlockDeletionColor; + display: inline-block; + width: 100%; + } + + .hljs-selector-class { + color: $euiCodeBlockSelectorClassColor; + } + + .hljs-selector-id { + color: $euiCodeBlockSelectorIdColor; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: bold; + } + + .hljs-link { + text-decoration: underline; + } } diff --git a/src/components/code/_code_block.test.js b/src/components/code/_code_block.test.js index c9225167775..f736c862311 100644 --- a/src/components/code/_code_block.test.js +++ b/src/components/code/_code_block.test.js @@ -34,14 +34,6 @@ describe('EuiCodeBlockImpl', () => { expect(component).toMatchSnapshot(); }); - - test('renders with dark theme', () => { - const component = render( - - ); - - expect(component).toMatchSnapshot(); - }); }); describe('block', () => { @@ -70,13 +62,5 @@ describe('EuiCodeBlockImpl', () => { expect(component).toMatchSnapshot(); }); - - test('renders with dark theme', () => { - const component = render( - - ); - - expect(component).toMatchSnapshot(); - }); }); }); diff --git a/src/components/code/_code_block_dark.scss b/src/components/code/_code_block_dark.scss deleted file mode 100644 index f63f376581c..00000000000 --- a/src/components/code/_code_block_dark.scss +++ /dev/null @@ -1,108 +0,0 @@ -.euiCodeBlock--dark { - background: #2B2B2D; - color: #CDD3D8; - - .hljs > *::selection { - background-color: #3e4451; - } - - .hljs-comment { - color: #656565; - font-style: italic; - } - - .hljs-selector-tag { - color: #C792EA; - } - - .hljs-string, - .hljs-subst { - color: #C3E88D; - } - - .hljs-number, - .hljs-regexp, - .hljs-variable, - .hljs-template-variable { - color: #F77669; - } - - .hljs-keyword { - color: #C792EA; - } - .hljs-function > .hljs-title { - color: #75A5FF; - } - .hljs-tag { - color: #abb2bf; - } - .hljs-name { - color: #e06c75; - } - .hljs-type { - color: #da4939; - } - - .hljs-attribute { - color: #80CBBF; - } - - .hljs-symbol, - .hljs-bullet, - .hljs-built_in, - .hljs-builtin-name, - .hljs-link { - color: #C792EA; - } - - .hljs-params { - color: #EEFFF7; - } - - - .hljs-meta { - color: #75A5FF; - } - - .hljs-title { - color: #75A5FF; - } - - .hljs-section { - color: #ffc66d; - } - - .hljs-addition { - background-color: #144212; - color: #e6e1dc; - display: inline-block; - width: 100%; - } - - .hljs-deletion { - background-color: #600; - color: #e6e1dc; - display: inline-block; - width: 100%; - } - - .hljs-selector-class { - color: #FFCB68; - } - - .hljs-selector-id { - color: #F77669; - } - - .hljs-emphasis { - font-style: italic; - } - - .hljs-strong { - font-weight: bold; - } - - .hljs-link { - text-decoration: underline; - } -} diff --git a/src/components/code/_code_block_light.scss b/src/components/code/_code_block_light.scss deleted file mode 100644 index e578c8f60a9..00000000000 --- a/src/components/code/_code_block_light.scss +++ /dev/null @@ -1,91 +0,0 @@ - -.euiCodeBlock--light { - background: #F5F5F5; - color: #3F3F3F; - - .hljs-comment, - .hljs-quote { - color: #998; - font-style: italic; - } - - .hljs-keyword, - .hljs-selector-tag, - .hljs-subst { - color: #333; - font-weight: bold; - } - - .hljs-number, - .hljs-literal, - .hljs-variable, - .hljs-template-variable, - .hljs-tag .hljs-attr { - color: #00A69B; - } - - .hljs-string, - .hljs-doctag { - color: #DD0A73; - } - - .hljs-title, - .hljs-section, - .hljs-selector-id { - color: #900; - font-weight: bold; - } - - .hljs-subst { - font-weight: normal; - } - - .hljs-type, - .hljs-class .hljs-title { - color: #0079a5; - font-weight: bold; - } - - .hljs-tag, - .hljs-name, - .hljs-attribute { - color: #0079a5; - font-weight: normal; - } - - .hljs-regexp, - .hljs-link { - color: #009926; - } - - .hljs-symbol, - .hljs-bullet { - color: #990073; - } - - .hljs-built_in, - .hljs-builtin-name { - color: #0086b3; - } - - .hljs-meta { - color: #999; - font-weight: bold; - } - - .hljs-deletion { - background: #fdd; - } - - .hljs-addition { - background: #dfd; - } - - .hljs-emphasis { - font-style: italic; - } - - .hljs-strong { - font-weight: bold; - } -} diff --git a/src/components/code/_index.scss b/src/components/code/_index.scss index e3793b9f58c..f984a214adf 100644 --- a/src/components/code/_index.scss +++ b/src/components/code/_index.scss @@ -1,3 +1 @@ @import 'code_block'; -@import 'code_block_dark'; -@import 'code_block_light'; diff --git a/src/components/image/image.js b/src/components/image/image.js index cb2a110e100..e997ccad24a 100644 --- a/src/components/image/image.js +++ b/src/components/image/image.js @@ -3,7 +3,6 @@ import React, { } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { keyCodes } from '../../services'; import FocusTrap from 'focus-trap-react'; import { @@ -11,6 +10,8 @@ import { EuiIcon, } from '../../components'; +import { keyCodes } from '../../services'; + const sizeToClassNameMap = { s: 'euiImage--small', m: 'euiImage--medium', @@ -38,27 +39,27 @@ export class EuiImage extends Component { super(props); this.state = { - isImageFullScreen: false, + isFullScreen: false, }; - - this.toggleImageFullScreen = this.toggleImageFullScreen.bind(this); } onKeyDown = event => { if (event.keyCode === keyCodes.ESCAPE) { - this.toggleImageFullScreen(); + this.closeFullScreen(); } }; - // Only toggle the state if allowed by allowFullScreen prop. - toggleImageFullScreen() { - const currentState = this.state.isImageFullScreen; - if (this.props.allowFullScreen) { - this.setState({ - isImageFullScreen: !currentState, - }); - } - } + closeFullScreen = () => { + this.setState({ + isFullScreen: false, + }); + }; + + openFullScreen = () => { + this.setState({ + isFullScreen: true, + }); + }; render() { const { @@ -93,25 +94,26 @@ export class EuiImage extends Component { } let optionalIcon; + if (allowFullScreen) { optionalIcon = ; } - let FullScreenDisplay; + let fullScreenDisplay; - if (this.state.isImageFullScreen) { - FullScreenDisplay = ( + if (this.state.isFullScreen) { + fullScreenDisplay = ( this.figure, }} > - +
{ this.figure = node; }} className="euiImageFullScreen" - onClick={this.toggleImageFullScreen} + onClick={this.closeFullScreen} tabIndex={0} onKeyDown={this.onKeyDown} > @@ -126,18 +128,18 @@ export class EuiImage extends Component { return (
{alt} {optionalCaption} {/* - If the below FullScreen image renders, it actually attaches to the body because of + If the below fullScreen image renders, it actually attaches to the body because of EuiOverlayMask's React portal usage. */} {optionalIcon} - {FullScreenDisplay} + {fullScreenDisplay}
); } diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index 4efe236c7f2..be5cf234072 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -54,3 +54,32 @@ $euiTextColor: $euiColorDarkestShade !default; $euiTitleColor: $euiColorFullShade !default; $euiLinkColor: $euiColorPrimary !default; $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default; + +// Code + +$euiCodeBlockBackgroundColor: $euiColorLightestShade !default; +$euiCodeBlockColor: $euiTextColor !default; +$euiCodeBlockSelectedBackgroundColor: inherit !default; +$euiCodeBlockCommentColor: #998 !default; +$euiCodeBlockSelectorTagColor: inherit !default; +$euiCodeBlockStringColor: #DD0A73 !default; +$euiCodeBlockNumberColor: #00A69B !default; +$euiCodeBlockKeywordColor: #333 !default; +$euiCodeBlockFunctionTitleColor: inherit !default; +$euiCodeBlockTagColor: #0079a5 !default; +$euiCodeBlockNameColor: inherit !default; +$euiCodeBlockTypeColor: #0079a5 !default; +$euiCodeBlockAttributeColor: inherit !default; +$euiCodeBlockSymbolColor: #990073 !default; +$euiCodeBlockParamsColor: inherit !default; +$euiCodeBlockMetaColor: #999 !default; +$euiCodeBlockTitleColor: #900 !default; +$euiCodeBlockRegexpColor: #009926 !default; +$euiCodeBlockBuiltInColor: #0086b3 !default; +$euiCodeBlockSectionColor: #ffc66d !default; +$euiCodeBlockAdditionBackgroundColor: #dfd !default; +$euiCodeBlockAdditionColor: inherit !default; +$euiCodeBlockDeletionBackgroundColor: #fdd !default; +$euiCodeBlockDeletionColor: inherit !default; +$euiCodeBlockSelectorClassColor: inherit !default; +$euiCodeBlockSelectorIdColor: inherit !default; diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index 02838c97630..10db048cab6 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -12,3 +12,30 @@ $euiColorDanger: #bf4d4d; $euiTextColor: #DDD; $euiFocusBackgroundColor: #191919; + +// Code + +$euiCodeBlockBackgroundColor: #2B2B2D; +$euiCodeBlockColor: #CDD3D8; +$euiCodeBlockSelectedBackgroundColor: #3e4451; +$euiCodeBlockCommentColor: #656565; +$euiCodeBlockSelectorTagColor: #C792EA; +$euiCodeBlockStringColor: #C3E88D; +$euiCodeBlockNumberColor: #F77669; +$euiCodeBlockKeywordColor: #C792EA; +$euiCodeBlockFunctionTitleColor: #75A5FF; +$euiCodeBlockTagColor: #abb2bf; +$euiCodeBlockNameColor: #e06c75; +$euiCodeBlockTypeColor: #da4939; +$euiCodeBlockAttributeColor: #80CBBF; +$euiCodeBlockSymbolColor: #C792EA; +$euiCodeBlockParamsColor: #EEFFF7; +$euiCodeBlockMetaColor: #75A5FF; +$euiCodeBlockTitleColor: #75A5FF; +$euiCodeBlockSectionColor: #ffc66d; +$euiCodeBlockAdditionBackgroundColor: #144212; +$euiCodeBlockAdditionColor: #e6e1dc; +$euiCodeBlockDeletionBackgroundColor: #600; +$euiCodeBlockDeletionColor: #e6e1dc; +$euiCodeBlockSelectorClassColor: #FFCB68; +$euiCodeBlockSelectorIdColor: #F77669; diff --git a/src/themes/k6/k6_colors_dark.scss b/src/themes/k6/k6_colors_dark.scss index 02838c97630..10db048cab6 100644 --- a/src/themes/k6/k6_colors_dark.scss +++ b/src/themes/k6/k6_colors_dark.scss @@ -12,3 +12,30 @@ $euiColorDanger: #bf4d4d; $euiTextColor: #DDD; $euiFocusBackgroundColor: #191919; + +// Code + +$euiCodeBlockBackgroundColor: #2B2B2D; +$euiCodeBlockColor: #CDD3D8; +$euiCodeBlockSelectedBackgroundColor: #3e4451; +$euiCodeBlockCommentColor: #656565; +$euiCodeBlockSelectorTagColor: #C792EA; +$euiCodeBlockStringColor: #C3E88D; +$euiCodeBlockNumberColor: #F77669; +$euiCodeBlockKeywordColor: #C792EA; +$euiCodeBlockFunctionTitleColor: #75A5FF; +$euiCodeBlockTagColor: #abb2bf; +$euiCodeBlockNameColor: #e06c75; +$euiCodeBlockTypeColor: #da4939; +$euiCodeBlockAttributeColor: #80CBBF; +$euiCodeBlockSymbolColor: #C792EA; +$euiCodeBlockParamsColor: #EEFFF7; +$euiCodeBlockMetaColor: #75A5FF; +$euiCodeBlockTitleColor: #75A5FF; +$euiCodeBlockSectionColor: #ffc66d; +$euiCodeBlockAdditionBackgroundColor: #144212; +$euiCodeBlockAdditionColor: #e6e1dc; +$euiCodeBlockDeletionBackgroundColor: #600; +$euiCodeBlockDeletionColor: #e6e1dc; +$euiCodeBlockSelectorClassColor: #FFCB68; +$euiCodeBlockSelectorIdColor: #F77669;