APP-4361: remove tooltips from flow when invisible (viamrobotics#512)

micheal-parks · Apr 22, 2024 · 6cb17f8 · 6cb17f8
1 parent 0ad67e3
commit 6cb17f8
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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(