feat(tooltip): composable tooltips - phase 1 (#1725)

Redesigned tooltip styles and adds composable tooltip components for users to develop custom tooltip configurations. Adds the option for `header` and `tooltip` on the default tooltip that provides the tooltip items for contextual headers and footers.

BREAKING CHANGE: `Settings.tooltip` is deprecated in favor of the new `Tooltip` spec. Type changes related to `TooltipProps`, `TooltipSettings` and others see #1725. Changes to tooltip styles from dark to light theme. The Annotation tooltip class `.echAnnotation` used to target the icon, but now refers to the tooltip itself similar to `.echTooltip` and now `.echAnnotation__marker` refers to the icon itself.

```diff
 const tooltipProps = {...};
 <Chart>
-  <Settings tooltip={tooltipProps} />
+  <Tooltip {...tooltipProps} />
 </Chart>
```

.buildkite/utils/exec.ts

@@ -60,7 +60,8 @@ export const exec = async (
   }
 };
 
-export const yarnInstall = async (cwd?: string) => {
+export const yarnInstall = async (cwd?: string, ignoreScripts = true) => {
   startGroup(`Installing node modules${cwd ? ` [${cwd}]` : ''}`);
-  await exec('yarn install --frozen-lockfile', { cwd });
+  const scriptFlag = ignoreScripts ? ' --ignore-scripts' : '';
+  await exec(`yarn install --frozen-lockfile${scriptFlag}`, { cwd });
 };

.eslintrc.js

@@ -163,7 +163,7 @@ module.exports = {
      * @typescript-eslint plugin
      */
     '@typescript-eslint/interface-name-prefix': 0,
-    '@typescript-eslint/ban-types': process.env.NODE_ENV === 'production' ? 2 : 1,
+    '@typescript-eslint/ban-types': 1,
     '@typescript-eslint/return-await': ['error', 'always'], // https://v8.dev/blog/fast-async
     '@typescript-eslint/explicit-member-accessibility': ['error', { accessibility: 'no-public' }],
     '@typescript-eslint/no-explicit-any': 0,

e2e/helpers.ts

@@ -10,17 +10,19 @@ import { test, Page } from '@playwright/test';
 
 import { Rotation } from './constants';
 
+interface FileExample {
+  slugifiedName: string;
+  name: string;
+  filename: string;
+  url: string;
+  filePath: string;
+}
+
 type TestExamples = {
   groupFile: string;
   slugifiedGroupTitle: string;
   groupTitle: string;
-  exampleFiles: {
-    slugifiedName: string;
-    name: string;
-    filename: string;
-    url: string;
-    filePath: string;
-  }[];
+  exampleFiles: FileExample[];
 }[];
 
 export interface StoryGroupInfo {
@@ -33,32 +35,44 @@ export interface StoryGroupInfo {
 }
 
 /**
- * Stories to skip in all vrt based on group.
+ * Groups to skip in all vrt.
  */
-const storiesToSkip: Record<string, Record<string, string[]>> = {
-  'Test Cases': {
-    storybook: ['No Series'],
-    examples: ['noSeries'],
-  },
-};
+const groupsToSkip: Set<string> = new Set(['Components/Tooltip']);
+
+/**
+ * Stories to skip in all vrt based by group.
+ */
+const storiesToSkip: Map<string, string[]> = new Map(
+  Object.entries({
+    'Test Cases': ['noSeries'],
+  }),
+);
 
 export function getStorybookInfo(): StoryGroupInfo[] {
   try {
     // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
     const examples = require('../e2e_server/tmp/examples.json') as TestExamples;
-
-    return examples.map<StoryGroupInfo>(({ groupTitle: group, slugifiedGroupTitle, exampleFiles }) => {
-      return {
-        group,
-        encodedGroup: slugifiedGroupTitle,
-        stories: exampleFiles
-          .filter(({ name }: any) => name && !storiesToSkip[group]?.examples.includes(name))
-          .map(({ name, slugifiedName }) => ({
-            name,
-            slugifiedName,
-          })),
-      };
-    });
+    return examples
+      .filter(
+        ({ groupTitle, slugifiedGroupTitle }) =>
+          !groupsToSkip.has(groupTitle) && !groupsToSkip.has(slugifiedGroupTitle),
+      )
+      .map<StoryGroupInfo>(({ groupTitle: group, slugifiedGroupTitle, exampleFiles }) => {
+        return {
+          group,
+          encodedGroup: slugifiedGroupTitle,
+          stories: exampleFiles
+            .filter(({ name, slugifiedName }: any) => {
+              const skipStoryName = name ? storiesToSkip.get(group)?.includes(name) : false;
+              const skipStorySlug = slugifiedName ? storiesToSkip.get(group)?.includes(slugifiedName) : false;
+              return !skipStoryName && !skipStorySlug;
+            })
+            .map(({ name, slugifiedName }) => ({
+              name,
+              slugifiedName,
+            })),
+        };
+      });
   } catch {
     throw new Error('A required file is not available, please run yarn test:e2e:generate');
   }

package.json

@@ -12,6 +12,7 @@
     ]
   },
   "scripts": {
+    "postinstall": "cd ./e2e && yarn install && cd ../.buildkite && yarn install && cd ../github_bot && yarn install",
     "run:bk:step": "cd .buildkite && yarn run:step",
     "prepack": "echo 'This package is not published, see pacakges/*' && exit 1",
     "autoprefix:css": "lerna run --loglevel=silent --scope @elastic/charts autoprefix:css --stream --no-prefix",