Upgrade EUI to 13.6.0 (#43916)
* eui to 13.6.0 * euirange updates * euipage snapshot updates * add classname toggle for nav locking * new header wrapper component; removed observable * Add styles for locked nav And updated BEM naming of `header-global-wrapper` * move headerwrapper * isLocked localStorage * remove useEffect
This commit is contained in:
Greg Thompson
GitHub
parent
61087ba40e
commit
084433fbee
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
<React.Fragment>
|
||||
<LoadingIndicator loadingCount$={http.getLoadingCount$()} />
|
||||
|
||||
<div className="header-global-wrapper hide-for-sharing" data-test-subj="headerGlobalNav">
|
||||
<Header
|
||||
appTitle$={appTitle$.pipe(takeUntil(this.stop$))}
|
||||
badge$={badge$.pipe(takeUntil(this.stop$))}
|
||||
basePath={http.basePath}
|
||||
breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
|
||||
kibanaDocLink={docLinks.links.kibana}
|
||||
forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
|
||||
helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
|
||||
homeHref={http.basePath.prepend('/app/kibana#/home')}
|
||||
isVisible$={isVisible$.pipe(
|
||||
map(visibility => (FORCE_HIDDEN ? false : visibility)),
|
||||
takeUntil(this.stop$)
|
||||
)}
|
||||
kibanaVersion={injectedMetadata.getKibanaVersion()}
|
||||
navLinks$={navLinks.getNavLinks$()}
|
||||
recentlyAccessed$={recentlyAccessed.get$()}
|
||||
navControlsLeft$={navControls.getLeft$()}
|
||||
navControlsRight$={navControls.getRight$()}
|
||||
/>
|
||||
</div>
|
||||
<Header
|
||||
appTitle$={appTitle$.pipe(takeUntil(this.stop$))}
|
||||
badge$={badge$.pipe(takeUntil(this.stop$))}
|
||||
basePath={http.basePath}
|
||||
breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
|
||||
kibanaDocLink={docLinks.links.kibana}
|
||||
forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
|
||||
helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
|
||||
homeHref={http.basePath.prepend('/app/kibana#/home')}
|
||||
isVisible$={isVisible$.pipe(
|
||||
map(visibility => (FORCE_HIDDEN ? false : visibility)),
|
||||
takeUntil(this.stop$)
|
||||
)}
|
||||
kibanaVersion={injectedMetadata.getKibanaVersion()}
|
||||
navLinks$={navLinks.getNavLinks$()}
|
||||
recentlyAccessed$={recentlyAccessed.get$()}
|
||||
navControlsLeft$={navControls.getLeft$()}
|
||||
navControlsRight$={navControls.getRight$()}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -163,6 +163,8 @@ interface Props {
|
|||
navControlsRight$: Rx.Observable<readonly ChromeNavControl[]>;
|
||||
intl: InjectedIntl;
|
||||
basePath: HttpStart['basePath'];
|
||||
isLocked?: boolean;
|
||||
onIsLockedUpdate?: (isLocked: boolean) => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
|
|
@ -266,8 +268,10 @@ class HeaderUI extends Component<Props, State> {
|
|||
breadcrumbs$,
|
||||
helpExtension$,
|
||||
intl,
|
||||
isLocked,
|
||||
kibanaDocLink,
|
||||
kibanaVersion,
|
||||
onIsLockedUpdate,
|
||||
} = this.props;
|
||||
const {
|
||||
appTitle,
|
||||
|
|
@ -355,7 +359,12 @@ class HeaderUI extends Component<Props, State> {
|
|||
</EuiHeaderSection>
|
||||
</EuiHeader>
|
||||
|
||||
<EuiNavDrawer ref={this.navDrawerRef} data-test-subj="navDrawer">
|
||||
<EuiNavDrawer
|
||||
ref={this.navDrawerRef}
|
||||
data-test-subj="navDrawer"
|
||||
isLocked={isLocked}
|
||||
onIsLockedUpdate={onIsLockedUpdate}
|
||||
>
|
||||
<EuiNavDrawerGroup listItems={recentLinksArray} />
|
||||
<EuiHorizontalRule margin="none" />
|
||||
<EuiNavDrawerGroup data-test-subj="navDrawerAppsMenu" listItems={navLinksArray} />
|
||||
|
|
|
|||
45
src/core/public/chrome/ui/header/header_wrapper.tsx
Normal file
45
src/core/public/chrome/ui/header/header_wrapper.tsx
Normal file
|
|
@ -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<HeaderProps> = 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 (
|
||||
<div className={className} data-test-subj="headerGlobalNav">
|
||||
<Header {...props} onIsLockedUpdate={setIsLockedStored} isLocked={isLocked} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -18,3 +18,4 @@
|
|||
*/
|
||||
|
||||
export { Header, HeaderProps } from './header';
|
||||
export { HeaderWrapper } from './header_wrapper';
|
||||
|
|
|
|||
|
|
@ -18,4 +18,4 @@
|
|||
*/
|
||||
|
||||
export { LoadingIndicator } from './loading_indicator';
|
||||
export { Header } from './header';
|
||||
export { Header, HeaderWrapper } from './header';
|
||||
|
|
|
|||
|
|
@ -41,7 +41,9 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps<numb
|
|||
min={1}
|
||||
max={config.get('visualization:tileMap:maxPrecision')}
|
||||
value={value}
|
||||
onChange={ev => setValue(Number(ev.target.value))}
|
||||
onChange={(ev: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
|
||||
setValue(Number(ev.currentTarget.value))
|
||||
}
|
||||
data-test-subj={`visEditorMapPrecision${agg.id}`}
|
||||
showValue
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
|
||||
setValue(editorStateParams, PARAM_NAME, parseFloat(e.currentTarget.value))
|
||||
}
|
||||
showRange
|
||||
showValue
|
||||
valueAppend="%"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
},
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@elastic/eui": "13.3.0",
|
||||
"@elastic/eui": "13.6.0",
|
||||
"react": "^16.8.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
},
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@elastic/eui": "13.3.0",
|
||||
"@elastic/eui": "13.6.0",
|
||||
"react": "^16.8.0"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
},
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@elastic/eui": "13.3.0",
|
||||
"@elastic/eui": "13.6.0",
|
||||
"react": "^16.8.0"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
|
|||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="euiPanel euiPanel--paddingLarge euiPageContent eui-textCenter euiPageContent--verticalCenter euiPageContent--horizontalCenter"
|
||||
class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter eui-textCenter"
|
||||
>
|
||||
<svg
|
||||
class="euiIcon euiIcon--xxLarge euiIcon--app euiIcon-isLoading"
|
||||
|
|
@ -73,7 +73,7 @@ exports[`NoData should show text next to the spinner while checking a setting 1`
|
|||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="euiPanel euiPanel--paddingLarge euiPageContent eui-textCenter euiPageContent--verticalCenter euiPageContent--horizontalCenter"
|
||||
class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter eui-textCenter"
|
||||
>
|
||||
<svg
|
||||
class="euiIcon euiIcon--xxLarge euiIcon--app euiIcon-isLoading"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ exports[`PageLoading should show a simple page loading component 1`] = `
|
|||
class="euiPageBody"
|
||||
>
|
||||
<div
|
||||
class="euiPanel euiPanel--paddingLarge euiPageContent noData__content euiPageContent--verticalCenter euiPageContent--horizontalCenter"
|
||||
class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter noData__content"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@
|
|||
"@babel/runtime": "^7.5.5",
|
||||
"@elastic/ctags-langserver": "^0.1.8",
|
||||
"@elastic/datemath": "5.0.2",
|
||||
"@elastic/eui": "13.3.0",
|
||||
"@elastic/eui": "13.6.0",
|
||||
"@elastic/javascript-typescript-langserver": "^0.2.2",
|
||||
"@elastic/lsp-extension": "^0.1.2",
|
||||
"@elastic/maki": "6.1.0",
|
||||
|
|
|
|||
|
|
@ -1129,10 +1129,10 @@
|
|||
tabbable "^1.1.0"
|
||||
uuid "^3.1.0"
|
||||
|
||||
"@elastic/eui@13.3.0":
|
||||
version "13.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-13.3.0.tgz#05c78ffcb2041ebafd807e23dd3d32553e8c1812"
|
||||
integrity sha512-Z/1KGaqKY2PCJXdJ3XTSTcnZZxjFysafvIWNRs+O0C+IQsyy0cz5Sj8BaM9pUgYVjL2SaO04Hs9Yb09MDJwFGQ==
|
||||
"@elastic/eui@13.6.0":
|
||||
version "13.6.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-13.6.0.tgz#a01b66f84bfc7eec2303df1c8d9a7d7443b59049"
|
||||
integrity sha512-a7hD9jLIvA2yJZi+btDIRGRHRSjCwb/0/en3U29MtNB2cOEnNYQ1MGcI5/eIz6eKi93eb0ASG9qq6xVqVaAezQ==
|
||||
dependencies:
|
||||
"@types/lodash" "^4.14.116"
|
||||
"@types/numeral" "^0.0.25"
|
||||
|
|
|
|||
Loading…
Reference in a new issue