[Lens/SCSS] Delete and migrate annotations.scss file

[mariairiartef]

Summary

Part of #208908

Replaces scss to css-in-js.

Checklist

• The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)

[MichaelMarcialis]

Thanks, @mariairiartef! I left a couple of small questions/suggestions below for your review, but otherwise this looks good to me. Assuming you're able to address those, approving now so that I don't hold you up.

[mbondyra]

I don't think it makes sense to keep the whole prefix-y name. The styles are collocated so it's ok to simplify:

Suggested change

	const styles = {
	xyAnnotationTooltip: css({
	borderRadius: '0 !important',
	}),
	xyAnnotationTooltipRows: css({
	// maxHeight: '60vh',
	overflowY: 'hidden',
	}),
	xyAnnotationTooltipRow: ({ euiTheme }: UseEuiTheme) =>
	css({
	fontWeight: euiTheme.font.weight.regular,
	padding: `${euiTheme.size.s} ${euiTheme.size.m} ${euiTheme.size.s} ${euiTheme.size.s}`,
	borderRadius: '0 !important',
	}),
	xyAnnotationTooltipExtraFields: ({ euiTheme }: UseEuiTheme) =>
	css({
	color: euiTheme.colors.darkShade,
	marginTop: euiTheme.size.s,
	}),
	xyAnnotationTooltipExtraFieldsKey: css({
	overflowWrap: 'anywhere',
	hyphens: 'auto',
	}),
	xyAnnotationTooltipExtraFieldsValue: css({
	textAlign: 'right',
	overflowWrap: 'anywhere',
	hyphens: 'auto',
	}),
	xyAnnotationTooltipSkippedCount: ({ euiTheme }: UseEuiTheme) =>
	css({
	position: 'relative',
	textAlign: 'right',
	fontWeight: euiTheme.font.weight.regular,
	}),
	};
	const styles = {
	tooltip: css({
	borderRadius: '0 !important',
	}),
	rows: css({
	// maxHeight: '60vh',
	overflowY: 'hidden',
	}),
	row: ({ euiTheme }: UseEuiTheme) =>
	css({
	fontWeight: euiTheme.font.weight.regular,
	padding: `${euiTheme.size.s} ${euiTheme.size.m} ${euiTheme.size.s} ${euiTheme.size.s}`,
	borderRadius: '0 !important',
	}),
	extraFields: ({ euiTheme }: UseEuiTheme) =>
	css({
	color: euiTheme.colors.darkShade,
	marginTop: euiTheme.size.s,
	}),
	extraFieldKey: css({
	overflowWrap: 'anywhere',
	hyphens: 'auto',
	}),
	extraFieldValue: css({
	textAlign: 'right',
	overflowWrap: 'anywhere',
	hyphens: 'auto',
	}),
	skippedCount: ({ euiTheme }: UseEuiTheme) =>
	css({
	position: 'relative',
	textAlign: 'right',
	fontWeight: euiTheme.font.weight.regular,
	}),
	};

[mariairiartef]

Ok! I've only removed the xyAnnotation prefix here since the first style refers to the tooltip and the rest are related. Let me know if it makes sense too

[mbondyra]

Suggested change

	import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText, useEuiFontSize } from '@elastic/eui';
	import { css } from '@emotion/react';
	import { UseEuiTheme } from '@elastic/eui';
	import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText, useEuiFontSize, UseEuiTheme } from '@elastic/eui';
	import { css } from '@emotion/react';

[mariairiartef]

Fix import

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 6ad4f00

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
expressionXY	294	285	-9

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
expressionXY	125.5KB	121.0KB	-4.4KB

History

• 💔 Build #276902 failed 7d6a816
• 💔 Build #275993 failed 347994e
• 💚 Build #274336 succeeded 2935a42
• 💛 Build #274071 was flaky 64fa8da

cc @mariairiartef

[markov00]

As you have done in the src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx file you can probably remove the xyAnnotation prefix on each style