Merge pull request #156 from element-hq/florianduros/tooltip-floating-ui

Tooltip rework
element-hq · Apr 15, 2024 · 5b7b905 · 5b7b905
2 parents afdcf50 + a94c9fc
commit 5b7b905
Show file tree

Hide file tree

Showing 17 changed files with 641 additions and 351 deletions.
diff --git a/...ht/visual.test.ts-snapshots/Form-Controls-Password-Visible-1-chromium-linux.png b/...ht/visual.test.ts-snapshots/Form-Controls-Password-Visible-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Tooltip-Align-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Tooltip-Align-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Tooltip-Placement-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Tooltip-Placement-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Tooltip-Side-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Tooltip-Side-1-chromium-linux.png
diff --git a/src/components/Form/Controls/Action/Action.stories.tsx b/src/components/Form/Controls/Action/Action.stories.tsx
@@ -31,7 +31,6 @@ const icons = {
 };
 
 import { ActionInput } from "./";
-import { TooltipProvider } from "../../../Tooltip/TooltipProvider";
 
 type Props = { invalid?: boolean } & React.ComponentProps<typeof ActionInput>;
 
@@ -89,9 +88,7 @@ export default {
     },
   },
   render: ({ invalid, ...restArgs }) => (
-    <TooltipProvider>
-      <ActionInput data-invalid={invalid || undefined} {...restArgs} />
-    </TooltipProvider>
+    <ActionInput data-invalid={invalid || undefined} {...restArgs} />
   ),
   args: {
     placeholder: "",

diff --git a/src/components/Form/Controls/Action/Action.test.tsx b/src/components/Form/Controls/Action/Action.test.tsx
@@ -20,20 +20,17 @@ import React from "react";
 import ChatIcon from "@vector-im/compound-design-tokens/icons/chat.svg";
 
 import { ActionInput } from "./Action";
-import { TooltipProvider } from "../../../Tooltip/TooltipProvider";
 
 describe("ActionInput", () => {
   it("renders", () => {
     const { asFragment } = render(
-      <TooltipProvider>
-        <ActionInput
-          Icon={ChatIcon}
-          actionLabel="Click me!"
-          onActionClick={() => {
-            console.log("clicked!");
-          }}
-        />
-      </TooltipProvider>,
+      <ActionInput
+        Icon={ChatIcon}
+        actionLabel="Click me!"
+        onActionClick={() => {
+          console.log("clicked!");
+        }}
+      />,
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -42,13 +39,11 @@ describe("ActionInput", () => {
     const spy = vi.fn();
 
     const { container } = render(
-      <TooltipProvider>
-        <ActionInput
-          Icon={ChatIcon}
-          actionLabel="Click me!"
-          onActionClick={spy}
-        />
-      </TooltipProvider>,
+      <ActionInput
+        Icon={ChatIcon}
+        actionLabel="Click me!"
+        onActionClick={spy}
+      />,
     );
 
     const actionBtn = getByLabelText(container, "Click me!");

diff --git a/src/components/Form/Controls/Password/Password.stories.tsx b/src/components/Form/Controls/Password/Password.stories.tsx
@@ -22,7 +22,6 @@ import { Meta, StoryObj } from "@storybook/react";
 import { PasswordInput } from "./";
 import { within } from "@storybook/testing-library";
 import { userEvent } from "@storybook/testing-library";
-import { TooltipProvider } from "../../../Tooltip/TooltipProvider";
 
 type Props = { invalid?: boolean } & React.ComponentProps<typeof PasswordInput>;
 
@@ -63,9 +62,7 @@ export default {
     },
   },
   render: ({ invalid, ...restArgs }) => (
-    <TooltipProvider>
-      <PasswordInput data-invalid={invalid || undefined} {...restArgs} />
-    </TooltipProvider>
+    <PasswordInput data-invalid={invalid || undefined} {...restArgs} />
   ),
   args: {
     placeholder: "",

diff --git a/src/components/Form/Controls/Password/Password.test.tsx b/src/components/Form/Controls/Password/Password.test.tsx
@@ -20,15 +20,10 @@ import { act, getByLabelText, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { PasswordInput } from "./Password";
-import { TooltipProvider } from "../../../Tooltip/TooltipProvider";
 
 describe("PasswordControl", () => {
   it("switches the input type", async () => {
-    const { container } = render(
-      <TooltipProvider>
-        <PasswordInput defaultValue="p4ssw0rd!" />
-      </TooltipProvider>,
-    );
+    const { container } = render(<PasswordInput defaultValue="p4ssw0rd!" />);
 
     expect(container.querySelector("[type=password]")).toBeInTheDocument();
     expect(container).toMatchSnapshot("invisible");

diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
@@ -19,7 +19,6 @@ import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
 import * as Form from "./index";
-import { TooltipProvider } from "../Tooltip/TooltipProvider";
 
 type Props = {
   disabled: boolean;
@@ -28,129 +27,127 @@ type Props = {
 };
 
 const KitchenSink = ({ disabled, invalid, readOnly }: Props) => (
-  <TooltipProvider>
-    <Form.Root>
-      <Form.Field serverInvalid={invalid} name="mxid">
-        <Form.Label>Username</Form.Label>
-        <Form.TextControl
+  <Form.Root>
+    <Form.Field serverInvalid={invalid} name="mxid">
+      <Form.Label>Username</Form.Label>
+      <Form.TextControl
+        disabled={disabled}
+        readOnly={readOnly}
+        defaultValue="Hello world!"
+      />
+      {invalid ? (
+        <Form.ErrorMessage>Error message.</Form.ErrorMessage>
+      ) : (
+        <Form.HelpMessage>Help message.</Form.HelpMessage>
+      )}
+    </Form.Field>
+
+    <Form.Field serverInvalid={invalid} name="password">
+      <Form.Label>Password</Form.Label>
+      <Form.PasswordControl
+        disabled={disabled}
+        readOnly={readOnly}
+        defaultValue="sup3rS3cur3p4ssw0rd!"
+      />
+      {invalid ? (
+        <Form.ErrorMessage>Error message.</Form.ErrorMessage>
+      ) : (
+        <Form.HelpMessage>Help message.</Form.HelpMessage>
+      )}
+    </Form.Field>
+
+    <Form.Field serverInvalid={invalid} name="mfa">
+      <Form.Label>MFA</Form.Label>
+      <Form.MFAControl
+        disabled={disabled}
+        readOnly={readOnly}
+        defaultValue="123"
+      />
+      {invalid ? (
+        <Form.ErrorMessage>Error message.</Form.ErrorMessage>
+      ) : (
+        <Form.HelpMessage>Help message.</Form.HelpMessage>
+      )}
+    </Form.Field>
+
+    <Form.InlineField
+      serverInvalid={invalid}
+      name="remember"
+      control={
+        <Form.CheckboxControl
           disabled={disabled}
           readOnly={readOnly}
-          defaultValue="Hello world!"
+          defaultChecked={true}
         />
-        {invalid ? (
-          <Form.ErrorMessage>Error message.</Form.ErrorMessage>
-        ) : (
-          <Form.HelpMessage>Help message.</Form.HelpMessage>
-        )}
-      </Form.Field>
-
-      <Form.Field serverInvalid={invalid} name="password">
-        <Form.Label>Password</Form.Label>
-        <Form.PasswordControl
+      }
+    >
+      <Form.Label>Remember me</Form.Label>
+      {invalid ? (
+        <Form.ErrorMessage>Error message.</Form.ErrorMessage>
+      ) : (
+        <Form.HelpMessage>Help message.</Form.HelpMessage>
+      )}
+    </Form.InlineField>
+
+    <Form.InlineField
+      serverInvalid={invalid}
+      name="radio"
+      control={
+        <Form.RadioControl
           disabled={disabled}
           readOnly={readOnly}
-          defaultValue="sup3rS3cur3p4ssw0rd!"
+          defaultChecked={true}
         />
-        {invalid ? (
-          <Form.ErrorMessage>Error message.</Form.ErrorMessage>
-        ) : (
-          <Form.HelpMessage>Help message.</Form.HelpMessage>
-        )}
-      </Form.Field>
-
-      <Form.Field serverInvalid={invalid} name="mfa">
-        <Form.Label>MFA</Form.Label>
-        <Form.MFAControl
+      }
+    >
+      <Form.Label>Option 1</Form.Label>
+      {invalid ? (
+        <Form.ErrorMessage>Error message.</Form.ErrorMessage>
+      ) : (
+        <Form.HelpMessage>Help message.</Form.HelpMessage>
+      )}
+    </Form.InlineField>
+
+    <Form.InlineField
+      serverInvalid={invalid}
+      name="radio"
+      control={
+        <Form.RadioControl
           disabled={disabled}
           readOnly={readOnly}
-          defaultValue="123"
+          defaultChecked={true}
         />
-        {invalid ? (
-          <Form.ErrorMessage>Error message.</Form.ErrorMessage>
-        ) : (
-          <Form.HelpMessage>Help message.</Form.HelpMessage>
-        )}
-      </Form.Field>
-
-      <Form.InlineField
-        serverInvalid={invalid}
-        name="remember"
-        control={
-          <Form.CheckboxControl
-            disabled={disabled}
-            readOnly={readOnly}
-            defaultChecked={true}
-          />
-        }
-      >
-        <Form.Label>Remember me</Form.Label>
-        {invalid ? (
-          <Form.ErrorMessage>Error message.</Form.ErrorMessage>
-        ) : (
-          <Form.HelpMessage>Help message.</Form.HelpMessage>
-        )}
-      </Form.InlineField>
-
-      <Form.InlineField
-        serverInvalid={invalid}
-        name="radio"
-        control={
-          <Form.RadioControl
-            disabled={disabled}
-            readOnly={readOnly}
-            defaultChecked={true}
-          />
-        }
-      >
-        <Form.Label>Option 1</Form.Label>
-        {invalid ? (
-          <Form.ErrorMessage>Error message.</Form.ErrorMessage>
-        ) : (
-          <Form.HelpMessage>Help message.</Form.HelpMessage>
-        )}
-      </Form.InlineField>
-
-      <Form.InlineField
-        serverInvalid={invalid}
-        name="radio"
-        control={
-          <Form.RadioControl
-            disabled={disabled}
-            readOnly={readOnly}
-            defaultChecked={true}
-          />
-        }
-      >
-        <Form.Label>Option 2</Form.Label>
-        {invalid ? (
-          <Form.ErrorMessage>Error message.</Form.ErrorMessage>
-        ) : (
-          <Form.HelpMessage>Help message.</Form.HelpMessage>
-        )}
-      </Form.InlineField>
-
-      <Form.InlineField
-        serverInvalid={invalid}
-        name="toggle"
-        control={
-          <Form.ToggleControl
-            disabled={disabled}
-            readOnly={readOnly}
-            defaultChecked={true}
-          />
-        }
-      >
-        <Form.Label>Toggle</Form.Label>
-        {invalid ? (
-          <Form.ErrorMessage>Error message.</Form.ErrorMessage>
-        ) : (
-          <Form.HelpMessage>Help message.</Form.HelpMessage>
-        )}
-      </Form.InlineField>
-
-      <Form.Submit disabled={disabled}>Submit</Form.Submit>
-    </Form.Root>
-  </TooltipProvider>
+      }
+    >
+      <Form.Label>Option 2</Form.Label>
+      {invalid ? (
+        <Form.ErrorMessage>Error message.</Form.ErrorMessage>
+      ) : (
+        <Form.HelpMessage>Help message.</Form.HelpMessage>
+      )}
+    </Form.InlineField>
+
+    <Form.InlineField
+      serverInvalid={invalid}
+      name="toggle"
+      control={
+        <Form.ToggleControl
+          disabled={disabled}
+          readOnly={readOnly}
+          defaultChecked={true}
+        />
+      }
+    >
+      <Form.Label>Toggle</Form.Label>
+      {invalid ? (
+        <Form.ErrorMessage>Error message.</Form.ErrorMessage>
+      ) : (
+        <Form.HelpMessage>Help message.</Form.HelpMessage>
+      )}
+    </Form.InlineField>
+
+    <Form.Submit disabled={disabled}>Submit</Form.Submit>
+  </Form.Root>
 );
 
 export default {