Skip to content

Tooltip Component and Popover Changes #114

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

Merged
Raalzz merged 2 commits into from
Sep 16, 2022
Merged

Tooltip Component and Popover Changes #114

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
9ff5a84
Tooltip Component and Popover Changes
saurabhsutar192 Sep 16, 2022
7aa72ed
renamed files
saurabhsutar192 Sep 16, 2022
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
31 changes: 5 additions & 26 deletions docs/docs/components/popover.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ import { useState } from "react";
const content = <div>Basic Popover</div>;

<div className="App">
<Popover width="200px" withArrow content={content}>
<Popover withArrow content={content}>
<Button>Click To Open </Button>
</Popover>
</div>;
```

<Popover width="200px" withArrow content={<div>Basic Popover</div>}>
<Popover withArrow content={<div>Basic Popover</div>}>
<Button>Click To Open </Button>
</Popover>

Expand All @@ -41,13 +41,7 @@ const [isOpened, setIsOpened] = useState(false);
const content = <div>This is a controlled Popover</div>;

<div className="App">
<Popover
position="right"
width="200px"
withArrow
isOpened={isOpened}
content={content}
>
<Popover position="right" withArrow isOpened={isOpened} content={content}>
<Button
onMouseEnter={() => setIsOpened(true)}
onMouseLeave={() => setIsOpened(false)}
Expand All @@ -62,13 +56,7 @@ export const App = () => {
const [isOpened, setIsOpened] = useState(false);
const content = <div>This is a controlled Popover</div>;
return (
<Popover
position="right"
width="200px"
withArrow
isOpened={isOpened}
content={content}
>
<Popover position="right" withArrow isOpened={isOpened} content={content}>
<Button
onMouseEnter={() => setIsOpened(true)}
onMouseLeave={() => setIsOpened(false)}
Expand Down Expand Up @@ -124,9 +112,9 @@ const content = (
```

