github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens] Change semantic elements (#144828)

Browse source 
Fixes https://github.com/elastic/kibana/issues/143547

To make sure the correct semantic elements are used, you can pass the
`component` prop to the page template components. As the eui components
`EuiPageTemplate`, `EuiPageTemplate.Section` and so bring styling with
them there's not much value in trying to put them into the places of
manual `section`s used in Lens today because we would end up overruling
all of these default styles anyway as Lens is pretty special in terms of
page layout to make best use of the existing screen real estate.

Because of this this PR is simply turning the `EuiPageTemplate` into a
div and putting the main role to the top level of the Lens app.

The way how to do this is a bit funky right now, but that's an EUI bug
that will be fixed upstream: https://github.com/elastic/eui/issues/6351

Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
This commit is contained in:
Joe Reuter 2022-11-10 09:51:05 +01:00 • committed by GitHub
parent c7cdd00036
commit 2dce056bd8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/lens/public/app_plugin/app.tsx
View file

@ -415,7 +415,7 @@ export function App({
return (
<>
<div className="lnsApp" data-test-subj="lnsApp">
<div className="lnsApp" data-test-subj="lnsApp" role="main">
<LensTopNavMenu
initialInput={initialInput}
redirectToOrigin={redirectToOrigin}

8
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
View file

@ -112,7 +112,13 @@ export function WorkspacePanelWrapper({
warningMessages.push(...requestWarnings);
}
return (
<EuiPageTemplate direction="column" offset={0} minHeight={0} restrictWidth={false}>
<EuiPageTemplate
direction="column"
offset={0}
minHeight={0}
restrictWidth={false}
mainProps={{ component: 'div' } as unknown as {}}
>
{!(isFullscreen && (autoApplyEnabled || warningMessages?.length)) && (
<EuiPageTemplate.Section paddingSize="none" color="transparent">
<EuiFlexGroup