Create Truncation Component (#1500)

* remove ESLint rules

operator-linebreak is no different then default
quotes is overwriting prettier config

* add string-pixel-width dep

* don't lint-staged src, only staged

* add widthMap

* create Truncate component

* refactor in truncate component

* add font load checking

* remove font-family styling

* render Truncate's child instead of creating own component to render

* refactor to use Truncate component

* add span back

* support children

* remove maybeTruncateString

* sub in Truncate component

* add bold prop

* accurately compute largest possible string

* remove logs

* tweak truncation method

* memoize comp function

* explain disable

* fix bugs w/ abs/floor

* tweak widths

* tweak widths

* fix font size

* remove border

* move test-id

* attempt css solution

* Revert "attempt css solution"

This reverts commit aac4d8a6f6.

* CSS solution v2

* remove string-pixel-width

* remove widthsMap

* remove dead code

* remove "data-truncated" as it is always true

* tweak label width

* fix e2e tests

* remove testing string

* e2e annotations tweaks

* correct snapshot

* remove resolves

* check for labels

* add test-id

* format fix

* update snapshot

* fix color

* pull constants out where available

client/__tests__/e2e/e2eAnnotations.test.js

@@ -201,16 +201,18 @@ describe.each([
   });
 
   async function assertCategoryExists(categoryName) {
-    const handle = await utils.waitByID(`${categoryName}:category-expand`);
-    const result = await handle.evaluate((node) => node.innerText);
-    // slice beginning and end of category name result to account for truncation of long names
-    expect(result.slice(0, 10)).toBe(categoryName.slice(0, 10));
-    expect(result.slice(-10)).toBe(categoryName.slice(-10));
+    const handle = await utils.waitByID(`${categoryName}:category-label`);
+
+    const result = await handle.evaluate((node) =>
+      node.getAttribute("aria-label")
+    );
+
+    expect(result).toBe(categoryName);
   }
 
   async function assertCategoryDoesNotExist(categoryName) {
     const result = await page.$(
-      `[data-testid='${categoryName}:category-expand']`
+      `[data-testid='${categoryName}:category-label']`
     );
     expect(result).toBeNull();
   }
@@ -222,7 +224,9 @@ describe.each([
     const previous = await utils.waitByID(
       `categorical-value-${categoryName}-${labelName}`
     );
-    expect(await previous.evaluate((node) => node.innerText)).toBe(labelName);
+    expect(
+      await previous.evaluate((node) => node.getAttribute("aria-label"))
+    ).toBe(labelName);
   }
 
   async function assertLabelDoesNotExist(categoryName, labelName) {