[Lens] Annotations design review (#140588)

* feedback from Michael p1

* Update src/plugins/chart_expressions/expression_xy/public/components/annotations.tsx

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Apply suggestions from code review

Co-authored-by: Michael Marcialis <michael@marcial.is>

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* feedback

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* don't allow to dnd 1 element

* fix types

* Apply suggestions from code review

Co-authored-by: Michael Marcialis <michael@marcial.is>

* more suggestions

* linting

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Michael Marcialis <michael@marcial.is>

src/plugins/chart_expressions/expression_xy/common/types/expression_renderers.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { AnnotationTooltipFormatter } from '@elastic/charts';
+import { CustomAnnotationTooltip } from '@elastic/charts';
 import {
   AvailableAnnotationIcon,
   ManualPointEventAnnotationArgs,
@@ -28,6 +28,6 @@ export interface MergedAnnotation extends Omit<ManualPointEventAnnotationArgs, '
   timebucket: number;
   position: 'bottom';
   icon?: AvailableAnnotationIcon | string;
-  customTooltipDetails: AnnotationTooltipFormatter;
+  customTooltip: CustomAnnotationTooltip;
   isGrouped: boolean;
 }

src/plugins/chart_expressions/expression_xy/public/components/annotations.scss

@@ -17,6 +17,45 @@
   transform-origin: center;
 }
 
+.xyAnnotationTooltip {
+  border-radius: 0 !important;
+}
+
+.xyAnnotationTooltip__rows {
+  // max-height: 60vh;
+  overflow-y: hidden;
+}
+
 .xyAnnotationTooltipDetail {
-  padding: $euiSizeXS ($euiSizeXS * 2);
+  padding: $euiSizeXS (
+    $euiSizeXS * 2
+  );
+}
+
+.xyAnnotationTooltip__row {
+  font-weight: $euiFontWeightRegular;
+  padding: $euiSizeS $euiSizeM $euiSizeS $euiSizeS;
+  border-radius: 0 !important;
+}
+
+.xyAnnotationTooltip__extraFields {
+  color: $euiColorDarkShade;
+  margin-top: $euiSizeS;
+}
+
+.xyAnnotationTooltip__extraFieldsKey {
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+.xyAnnotationTooltip__extraFieldsValue {
+  text-align: right;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+.xyAnnotationTooltip__skippedCount {
+  position: relative;
+  text-align: right;
+  font-weight: $euiFontWeightRegular;
 }