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

[Lens] Align Lens style with Borealis (#204839)

Browse source 
## Summary

This PR updates the style of Lens to align it with the new Borealis
theme.
It covers the set of tasks in #203050 within the `Lens editor panels`
list.

Comments are applied in order as in the mentioned issue

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Marco Vettorello 2025-01-09 18:28:37 +00:00 • committed by GitHub
parent d7723168a5
commit 75a401ffec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 299 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/platform/packages/shared/kbn-chart-icons/src/assets/drop_illustration.tsx
View file

File diff suppressed because one or more lines are too long

16
src/platform/packages/shared/kbn-coloring/emotion.d.ts vendored Normal file
View file

@ -0,0 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/
import '@emotion/react';
import type { UseEuiTheme } from '@elastic/eui';
declare module '@emotion/react' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface Theme extends UseEuiTheme {}
}

8
src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx
View file

@ -38,10 +38,10 @@ export function ColorPicker({
);
return (
<div style={{ width: 168 }}>
<div css={{ width: 168, position: 'relative' }}>
<EuiPopoverTitle
paddingSize="none"
style={{
css={{
borderBottom: 'none',
}}
>
@ -79,7 +79,9 @@ export function ColorPicker({
close();
deleteStep();
}}
style={{ paddingBottom: 8 }}
css={({ euiTheme }) => ({
paddingBottom: euiTheme.size.s,
})}
>
{i18n.translate('coloring.colorMapping.colorPicker.removeGradientColorButtonLabel', {
defaultMessage: 'Remove color stop',

15
src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx
View file

@ -17,6 +17,7 @@ import {
EuiTitle,
EuiToolTip,
EuiSpacer,
useEuiTheme,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { IKbnPalette, KbnPalette, KbnPalettes } from '@kbn/palettes';
@ -34,6 +35,7 @@ export function PaletteColors({
color: ColorMapping.CategoricalColor | ColorMapping.ColorCode;
selectColor: (color: ColorMapping.CategoricalColor | ColorMapping.ColorCode) => void;
}) {
const { euiTheme } = useEuiTheme();
const colors = Array.from({ length: palette.colorCount }, (d, i) => {
return palette.getColor(i);
});
@ -47,6 +49,11 @@ export function PaletteColors({
? neutralPalette.getColor(color.colorIndex)
: palettes.get(color.paletteId).getColor(color.colorIndex)
: color.colorCode;
const selectedColorSwatchStyle = {
outline: `currentcolor solid ${euiTheme.border.width.thick}`,
outlineOffset: `-${euiTheme.border.width.thin}`,
border: `${euiTheme.border.width.thick} solid ${euiTheme.colors.borderBaseFormsColorSwatch}`,
};
return (
<>
<EuiFlexGroup direction="column" style={{ padding: 8 }}>
@ -70,9 +77,7 @@ export function PaletteColors({
<EuiFlexItem key={c} grow={0}>
<EuiColorPickerSwatch
data-test-subj={`lns-colorMapping-colorPicker-staticColor-${index}`}
style={{
border: isSameColor(c, originalColor) ? '2px solid black' : 'transparent',
}}
css={isSameColor(c, originalColor) ? selectedColorSwatchStyle : undefined}
color={c}
onClick={() =>
selectColor({ type: 'categorical', paletteId: palette.id, colorIndex: index })
@ -116,9 +121,7 @@ export function PaletteColors({
{neutralColors.map((c, index) => (
<EuiFlexItem key={c} grow={0}>
<EuiColorPickerSwatch
style={{
border: isSameColor(c, originalColor) ? '2px solid black' : 'transparent',
}}
css={isSameColor(c, originalColor) ? selectedColorSwatchStyle : undefined}
data-test-subj={`lns-colorMapping-colorPicker-neutralColor-${index}`}
color={c}
onClick={() =>

4
src/platform/packages/shared/kbn-coloring/tsconfig.json
View file

@ -11,7 +11,9 @@
},
"include": [
"**/*.ts",
"**/*.tsx"
"**/*.tsx",
// Emotion theme typing
"./emotion.d.ts"
],
"kbn_references": [
"@kbn/i18n",

8
src/platform/packages/shared/kbn-dom-drag-drop/src/sass/drag_drop_mixins.scss
View file

@ -40,17 +40,17 @@ $domDragDropZLevel3: 3;
// Style for drop area when there's an item being dragged
@mixin mixinDomDroppableActive($borderWidth: $euiBorderWidthThin) {
background-color: transparentize($euiColorVis0, .9) !important;
background-color: $euiColorBackgroundBaseSuccess !important;
&:before {
border-color: $euiColorVis0 !important;
border-color: $euiColorBorderBaseSuccess !important;
}
}
// Style for drop area while hovering with item
@mixin mixinDomDroppableHover($borderWidth: $euiBorderWidthThin) {
background-color: transparentize($euiColorVis0, .75) !important;
background-color: $euiColorBackgroundLightSuccess !important;
&:before {
border-color: $euiColorVis0 !important;
border-color: $euiColorBorderBaseSuccess !important;
}
}

12
src/platform/packages/shared/kbn-dom-drag-drop/src/sass/droppable.scss
View file

@ -51,14 +51,14 @@
}
.domDroppable--incompatible:not(.domDroppable__overlayWrapper) {
background-color: $euiColorHighlight !important;
background-color: $euiColorBackgroundBaseWarning !important;
&:before {
border: $euiBorderWidthThin dashed $euiColorVis5 !important;
border: $euiBorderWidthThin dashed $euiColorBorderBaseWarning !important;
}
&.domDroppable--hover {
background-color: rgba(251, 208, 17, .25) !important;
background-color: $euiColorBackgroundLightWarning !important;
&:before {
border-color: $euiColorVis5 !important;
border-color: $euiColorBorderBaseWarning !important;
}
}
}
@ -114,7 +114,7 @@ $reorderItemMargin: $euiSizeS;
position: relative;
width: 100%;
height: 100%;
background: $euiColorLightestShade;
background: $euiColorBackgroundBasePlain;
border-radius: $euiSizeXS;
.domDroppable__extraTarget,
@ -177,7 +177,7 @@ $reorderItemMargin: $euiSizeS;
}
.domDragDrop-isActiveGroup {
background-color: transparentize($euiColorVis0, .75);
background-color: $euiColorBackgroundLightSuccess;
.domDraggable_active_keyboard--reorderable {
.domDraggable_dragover_keyboard--copy {
opacity: 1;

21
src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx
View file

@ -15,11 +15,10 @@ import {
EuiFlexGroup,
EuiFlexItem,
useEuiFontSize,
useEuiShadow,
useEuiTheme,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
import { DimensionButtonIcon } from './dimension_button_icon';
import { PaletteIndicator } from './palette_indicator';
import type { AccessorConfig, Message } from './types';
@ -54,22 +53,22 @@ function DimensionButtonImpl({
message,
...otherProps // from Drag&Drop integration
}: DimensionButtonProps) {
const { euiTheme } = useEuiTheme();
return (
<div
{...otherProps}
css={css`
${useEuiShadow('xs')}
${useEuiFontSize('s')}
border-radius: ${euiThemeVars.euiBorderRadius};
border-radius: ${euiTheme.border.radius};
position: relative;
line-height: 1;
overflow: hidden;
display: flex;
align-items: center;
gap: ${euiThemeVars.euiSizeS};
min-height: ${euiThemeVars.euiSizeXL};
padding: ${euiThemeVars.euiSizeXS} ${euiThemeVars.euiSizeS};
background: ${euiThemeVars.euiColorEmptyShade};
gap: ${euiTheme.size.s};
min-height: ${euiTheme.size.xl};
padding: ${euiTheme.size.xs} ${euiTheme.size.s};
background-color: ${euiTheme.colors.backgroundBaseSubdued};
`}
>
<EuiFlexGroup direction="row" alignItems="center" gutterSize="none" responsive={false}>
@ -118,8 +117,8 @@ function DimensionButtonImpl({
})}
onClick={() => onRemoveClick(accessorConfig.columnId)}
css={css`
color: ${euiThemeVars.euiTextSubduedColor};
transition: ${euiThemeVars.euiAnimSpeedFast} ease-in-out;
color: ${euiTheme.colors.textSubdued}
transition: ${euiTheme.animation.fast} ease-in-out;
transition-property: color, opacity, background-color, transform;
opacity: 0;
@ -129,7 +128,7 @@ function DimensionButtonImpl({
}
&:hover,
&:focus {
color: ${euiThemeVars.euiColorDangerText};
color: ${euiTheme.colors.textDanger};
}
`}
/>

2
src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/buckets.test.tsx
View file

@ -65,7 +65,7 @@ describe('buckets shared components', () => {
it('should render invalid component', () => {
const instance = mount(<DraggableBucketContainer {...defaultProps} isInvalid />);
const iconProps = instance.find(EuiIcon).first().props();
expect(iconProps.color).toEqual('#BD271E');
expect(iconProps.color.toUpperCase()).toEqual('#BD271E');
expect(iconProps.type).toEqual('warning');
});
it('should call onRemoveClick when remove icon is clicked', () => {

6
src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx
View file

@ -56,7 +56,11 @@ export const DefaultBucketContainer = ({
<EuiIcon
size="s"
color={
euiTheme.colors[isInvalid ? 'danger' : isNotDraggable ? 'disabled' : 'subduedText']
isInvalid
? euiTheme.colors.textDanger
: isNotDraggable
? euiTheme.colors.textDisabled
: euiTheme.colors.textSubdued
}
type={isInvalid ? 'warning' : 'grab'}
aria-label={

2
src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx
View file

@ -53,7 +53,7 @@ export const FieldsBucketContainer = ({
>
<EuiIcon
size="s"
color={euiTheme.colors[isNotDraggable ? 'disabled' : 'text']}
color={isNotDraggable ? euiTheme.colors.textDisabled : euiTheme.colors.textParagraph}
type="grab"
aria-label={i18n.translate(
'visualizationUiComponents.fieldsBucketContainer.dragToReorder',

1
x-pack/platform/plugins/shared/lens/public/datasources/common/field_item.tsx
View file

@ -264,6 +264,7 @@ export function InnerFieldItem(props: FieldItemProps) {
order={order}
onDragStart={closePopover}
dataTestSubj={`lnsFieldListPanelField-${field.name}`}
dragClassName="unifiedFieldListItemButton__dragging"
>
{isTextBasedColumnField(field) ? (
<FieldItemButton<DatatableColumn>

8
x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.scss
View file

@ -2,6 +2,14 @@
width: 100%;
height: 100%;
padding: $euiSize $euiSize 0;
.unifiedFieldListItemButton.kbnFieldButton {
background: none;
box-shadow: none;
margin-bottom: calc($euiSizeXS / 2);
}
.unifiedFieldListItemButton__dragging {
background: $euiColorBackgroundBasePlain;
}
}
.lnsInnerIndexPatternDataPanel__switcher {

5
x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.scss
View file

@ -28,11 +28,6 @@
margin-top: 0 !important;
}
.lnsIndexPatternDimensionEditor--shaded {
background-color: $euiColorLightestShade;
border-bottom: $euiBorderThin;
}
.lnsIndexPatternDimensionEditor__columns {
display: block;
column-count: 2;

2
x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula.scss
View file

@ -36,7 +36,6 @@
.lnsFormula__editorFooter {
// make sure docs are rendered in front of monaco
z-index: 1;
background-color: $euiColorLightestShade;
border-bottom-right-radius: $euiBorderRadius;
border-bottom-left-radius: $euiBorderRadius;
}
@ -47,6 +46,7 @@
}
.lnsFormula__editorContent {
background-color: $euiColorBackgroundBasePlain;
min-height: 0;
position: relative;

428
x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
View file

@ -702,21 +702,37 @@ export function FormulaEditor({
})}
</EuiFormLabel>
)}
<div
className="lnsIndexPatternDimensionEditor--shaded"
css={css`
border: ${!isFullscreen ? euiTheme.border.thin : 'none'};
border-radius: ${!isFullscreen ? euiTheme.border.radius.medium : 0};
height: ${isFullscreen ? '100%' : 'auto'};
`}
className="lnsFormula"
css={{
backgroundColor: euiTheme.colors.backgroundBaseSubdued,
border: isFullscreen ? 'none' : euiTheme.border.thin,
borderRadius: isFullscreen ? 0 : euiTheme.border.radius.medium,
height: isFullscreen ? '100%' : 'auto',
}}
>
<div className="lnsFormula">
<div className="lnsFormula__editor">
<div className="lnsFormula__editorHeader">
<EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
<EuiFlexItem className="lnsFormula__editorHeaderGroup">
<EuiToolTip
content={
<div className="lnsFormula__editor">
<div className="lnsFormula__editorHeader">
<EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
<EuiFlexItem className="lnsFormula__editorHeaderGroup">
<EuiToolTip
content={
isWordWrapped
? i18n.translate('xpack.lens.formula.disableWordWrapLabel', {
defaultMessage: 'Disable word wrap',
})
: i18n.translate('xpack.lens.formulaEnableWordWrapLabel', {
defaultMessage: 'Enable word wrap',
})
}
position="top"
>
<EuiButtonIcon
iconType={isWordWrapped ? 'wordWrap' : 'wordWrapDisabled'}
display={!isWordWrapped ? 'fill' : undefined}
color={'text'}
aria-label={
isWordWrapped
? i18n.translate('xpack.lens.formula.disableWordWrapLabel', {
defaultMessage: 'Disable word wrap',
@ -725,213 +741,197 @@ export function FormulaEditor({
defaultMessage: 'Enable word wrap',
})
}
position="top"
>
<EuiButtonIcon
iconType={isWordWrapped ? 'wordWrap' : 'wordWrapDisabled'}
display={!isWordWrapped ? 'fill' : undefined}
color={'text'}
aria-label={
isWordWrapped
? i18n.translate('xpack.lens.formula.disableWordWrapLabel', {
defaultMessage: 'Disable word wrap',
})
: i18n.translate('xpack.lens.formulaEnableWordWrapLabel', {
defaultMessage: 'Enable word wrap',
})
}
isSelected={!isWordWrapped}
onClick={() => {
editor1.current?.updateOptions({
wordWrap: isWordWrapped ? 'off' : 'on',
});
toggleWordWrap(!isWordWrapped);
}}
/>
</EuiToolTip>
</EuiFlexItem>
<EuiFlexItem className="lnsFormula__editorHeaderGroup" grow={false}>
<EuiButtonEmpty
isSelected={!isWordWrapped}
onClick={() => {
toggleFullscreen();
// Help text opens when entering full screen, and closes when leaving full screen
setIsHelpOpen(!isFullscreen);
editor1.current?.updateOptions({
wordWrap: isWordWrapped ? 'off' : 'on',
});
toggleWordWrap(!isWordWrapped);
}}
iconType={isFullscreen ? 'fullScreenExit' : 'fullScreen'}
size="xs"
color="text"
flush="right"
data-test-subj="lnsFormula-fullscreen"
>
{isFullscreen
? i18n.translate('xpack.lens.formula.fullScreenExitLabel', {
defaultMessage: 'Collapse',
})
: i18n.translate('xpack.lens.formula.fullScreenEnterLabel', {
defaultMessage: 'Expand',
})}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</div>
/>
</EuiToolTip>
</EuiFlexItem>
<div className="lnsFormula__editorContent">
<CodeEditor
{...codeEditorOptions}
options={{
...codeEditorOptions.options,
// Shared model and overflow node
overflowWidgetsDomNode: overflowDiv1.current,
}}
editorDidMount={(editor) => {
editor1.current = editor;
const model = editor.getModel();
if (model) {
editorModel.current = model;
}
// If we ever introduce a second Monaco editor, we need to toggle
// the typing handler to the active editor to maintain the cursor
disposables.current.push(
editor.onDidChangeModelContent((e) => {
onTypeHandler(e, editor);
})
);
}}
/>
{!text ? (
<div className="lnsFormula__editorPlaceholder">
<EuiText color="subdued" size="s">
{i18n.translate('xpack.lens.formulaPlaceholderText', {
defaultMessage: 'Type a formula by combining functions with math, like:',
})}
</EuiText>
<EuiSpacer size="s" />
<pre>count() + 1</pre>
</div>
) : null}
</div>
<div className="lnsFormula__editorFooter">
<EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
<EuiFlexItem className="lnsFormula__editorFooterGroup">
{isFullscreen ? (
<EuiToolTip
content={
isHelpOpen
? i18n.translate('xpack.lens.formula.editorHelpInlineHideToolTip', {
defaultMessage: 'Hide function reference',
})
: i18n.translate('xpack.lens.formula.editorHelpInlineShowToolTip', {
defaultMessage: 'Show function reference',
})
}
delay="long"
position="top"
>
<EuiLink
aria-label={i18n.translate('xpack.lens.formula.editorHelpInlineHideLabel', {
defaultMessage: 'Hide function reference',
})}
className="lnsFormula__editorHelp lnsFormula__editorHelp--inline"
color="text"
onClick={() => setIsHelpOpen(!isHelpOpen)}
>
<EuiIcon type="documentation" />
<EuiIcon type={isHelpOpen ? 'arrowDown' : 'arrowUp'} />
</EuiLink>
</EuiToolTip>
) : (
<LanguageDocumentationPopover
language="Formula"
sections={documentationSections}
buttonProps={{
color: 'text',
className: 'lnsFormula__editorHelp lnsFormula__editorHelp--overlay',
'data-test-subj': 'ESQLEditor-documentation',
'aria-label': i18n.translate(
'xpack.lens.formula.editorHelpInlineShowToolTip',
{
defaultMessage: 'Show function reference',
}
),
}}
isHelpMenuOpen={isHelpOpen}
onHelpMenuVisibilityChange={setIsHelpOpen}
/>
)}
</EuiFlexItem>
{errorCount || warningCount ? (
<EuiFlexItem className="lnsFormula__editorFooterGroup" grow={false}>
<EuiPopover
ownFocus={false}
isOpen={isWarningOpen}
closePopover={() => setIsWarningOpen(false)}
button={
<EuiButtonEmpty
color={errorCount ? 'danger' : 'warning'}
className="lnsFormula__editorError"
iconType="warning"
size="xs"
flush="right"
onClick={() => {
setIsWarningOpen(!isWarningOpen);
}}
>
{errorCount
? i18n.translate('xpack.lens.formulaErrorCount', {
defaultMessage:
'{count} {count, plural, one {error} other {errors}}',
values: { count: errorCount },
})
: null}
{warningCount
? i18n.translate('xpack.lens.formulaWarningCount', {
defaultMessage:
'{count} {count, plural, one {warning} other {warnings}}',
values: { count: warningCount },
})
: null}
</EuiButtonEmpty>
}
>
<div
css={css`
max-width: 400px;
`}
>
{warnings.map(({ message, severity }, index) => (
<div key={index} className="lnsFormula__warningText">
<EuiText
size="s"
color={
severity === monaco.MarkerSeverity.Warning ? 'warning' : 'danger'
}
>
{message}
</EuiText>
</div>
))}
</div>
</EuiPopover>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</div>
<EuiFlexItem className="lnsFormula__editorHeaderGroup" grow={false}>
<EuiButtonEmpty
onClick={() => {
toggleFullscreen();
// Help text opens when entering full screen, and closes when leaving full screen
setIsHelpOpen(!isFullscreen);
}}
iconType={isFullscreen ? 'fullScreenExit' : 'fullScreen'}
size="xs"
color="text"
flush="right"
data-test-subj="lnsFormula-fullscreen"
>
{isFullscreen
? i18n.translate('xpack.lens.formula.fullScreenExitLabel', {
defaultMessage: 'Collapse',
})
: i18n.translate('xpack.lens.formula.fullScreenEnterLabel', {
defaultMessage: 'Expand',
})}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</div>
{/* fix the css here */}
{isFullscreen && isHelpOpen ? (
<div className="lnsFormula__docs documentation__docs--inline">
<LanguageDocumentationPopoverContent
language="Formula"
sections={documentationSections}
/>
</div>
) : null}
<div className="lnsFormula__editorContent">
<CodeEditor
{...codeEditorOptions}
transparentBackground={true}
options={{
...codeEditorOptions.options,
// Shared model and overflow node
overflowWidgetsDomNode: overflowDiv1.current,
}}
editorDidMount={(editor) => {
editor1.current = editor;
const model = editor.getModel();
if (model) {
editorModel.current = model;
}
// If we ever introduce a second Monaco editor, we need to toggle
// the typing handler to the active editor to maintain the cursor
disposables.current.push(
editor.onDidChangeModelContent((e) => {
onTypeHandler(e, editor);
})
);
}}
/>
{!text ? (
<div className="lnsFormula__editorPlaceholder">
<EuiText color="subdued" size="s">
{i18n.translate('xpack.lens.formulaPlaceholderText', {
defaultMessage: 'Type a formula by combining functions with math, like:',
})}
</EuiText>
<EuiSpacer size="s" />
<pre>count() + 1</pre>
</div>
) : null}
</div>
<div className="lnsFormula__editorFooter">
<EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
<EuiFlexItem className="lnsFormula__editorFooterGroup">
{isFullscreen ? (
<EuiToolTip
content={
isHelpOpen
? i18n.translate('xpack.lens.formula.editorHelpInlineHideToolTip', {
defaultMessage: 'Hide function reference',
})
: i18n.translate('xpack.lens.formula.editorHelpInlineShowToolTip', {
defaultMessage: 'Show function reference',
})
}
delay="long"
position="top"
>
<EuiLink
aria-label={i18n.translate('xpack.lens.formula.editorHelpInlineHideLabel', {
defaultMessage: 'Hide function reference',
})}
className="lnsFormula__editorHelp lnsFormula__editorHelp--inline"
color="text"
onClick={() => setIsHelpOpen(!isHelpOpen)}
>
<EuiIcon type="documentation" />
<EuiIcon type={isHelpOpen ? 'arrowDown' : 'arrowUp'} />
</EuiLink>
</EuiToolTip>
) : (
<LanguageDocumentationPopover
language="Formula"
sections={documentationSections}
buttonProps={{
color: 'text',
className: 'lnsFormula__editorHelp lnsFormula__editorHelp--overlay',
'data-test-subj': 'ESQLEditor-documentation',
'aria-label': i18n.translate(
'xpack.lens.formula.editorHelpInlineShowToolTip',
{
defaultMessage: 'Show function reference',
}
),
}}
isHelpMenuOpen={isHelpOpen}
onHelpMenuVisibilityChange={setIsHelpOpen}
/>
)}
</EuiFlexItem>
{errorCount || warningCount ? (
<EuiFlexItem className="lnsFormula__editorFooterGroup" grow={false}>
<EuiPopover
ownFocus={false}
isOpen={isWarningOpen}
closePopover={() => setIsWarningOpen(false)}
button={
<EuiButtonEmpty
color={errorCount ? 'danger' : 'warning'}
className="lnsFormula__editorError"
iconType="warning"
size="xs"
flush="right"
onClick={() => {
setIsWarningOpen(!isWarningOpen);
}}
>
{errorCount
? i18n.translate('xpack.lens.formulaErrorCount', {
defaultMessage: '{count} {count, plural, one {error} other {errors}}',
values: { count: errorCount },
})
: null}
{warningCount
? i18n.translate('xpack.lens.formulaWarningCount', {
defaultMessage:
'{count} {count, plural, one {warning} other {warnings}}',
values: { count: warningCount },
})
: null}
</EuiButtonEmpty>
}
>
<div
css={css`
max-width: ${euiTheme.components.forms.maxWidth};
`}
>
{warnings.map(({ message, severity }, index) => (
<div key={index} className="lnsFormula__warningText">
<EuiText
size="s"
color={
severity === monaco.MarkerSeverity.Warning ? 'warning' : 'danger'
}
>
{message}
</EuiText>
</div>
))}
</div>
</EuiPopover>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</div>
</div>
{/* fix the css here */}
{isFullscreen && isHelpOpen ? (
<div className="lnsFormula__docs documentation__docs--inline">
<LanguageDocumentationPopoverContent
language="Formula"
sections={documentationSections}
/>
</div>
) : null}
</div>
</div>
);

2
x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
View file

@ -33,7 +33,6 @@
}
.lnsLayerPanel__row {
background: $euiColorLightestShade;
padding: $euiSize;
&:last-child {
@ -72,7 +71,6 @@
.lnsLayerPanel__dimensionContainer {
position: relative;
&+& {
margin-top: $euiSizeS;
}

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

@ -363,7 +363,7 @@ export function LayerPanel(props: LayerPanelProps) {
className="lnsLayerPanel"
data-test-subj={`lns-layerPanel-${layerIndex}`}
>
<EuiPanel paddingSize="none">
<EuiPanel paddingSize="none" hasShadow={false} hasBorder>
<header className="lnsLayerPanel__layerHeader">
<EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">
<EuiFlexItem grow className="lnsLayerPanel__layerSettingsWrapper">

1
x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.scss
View file

@ -1,7 +1,6 @@
.lnsDataPanelWrapper {
flex: 1 0 100%;
overflow: hidden;
background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk);
}
.lnsDataPanelWrapper__switchSource {

1
x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.scss
View file

@ -98,7 +98,6 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
.lnsFrameLayout__sidebar--right {
flex-basis: 25%;
background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk);
min-width: $lnsPanelMinWidth + 70;
max-width: $euiFormMaxWidth + $euiSizeXXL;
max-height: 100%;

2
x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
View file

@ -16,11 +16,11 @@
}
.lnsWorkspacePanelWrapper__pageContentBody {
@include euiBottomShadowMedium;
flex-grow: 1;
display: flex;
align-items: stretch;
justify-content: stretch;
border: $euiBorderThin;
border-radius: $euiBorderRadius;
background: $euiColorEmptyShade;
height: 100%;