diff --git a/package.json b/package.json index 734d3c5576cf..57d8a101b347 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@babel/register": "^7.5.5", "@elastic/charts": "^10.2.0", "@elastic/datemath": "5.0.2", - "@elastic/eui": "13.3.0", + "@elastic/eui": "13.6.0", "@elastic/filesaver": "1.1.2", "@elastic/good": "8.1.1-kibana2", "@elastic/numeral": "2.3.3", diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx index 668bce522bf4..2fa6206f0ea0 100644 --- a/src/core/public/chrome/chrome_service.tsx +++ b/src/core/public/chrome/chrome_service.tsx @@ -33,7 +33,7 @@ import { HttpStart } from '../http'; import { ChromeNavLinks, NavLinksService } from './nav_links'; import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed'; import { NavControlsService, ChromeNavControls } from './nav_controls'; -import { LoadingIndicator, Header } from './ui'; +import { LoadingIndicator, HeaderWrapper as Header } from './ui'; import { DocLinksStart } from '../doc_links'; export { ChromeNavControls, ChromeRecentlyAccessed }; @@ -131,27 +131,25 @@ export class ChromeService { -
-
(FORCE_HIDDEN ? false : visibility)), - takeUntil(this.stop$) - )} - kibanaVersion={injectedMetadata.getKibanaVersion()} - navLinks$={navLinks.getNavLinks$()} - recentlyAccessed$={recentlyAccessed.get$()} - navControlsLeft$={navControls.getLeft$()} - navControlsRight$={navControls.getRight$()} - /> -
+
(FORCE_HIDDEN ? false : visibility)), + takeUntil(this.stop$) + )} + kibanaVersion={injectedMetadata.getKibanaVersion()} + navLinks$={navLinks.getNavLinks$()} + recentlyAccessed$={recentlyAccessed.get$()} + navControlsLeft$={navControls.getLeft$()} + navControlsRight$={navControls.getRight$()} + /> ), diff --git a/src/core/public/chrome/ui/header/_index.scss b/src/core/public/chrome/ui/header/_index.scss index 2b841eca6e01..f19728a52dd7 100644 --- a/src/core/public/chrome/ui/header/_index.scss +++ b/src/core/public/chrome/ui/header/_index.scss @@ -1,13 +1,14 @@ @import '@elastic/eui/src/components/header/variables'; +@import '@elastic/eui/src/components/nav_drawer/variables'; -.header-global-wrapper { +.chrHeaderWrapper { width: 100%; position: fixed; top: 0; z-index: 10; } -.header-global-wrapper + .app-wrapper:not(.hidden-chrome) { +.chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) { top: $euiHeaderChildSize; left: $euiHeaderChildSize; @@ -19,13 +20,6 @@ } } -// Mobile header is smaller -@include euiBreakpoint('xs', 's') { - .header-global-wrapper + .app-wrapper:not(.hidden-chrome) { - left: 0; - } -} - .chrHeaderHelpMenu__version { text-transform: none; } @@ -34,3 +28,20 @@ align-self: center; margin-right: $euiSize; } + +// Mobile header is smaller +@include euiBreakpoint('xs', 's') { + .chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) { + left: 0; + } +} + +@include euiBreakpoint('xl') { + .chrHeaderWrapper--navIsLocked { + ~ .app-wrapper:not(.hidden-chrome) { + // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS) + left: $euiNavDrawerWidthExpanded !important; // sass-lint:disable-line no-important + transition: left $euiAnimSpeedFast $euiAnimSlightResistance; + } + } +} diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index 04c1a1182487..4dc64c57fa24 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -163,6 +163,8 @@ interface Props { navControlsRight$: Rx.Observable; intl: InjectedIntl; basePath: HttpStart['basePath']; + isLocked?: boolean; + onIsLockedUpdate?: (isLocked: boolean) => void; } interface State { @@ -266,8 +268,10 @@ class HeaderUI extends Component { breadcrumbs$, helpExtension$, intl, + isLocked, kibanaDocLink, kibanaVersion, + onIsLockedUpdate, } = this.props; const { appTitle, @@ -355,7 +359,12 @@ class HeaderUI extends Component { - + diff --git a/src/core/public/chrome/ui/header/header_wrapper.tsx b/src/core/public/chrome/ui/header/header_wrapper.tsx new file mode 100644 index 000000000000..5306faa20958 --- /dev/null +++ b/src/core/public/chrome/ui/header/header_wrapper.tsx @@ -0,0 +1,45 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FunctionComponent, useState } from 'react'; +import classnames from 'classnames'; +import { Header, HeaderProps } from './'; + +const IS_LOCKED_KEY = 'core.chrome.isLocked'; + +export const HeaderWrapper: FunctionComponent = props => { + const initialIsLocked = localStorage.getItem(IS_LOCKED_KEY); + const [isLocked, setIsLocked] = useState(initialIsLocked === 'true'); + const setIsLockedStored = (locked: boolean) => { + localStorage.setItem(IS_LOCKED_KEY, `${locked}`); + setIsLocked(locked); + }; + const className = classnames( + 'chrHeaderWrapper', + { + 'chrHeaderWrapper--navIsLocked': isLocked, + }, + 'hide-for-sharing' + ); + return ( +
+
+
+ ); +}; diff --git a/src/core/public/chrome/ui/header/index.ts b/src/core/public/chrome/ui/header/index.ts index f4c7127b93bf..f9c122b864dc 100644 --- a/src/core/public/chrome/ui/header/index.ts +++ b/src/core/public/chrome/ui/header/index.ts @@ -18,3 +18,4 @@ */ export { Header, HeaderProps } from './header'; +export { HeaderWrapper } from './header_wrapper'; diff --git a/src/core/public/chrome/ui/index.ts b/src/core/public/chrome/ui/index.ts index 0136f3e2b203..69582f6f1ed5 100644 --- a/src/core/public/chrome/ui/index.ts +++ b/src/core/public/chrome/ui/index.ts @@ -18,4 +18,4 @@ */ export { LoadingIndicator } from './loading_indicator'; -export { Header } from './header'; +export { Header, HeaderWrapper } from './header'; diff --git a/src/legacy/ui/public/agg_types/controls/precision.tsx b/src/legacy/ui/public/agg_types/controls/precision.tsx index 2aa8566f67c0..a458c29933f0 100644 --- a/src/legacy/ui/public/agg_types/controls/precision.tsx +++ b/src/legacy/ui/public/agg_types/controls/precision.tsx @@ -41,7 +41,9 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps setValue(Number(ev.target.value))} + onChange={(ev: React.ChangeEvent | React.MouseEvent) => + setValue(Number(ev.currentTarget.value)) + } data-test-subj={`visEditorMapPrecision${agg.id}`} showValue /> diff --git a/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx b/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx index 141897e79750..f2625c628c3f 100644 --- a/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx +++ b/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx @@ -57,7 +57,9 @@ function RadiusRatioOptionControl({ editorStateParams, setValue }: AggControlPro min={1} max={100} value={editorStateParams.radiusRatio || DEFAULT_VALUE} - onChange={e => setValue(editorStateParams, PARAM_NAME, parseFloat(e.target.value))} + onChange={(e: React.ChangeEvent | React.MouseEvent) => + setValue(editorStateParams, PARAM_NAME, parseFloat(e.currentTarget.value)) + } showRange showValue valueAppend="%" diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json index 4bd1eece12f8..f870e9518dcf 100644 --- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json +++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json @@ -7,7 +7,7 @@ }, "license": "Apache-2.0", "dependencies": { - "@elastic/eui": "13.3.0", + "@elastic/eui": "13.6.0", "react": "^16.8.0", "react-dom": "^16.8.0" } diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json index dfa3dacb4fb8..f970f0d219b6 100644 --- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json +++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json @@ -7,7 +7,7 @@ }, "license": "Apache-2.0", "dependencies": { - "@elastic/eui": "13.3.0", + "@elastic/eui": "13.6.0", "react": "^16.8.0" } } diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json index 69f4cdaa895e..cd1ca420f41d 100644 --- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json +++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json @@ -8,7 +8,7 @@ }, "license": "Apache-2.0", "dependencies": { - "@elastic/eui": "13.3.0", + "@elastic/eui": "13.6.0", "react": "^16.8.0" }, "scripts": { diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json index 1d5f5f420201..ae9ff2956c4b 100644 --- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json +++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json @@ -8,7 +8,7 @@ }, "license": "Apache-2.0", "dependencies": { - "@elastic/eui": "13.3.0", + "@elastic/eui": "13.6.0", "react": "^16.8.0" }, "scripts": { diff --git a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json b/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json index fc80e03cc1f4..47c8ac5a9df8 100644 --- a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json +++ b/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json @@ -7,7 +7,7 @@ }, "license": "Apache-2.0", "dependencies": { - "@elastic/eui": "13.3.0", + "@elastic/eui": "13.6.0", "react": "^16.8.0", "react-dom": "^16.8.0" } diff --git a/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss b/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss index d366aac096be..8dad4aaba5eb 100644 --- a/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss +++ b/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss @@ -5,8 +5,9 @@ body.canvas-isFullscreen { // sass-lint:disable-line no-qualifying-elements } // remove space for global nav elements - .header-global-wrapper + .app-wrapper { - left: 0; + .chrHeaderWrapper ~ .app-wrapper { + // Override locked nav at all breakpoints + left: 0 !important; // sass-lint:disable-line no-important top: 0; } @@ -16,7 +17,7 @@ body.canvas-isFullscreen { // sass-lint:disable-line no-qualifying-elements } // hide all the interface parts - .header-global-wrapper, // K7 global top nav + .chrHeaderWrapper, // K7 global top nav .canvasLayout__stageHeader, .canvasLayout__sidebar, .canvasLayout__footer, diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap index b7c4d4cd0381..7c663a26bc9d 100644 --- a/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap +++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap @@ -9,7 +9,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = ` style="max-width:600px" >