Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create tooltip component #62

Merged
merged 2 commits into from
Aug 23, 2023
Merged

Create tooltip component #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5931fd7
Create tooltip component
Aug 23, 2023
51db0a6
Improve tooltip
Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
Expand Down
28 changes: 28 additions & 0 deletions src/components/Tooltip/Tooltip.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
weeman1337 marked this conversation as resolved.
Show resolved Hide resolved
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);
}
95 changes: 95 additions & 0 deletions src/components/Tooltip/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/*
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 TemplateSide: StoryFn<typeof TooltipComponent> = () => (
<div
style={{
display: "flex",
gap: "50px",
flexDirection: "column",
alignItems: "center",
}}
>
<TooltipComponent open={true} side="top" text="@bob:example.org">
germain-gg marked this conversation as resolved.
Show resolved Hide resolved
<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 Side = TemplateSide.bind({});
Side.args = {};

const TemplateAlign: StoryFn<typeof TooltipComponent> = () => (
<div
style={{
display: "flex",
gap: "50px",
flexDirection: "column",
alignItems: "center",
}}
>
<TooltipComponent open={true} align="center" text="@bob:example.org">
<IconButton>
<UserIcon />
</IconButton>
</TooltipComponent>
<TooltipComponent open={true} align="start" text="@bob:example.org">
<IconButton>
<UserIcon />
</IconButton>
</TooltipComponent>
<TooltipComponent open={true} align="end" text="@bob:example.org">
<IconButton>
<UserIcon />
</IconButton>
</TooltipComponent>
</div>
);

export const Align = TemplateAlign.bind({});
Align.args = {};
48 changes: 48 additions & 0 deletions src/components/Tooltip/Tooltip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
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 open by default", () => {
const { asFragment } = render(
germain-gg marked this conversation as resolved.
Show resolved Hide resolved
<Tooltip text="Hello world 👋" open={true}>
<IconButton>
<svg />
</IconButton>
</Tooltip>,
);
expect(asFragment()).toMatchSnapshot();
});
it("renders", () => {
const { asFragment } = render(
<Tooltip text="Hello world 👋">
<IconButton>
<svg />
</IconButton>
</Tooltip>,
);
expect(asFragment()).toMatchSnapshot();
});
});
96 changes: 96 additions & 0 deletions src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
* You will mostly want to omit this property. Will be used the vast majority
* of the time during development.
* @default undefined
*/
open?: boolean;
};

/**
* A tooltip component
*/
export const Tooltip = ({
children,
text,
side = "bottom",
align = "center",
onEscapeKeyDown,
onPointerDownOutside,
open,
}: PropsWithChildren<TooltipProps>) => {
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>
);
};
26 changes: 26 additions & 0 deletions src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Tooltip > renders 1`] = `
<DocumentFragment>
<button
class="_icon-button_1d4528"
data-state="closed"
style="--cpd-icon-button-size: 32px;"
>
<svg />
</button>
</DocumentFragment>
`;

exports[`Tooltip > renders open by default 1`] = `
<DocumentFragment>
<button
aria-describedby="radix-:r0:"
class="_icon-button_1d4528"
data-state="instant-open"
style="--cpd-icon-button-size: 32px;"
>
<svg />
</button>
</DocumentFragment>
`;
1 change: 1 addition & 0 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

/**
Expand Down
1 change: 1 addition & 0 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
33 changes: 33 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2012,6 +2012,15 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-primitive" "1.0.3"

"@radix-ui/react-presence@1.0.1":
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/react-primitive@1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
Expand Down Expand Up @@ -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/react-use-callback-ref@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
Expand Down Expand Up @@ -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"
Expand Down