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

[Lens] Design updates in prep for thresholds (#113428)

Browse source 
* remove borders from layer panels

* increase "add layer" button size

* fix cross-browser scrollbars & shadow clipping

* fix layer panel and dimension drop zone spacing

* add hyphens

* fix border radius & adjust workspace styles

* config flyout padding and spacing adjustments

* formula padding and spacing adjustments

* palette flyout padding and spacing adjustments

* remove unnecessary v7 styles

* correct button font size in v7

* restore workspace border in v7

* Fix draggable bg color in v8 dark mode

* fix misaligned layer chart picker text

* fix unit test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Michael Marcialis 2021-09-30 18:23:58 -04:00 • committed by GitHub
parent 14e65bf05d
commit 2aa39891ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 195 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/lens/public/_mixins.scss
View file

@ -15,7 +15,7 @@
// Static styles for a draggable item
@mixin lnsDraggable {
@include euiSlightShadow;
background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
background: $euiColorEmptyShade;
border: $euiBorderWidthThin dashed transparent;
cursor: grab;
}

2
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/add_layer.tsx
View file

@ -64,7 +64,6 @@ export function AddLayerButton({
<EuiButton
className="lnsConfigPanel__addLayerBtn"
fullWidth
size="s"
data-test-subj="lnsLayerAddButton"
aria-label={i18n.translate('xpack.lens.configPanel.addLayerButton', {
defaultMessage: 'Add layer',
@ -89,7 +88,6 @@ export function AddLayerButton({
<EuiButton
className="lnsConfigPanel__addLayerBtn"
fullWidth
size="s"
data-test-subj="lnsLayerAddButton"
aria-label={i18n.translate('xpack.lens.configPanel.addLayerButton', {
defaultMessage: 'Add layer',

4
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/buttons/empty_dimension_button.tsx
View file

@ -114,7 +114,7 @@ export function EmptyDimensionButton({
className: 'lnsLayerPanel__triggerTextContent',
}}
aria-label={i18n.translate('xpack.lens.indexPattern.removeColumnAriaLabel', {
defaultMessage: 'Add or drag and drop a field to {groupLabel}',
defaultMessage: 'Add or drag-and-drop a field to {groupLabel}',
values: { groupLabel: group.groupLabel },
})}
data-test-subj="lns-empty-dimension"
@ -124,7 +124,7 @@ export function EmptyDimensionButton({
>
<FormattedMessage
id="xpack.lens.configure.emptyConfig"
defaultMessage="Add or drag and drop a field"
defaultMessage="Add or drag-and-drop a field"
/>
</EuiButtonEmpty>
</div>

10
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.scss
View file

@ -1,10 +0,0 @@
.lnsConfigPanel__addLayerBtn {
@include kbnThemeStyle('v7') {
// sass-lint:disable-block no-important
background-color: transparent !important;
color: transparentize($euiColorMediumShade, .3) !important;
border-color: $euiColorLightShade !important;
box-shadow: none !important;
}
}

2
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
View file

@ -5,8 +5,6 @@
* 2.0.
*/
import './config_panel.scss';
import React, { useMemo, memo } from 'react';
import { EuiForm } from '@elastic/eui';
import { mapValues } from 'lodash';

40
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
View file

@ -24,48 +24,24 @@
}
}
.lnsDimensionContainer__footer {
padding: $euiSizeS;
.lnsFrameLayout__sidebar-isFullscreen & {
display: none;
}
}
.lnsDimensionContainer__header {
padding: $euiSizeS $euiSizeXS;
padding: $euiSize;
.lnsFrameLayout__sidebar-isFullscreen & {
display: none;
}
}
.lnsDimensionContainer__headerTitle {
padding: $euiSizeS $euiSizeXS;
cursor: pointer;
&:hover {
text-decoration: underline;
}
.lnsDimensionContainer__content {
@include euiYScroll;
flex: 1;
}
.lnsDimensionContainer__headerLink {
&:focus-within {
background-color: transparentize($euiColorVis1, .9);
.lnsDimensionContainer__footer {
padding: $euiSize;
.lnsDimensionContainer__headerTitle {
text-decoration: underline;
}
}
}
.lnsDimensionContainer__backIcon {
&:hover {
transform: none !important; // sass-lint:disable-line no-important
}
&:focus {
background-color: transparent;
.lnsFrameLayout__sidebar-isFullscreen & {
display: none;
}
}

15
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
View file

@ -98,13 +98,7 @@ export function DimensionContainer({
}}
>
<EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
<EuiFlexGroup
gutterSize="none"
alignItems="center"
className="lnsDimensionContainer__headerLink"
onClick={closeFlyout}
responsive={false}
>
<EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
<EuiFlexItem grow={true}>
<EuiTitle size="xs">
<h2
@ -122,6 +116,7 @@ export function DimensionContainer({
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
color="text"
@ -136,9 +131,9 @@ export function DimensionContainer({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutHeader>
<EuiFlexItem className="eui-yScrollWithShadows" grow={1}>
{panel}
</EuiFlexItem>
<div className="lnsDimensionContainer__content">{panel}</div>
<EuiFlyoutFooter className="lnsDimensionContainer__footer">
<EuiButtonEmpty flush="left" size="s" iconType="cross" onClick={closeFlyout}>
{i18n.translate('xpack.lens.dimensionContainer.close', {

46
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
View file

@ -36,32 +36,32 @@
background: $euiColorLightestShade;
padding: $euiSize;
&:last-child {
border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
}
// Add border to the top of the next same panel
& + & {
border-top: $euiBorderThin;
margin-top: 0;
}
&:last-child {
border-bottom-right-radius: $euiBorderRadius;
border-bottom-left-radius: $euiBorderRadius;
& > * {
margin-bottom: 0;
}
// Targeting EUI class as we are unable to apply a class to this element in component
&,
.euiFormRow__fieldWrapper {
& > * + * {
margin-top: $euiSize;
}
}
}
.lnsLayerPanel__row--notSupportsMoreColumns {
padding-bottom: 0;
}
.lnsLayerPanel__group {
padding: $euiSizeS 0;
margin-bottom: $euiSizeS;
}
.lnsLayerPanel__group:empty {
padding: 0;
}
.lnsLayerPanel__error {
padding: 0 $euiSizeS;
margin: (-$euiSizeS) (-$euiSize);
padding: $euiSizeS $euiSize;
}
.lnsLayerPanel__dimension {
@ -87,11 +87,10 @@
}
.lnsLayerPanel__dimensionContainer {
margin: 0 0 $euiSizeS;
position: relative;
&:last-child {
margin-bottom: 0;
& + & {
margin-top: $euiSizeS;
}
}
@ -105,6 +104,10 @@
min-height: $euiSizeXXL - 2;
word-break: break-word;
font-weight: $euiFontWeightRegular;
@include kbnThemeStyle('v7') {
font-size: $euiFontSizeS;
}
}
.lnsLayerPanel__triggerTextLabel {
@ -119,7 +122,8 @@
}
.lnsLayerPanel__styleEditor {
padding: 0 $euiSizeS $euiSizeS;
margin-top: -$euiSizeS;
padding: 0 $euiSize $euiSize;
}
.lnsLayerPanel__colorIndicator {

2
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
View file

@ -222,7 +222,7 @@ describe('LayerPanel', () => {
const group = instance
.find(EuiFormRow)
.findWhere((e) => e.prop('error')?.props?.children === 'Required dimension');
.findWhere((e) => e.prop('error') === 'Required dimension');
expect(group).toHaveLength(1);
});

165
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
View file

@ -326,12 +326,7 @@ export function LayerPanel(
className="lnsLayerPanel"
style={{ visibility: isDimensionPanelOpen ? 'hidden' : 'visible' }}
>
<EuiPanel
data-test-subj={`lns-layerPanel-${layerIndex}`}
paddingSize="none"
hasBorder
hasShadow
>
<EuiPanel data-test-subj={`lns-layerPanel-${layerIndex}`} paddingSize="none">
<header className="lnsLayerPanel__layerHeader">
<EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">
<EuiFlexItem grow className="lnsLayerPanel__layerSettingsWrapper">
@ -394,16 +389,13 @@ export function LayerPanel(
{groups.map((group, groupIndex) => {
const isMissing = !isEmptyLayer && group.required && group.accessors.length === 0;
return (
<EuiFormRow
className={
group.supportsMoreColumns
? 'lnsLayerPanel__row'
: 'lnsLayerPanel__row lnsLayerPanel__row--notSupportsMoreColumns'
}
className="lnsLayerPanel__row"
fullWidth
label={
<div>
<>
{group.groupLabel}
{group.groupTooltip && (
<>
@ -420,92 +412,91 @@ export function LayerPanel(
/>
</>
)}
</div>
</>
}
labelType="legend"
key={group.groupId}
isInvalid={isMissing}
error={
isMissing ? (
<div className="lnsLayerPanel__error">
{i18n.translate('xpack.lens.editorFrame.requiredDimensionWarningLabel', {
isMissing
? i18n.translate('xpack.lens.editorFrame.requiredDimensionWarningLabel', {
defaultMessage: 'Required dimension',
})}
</div>
) : (
[]
)
})
: []
}
>
<>
<ReorderProvider id={group.groupId} className={'lnsLayerPanel__group'}>
{group.accessors.map((accessorConfig, accessorIndex) => {
const { columnId } = accessorConfig;
{group.accessors.length ? (
<ReorderProvider id={group.groupId} className={'lnsLayerPanel__group'}>
{group.accessors.map((accessorConfig, accessorIndex) => {
const { columnId } = accessorConfig;
return (
<DraggableDimensionButton
registerNewButtonRef={registerNewButtonRef}
accessorIndex={accessorIndex}
columnId={columnId}
group={group}
groups={groups}
groupIndex={groupIndex}
key={columnId}
layerDatasourceDropProps={layerDatasourceDropProps}
label={columnLabelMap[columnId]}
layerDatasource={layerDatasource}
layerIndex={layerIndex}
layerId={layerId}
onDrop={onDrop}
>
<div className="lnsLayerPanel__dimension">
<DimensionButton
accessorConfig={accessorConfig}
label={columnLabelMap[accessorConfig.columnId]}
group={group}
onClick={(id: string) => {
setActiveDimension({
isNew: false,
activeGroup: group,
activeId: id,
});
}}
onRemoveClick={(id: string) => {
trackUiEvent('indexpattern_dimension_removed');
props.updateAll(
datasourceId,
layerDatasource.removeColumn({
layerId,
columnId: id,
prevState: layerDatasourceState,
}),
activeVisualization.removeDimension({
layerId,
columnId: id,
prevState: props.visualizationState,
frame: framePublicAPI,
})
);
removeButtonRef(id);
}}
>
<NativeRenderer
render={layerDatasource.renderDimensionTrigger}
nativeProps={{
...layerDatasourceConfigProps,
columnId: accessorConfig.columnId,
groupId: group.groupId,
filterOperations: group.filterOperations,
invalid: group.invalid,
invalidMessage: group.invalidMessage,
return (
<DraggableDimensionButton
registerNewButtonRef={registerNewButtonRef}
accessorIndex={accessorIndex}
columnId={columnId}
group={group}
groups={groups}
groupIndex={groupIndex}
key={columnId}
layerDatasourceDropProps={layerDatasourceDropProps}
label={columnLabelMap[columnId]}
layerDatasource={layerDatasource}
layerIndex={layerIndex}
layerId={layerId}
onDrop={onDrop}
>
<div className="lnsLayerPanel__dimension">
<DimensionButton
accessorConfig={accessorConfig}
label={columnLabelMap[accessorConfig.columnId]}
group={group}
onClick={(id: string) => {
setActiveDimension({
isNew: false,
activeGroup: group,
activeId: id,
});
}}
/>
</DimensionButton>
</div>
</DraggableDimensionButton>
);
})}
</ReorderProvider>
onRemoveClick={(id: string) => {
trackUiEvent('indexpattern_dimension_removed');
props.updateAll(
datasourceId,
layerDatasource.removeColumn({
layerId,
columnId: id,
prevState: layerDatasourceState,
}),
activeVisualization.removeDimension({
layerId,
columnId: id,
prevState: props.visualizationState,
frame: framePublicAPI,
})
);
removeButtonRef(id);
}}
>
<NativeRenderer
render={layerDatasource.renderDimensionTrigger}
nativeProps={{
...layerDatasourceConfigProps,
columnId: accessorConfig.columnId,
groupId: group.groupId,
filterOperations: group.filterOperations,
invalid: group.invalid,
invalidMessage: group.invalidMessage,
}}
/>
</DimensionButton>
</div>
</DraggableDimensionButton>
);
})}
</ReorderProvider>
) : null}
{group.supportsMoreColumns ? (
<EmptyDimensionButton
group={group}

7
x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
View file

@ -106,11 +106,8 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
}
.lnsConfigPanel {
@include euiScrollBar;
padding: $euiSize $euiSizeXS $euiSizeXL $euiSize;
overflow-x: hidden;
overflow-y: scroll;
padding-left: $euiFormMaxWidth + $euiSize;
@include euiYScroll;
padding: $euiSize $euiSize $euiSizeXL ($euiFormMaxWidth + $euiSize);
margin-left: -$euiFormMaxWidth;
@include euiBreakpoint('xs', 's', 'm') {

29
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
View file

@ -1,20 +1,13 @@
@import '../../../mixins';
.lnsWorkspacePanelWrapper {
@include euiScrollBar;
// Override panel size padding
padding: 0 !important; // sass-lint:disable-line no-important
margin-bottom: $euiSize;
display: flex;
flex-direction: column;
position: relative; // For positioning the dnd overlay
min-height: $euiSizeXXL * 10;
overflow: visible;
border: none;
height: 100%;
@include kbnThemeStyle('v7') {
border: none !important; // sass-lint:disable-line no-important
}
.lnsWorkspacePanelWrapper__pageContentBody {
@include euiScrollBar;
@ -22,6 +15,17 @@
display: flex;
align-items: stretch;
justify-content: stretch;
border-radius: $euiBorderRadius;
background: $euiColorEmptyShade;
height: 100%;
@include kbnThemeStyle('v7') {
@include euiBottomShadowSmall;
}
@include kbnThemeStyle('v8') {
@include euiBottomShadowMedium;
}
> * {
flex: 1 1 100%;
@ -38,10 +42,13 @@
}
.lnsWorkspacePanel__dragDrop {
width: 100%;
height: 100%;
border: $euiBorderThin;
border-radius: $euiBorderRadiusSmall;
@include kbnThemeStyle('v7') {
border: $euiBorderThin;
}
@include kbnThemeStyle('v8') {
border: $euiBorderWidthThin solid transparent;
}
&.lnsDragDrop-isDropTarget {
@include lnsDroppable;

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

@ -125,10 +125,15 @@ export function WorkspacePanelWrapper({
</EuiFlexItem>
</EuiFlexGroup>
</div>
<EuiPageContent
className={classNames('lnsWorkspacePanelWrapper', {
'lnsWorkspacePanelWrapper--fullscreen': isFullscreen,
})}
color="transparent"
hasBorder={false}
hasShadow={false}
paddingSize="none"
>
<WorkspaceTitle />
{children}

1
x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss
View file

@ -54,6 +54,5 @@
.lnsLayerPanelChartSwitch_title {
font-weight: 600;
display: inline;
vertical-align: middle;
padding-left: 8px;
}

13
x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.scss
View file

@ -6,8 +6,8 @@
position: sticky;
top: 0;
background: $euiColorEmptyShade;
// Raise it above the elements that are after it in DOM order
z-index: $euiZLevel1;
z-index: $euiZLevel1; // Raise it above the elements that are after it in DOM order
padding: 0 $euiSize;
}
.lnsIndexPatternDimensionEditor-isFullscreen {
@ -23,21 +23,14 @@
}
.lnsIndexPatternDimensionEditor__section--padded {
padding: $euiSizeS;
padding: $euiSize;
}
.lnsIndexPatternDimensionEditor__section--shaded {
background-color: $euiColorLightestShade;
}
.lnsIndexPatternDimensionEditor__section--top {
border-bottom: $euiBorderThin;
}
.lnsIndexPatternDimensionEditor__section--bottom {
border-top: $euiBorderThin;
}
.lnsIndexPatternDimensionEditor__columns {
column-count: 2;
column-gap: $euiSizeXL;

4
x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
View file

@ -422,7 +422,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
maxWidth={false}
/>
</div>
<EuiSpacer size="s" />
<div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--padded lnsIndexPatternDimensionEditor__section--shaded">
{!incompleteInfo &&
selectedColumn &&
@ -636,8 +636,6 @@ export function DimensionEditor(props: DimensionEditorProps) {
/>
)}
</div>
<EuiSpacer size="s" />
</>
);

8
x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula.scss
View file

@ -17,8 +17,6 @@
}
.lnsFormula__editor {
border-bottom: $euiBorderThin;
.lnsIndexPatternDimensionEditor-isFullscreen & {
border-bottom: none;
display: flex;
@ -32,7 +30,7 @@
.lnsFormula__editorHeader,
.lnsFormula__editorFooter {
padding: $euiSizeS;
padding: $euiSizeS $euiSize;
}
.lnsFormula__editorFooter {
@ -130,7 +128,7 @@
}
.lnsFormula__docsSearch {
padding: $euiSizeS;
padding: $euiSize;
}
.lnsFormula__docsNav {
@ -138,7 +136,7 @@
}
.lnsFormula__docsNavGroup {
padding: $euiSizeS;
padding: $euiSize;
& + & {
border-top: $euiBorderThin;

2
x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_editor.tsx
View file

@ -549,6 +549,8 @@ export function FormulaEditor({
dimension: { width: 320, height: 200 },
fixedOverflowWidgets: true,
matchBrackets: 'always',
// Undocumented Monaco option to force left margin width
lineDecorationsWidth: 16,
},
};

41
x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx
View file

@ -18,6 +18,7 @@ import {
EuiTitle,
EuiFieldSearch,
EuiHighlight,
EuiSpacer,
} from '@elastic/eui';
import { Markdown } from '../../../../../../../../../src/plugins/kibana_react/public';
import { IndexPattern } from '../../../../types';
@ -298,7 +299,7 @@ sum(products.base_price) / overall_sum(sum(products.base_price))
return (
<>
<EuiPopoverTitle className="lnsFormula__docsHeader" paddingSize="s">
<EuiPopoverTitle className="lnsFormula__docsHeader" paddingSize="m">
{i18n.translate('xpack.lens.formulaDocumentation.header', {
defaultMessage: 'Formula reference',
})}
@ -347,22 +348,28 @@ sum(products.base_price) / overall_sum(sum(products.base_price))
</h6>
</EuiTitle>
<EuiListGroup gutterSize="none">
{helpGroup.items.map((helpItem) => {
return (
<EuiListGroupItem
key={helpItem.label}
label={
<EuiHighlight search={searchText}>{helpItem.label}</EuiHighlight>
}
size="s"
onClick={() => {
setSelectedFunction(helpItem.label);
}}
/>
);
})}
</EuiListGroup>
{helpGroup.items.length ? (
<>
<EuiSpacer size="s" />
<EuiListGroup gutterSize="none">
{helpGroup.items.map((helpItem) => {
return (
<EuiListGroupItem
key={helpItem.label}
label={
<EuiHighlight search={searchText}>{helpItem.label}</EuiHighlight>
}
size="s"
onClick={() => {
setSelectedFunction(helpItem.label);
}}
/>
);
})}
</EuiListGroup>
</>
) : null}
</nav>
);
})}

9
x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.scss
View file

@ -1,7 +1,8 @@
.lnsPalettePanel__section--shaded {
background-color: $euiColorLightestShade;
.lnsPalettePanel__section {
padding: $euiSize;
}
.lnsPalettePanel__section {
padding: $euiSizeS;
.lnsPalettePanel__section--shaded {
background-color: $euiColorLightestShade;
border-bottom: $euiBorderThin;
}

38
x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.scss
View file

@ -15,39 +15,15 @@
z-index: $euiZLevel3 + 1
}
.lnsPalettePanelContainer__footer {
padding: $euiSizeS;
}
.lnsPalettePanelContainer__header {
padding: $euiSizeS $euiSizeXS;
padding: $euiSize;
}
.lnsPalettePanelContainer__headerTitle {
padding: $euiSizeS $euiSizeXS;
cursor: pointer;
&:hover {
text-decoration: underline;
}
.lnsPalettePanelContainer__content {
@include euiYScroll;
flex: 1;
}
.lnsPalettePanelContainer__headerLink {
&:focus-within {
background-color: transparentize($euiColorVis1, .9);
.lnsPalettePanelContainer__headerTitle {
text-decoration: underline;
}
}
}
.lnsPalettePanelContainer__backIcon {
&:hover {
transform: none !important; // sass-lint:disable-line no-important
}
&:focus {
background-color: transparent;
}
}
.lnsPalettePanelContainer__footer {
padding: $euiSize;
}

14
x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.tsx
View file

@ -59,12 +59,7 @@ export function PalettePanelContainer({
className="lnsPalettePanelContainer"
>
<EuiFlyoutHeader hasBorder className="lnsPalettePanelContainer__header">
<EuiFlexGroup
gutterSize="none"
alignItems="center"
className="lnsPalettePanelContainer__headerLink"
onClick={closeFlyout}
>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonIcon
color="text"
@ -77,6 +72,7 @@ export function PalettePanelContainer({
})}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="xs">
<h2
@ -93,9 +89,9 @@ export function PalettePanelContainer({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutHeader>
<EuiFlexItem className="eui-yScrollWithShadows" grow={1}>
{children}
</EuiFlexItem>
<div className="lnsPalettePanelContainer__content">{children}</div>
<EuiFlyoutFooter className="lnsPalettePanelContainer__footer">
<EuiButtonEmpty flush="left" size="s" iconType="sortLeft" onClick={closeFlyout}>
{i18n.translate('xpack.lens.table.palettePanelContainer.back', {