Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression #208891

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression #208891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fa77ee1
[Lens] Remove scss from annotations plugin
mbondyra Jan 30, 2025
64ce159
scss another file
mbondyra Jan 30, 2025
22ca894
field picker
mbondyra Jan 30, 2025
61d4f29
scss in src/platform/packages/shared/kbn-visualization-ui-components/
mbondyra Jan 30, 2025
ae1d1ae
scss in src/platform/packages/shared/kbn-visualization-ui-components/
mbondyra Jan 30, 2025
770a7be
gauge expression
mbondyra Jan 30, 2025
552883d
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Jan 30, 2025
2112f74
=remove import
mbondyra Jan 30, 2025
56d998a
wip lens
mbondyra Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion ...nnotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import './index.scss';
import { isFieldLensCompatible } from '@kbn/visualization-ui-components';
import React, { useCallback, useEffect, useMemo } from 'react';
import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -41,6 +40,8 @@ import type {
PointInTimeEventAnnotationConfig,
QueryPointEventAnnotationConfig,
} from '@kbn/event-annotation-common';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
import { isQueryAnnotationConfig, isRangeAnnotationConfig } from '../..';
import {
defaultAnnotationColor,
Expand Down Expand Up @@ -366,6 +367,11 @@ const AnnotationEditorControls = ({
<EuiFormRow
display="rowCompressed"
className="lnsRowCompressedMargin"
css={css`
& + .lnsRowCompressedMargin {
margin-top: ${euiThemeVars.euiSizeS};
}
`}
Comment on lines +370 to +374
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This same style is used multiple times throughout this PR. To keep things DRY, would it be better to store this style in a separate .style.ts file and reference that one style in all locations, rather than repeating the style?

fullWidth
label={i18n.translate('eventAnnotationComponents.xyChart.annotation.tooltip', {
defaultMessage: 'Show additional fields',
Expand Down
15 changes: 0 additions & 15 deletions ...s/shared/kbn-event-annotation-components/components/annotation_editor_controls/index.scss
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions ...nt-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import {
} from '@kbn/visualization-ui-components';
import type { DataView } from '@kbn/data-views-plugin/common';
import type { QueryPointEventAnnotationConfig } from '@kbn/event-annotation-common';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';

export const defaultQuery: Query = {
query: '',
Expand Down Expand Up @@ -71,6 +73,12 @@ export const ConfigPanelQueryAnnotation = ({
hasChildLabel
display="rowCompressed"
className="lnsRowCompressedMargin"
css={css`
& + .lnsRowCompressedMargin {
margin-top: ${euiThemeVars.euiSizeS};
}
}
`}
fullWidth
label={i18n.translate('eventAnnotationComponents.xyChart.annotation.queryInput', {
defaultMessage: 'Annotation query',
Expand Down
20 changes: 19 additions & 1 deletion ...nt-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import type {
PointInTimeEventAnnotationConfig,
RangeEventAnnotationConfig,
} from '@kbn/event-annotation-common';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
import { isRangeAnnotationConfig } from '../..';
import { defaultRangeAnnotationLabel, defaultAnnotationLabel } from './helpers';
import { toLineAnnotationColor, toRangeAnnotationColor } from './helpers';
Expand All @@ -31,7 +33,15 @@ export const ConfigPanelApplyAsRangeSwitch = ({
}) => {
const isRange = isRangeAnnotationConfig(annotation);
return (
<EuiFormRow display="columnCompressed" className="lnsRowCompressedMargin">
<EuiFormRow
display="columnCompressed"
className="lnsRowCompressedMargin"
css={css`
& + .lnsRowCompressedMargin {
margin-top: ${euiThemeVars.euiSizeS};
}
`}
>
<EuiSwitch
data-test-subj="lns-xyAnnotation-rangeSwitch"
label={
Expand Down Expand Up @@ -105,6 +115,14 @@ export const ConfigPanelRangeDatePicker = ({
fullWidth
label={label}
className="lnsConfigPanelAnnotations__date lnsRowCompressedMargin"
css={css`
& + .lnsRowCompressedMargin {
margin-top: ${euiThemeVars.euiSizeS};
}
.euiFormControlLayout__prepend {
min-width: 50px; // makes both labels ("from" and "to") the same width
}
`}
>
<EuiDatePicker
compressed
Expand Down
6 changes: 5 additions & 1 deletion ...-annotation-components/components/annotation_editor_controls/tooltip_annotation_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import {
} from '@kbn/visualization-ui-components';
import { DataView } from '@kbn/data-views-plugin/common';
import type { QueryPointEventAnnotationConfig } from '@kbn/event-annotation-common';
import { euiThemeVars } from '@kbn/ui-theme';
import { css } from '@emotion/react';

export const MAX_TOOLTIP_FIELDS_SIZE = 3;

Expand Down Expand Up @@ -78,7 +80,9 @@ export function TooltipSection({ currentConfig, setConfig, dataView }: FieldInpu

const addFieldButton = (
<NewBucketButton
className="lnsConfigPanelAnnotations__addButton"
css={css`
margin-top: ${euiThemeVars.euiSizeXS};
`}
data-test-subj={`lnsXY-annotation-tooltip-add_field`}
onClick={() => {
setFields([...currentFields, { name: '', id: generateId() }]);
Expand Down
5 changes: 1 addition & 4 deletions src/platform/packages/shared/kbn-event-annotation-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,5 @@
"name": "@kbn/event-annotation-components",
"private": true,
"version": "1.0.0",
"license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
"sideEffects": [
"*.scss"
]
"license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
}
29 changes: 0 additions & 29 deletions .../packages/shared/kbn-visualization-ui-components/components/dimension_editor_section.scss
View file
Open in desktop

This file was deleted.

39 changes: 35 additions & 4 deletions ...m/packages/shared/kbn-visualization-ui-components/components/dimension_editor_section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@

import { EuiTitle } from '@elastic/eui';
import React from 'react';
import './dimension_editor_section.scss';
import { euiThemeVars } from '@kbn/ui-theme';
import { css } from '@emotion/react';

export const DimensionEditorSection = ({
children,
Expand All @@ -19,10 +20,40 @@ export const DimensionEditorSection = ({
children?: React.ReactNode | React.ReactNode[];
}) => {
return (
<div className="lnsDimensionEditorSection">
<div className="lnsDimensionEditorSection__border" />
<div
css={css`
padding-bottom: ${euiThemeVars.euiSize};
padding-top: ${euiThemeVars.euiSize};
:first-child {
padding-top: 0;
.lnsDimensionEditorSection__border {
display: none;
}
}
`}
>
<div
className="lnsDimensionEditorSection__border"
css={css`
position: relative;
&:before {
content: '';
position: absolute;
top: -${euiThemeVars.euiSize};
right: -${euiThemeVars.euiSize};
left: -${euiThemeVars.euiSize};
border-top: 1px solid ${euiThemeVars.euiColorLightShade};
}
`}
/>
{title && (
<EuiTitle size="xxs" className="lnsDimensionEditorSection__heading">
<EuiTitle
size="xxs"
data-test-subj="lnsDimensionEditorSectionHeading"
css={css`
padding-bottom: ${euiThemeVars.euiSize};
`}
>
<h3>{title}</h3>
</EuiTitle>
)}
Expand Down
7 changes: 0 additions & 7 deletions ...packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.scss
View file
Open in desktop

This file was deleted.

19 changes: 9 additions & 10 deletions .../packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,13 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import './field_picker.scss';
import React from 'react';
import { i18n } from '@kbn/i18n';
import classNames from 'classnames';
import { comboBoxFieldOptionMatcher } from '@kbn/field-utils';
import { EuiComboBox, EuiComboBoxOptionOption, EuiComboBoxProps } from '@elastic/eui';
import { FieldIcon } from '@kbn/field-utils/src/components/field_icon';
import { calculateWidthFromCharCount } from '@kbn/calculate-width-from-char-count';
import { euiThemeVars } from '@kbn/ui-theme';
import type { FieldOptionValue, FieldOption } from './types';

export interface FieldPickerProps<T extends FieldOptionValue>
Expand Down Expand Up @@ -63,10 +62,10 @@ export function FieldPicker<T extends FieldOptionValue = FieldOptionValue>(
className="eui-alignMiddle"
/>
) : null,
className: classNames({
'lnFieldPicker__option--incompatible': !fieldOption.compatible,
'lnFieldPicker__option--nonExistant': !fieldOptionExists,
}),
css: {
color: !fieldOption.compatible ? euiThemeVars.euiColorLightShade : undefined,
backgroundColor: !fieldOptionExists ? euiThemeVars.euiColorLightestShade : undefined,
},
Comment on lines +65 to +68
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment here as previous. Is there anything that can be done here to avoid repeating the same styles?

};
}),
};
Expand All @@ -77,10 +76,10 @@ export function FieldPicker<T extends FieldOptionValue = FieldOptionValue>(
prepend: otherAttr.value.dataType ? (
<FieldIcon type={otherAttr.value.dataType} fill="none" className="eui-alignMiddle" />
) : null,
className: classNames({
'lnFieldPicker__option--incompatible': !compatible,
'lnFieldPicker__option--nonExistant': !exists,
}),
css: {
color: !compatible ? euiThemeVars.euiColorLightShade : undefined,
backgroundColor: !exists ? euiThemeVars.euiColorLightestShade : undefined,
},
};
});

Expand Down
11 changes: 0 additions & 11 deletions ...ges/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.scss
View file
Open in desktop

This file was deleted.

16 changes: 15 additions & 1 deletion ...ages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,14 @@ import {
EuiFlexGroup,
EuiIconTip,
EuiPopoverProps,
euiTextBreakWord,
useEuiFontSize,
} from '@elastic/eui';
import type { DataViewBase, Query } from '@kbn/es-query';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like the EUI team is asking people to move away from using euiThemeVars and instead using the useEuiTheme hook. See #199715 and search for euiThemeVars.

Before:

import { EuiIcon, EuiCode, EuiText, useEuiTheme } from '@elastic/eui';
height: ${euiThemeVars.euiSizeXS} / 2;

After:

import { useEuiTheme } from '@elastic/eui'
const { euiTheme } = useEuiTheme();
height: ${euiTheme.size.xs} / 2;

import { QueryInput, validateQuery } from '.';
import type { QueryInputServices } from '.';
import './filter_query_input.scss';

const filterByLabel = i18n.translate('visualizationUiComponents.filterQueryInput.label', {
defaultMessage: 'Filter by',
Expand Down Expand Up @@ -100,6 +103,11 @@ export function FilterQueryInput({
isOpen={filterPopoverOpen}
closePopover={onClosePopup}
display="block"
panelProps={{
css: css`
width: 960px;
`,
}}
panelClassName="filterQueryInput__popover"
initialFocus={dataTestSubj ? `textarea[data-test-subj='${dataTestSubj}']` : undefined}
button={
Expand All @@ -113,6 +121,12 @@ export function FilterQueryInput({
onClick={() => {
setFilterPopoverOpen(!filterPopoverOpen);
}}
css={css`
${euiTextBreakWord()};
${useEuiFontSize('s')};
min-height: ${euiThemeVars.euiSizeXL};
width: 100%;
`}
color={isInputFilterValid ? 'text' : 'danger'}
title={i18n.translate(
'visualizationUiComponents.filterQueryInput.clickToEdit',
Expand Down
5 changes: 1 addition & 4 deletions src/platform/packages/shared/kbn-visualization-ui-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,5 @@
"name": "@kbn/visualization-ui-components",
"private": true,
"version": "1.0.0",
"license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
"sideEffects": [
"*.scss"
]
"license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
}
12 changes: 0 additions & 12 deletions src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/gauge.scss
View file
Open in desktop

This file was deleted.

Loading