diff --git a/package.json b/package.json index fa7ceb4edd592..3e4cb3323cabf 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.4.0", - "@elastic/eui": "88.1.0", + "@elastic/eui": "88.2.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx index ad7c6d8fc52a5..6109a1bd0688c 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx +++ b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx @@ -147,16 +147,15 @@ describe('start', () => { const promise = chrome.getBodyClasses$().pipe(toArray()).toPromise(); service.stop(); await expect(promise).resolves.toMatchInlineSnapshot(` - Array [ - Array [ - "kbnBody", - "kbnBody--classicLayout", - "kbnBody--noHeaderBanner", - "kbnBody--chromeHidden", - "kbnVersion-1-2-3", - ], - ] - `); + Array [ + Array [ + "kbnBody", + "kbnBody--noHeaderBanner", + "kbnBody--chromeHidden", + "kbnVersion-1-2-3", + ], + ] + `); }); it('strips off "snapshot" from the kibana version if present', async () => { @@ -166,16 +165,15 @@ describe('start', () => { const promise = chrome.getBodyClasses$().pipe(toArray()).toPromise(); service.stop(); await expect(promise).resolves.toMatchInlineSnapshot(` - Array [ - Array [ - "kbnBody", - "kbnBody--classicLayout", - "kbnBody--noHeaderBanner", - "kbnBody--chromeHidden", - "kbnVersion-8-0-0", - ], - ] - `); + Array [ + Array [ + "kbnBody", + "kbnBody--noHeaderBanner", + "kbnBody--chromeHidden", + "kbnVersion-8-0-0", + ], + ] + `); }); it('does not add legacy browser warning if browser supports CSP', async () => { diff --git a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx index 76fef465d823c..02ba5a912cd40 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx +++ b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx @@ -207,7 +207,6 @@ export class ChromeService { map(([headerBanner, isVisible, chromeStyle]) => { return [ 'kbnBody', - chromeStyle === 'project' ? 'kbnBody--projectLayout' : 'kbnBody--classicLayout', headerBanner ? 'kbnBody--hasHeaderBanner' : 'kbnBody--noHeaderBanner', isVisible ? 'kbnBody--chromeVisible' : 'kbnBody--chromeHidden', getKbnVersionClass(), diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap index 476776a40a155..0ae5e0504839b 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap @@ -105,7 +105,7 @@ Array [
{ /* fixates the elements position in the viewport, removes the element from the flow of the page */ position: sticky; /* position below the primary fixed EuiHeader in the viewport */ - top: 48px; + top: var(--euiFixedHeadersOffset, 0); `} > diff --git a/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap b/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap index f194c0af3908a..770a862dd4ce5 100644 --- a/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap +++ b/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap @@ -71,7 +71,7 @@ Object { data-test-subj="ExceptionItemCardCommentsContainer" >
- +

{title}

diff --git a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap index 0588fbfae152d..7a238b54533dd 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap +++ b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap @@ -66,7 +66,9 @@ exports[`KibanaPageTemplateInner page sidebar 1`] = ` minHeight={0} offset={0} > - + Test diff --git a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx index 607b8fbd1776b..f9b9dcd247de6 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx +++ b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { FC, useEffect, useState } from 'react'; +import React, { FC } from 'react'; import classNames from 'classnames'; import { EuiPageTemplate } from '@elastic/eui'; @@ -21,9 +21,6 @@ const getClasses = (template?: string, className?: string) => { ); }; -const KIBANA_CHROME_SELECTOR = '[data-test-subj="kibanaChrome"]'; -const HEADER_GLOBAL_NAV_SELECTOR = '[data-test-subj="headerGlobalNav"]'; - /** * A thin wrapper around EuiPageTemplate with a few Kibana specific additions */ @@ -38,18 +35,6 @@ export const KibanaPageTemplateInner: FC = ({ }) => { let header; - const [offset, setOffset] = useState(); - - useEffect(() => { - const kibanaChrome = document.querySelector(KIBANA_CHROME_SELECTOR) as HTMLElement; - if (kibanaChrome) { - const kibanaChromeHeader = kibanaChrome.querySelector( - HEADER_GLOBAL_NAV_SELECTOR - ) as HTMLElement; - setOffset(kibanaChromeHeader?.offsetTop + kibanaChromeHeader?.offsetHeight); - } - }, []); - if (isEmptyState && pageHeader && !children) { const { iconType, pageTitle, description, rightSideItems } = pageHeader; const title = pageTitle ?

{pageTitle}

: undefined; @@ -70,9 +55,7 @@ export const KibanaPageTemplateInner: FC = ({ let sideBar; if (pageSideBar) { const sideBarProps = { ...pageSideBarProps }; - if (offset) { - sideBarProps.sticky = { offset }; - } + sideBarProps.sticky = true; sideBar = {pageSideBar}; } diff --git a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap index d31d61c4b8129..f55fc4c110b11 100644 --- a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap +++ b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap @@ -52,7 +52,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = ` } pageSideBarProps={ Object { - "className": "css-c34ez9", + "className": "kbnSolutionNav__sidebar css-c34ez9", "minWidth": undefined, "paddingSize": "none", } @@ -112,7 +112,7 @@ exports[`WithSolutionNav with children 1`] = ` } pageSideBarProps={ Object { - "className": "css-c34ez9", + "className": "kbnSolutionNav__sidebar css-c34ez9", "minWidth": undefined, "paddingSize": "none", } diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx index da73befdf519e..2e4879a4093cb 100644 --- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx +++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx @@ -57,9 +57,8 @@ export const withSolutionNav =

(WrappedComponent: Compo isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop); const withSolutionNavStyles = WithSolutionNavStyles(euiTheme); const sideBarClasses = classNames( - { - 'kbnSolutionNav__sidebar--shrink': isSidebarShrunk, - }, + 'kbnSolutionNav__sidebar', + { 'kbnSolutionNav__sidebar--shrink': isSidebarShrunk }, props.pageSideBarProps?.className, withSolutionNavStyles ); diff --git a/src/core/public/_css_variables.scss b/src/core/public/_css_variables.scss new file mode 100644 index 0000000000000..cef1be40d1239 --- /dev/null +++ b/src/core/public/_css_variables.scss @@ -0,0 +1,11 @@ +:root { + // height of the header banner + --kbnHeaderBannerHeight: #{$euiSizeXL}; + // total height of all fixed headers (when the banner is *not* present) inherited from EUI + --kbnHeaderOffset: var(--euiFixedHeadersOffset, 0); + // total height of everything when the banner is present + --kbnHeaderOffsetWithBanner: calc(var(--kbnHeaderBannerHeight) + var(--kbnHeaderOffset)); +} + +// Quick note: This shouldn't be mixed with Sass variable declarations, +// as each import will cause :root to be re-declared unnecessarily diff --git a/src/core/public/_mixins.scss b/src/core/public/_mixins.scss index 2dbef465e074e..9d533a87d1843 100644 --- a/src/core/public/_mixins.scss +++ b/src/core/public/_mixins.scss @@ -1,43 +1,6 @@ -@import './variables'; - -/* stylelint-disable-next-line length-zero-no-unit -- need consistent unit to sum them */ -@mixin kibanaFullBodyHeight($additionalOffset: 0px) { - // default - header, no banner - height: calc(100vh - #{$kbnHeaderOffset + $additionalOffset}); - - @at-root { - // no header, no banner - .kbnBody--chromeHidden & { - height: calc(100vh - #{$additionalOffset}); - } - // header, banner - .kbnBody--hasHeaderBanner & { - height: calc(100vh - #{$kbnHeaderOffsetWithBanner + $additionalOffset}); - } - // no header, banner - .kbnBody--chromeHidden.kbnBody--hasHeaderBanner & { - height: calc(100vh - #{$kbnHeaderBannerHeight + $additionalOffset}); - } - } -} - -/* stylelint-disable-next-line length-zero-no-unit -- need consistent unit to sum them */ -@mixin kibanaFullBodyMinHeight($additionalOffset: 0px) { - // default - header, no banner - min-height: calc(100vh - #{$kbnHeaderOffset + $additionalOffset}); - - @at-root { - // no header, no banner - .kbnBody--chromeHidden & { - min-height: calc(100vh - #{$additionalOffset}); - } - // header, banner - .kbnBody--hasHeaderBanner & { - min-height: calc(100vh - #{$kbnHeaderOffsetWithBanner + $additionalOffset}); - } - // no header, banner - .kbnBody--chromeHidden.kbnBody--hasHeaderBanner & { - min-height: calc(100vh - #{$kbnHeaderBannerHeight + $additionalOffset}); - } - } +@mixin kibanaFullBodyHeight($additionalOffset: 0) { + // The `--euiFixedHeadersOffset` CSS variable is automatically updated by + // styles/rendering/_base.scss, based on whether the Kibana chrome has a + // header banner, and is visible or hidden + height: calc(100vh - var(--euiFixedHeadersOffset, 0) - #{$additionalOffset}); } diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss deleted file mode 100644 index 6c21c9760be97..0000000000000 --- a/src/core/public/_variables.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import '@elastic/eui/src/global_styling/variables/header'; - -// height of the header banner -$kbnHeaderBannerHeight: $euiSizeXL; // This value is also declared in `/x-pack/plugins/canvas/common/lib/constants.ts` -// total height of the header (when the banner is *not* present) -$kbnHeaderOffset: $euiHeaderHeightCompensation * 2; -// total height of the header when the banner is present -$kbnHeaderOffsetWithBanner: $kbnHeaderOffset + $kbnHeaderBannerHeight; diff --git a/src/core/public/index.scss b/src/core/public/index.scss index c056b0f851801..db05def14bc0c 100644 --- a/src/core/public/index.scss +++ b/src/core/public/index.scss @@ -1,3 +1,3 @@ -@import './variables'; +@import './css_variables'; @import './mixins'; @import './styles/index'; diff --git a/src/core/public/styles/chrome/_banner.scss b/src/core/public/styles/chrome/_banner.scss index 9c521da3f30ca..feb69e54a911f 100644 --- a/src/core/public/styles/chrome/_banner.scss +++ b/src/core/public/styles/chrome/_banner.scss @@ -2,7 +2,7 @@ position: fixed; top: 0; left: 0; - height: $kbnHeaderBannerHeight; + height: var(--kbnHeaderBannerHeight); width: 100%; z-index: $euiZHeader; } @@ -11,32 +11,3 @@ height: 100%; width: 100%; } - -// overriding `top` positioning of the chrome headers -.kbnBody--hasHeaderBanner .header__bars { - .header__firstBar { - top: $kbnHeaderBannerHeight; - } - .header__secondBar { - top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation; - } -} - -// overriding padding on the body element added by EUI -.kbnBody.kbnBody--hasHeaderBanner.kbnBody--projectLayout.euiBody--headerIsFixed { - padding-top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation; - - // overriding `top` positioning of the project side nav, and flyouts - // overriding `top` positioning of the project app menu toolbar - &.euiBody--headerIsFixed .euiCollapsibleNav, - &.euiBody--headerIsFixed:not(.euiDataGrid__restrictBody) .euiFlyout, - .header__actionMenu { - top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation; - } - - // overriding `height` calculation of the project side nav, and flyouts - &.euiBody--headerIsFixed .euiCollapsibleNav, - &.euiBody--headerIsFixed:not(.euiDataGrid__restrictBody) .euiFlyout { - height: calc(100% - #{$kbnHeaderBannerHeight + $euiHeaderHeightCompensation}); - } -} diff --git a/src/core/public/styles/core_app/_mixins.scss b/src/core/public/styles/core_app/_mixins.scss index a801ffd7a2cae..78691f71fe87d 100644 --- a/src/core/public/styles/core_app/_mixins.scss +++ b/src/core/public/styles/core_app/_mixins.scss @@ -1,5 +1,3 @@ -@import '../../variables'; - @mixin flexParent($grow: 1, $shrink: 1, $basis: auto, $direction: column) { flex: $grow $shrink $basis; display: flex; @@ -86,7 +84,7 @@ @at-root { .kbnBody--hasHeaderBanner & { - top: $kbnHeaderBannerHeight; + top: var(--kbnHeaderBannerHeight); } } diff --git a/src/core/public/styles/rendering/_base.scss b/src/core/public/styles/rendering/_base.scss index a9ece9955e6ca..8a7b14242f8bf 100644 --- a/src/core/public/styles/rendering/_base.scss +++ b/src/core/public/styles/rendering/_base.scss @@ -19,7 +19,7 @@ pointer-events: none; visibility: hidden; position: fixed; - top: 0; + top: var(--euiFixedHeadersOffset, 0); right: 0; bottom: 0; left: 0; @@ -35,50 +35,30 @@ position: relative; // This is temporary for apps that relied on this being present on `.application` } -@mixin kbnAffordForHeader($headerHeight) { - @include euiHeaderAffordForFixed($headerHeight); - - #securitySolutionStickyKQL, - #app-fixed-viewport { - top: $headerHeight; - } - - @include euiBreakpoint('xl', 'l') { - .kbnStickyMenu { - position: sticky; - max-height: calc(100vh - #{$headerHeight + $euiSize}); - top: $headerHeight + $euiSize; - } - - .kbnSolutionNav__sidebar { - position: sticky; - max-height: calc(100vh - #{$headerHeight}); - top: $headerHeight; - } - } -} - .kbnBody { - @include kbnAffordForHeader($kbnHeaderOffset); + padding-top: var(--euiFixedHeadersOffset, 0); +} - &.kbnBody--hasHeaderBanner { - padding-top: $kbnHeaderBannerHeight; +// Conditionally override :root CSS fixed header variable. Updating `--euiFixedHeadersOffset` +// on the body will cause all child EUI components to automatically update their offsets - @include kbnAffordForHeader($kbnHeaderOffsetWithBanner); +.kbnBody--hasHeaderBanner { + --euiFixedHeadersOffset: var(--kbnHeaderOffsetWithBanner); - // Prevents banners from covering full screen data grids - .euiDataGrid--fullScreen { - height: calc(100vh - #{$kbnHeaderBannerHeight}); - top: $kbnHeaderBannerHeight; - } - } - &.kbnBody--chromeHidden { - @include kbnAffordForHeader(0); - } - &.kbnBody--projectLayout { - @include kbnAffordForHeader($euiHeaderHeightCompensation); + // Offset fixed EuiHeaders by the top banner + .euiHeader[data-fixed-header] { + margin-top: var(--kbnHeaderBannerHeight); } - &.kbnBody--chromeHidden.kbnBody--hasHeaderBanner { - @include kbnAffordForHeader($kbnHeaderBannerHeight); + + // Prevent banners from covering full screen data grids + .euiDataGrid--fullScreen { + height: calc(100vh - var(--kbnHeaderBannerHeight)); + top: var(--kbnHeaderBannerHeight); } } +.kbnBody--chromeHidden { + --euiFixedHeadersOffset: 0; +} +.kbnBody--chromeHidden.kbnBody--hasHeaderBanner { + --euiFixedHeadersOffset: var(--kbnHeaderBannerHeight); +} diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 448c7f900ffd1..ff0296ec9777b 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.4.0': ['Elastic License 2.0'], - '@elastic/eui@88.1.0': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@88.2.0': ['SSPL-1.0 OR Elastic License 2.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry 'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary }; diff --git a/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss b/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss index 1cc815d05e71a..e73de35dfc41d 100644 --- a/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss +++ b/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss @@ -3,24 +3,7 @@ width: 100%; position: sticky; z-index: $euiZLevel2; + top: var(--euiFixedHeadersOffset, 0); background: $euiPageBackgroundColor; } - - &.kbnBody--noHeaderBanner { - &.kbnBody--chromeVisible .dashboardTopNav { - top: $kbnHeaderOffset; - } - &.kbnBody--chromeHidden .dashboardTopNav { - top: 0; - } - } - - &.kbnBody--hasHeaderBanner { - &.kbnBody--chromeVisible .dashboardTopNav { - top: $kbnHeaderOffsetWithBanner; - } - &.kbnBody--chromeHidden .dashboardTopNav { - top: $kbnHeaderBannerHeight; - } - } -} \ No newline at end of file +} diff --git a/src/plugins/dashboard/public/dashboard_container/component/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/dashboard_container/component/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap index 46d3b77578b3b..6863540ad4a71 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap +++ b/src/plugins/dashboard/public/dashboard_container/component/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap @@ -7,7 +7,7 @@ exports[`DashboardEmptyScreen renders correctly with edit mode 1`] = `

= ({ zoomOut, zoomScale, }) => { - const headerBannerOffset = hasHeaderBanner ? HEADER_BANNER_HEIGHT : 0; + const headerBannerOffset = useMemo(() => { + if (!hasHeaderBanner) return 0; + if (typeof document === 'undefined') return 0; + + // Get the banner height from the CSS variable value + const headerHeightFromCSS = getComputedStyle(document.documentElement).getPropertyValue( + '--kbnHeaderBannerHeight' + ); + // Remove the CSS unit + return parseInt(headerHeightFromCSS, 10); + }, [hasHeaderBanner]); const bufferStyle = { height: isFullscreen ? height : (height + 2 * WORKPAD_CANVAS_BUFFER) * zoomScale, diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/errors_accordion/index.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/schema/errors_accordion/index.tsx index 99f3d30c6caae..6b4bcba14fd1d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/schema/errors_accordion/index.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/schema/errors_accordion/index.tsx @@ -77,8 +77,9 @@ export const SchemaErrorsAccordion: React.FC = ({ diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx index 1a13bbcf25367..6b1bfaaaa0961 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx @@ -53,7 +53,7 @@ import { sortDatastreamsByDataset } from './sort_datastreams'; const ScrollAnchor = styled.div` display: none; - scroll-margin-top: ${(props) => parseFloat(props.theme.eui.euiHeaderHeightCompensation) * 2}px; + scroll-margin-top: var(--euiFixedHeadersOffset, 0); `; interface Props { diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx index 08004cadeb46d..cb5c61ff57a14 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx @@ -27,7 +27,7 @@ export const ControlsColumn = ({ controls, title }: ControlsColumnProps) => { ); } return ( - + {titleContent} {controls} diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx index 97adcaa7e40a6..19e267d3c2aee 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx @@ -168,7 +168,7 @@ export const PackageListGrid: FunctionComponent = ({ gutterSize="xl" data-test-subj="epmList.integrationCards" > - + diff --git a/x-pack/plugins/fleet/public/layouts/without_header.tsx b/x-pack/plugins/fleet/public/layouts/without_header.tsx index d9481d44359c2..0f60cb28814a7 100644 --- a/x-pack/plugins/fleet/public/layouts/without_header.tsx +++ b/x-pack/plugins/fleet/public/layouts/without_header.tsx @@ -12,12 +12,8 @@ import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui'; export const Wrapper = styled.div` background-color: ${(props) => props.theme.eui.euiColorEmptyShade}; - // HACK: Kibana introduces a div element around the app component that results in us - // being unable to stretch this Wrapper to full height via flex: 1. This calc sets - // the min height to the viewport size minus the height of the two global Kibana headers. - min-height: calc( - 100vh - ${(props) => parseFloat(props.theme.eui.euiHeaderHeightCompensation) * 2}px - ); + // Set the min height to the viewport size minus the height of any global Kibana headers + min-height: calc(100vh - var(--euiFixedHeadersOffset, 0)); `; export const Page = styled(EuiPage)` diff --git a/x-pack/plugins/lens/public/shared_components/flyout_container.tsx b/x-pack/plugins/lens/public/shared_components/flyout_container.tsx index 6b970a3e55f38..46a5c5ca39706 100644 --- a/x-pack/plugins/lens/public/shared_components/flyout_container.tsx +++ b/x-pack/plugins/lens/public/shared_components/flyout_container.tsx @@ -98,7 +98,7 @@ export function FlyoutContainer({ ref={panelContainerRef} role="dialog" aria-labelledby="lnsDimensionContainerTitle" - className="lnsDimensionContainer euiFlyout" + className="lnsDimensionContainer" onAnimationEnd={() => { if (isOpen) { // EuiFocusTrap interferes with animating elements with absolute position: diff --git a/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap b/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap index b290215981024..9d95afb5852dd 100644 --- a/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap +++ b/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap @@ -94,7 +94,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout style="width: auto; margin-left: -16px; margin-right: -16px;" />
ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; +exports[`PromptPage renders as expected with additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; -exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; +exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; diff --git a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap index a752facec0213..b16535269e1c9 100644 --- a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; +exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; -exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"My Company NameMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; +exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"My Company NameMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; diff --git a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap index cc55a03d84555..255cc8b4963a0 100644 --- a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; -exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; diff --git a/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx b/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx index ac49d8e90498d..f5f9b55e59e7c 100644 --- a/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx +++ b/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx @@ -12,7 +12,7 @@ import { useGlobalHeaderPortal } from '../../../../common/hooks/use_global_heade const StyledStickyWrapper = styled.div` position: sticky; z-index: ${(props) => props.theme.eui.euiZHeaderBelowDataGrid}; - // TOP location is declared in src/public/rendering/_base.scss to keep in line with Kibana Chrome + top: var(--euiFixedHeadersOffset, 0); `; export const GlobalKQLHeader = React.memo(() => { diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/accordion_title/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/accordion_title/index.tsx index 8e25d444ebd2b..86280bd98d58f 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/accordion_title/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/accordion_title/index.tsx @@ -21,7 +21,7 @@ const AccordionTitleComponent: React.FC = ({ name, title, t - +
{title}
 diff --git a/x-pack/plugins/security_solution/public/management/components/endpoint_execute_action/execute_action_host_response.test.tsx b/x-pack/plugins/security_solution/public/management/components/endpoint_execute_action/execute_action_host_response.test.tsx index ea91afe44afdd..04958e60b4de8 100644 --- a/x-pack/plugins/security_solution/public/management/components/endpoint_execute_action/execute_action_host_response.test.tsx +++ b/x-pack/plugins/security_solution/public/management/components/endpoint_execute_action/execute_action_host_response.test.tsx @@ -58,8 +58,8 @@ describe('When using the `ExecuteActionHostResponse` component', () => { it('should show execute context accordion as `closed`', async () => { render(); - expect(renderResult.getByTestId('test-executeResponseOutput-context').className).toEqual( - 'euiAccordion' + expect(renderResult.getByTestId('test-executeResponseOutput-context').className).not.toContain( + 'euiAccordion-isOpen' ); }); diff --git a/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx b/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx index 3ea38e5ed2314..e6f8f2b207ea8 100644 --- a/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx +++ b/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx @@ -24,11 +24,11 @@ const OverlayRootContainer = styled.div` position: fixed; overflow: hidden; - top: calc((${({ theme: { eui } }) => eui.euiHeaderHeightCompensation} * 2)); + top: var(--euiFixedHeadersOffset, 0); bottom: 0; right: 0; - height: calc(100% - ${({ theme: { eui } }) => eui.euiHeaderHeightCompensation} * 2); + height: calc(100% - var(--euiFixedHeadersOffset, 0)); width: 100%; z-index: ${({ theme: { eui } }) => eui.euiZFlyout}; @@ -89,17 +89,6 @@ const PageOverlayGlobalStyles = createGlobalStyle<{ theme: EuiTheme }>` body.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME} { ${FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET} } - - //------------------------------------------------------------------------------------------- - // Style overrides for when Page Overlay is displayed in serverless project - //------------------------------------------------------------------------------------------- - // With serverless, there is 1 less header displayed, thus the display of the page overlay - // need to be adjusted slightly so that it still display below the header - //------------------------------------------------------------------------------------------- - body.kbnBody.kbnBody--projectLayout:not(.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME}) .${PAGE_OVERLAY_CSS_CLASSNAME} { - top: ${({ theme: { eui } }) => eui.euiHeaderHeightCompensation}; - height: calc(100% - (${({ theme: { eui } }) => eui.euiHeaderHeightCompensation})); - } `; const setDocumentBodyOverlayIsVisible = () => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx index d3007d0d6346a..c8156c455d7e2 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx @@ -42,12 +42,12 @@ const FlyoutPaneComponent: React.FC = ({
= ({ settings, actionErrors, }) => { + const { euiTheme } = useEuiTheme(); const { links: { watchActionsConfigurationMap }, toasts, @@ -96,8 +100,15 @@ export const WatchActionsAccordion: React.FunctionComponent = ({ initialIsOpen={action.isNew || hasErrors} // If an action contains errors in edit mode, we want the accordion open so the user is aware key={action.id} id={action.id} - className="euiAccordionForm" - buttonContentClassName="euiAccordionForm__button" + borders="horizontal" + buttonProps={{ + paddingSize: 'm', + css: css` + &:hover { + text-decoration: none; + } + `, + }} data-test-subj="watchActionAccordion" buttonContent={ @@ -105,7 +116,7 @@ export const WatchActionsAccordion: React.FunctionComponent = ({ - +
{action.typeName}
 @@ -115,7 +126,18 @@ export const WatchActionsAccordion: React.FunctionComponent = ({