<Popover
width="200px"
position="right"
trapFocus
width="200px"
withArrow
content={
<div>
Expand Down Expand Up @@ -172,12 +160,3 @@ const content = (
| :----------------- | :-------------------: |
| Space &#124; Enter | `Toggle Opened State` |
| Tab | `Navigate` |

### Custom styles

> **Note**: It is advised that you scope these classNames inside your custom className given as a prop to the Popover component

| ClassName | Element |
| :----------------------- | :----------------------------: |
| `.hover-popover-content` | `Container to Popover Content` |
| `.hover-popover-target ` | `Container to Popover Target` |
142 changes: 142 additions & 0 deletions docs/docs/components/tooltip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
# Tooltip

### Quick start

Here's a quick start guide to get started with the Tooltip component

### Importing Component

```jsx
import { Tooltip } from "@hover-design/react";
```

### Code Snippets and Examples

import "@hover-design/react/dist/style.css";
import { Tooltip } from "@hover-design/react";
import { Button } from "@hover-design/react";
import { useState } from "react";

##### Basic Tooltip

```jsx
<div className="App">
<Tooltip withArrow label="Basic Tooltip">
<Button>Click To Open </Button>
</Tooltip>
</div>
```

<Tooltip withArrow label="Basic Tooltip">
<Button>Click To Open </Button>
</Tooltip>

##### Controlled Tooltip

```jsx
const [isOpened, setIsOpened] = useState(false);
<div className="App">
<Tooltip
position="right"
withArrow
isOpened={isOpened}
label="Controlled Tooltip"
>
<Button
onMouseEnter={() => setIsOpened(true)}
onMouseLeave={() => setIsOpened(false)}
>
Click To Open
</Button>
</Tooltip>
</div>;
```

export const App = () => {
const [isOpened, setIsOpened] = useState(false);
return (
<Tooltip
position="right"
withArrow
isOpened={isOpened}
label="Controlled Tooltip"
>
<Button
onMouseEnter={() => setIsOpened(true)}
onMouseLeave={() => setIsOpened(false)}
>
Hover to Open
</Button>
</Tooltip>
);
};

<App />

##### MultiLine Tooltip

```jsx
<div className="App">
<Tooltip multiLine withArrow label="This is a multiLine Tooltip">
<Button>Click To Open </Button>
</Tooltip>
</div>
```

<Tooltip
multiLine
withArrow
label="This is a multiLine Tooltip"
>

<Button>Click To Open </Button>
</Tooltip>

##### Target Width

```jsx
<div className="App">
<Tooltip
width="target"
multiLine
withArrow
label="Width matches the target Width"
>
<Button>Click To Open </Button>
</Tooltip>
</div>
```

<Tooltip
width="target"
multiLine
withArrow
label="Width matches the target Width"
>
<Button>Click To Open </Button>
</Tooltip>

### Props Reference

| Attributes | Values | Default Value | Optional ? |
| :----------- | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | ---------: |
| position | ` "bottom"` &#124; `"left"` &#124; `"right"` &#124; `"top"` &#124; `"bottom-end"`&#124; `"bottom-start"`&#124; `"left-end"` &#124; `"left-start"` &#124; `"right-end"` &#124; `"right-start"` &#124; `"top-end"` &#124; `"top-start"` | `bottom` | Yes |
| label | `JSX.Element ` | | No |
| isOpened | `boolean`<br/> controlled value | `false` | Yes |
| offset | `string`<br/> distance between Tooltip and Target element | `4px` | Yes |
| borderRadius | `string` | `4px` | Yes |
| width | `string` | `fit-label` | Yes |
| withArrow | `boolean` | `false` | Yes |
| arrowSize | `string` | `7px` | Yes |
| onChange | `(isOpened)=>void` | `()=>{}` | Yes |
| zIndex | `string` | `1` | Yes |
| color | `string` | `#2C2E33` | Yes |
| multiLine | `boolean` | false | Yes |
| labelColor | `string` | `white` | Yes |

### Keyboard Controls

| Key | Action |
| :----------------- | :-------------------: |
| Space &#124; Enter | `Toggle Opened State` |
| Tab | `Navigate` |
61 changes: 29 additions & 32 deletions lib/src/components/Popover/Popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
} from "react";
import { useTrapFocus } from "src/hooks/useTrapFocus";
import { useClickOutside } from "../../hooks/useClickOutside";
import { Flex } from "../Flex";
import {
contentRecipe,
popArrowOffset,
Expand All @@ -19,7 +18,7 @@ import {
popoverContainerStyles,
popRadius,
popWidth,
} from "./popover.css";
} from "./popover.styles.css";
import { PopoverType } from "./popover.types";

const PopoverComponent: ForwardRefRenderFunction<
Expand Down Expand Up @@ -110,27 +109,17 @@ const PopoverComponent: ForwardRefRenderFunction<

return (
<div
className={`${popoverContainerStyles} ${className}`}
ref={(node) => {
popRef.current = node as HTMLDivElement;
if (typeof ref === "function") {
ref(node);
} else if (ref) {
ref.current = node;
}
}}
style={{
...assignInlineVars({
[popOffset]: withArrow
? `${Math.hypot(parseInt(arrowSize) + 4) / 2 + parseInt(offset)}px`
: offset,
[popRadius]: borderRadius,
[popWidth]: targetWidth,
[popArrowSize]: arrowSize,
[popArrowOffset]: `-${Math.hypot(parseInt(arrowSize) + 2) / 2}px`,
}),
...style,
}}
className={popoverContainerStyles}
ref={popRef}
style={assignInlineVars({
[popOffset]: withArrow
? `${Math.hypot(parseInt(arrowSize) + 4) / 2 + parseInt(offset)}px`
: offset,
[popRadius]: borderRadius,
[popWidth]: targetWidth,
[popArrowSize]: arrowSize,
[popArrowOffset]: `-${Math.hypot(parseInt(arrowSize) + 2) / 2}px`,
})}
>
<div
ref={targetRef}
Expand All @@ -141,20 +130,28 @@ const PopoverComponent: ForwardRefRenderFunction<
{children}
</div>
{isOpen && (
<Flex
<div
aria-expanded={isOpen}
role="dialog"
ref={contentRef}
justifyContent="center"
alignItems="center"
style={assignInlineVars({
zIndex,
})}
ref={(node) => {
contentRef.current = node as HTMLDivElement;
if (typeof ref === "function") {
ref(node);
} else if (ref) {
ref.current = node;
}
}}
style={{
...assignInlineVars({
zIndex,
}),
...style,
}}
onKeyDown={internalContentKeyDownHandler}
className={`${contentContainerStyles} hover-popover-content`}
className={`${contentContainerStyles} ${className}`}
>
{content}
</Flex>
</div>
)}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion lib/src/components/Popover/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export * from "./Popover";
export * from "./popover.css";
export * from "./popover.styles.css";
0 lib/src/components/Popover/popover.css.ts → .../components/Popover/popover.styles.css.ts
View file
Open in desktop
File renamed without changes.
21 changes: 2 additions & 19 deletions lib/src/components/Popover/popover.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,9 @@
import { FC } from "react";
import { positionType } from "../_internal/Types/types";

type divType = Omit<JSX.IntrinsicElements["div"], "onChange">;

export type PopoverType = divType & {
position?:
| "bottom"
| "left"
| "right"
| "top"
| "bottom-end"
| "bottom-start"
| "left-end"
| "left-start"
| "right-end"
| "right-start"
| "top-end"
| "top-start";
position?: positionType;
content: JSX.Element;
offset?: string;
borderRadius?: string;
Expand All @@ -27,8 +15,3 @@ export type PopoverType = divType & {
zIndex?: string;
trapFocus?: boolean;
};

export type PopoverSubComponentTypes = {
Target: FC<JSX.IntrinsicElements["div"]>;
Content: FC<JSX.IntrinsicElements["div"]>;
};
Loading