diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss index ac52190dc7b0d..3599254a285b7 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss @@ -12,15 +12,18 @@ } .lnsFrameLayout__pageContent { - display: flex; overflow: hidden; flex-grow: 1; + flex-direction: row; } .lnsFrameLayout__pageBody { @include euiScrollBar; min-width: $lnsPanelMinWidth + $euiSizeXL; overflow: hidden auto; + display: flex; + flex-direction: column; + flex: 1 1 100%; // Leave out bottom padding so the suggestions scrollbar stays flush to window edge // Leave out left padding so the left sidebar's focus states are visible outside of content bounds // This also means needing to add same amount of margin to page content and suggestion items diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx index 6a0b2c3301119..8e19ceb898b55 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx @@ -7,7 +7,8 @@ import './frame_layout.scss'; import React from 'react'; -import { EuiPage, EuiPageSideBar, EuiPageBody } from '@elastic/eui'; +import { EuiPage, EuiPageBody, EuiScreenReaderOnly } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; export interface FrameLayoutProps { dataPanel: React.ReactNode; @@ -19,16 +20,46 @@ export interface FrameLayoutProps { export function FrameLayout(props: FrameLayoutProps) { return ( -
- {props.dataPanel} - + +
+ +

+ {i18n.translate('xpack.lens.section.dataPanelLabel', { + defaultMessage: 'Data panel', + })} +

+
+ {props.dataPanel} +
+
+ +

+ {i18n.translate('xpack.lens.section.workspaceLabel', { + defaultMessage: 'Visualization workspace', + })} +

+
{props.workspacePanel} {props.suggestionsPanel} - - +
+
+ +

+ {i18n.translate('xpack.lens.section.configPanelLabel', { + defaultMessage: 'Config panel', + })} +

+
{props.configPanel} - -
+ +
); } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 33ddc23312a96..d9fbaa22a0388 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -102,7 +102,7 @@ export function WorkspacePanelWrapper({ -

+

{title || i18n.translate('xpack.lens.chartTitle.unsaved', { defaultMessage: 'Unsaved' })}