Merge branch 'master' into keyCode-deprecated

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Passed `getSelectedOptionForSearchValue` to `EuiComboBoxOptionsList` as prop ([#3501](https://github.com/elastic/eui/pull/3501))
 - Added `appendIconComponentCache` function to allow manual pre-emptive loading of source elements into the `EuiIcon` cache ([#3481](https://github.com/elastic/eui/pull/3481))
 - Added `initialSelected` to `EuiTableSelectionType` properties to set initial selected checkboxes for `EuiBasicTable` ([#3418](https://github.com/elastic/eui/pull/3418))
 - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
@@ -9,21 +10,30 @@
 
 **Bug Fixes**
 
+- Fixed issue where multiple `EuiToolTip` components could be visible when element was focused ([#3335](https://github.com/elastic/eui/pull/3335))
 - Fixed `EuiSuperSelect` not rendering full width when `isOpen` is `true` ([#3495](https://github.com/elastic/eui/pull/3495))
 - Fixed `EuiBasicTable` shows no items if all items of last page is deleted  ([#3422](https://github.com/elastic/eui/pull/3422))
 - Fixed TypeScript module name in generated `eui_charts_theme.d.ts` file  ([#3492](https://github.com/elastic/eui/pull/3492))
+- Fixed code highlight color contrast in `EuiCodeBlock` ([#3309](https://github.com/elastic/eui/pull/3309))
 
 **Deprecations**
 
 - Added a deprecation notice for `EuiNavDrawer` family of components. Advise usage of `EuiCollapsibleNav` instead ([#3487](https://github.com/elastic/eui/pull/3487))
 
+**Breaking changes**
+
+- Replaced all usages of [`KeyboardEvent.keyCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) (deprecated) with [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key). From `@elastic/eui/lib/services`, `keyCodes` has been replaced with `keys`, as has `cascadingMenuKeyCodes`->`cascadingMenuKeys`, and `comboBoxKeyCodes`->`comboBoxKeys`.  The implementation of all of those exports (as well as `accessibleClickKeys`) all now use `KeyboardEvent.key` values. ([#3517](https://github.com/elastic/eui/pull/3517))
+
 **Notes**
 
 - Removed `src-framer` files from the repository ([#3487](https://github.com/elastic/eui/pull/3487))
 
-**Breaking changes**
+**Theme: Amsterdam**
 
-- Replaced all usages of [`KeyboardEvent.keyCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) (deprecated) with [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key). From `@elastic/eui/lib/services`, `keyCodes` has been replaced with `keys`, as has `cascadingMenuKeyCodes`->`cascadingMenuKeys`, and `comboBoxKeyCodes`->`comboBoxKeys`.  The implementation of all of those exports (as well as `accessibleClickKeys`) all now use `KeyboardEvent.key` values. ([#3517](https://github.com/elastic/eui/pull/3517))
+- Removed borders `EuiModal` ([#3515](https://github.com/elastic/eui/pull/3515))
+- Improve `EuiOverlayMask` colors ([#3515](https://github.com/elastic/eui/pull/3515))
+- Updated shadow styles to improve smoothness, use black as the base color, and deprecated `opacity` value of shadow mixins ([#3428](https://github.com/elastic/eui/pull/3428))
+- Removed borders from `EuiFlyout` and `EuiPopover` ([#3477](https://github.com/elastic/eui/pull/3477))
 
 ## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0)
 
@@ -142,6 +152,7 @@
 
 - Fixed `EuiProgress` `max` property to allow `undefined` ([#3198](https://github.com/elastic/eui/pull/3198))
 
+
 ## [`22.5.0`](https://github.com/elastic/eui/tree/v22.5.0)
 
 - Added `forceState` prop to control `EuiAccordion` state from outside ([#3240](https://github.com/elastic/eui/pull/3240))

src-docs/src/views/code/code_block.js

@@ -2,13 +2,11 @@ import React from 'react';
 
 import { EuiCodeBlock, EuiSpacer } from '../../../../src/components';
 
-const htmlCode = `<!--I'm an example of HTML-->
-<div>
-  <h1>Title</h1>
-</div>
-`;
+const htmlCode = require('!!raw-loader!./code_examples/example.html');
 
-const jsCode = require('!!raw-loader!./code_block');
+const jsCode = require('!!raw-loader!./code_examples/example.js');
+
+const sqlCode = require('!!raw-loader!./code_examples/example.sql');
 
 export default () => (
   <div>
@@ -20,12 +18,20 @@ export default () => (
       language="js"
       fontSize="m"
       paddingSize="m"
-      color="dark"
       overflowHeight={300}
       isCopyable>
       {jsCode}
     </EuiCodeBlock>
 
     <EuiSpacer />
+
+    <EuiCodeBlock
+      language="sql"
+      fontSize="m"
+      paddingSize="m"
+      overflowHeight={300}
+      isCopyable>
+      {sqlCode}
+    </EuiCodeBlock>
   </div>
 );

src-docs/src/views/code/code_examples/example.html

@@ -0,0 +1,5 @@
+<!--I'm an example of HTML-->
+<div>
+  <h1>My First Heading</h1>
+  <p>My first paragraph.</p>
+</div>

src-docs/src/views/code/code_examples/example.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => (
+  <div className="MyComponent">
+    <h1>Hello world!</h1>
+  </div>
+);

src-docs/src/views/code/code_examples/example.sql

@@ -0,0 +1,12 @@
+CREATE TABLE "topic" (
+    "id" serial NOT NULL PRIMARY KEY,
+    "forum_id" integer NOT NULL,
+    "subject" varchar(255) NOT NULL
+);
+ALTER TABLE "topic"
+ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
+REFERENCES "forum" ("id");
+
+-- Initials
+insert into "topic" ("forum_id", "subject")
+values (2, 'D''artagnian');

src/components/code/_code_block.scss

@@ -179,7 +179,6 @@
 
   .hljs-keyword {
     color: $euiCodeBlockKeywordColor;
-    font-weight: bold;
   }
 
   .hljs-function > .hljs-title {
@@ -227,18 +226,18 @@
     color: $euiCodeBlockSectionColor;
   }
 
+  .hljs-addition,
+  .hljs-deletion {
+    padding-left: $euiSizeXS;
+    margin-left: -$euiSizeXS;
+  }
+
   .hljs-addition {
-    background-color: $euiCodeBlockAdditionBackgroundColor;
-    color: $euiCodeBlockAdditionColor;
-    display: inline-block;
-    width: 100%;
+    box-shadow: -$euiSizeXS 0 $euiCodeBlockAdditionColor;
   }
 
   .hljs-deletion {
-    background-color: $euiCodeBlockDeletionBackgroundColor;
-    color: $euiCodeBlockDeletionColor;
-    display: inline-block;
-    width: 100%;
+    box-shadow: -$euiSizeXS 0 $euiCodeBlockDeletionColor;
   }
 
   .hljs-selector-class {

src/components/collapsible_nav/_collapsible_nav.scss

@@ -1,8 +1,10 @@
 // Extends euiFlyout
-@use '../flyout/flyout';
+@import '../flyout/variables';
+@import '../flyout/mixins';
 
 .euiCollapsibleNav {
-  @extend %eui-flyout;
+  @include euiFlyout;
+  border-left: none;
   right: auto;
   left: 0;
   width: $euiCollapsibleNavWidth;
@@ -25,7 +27,7 @@
 
   &,
   &:focus {
-    // Override default `EuiButtonEmpty` :focus background to ensure better contrast 
+    // Override default `EuiButtonEmpty` :focus background to ensure better contrast
     background: $euiColorEmptyShade;
   }
 }

src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -451,6 +451,7 @@ exports[`props singleSelection prepend and append is rendered 1`] = `
       areAllOptionsSelected={false}
       data-test-subj=""
       fullWidth={false}
+      getSelectedOptionForSearchValue={[Function]}
       listRef={[Function]}
       matchingOptions={
         Array [
@@ -584,6 +585,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
       areAllOptionsSelected={false}
       data-test-subj=""
       fullWidth={false}
+      getSelectedOptionForSearchValue={[Function]}
       listRef={[Function]}
       matchingOptions={
         Array [

src/components/combo_box/combo_box.tsx

@@ -988,6 +988,7 @@ export class EuiComboBox<T> extends Component<
             updatePosition={this.updatePosition}
             width={width}
             delimiter={delimiter}
+            getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
           />
         </EuiPortal>
       );

src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -67,7 +67,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps &
     getSelectedOptionForSearchValue?: (
       searchValue: string,
       selectedOptions: any[]
-    ) => EuiComboBoxOptionOption<T>;
+    ) => EuiComboBoxOptionOption<T> | undefined;
     isLoading?: boolean;
     listRef: RefCallback<HTMLDivElement>;
     matchingOptions: Array<EuiComboBoxOptionOption<T>>;

src/components/flyout/_flyout.scss

@@ -1,30 +1,5 @@
-@import '../header/variables';
-
-%eui-flyout {
-  border-left: $euiBorderThin;
-  // The mixin augments the above
-  // sass-lint:disable mixins-before-declarations
-  @include euiBottomShadowLarge($adjustBorders: true);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-  z-index: $euiZModal;
-  background: $euiColorEmptyShade;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  // When the EuiHeader is fixed, we need to account for it in the position of the flyout
-  .euiBody--headerIsFixed & {
-    top: $euiHeaderHeightCompensation;
-    height: calc(100% - #{$euiHeaderHeightCompensation});
-  }
-}
-
 .euiFlyout {
-  @extend %eui-flyout;
+  @include euiFlyout;
   animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
 }
 

src/components/flyout/_index.scss

@@ -1,3 +1,6 @@
+@import 'variables';
+@import 'mixins';
+
 @import 'flyout';
 @import 'flyout_body';
 @import 'flyout_footer';

src/components/flyout/_mixins.scss

@@ -0,0 +1,24 @@
+@import '../header/variables';
+
+@mixin euiFlyout {
+  border-left: $euiFlyoutBorder;
+  // The mixin augments the above
+  // sass-lint:disable mixins-before-declarations
+  @include euiBottomShadowLarge($adjustBorders: true);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  z-index: $euiZModal;
+  background: $euiColorEmptyShade;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  // When the EuiHeader is fixed, we need to account for it in the position of the flyout
+  .euiBody--headerIsFixed & {
+    top: $euiHeaderHeightCompensation;
+    height: calc(100% - #{$euiHeaderHeightCompensation});
+  }
+}

src/components/flyout/_variables.scss

@@ -0,0 +1 @@
+$euiFlyoutBorder: $euiBorderThin !default;

src/components/tool_tip/tool_tip.tsx

@@ -32,6 +32,8 @@ import { EuiPortal } from '../portal';
 import { EuiToolTipPopover } from './tool_tip_popover';
 import { findPopoverPosition, htmlIdGenerator } from '../../services';
 
+import { TAB } from '../../services/key_codes';
+
 import { EuiResizeObserver } from '../observer/resize_observer';
 
 export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
@@ -115,7 +117,6 @@ export interface Props {
 
 interface State {
   visible: boolean;
-  hasFocus: boolean;
   calculatedPosition: ToolTipPositions;
   toolTipStyles: ToolTipStyles;
   arrowStyles: undefined | { left: number; top: number };
@@ -129,7 +130,6 @@ export class EuiToolTip extends Component<Props, State> {
 
   state: State = {
     visible: false,
-    hasFocus: false,
     calculatedPosition: this.props.position,
     toolTipStyles: DEFAULT_TOOLTIP_STYLES,
     arrowStyles: undefined,
@@ -147,6 +147,7 @@ export class EuiToolTip extends Component<Props, State> {
 
   componentWillUnmount() {
     this._isMounted = false;
+    window.removeEventListener('mousemove', this.hasFocusMouseMoveListener);
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
@@ -237,18 +238,15 @@ export class EuiToolTip extends Component<Props, State> {
     }
   };
 
-  onFocus = () => {
-    this.setState({
-      hasFocus: true,
-    });
-    this.showToolTip();
+  hasFocusMouseMoveListener = () => {
+    this.hideToolTip();
+    window.removeEventListener('mousemove', this.hasFocusMouseMoveListener);
   };
 
-  onBlur = () => {
-    this.setState({
-      hasFocus: false,
-    });
-    this.hideToolTip();
+  onKeyUp = (e: { keyCode: number }) => {
+    if (e.keyCode === TAB) {
+      window.addEventListener('mousemove', this.hasFocusMouseMoveListener);
+    }
   };
 
   onMouseOut = (e: ReactMouseEvent<HTMLSpanElement, MouseEvent>) => {
@@ -258,9 +256,7 @@ export class EuiToolTip extends Component<Props, State> {
       this.anchor === e.relatedTarget ||
       (this.anchor != null && !this.anchor.contains(e.relatedTarget as Node))
     ) {
-      if (!this.state.hasFocus) {
-        this.hideToolTip();
-      }
+      this.hideToolTip();
     }
 
     if (this.props.onMouseOut) {
@@ -318,7 +314,8 @@ export class EuiToolTip extends Component<Props, State> {
         ref={anchor => (this.anchor = anchor)}
         className={anchorClasses}
         onMouseOver={this.showToolTip}
-        onMouseOut={this.onMouseOut}>
+        onMouseOut={this.onMouseOut}
+        onKeyUp={e => this.onKeyUp(e)}>
         {/**
          * Re: jsx-a11y/mouse-events-have-key-events
          * We apply onFocus, onBlur, etc to the children element because that's the element

src/global_styling/variables/_colors.scss

@@ -118,30 +118,27 @@ $euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9')
 $euiColorChartLines: shade($euiColorLightestShade, 3%) !default;
 $euiColorChartBand: $euiColorLightestShade !default;
 
+
 // Code
 $euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
-$euiCodeBlockColor: $euiTextColor !default;
+$euiCodeBlockColor: makeHighContrastColor($euiTextColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectedBackgroundColor: inherit !default;
-$euiCodeBlockCommentColor: #998 !default;
+$euiCodeBlockCommentColor: makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectorTagColor: inherit !default;
-$euiCodeBlockStringColor: #DD0A73 !default;
-$euiCodeBlockNumberColor: #00A69B !default;
-$euiCodeBlockKeywordColor: #333 !default;
+$euiCodeBlockStringColor: makeHighContrastColor($euiColorVis2, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockTagColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockNameColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockNumberColor: makeHighContrastColor($euiColorVis0, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockKeywordColor: makeHighContrastColor($euiColorVis3, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockFunctionTitleColor: inherit !default;
-$euiCodeBlockTagColor: #0079A5 !default;
-$euiCodeBlockNameColor: inherit !default;
-$euiCodeBlockTypeColor: #0079A5 !default;
+$euiCodeBlockTypeColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockAttributeColor: inherit !default;
-$euiCodeBlockSymbolColor: #990073 !default;
+$euiCodeBlockSymbolColor: makeHighContrastColor($euiColorVis9, $euiCodeBlockBackgroundColor) !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;
+$euiCodeBlockMetaColor:  makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockTitleColor: makeHighContrastColor($euiColorVis7, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockSectionColor: makeHighContrastColor($euiColorVis9, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockAdditionColor: makeHighContrastColor($euiColorVis0, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockDeletionColor: makeHighContrastColor($euiColorDanger, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectorClassColor: inherit !default;
 $euiCodeBlockSelectorIdColor: inherit !default;