From 6cb17f8aec7d612543e90f3268112de44905148b Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Mon, 22 Apr 2024 15:44:08 -0400
Subject: [PATCH] APP-4361: remove tooltips from flow when invisible (#512)

---
 packages/core/package.json                    |  2 +-
 .../__tests__/restricted-text-input.spec.ts   |  6 ++---
 .../src/lib/tooltip/__tests__/tooltip.spec.ts | 24 +++++++++----------
 .../core/src/lib/tooltip/tooltip-text.svelte  |  2 +-
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index e5dbd0a5..41a20308 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.112",
+  "version": "0.0.113",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/core/src/lib/input/__tests__/restricted-text-input.spec.ts b/packages/core/src/lib/input/__tests__/restricted-text-input.spec.ts
index c7f954ff..f2524cf0 100644
--- a/packages/core/src/lib/input/__tests__/restricted-text-input.spec.ts
+++ b/packages/core/src/lib/input/__tests__/restricted-text-input.spec.ts
@@ -99,14 +99,14 @@ describe('Restricted Text Input', () => {
     // Type a single invalid character, which shows the tooltip but does not wiggle
     await user.type(input, 'a');
 
-    expect(tooltip).not.toHaveClass('invisible');
+    expect(tooltip).not.toHaveClass('hidden');
     expect(tooltip).not.toHaveClass('animate-wiggle');
-    await waitFor(() => expect(tooltip).toHaveClass('invisible'));
+    await waitFor(() => expect(tooltip).toHaveClass('hidden'));
 
     // Type multiple invalid characters, which shows the tooltip and wiggles
     await user.type(input, 'aa');
 
-    expect(tooltip).not.toHaveClass('invisible');
+    expect(tooltip).not.toHaveClass('hidden');
     expect(tooltip).toHaveClass('animate-wiggle');
     await waitFor(() => expect(tooltip).not.toHaveClass('animate-wiggle'));
   });
diff --git a/packages/core/src/lib/tooltip/__tests__/tooltip.spec.ts b/packages/core/src/lib/tooltip/__tests__/tooltip.spec.ts
index 80ddfce3..9b407286 100644
--- a/packages/core/src/lib/tooltip/__tests__/tooltip.spec.ts
+++ b/packages/core/src/lib/tooltip/__tests__/tooltip.spec.ts
@@ -12,7 +12,7 @@ describe('Tooltip', () => {
     const tooltip = screen.getByRole('tooltip');
 
     expect(target).toBeInTheDocument();
-    expect(tooltip).toHaveClass('invisible');
+    expect(tooltip).toHaveClass('hidden');
   });
 
   it('passes the tooltip ID to the target slot', () => {
@@ -34,15 +34,15 @@ describe('Tooltip', () => {
     const tooltip = screen.getByRole('tooltip');
 
     // tooltip should initially be invisible before styles calculate
-    expect(tooltip).toHaveClass('invisible');
+    expect(tooltip).toHaveClass('hidden');
     // then it should become visible
     await waitFor(() => expect(tooltip).not.toHaveClass('invisible'));
 
     await user.hover(target);
-    expect(tooltip).not.toHaveClass('invisible');
+    expect(tooltip).not.toHaveClass('hidden');
 
     await user.unhover(target);
-    expect(tooltip).not.toHaveClass('invisible');
+    expect(tooltip).not.toHaveClass('hidden');
   });
 
   it('does not render the tooltip when state is invisible', async () => {
@@ -54,14 +54,14 @@ describe('Tooltip', () => {
     const tooltip = screen.getByRole('tooltip');
 
     // tooltip should initially be invisible before styles calculate
-    expect(tooltip).toHaveClass('invisible');
+    expect(tooltip).toHaveClass('hidden');
 
     // tooltip should stay invisible despite hover state
     await user.hover(target);
-    expect(tooltip).toHaveClass('invisible');
+    expect(tooltip).toHaveClass('hidden');
 
     await user.unhover(target);
-    expect(tooltip).toHaveClass('invisible');
+    expect(tooltip).toHaveClass('hidden');
   });
 
   it('shows/hides the tooltip on mouse enter/exit', async () => {
@@ -73,10 +73,10 @@ describe('Tooltip', () => {
     const tooltip = screen.getByRole('tooltip');
 
     await user.hover(target);
-    expect(tooltip).not.toHaveClass('invisible');
+    expect(tooltip).not.toHaveClass('hidden');
 
     await user.unhover(target);
-    expect(tooltip).toHaveClass('invisible');
+    expect(tooltip).toHaveClass('hidden');
   });
 
   it('shows the tooltip on mouse enter after a delay', async () => {
@@ -88,7 +88,7 @@ describe('Tooltip', () => {
     const tooltip = screen.getByRole('tooltip');
 
     await user.hover(target);
-    expect(tooltip).toHaveClass('invisible');
+    expect(tooltip).toHaveClass('hidden');
     await waitFor(() => expect(tooltip).not.toHaveClass('invisible'));
   });
 
@@ -100,10 +100,10 @@ describe('Tooltip', () => {
 
     await userEvent.tab();
     expect(target).toHaveFocus();
-    expect(tooltip).not.toHaveClass('invisible');
+    expect(tooltip).not.toHaveClass('hidden');
 
     await userEvent.tab();
     expect(target).not.toHaveFocus();
-    expect(tooltip).toHaveClass('invisible');
+    expect(tooltip).toHaveClass('hidden');
   });
 });
diff --git a/packages/core/src/lib/tooltip/tooltip-text.svelte b/packages/core/src/lib/tooltip/tooltip-text.svelte
index 318d3c17..48f77424 100644
--- a/packages/core/src/lib/tooltip/tooltip-text.svelte
+++ b/packages/core/src/lib/tooltip/tooltip-text.svelte
@@ -39,7 +39,7 @@ $: style.register({
   bind:this={floatingElement}
   {id}
   role="tooltip"
-  class:invisible={!$isVisible || !$style}
+  class:hidden={!$isVisible || !$style}
   style:top={$style?.top}
   style:left={$style?.left}
   class={cx(