Create tooltip component

package.json

@@ -85,6 +85,7 @@
     "prettier": "3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "resize-observer-polyfill": "^1.5.1",
     "storybook": "^7.0.27",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^34.0.0",
@@ -96,6 +97,7 @@
   },
   "dependencies": {
     "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "classnames": "^2.3.2",
     "graphemer": "^1.4.0",
     "rimraf": "^3.0.1"

src/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,28 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.tooltip {
+  font: var(--cpd-font-body-xs-medium);
+  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
+  background: var(--cpd-color-alpha-gray-1400);
+  color: var(--cpd-color-text-on-solid-primary);
+  border-radius: 4px;
+}
+
+.arrow {
+  /* same color as the tooltip background */
+  fill: var(--cpd-color-alpha-gray-1400);
+}

src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,65 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Tooltip as TooltipComponent } from "./Tooltip";
+import { IconButton } from "../IconButton/IconButton";
+
+import UserIcon from "@vector-im/compound-design-tokens/icons/user.svg";
+
+export default {
+  title: "Tooltip",
+  component: TooltipComponent,
+  argTypes: {},
+  args: {},
+} as Meta<typeof TooltipComponent>;
+
+const Template: StoryFn<typeof TooltipComponent> = () => (
+  <div
+    style={{
+      display: "flex",
+      gap: "50px",
+      flexDirection: "column",
+      alignItems: "center",
+    }}
+  >
+    <TooltipComponent open={true} side="top" text="@bob:example.org">
+      <IconButton>
+        <UserIcon />
+      </IconButton>
+    </TooltipComponent>
+    <TooltipComponent open={true} side="right" text="@bob:example.org">
+      <IconButton>
+        <UserIcon />
+      </IconButton>
+    </TooltipComponent>
+    <TooltipComponent open={true} side="bottom" text="@bob:example.org">
+      <IconButton>
+        <UserIcon />
+      </IconButton>
+    </TooltipComponent>
+    <TooltipComponent open={true} side="left" text="@bob:example.org">
+      <IconButton>
+        <UserIcon />
+      </IconButton>
+    </TooltipComponent>
+  </div>
+);
+
+export const Tooltip = Template.bind({});
+Tooltip.args = {};

src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,38 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+
+import { Tooltip } from "./Tooltip";
+import { IconButton } from "../IconButton/IconButton";
+
+describe("Tooltip", () => {
+  beforeAll(() => {
+    global.ResizeObserver = require("resize-observer-polyfill");
+  });
+  it("renders", () => {
+    const { asFragment } = render(
+      <Tooltip text="Hello world 👋" open={true}>
+        <IconButton>
+          <svg />
+        </IconButton>
+      </Tooltip>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,96 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { PropsWithChildren } from "react";
+import {
+  Root,
+  Trigger,
+  Portal,
+  Content,
+  Arrow,
+  Provider,
+} from "@radix-ui/react-tooltip";
+
+import styles from "./Tooltip.module.css";
+
+type TooltipProps = {
+  /**
+   * The tooltip text
+   */
+  text: string;
+  /**
+   * The side where the tooltip is rendered
+   * @default bottom
+   */
+  side?: React.ComponentProps<typeof Content>["side"];
+  /**
+   * The preferred alignment against the trigger.
+   * May change when collisions occur.
+   * @default center
+   */
+  align?: React.ComponentProps<typeof Content>["align"];
+  /**
+   * Event handler called when the escape key is down.
+   */
+  onEscapeKeyDown?: React.ComponentProps<typeof Content>["onEscapeKeyDown"];
+  /**
+   * Event handler called when a pointer event occurs outside
+   * the bounds of the component.
+   */
+  onPointerDownOutside?: React.ComponentProps<
+    typeof Content
+  >["onPointerDownOutside"];
+  /**
+   * The controlled open state of the tooltip.
+   * Must be used in conjunction with onOpenChange.
+   * @default undefined
+   */
+  open?: boolean;
+};
+
+/**
+ * A tooltip component
+ */
+export const Tooltip = ({
+  children,
+  text,
+  side = "bottom",
+  align = "center",
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  open,
+}: PropsWithChildren<TooltipProps>) => {
+  // TODO: Update the class name to something related to the component name
+  return (
+    <Provider>
+      <Root open={open} delayDuration={300}>
+        <Trigger asChild>{children}</Trigger>
+        <Portal>
+          <Content
+            side={side}
+            align={align}
+            onEscapeKeyDown={onEscapeKeyDown}
+            onPointerDownOutside={onPointerDownOutside}
+            className={styles.tooltip}
+          >
+            {text}
+            <Arrow width={10} height={6} className={styles.arrow} />
+          </Content>
+        </Portal>
+      </Root>
+    </Provider>
+  );
+};

src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Tooltip > renders 1`] = `
+<DocumentFragment>
+  <button
+    aria-describedby="radix-:r0:"
+    class="_icon-button_1d4528"
+    data-state="instant-open"
+    style="--cpd-icon-button-size: 32px;"
+  >
+    <svg />
+  </button>
+</DocumentFragment>
+`;

src/index.ts

@@ -44,6 +44,7 @@ export { Radio } from "./components/Radio/Radio";
 export { Root } from "./components/Form/Root";
 export { Submit } from "./components/Form/Submit";
 export { Toggle } from "./components/Toggle/Toggle";
+export { Tooltip } from "./components/Tooltip/Tooltip";
 export { ValidityState } from "./components/Form/ValidityState";
 
 /**

vite.config.ts

@@ -34,6 +34,7 @@ export default defineConfig({
         "classnames",
         "graphemer",
         "@radix-ui/react-form",
+        "@radix-ui/react-tooltip",
       ],
 
       // Without this, none of the exports are preserved in the bundle

yarn.lock

@@ -2012,6 +2012,15 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
+  integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/[email protected]":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
@@ -2056,6 +2065,25 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-tooltip@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.6.tgz#87a7786cd9f2b4de957ac645afae1575339c58b0"
+  integrity sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.2"
+    "@radix-ui/react-portal" "1.0.3"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
@@ -8707,6 +8735,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"