@hazelcast/ui 3.0.13 → 4.0.1-canary.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -29
- package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js +1 -1
- package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js.map +1 -1
- package/lib/components/Button.d.ts +1 -1
- package/lib/components/Button.js +1 -1
- package/lib/components/Button.js.map +1 -1
- package/lib/components/Error.d.ts +1 -1
- package/lib/components/Help.d.ts +1 -1
- package/lib/components/Help.js +1 -1
- package/lib/components/Help.js.map +1 -1
- package/lib/components/IconButton.d.ts +1 -1
- package/lib/components/IconButton.js +1 -1
- package/lib/components/IconButton.js.map +1 -1
- package/lib/components/Table/Cell.js +1 -1
- package/lib/components/Table/Cell.js.map +1 -1
- package/lib/components/TextField.d.ts +1 -1
- package/lib/components/TextField.module.scss +0 -1
- package/lib/components/Toggle.module.scss +0 -2
- package/lib/components/Tooltip.d.ts +35 -22
- package/lib/components/Tooltip.js +22 -47
- package/lib/components/Tooltip.js.map +1 -1
- package/lib/components/Tooltip.module.css +128 -0
- package/lib/components/TruncatedText.d.ts +1 -1
- package/lib/components/TruncatedText.js +1 -1
- package/lib/components/TruncatedText.js.map +1 -1
- package/lib/components/old/Tooltip.d.ts +34 -0
- package/lib/components/old/Tooltip.js +57 -0
- package/lib/components/old/Tooltip.js.map +1 -0
- package/lib/components/old/Tooltip.module.scss +45 -0
- package/lib/old/index.d.ts +2 -0
- package/lib/old/index.js +4 -0
- package/lib/old/index.js.map +1 -0
- package/package.json +10 -11
- package/styles/variables.css +137 -0
package/README.md
CHANGED
|
@@ -2,37 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
Design system built with A11Y in mind.
|
|
5
|
+
Design system built with A11Y in mind.
|
|
6
6
|
**Design system is available live at URL**: https://5f80b6aa3ceb290022dfea61-tultjjrhhk.chromatic.com/?path=/story/getting-started-intro--page
|
|
7
7
|
|
|
8
|
-
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
9
|
-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
10
|
-
|
|
11
|
-
- [Installation](#installation)
|
|
12
|
-
- [Usage](#usage)
|
|
13
|
-
- [Global CSS](#global-css)
|
|
14
|
-
- [SSR](#ssr)
|
|
15
|
-
- [Stable IDs](#stable-ids)
|
|
16
|
-
- [Project structure](#project-structure)
|
|
17
|
-
- [Automated visual regression testing](#automated-visual-regression-testing)
|
|
18
|
-
- [How-to](#how-to)
|
|
19
|
-
- [Install PnpM](#install-pnpm)
|
|
20
|
-
- [Setup](#setup)
|
|
21
|
-
- [Under the hood](#under-the-hood)
|
|
22
|
-
- [Deploy](#deploy)
|
|
23
|
-
- [Add a new shared dependency](#add-a-new-shared-dependency)
|
|
24
|
-
- [Add a new local dependency (for one package only)](#add-a-new-local-dependency-for-one-package-only)
|
|
25
|
-
- [Make changes to several packages and test it](#make-changes-to-several-packages-and-test-it)
|
|
26
|
-
- [Run storybook for development](#run-storybook-for-development)
|
|
27
|
-
- [Run linting](#run-linting)
|
|
28
|
-
- [Run unit tests](#run-unit-tests)
|
|
29
|
-
- [Run visual regression tests](#run-visual-regression-tests)
|
|
30
|
-
- [Approve the updated for visual regression test screenshots](#approve-the-updated-for-visual-regression-test-screenshots)
|
|
31
|
-
- [Run all checks at once](#run-all-checks-at-once)
|
|
32
|
-
- [Releasing a new version](#releasing-a-new-version)
|
|
33
|
-
|
|
34
|
-
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
35
|
-
|
|
36
8
|
## Installation
|
|
37
9
|
|
|
38
10
|
1. `npm i @hazelcast/ui` (`npm i @hazelcast/ui@next` - canary version) - set of Hive UI components
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { Icon } from '../../Icon';
|
|
4
|
-
import { Tooltip } from '../../Tooltip';
|
|
4
|
+
import { Tooltip } from '../../old/Tooltip';
|
|
5
5
|
import { Button } from '../../Button';
|
|
6
6
|
import { appSidebarContext } from '../appSidebarContext';
|
|
7
7
|
import { AppSidebarFavoriteButton } from '../AppSidebarFavoriteButton';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSidebarItem.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarItem/AppSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"AppSidebarItem.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarItem/AppSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAe,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+CAA+C,CAAA;AAExF,OAAO,MAAM,MAAM,8BAA8B,CAAA;AAgBjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,EAAE,EACF,KAAK,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,eAAe,EACf,OAAO,EACP,KAAK,GAAG,OAAO,EACf,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,WAAW,EAAE,QAAQ,GACD,EAAE,EAAE;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAChD,MAAM,GAAG,GAAG,UAAU,CAAC,wBAAwB,CAAC,CAAA;IAEhD,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,aAAa,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,IACpH,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,eAAa,QAAQ;QACpH,EAAE,IAAI,GAAG,IAAI,oBAAC,wBAAwB,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI;QAC9E,oBAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,OAAO,EACf,QAAQ,EAAE,QAAmB,EAC7B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,MAAM,CAAC,OAAO,eACnB,yBAAyB,EACnC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC;YAEpE;gBACG,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;gBAC5F,KAAK;gBACL,CAAC,SAAS,IAAI,SAAS,KAAK,SAAS,CAAC,IAAI,CACzC,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC;oBACrD,SAAS;oBACT,SAAS,KAAK,SAAS,IAAI,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC,GAAI,CACjG,CACP,CACA,CACI,CACL,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
|
|
2
2
|
import { IconProps, IconSize } from './Icon';
|
|
3
|
-
import { TooltipProps } from './Tooltip';
|
|
3
|
+
import { TooltipProps } from './old/Tooltip';
|
|
4
4
|
import { LinkRel, LinkTarget } from './Link';
|
|
5
5
|
import { DataTestProp } from '../helpers/types';
|
|
6
6
|
export type ButtonVariant = 'contained' | 'outlined' | 'text';
|
package/lib/components/Button.js
CHANGED
|
@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
|
|
|
4
4
|
import { useUID } from 'react-uid';
|
|
5
5
|
import { Icon } from './Icon';
|
|
6
6
|
import { TruncatedText } from './TruncatedText';
|
|
7
|
-
import { Tooltip } from './Tooltip';
|
|
7
|
+
import { Tooltip } from './old/Tooltip';
|
|
8
8
|
import { Loader } from './Loader';
|
|
9
9
|
import styles from './Button.module.scss';
|
|
10
10
|
const capitalizeFirstCharacter = (str) => `${str[0].toUpperCase()}${str.slice(1)}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAgC,MAAM,OAAO,CAAA;AAC7F,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,IAAI,EAAuB,MAAM,QAAQ,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { DataTestProp } from '../helpers/types';
|
|
3
|
-
import { TooltipProps } from './Tooltip';
|
|
3
|
+
import { TooltipProps } from './old/Tooltip';
|
|
4
4
|
export declare const errorId: (inputId: string) => string;
|
|
5
5
|
interface ErrorProps extends DataTestProp {
|
|
6
6
|
error?: string;
|
package/lib/components/Help.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSProperties, FC, ReactElement } from 'react';
|
|
2
2
|
import { IconSize } from './Icon';
|
|
3
|
-
import { TooltipProps } from './Tooltip';
|
|
3
|
+
import { TooltipProps } from './old/Tooltip';
|
|
4
4
|
import { DataTestProp } from '../helpers/types';
|
|
5
5
|
export declare const helpTooltipId: (inputId: string) => string;
|
|
6
6
|
export interface HelpProps extends DataTestProp {
|
package/lib/components/Help.js
CHANGED
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { HelpCircle } from 'react-feather';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Icon } from './Icon';
|
|
5
|
-
import { Tooltip } from './Tooltip';
|
|
5
|
+
import { Tooltip } from './old/Tooltip';
|
|
6
6
|
import styleConsts from '../../styles/constants/export.module.scss';
|
|
7
7
|
import styles from './Help.module.scss';
|
|
8
8
|
export const helpTooltipId = (inputId) => `${inputId}-help`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAGrD,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;AAW3E,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAI,GAAG,OAAO,EACd,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,IAC3F,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,GAAG,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC5E,oBAAC,IAAI,IACH,SAAS,EAAC,MAAM,sBACE,SAAS,EAC3B,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,GACV,CACE,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { Icon as FeatherIcon } from 'react-feather';
|
|
3
3
|
import { IconProps, IconAriaProps } from './Icon';
|
|
4
|
-
import { TooltipProps } from './Tooltip';
|
|
4
|
+
import { TooltipProps } from './old/Tooltip';
|
|
5
5
|
import { LinkRel, LinkTarget } from './Link';
|
|
6
6
|
import { DataTestProp } from '../helpers/types';
|
|
7
7
|
export type IconButtonKind = 'primary' | 'transparent';
|
|
@@ -3,7 +3,7 @@ import cn from 'classnames';
|
|
|
3
3
|
import { useUID } from 'react-uid';
|
|
4
4
|
import mergeRefs from 'react-merge-refs';
|
|
5
5
|
import { Icon } from './Icon';
|
|
6
|
-
import { Tooltip } from './Tooltip';
|
|
6
|
+
import { Tooltip } from './old/Tooltip';
|
|
7
7
|
import { Loader } from './Loader';
|
|
8
8
|
import styles from './IconButton.module.scss';
|
|
9
9
|
export const IconButton = forwardRef(({ component: Component = 'button', icon, iconClassName, iconColor, iconRole, loaderRole, className, size, kind = 'transparent', ariaHidden, ariaLabelledBy, ariaLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAExC,OAAO,EAAE,IAAI,EAA4B,MAAM,QAAQ,CAAA;AACvD,OAAO,EAAE,OAAO,EAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { AlertTriangle } from 'react-feather';
|
|
|
3
3
|
import { useUID } from 'react-uid';
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
import { Icon } from '../Icon';
|
|
6
|
-
import { Tooltip } from '../Tooltip';
|
|
6
|
+
import { Tooltip } from '../old/Tooltip';
|
|
7
7
|
import { useOpenCloseState } from '../../hooks';
|
|
8
8
|
import { CellCopyablePopover } from './features/columnsSelection';
|
|
9
9
|
import styles from './Cell.module.scss';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/Table/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+D,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC7G,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/Table/Cell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { Icon as IconType } from 'react-feather';
|
|
|
3
3
|
import { DataTestProp } from '../helpers/types';
|
|
4
4
|
import { FieldHeaderProps } from './FieldHeader';
|
|
5
5
|
import { IconSize } from './Icon';
|
|
6
|
-
import { TooltipProps } from './Tooltip';
|
|
6
|
+
import { TooltipProps } from './old/Tooltip';
|
|
7
7
|
export type TextFieldSize = 'medium' | 'small' | 'large';
|
|
8
8
|
export type TextFieldVariant = 'primary' | 'secondary';
|
|
9
9
|
type TextFieldTrailingIcon = {
|
|
@@ -176,7 +176,6 @@ $marginLeftWithIcon: c.$grid * 5;
|
|
|
176
176
|
|
|
177
177
|
// .hasError styles split in two groups to always color the icon with the error colors
|
|
178
178
|
// but the change the color of the border
|
|
179
|
-
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
180
179
|
&.hasError input {
|
|
181
180
|
~ .inputIconContainer > .inputIcon {
|
|
182
181
|
color: c.$colorError;
|
|
@@ -13,9 +13,7 @@ $trackBgOff: c.$colorNeutral;
|
|
|
13
13
|
$knobBgOn: c.$colorNeutralWhite;
|
|
14
14
|
$knobBgOff: c.$colorNeutralLighter;
|
|
15
15
|
$knobRadius: c.$grid * 5;
|
|
16
|
-
/* stylelint-disable length-zero-no-unit */
|
|
17
16
|
$knobHorizontalOffset: math.max(c.$outlineWidth - c.$borderWidth, 0px);
|
|
18
|
-
/* stylelint-enable */
|
|
19
17
|
|
|
20
18
|
@keyframes switchOn {
|
|
21
19
|
from {
|
|
@@ -1,34 +1,47 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import React, { CSSProperties, ReactElement, ReactNode } from 'react';
|
|
2
|
+
export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
|
|
3
|
+
export type TooltipAlign = 'start' | 'center' | 'end';
|
|
3
4
|
export type TooltipProps = {
|
|
5
|
+
/** The trigger element */
|
|
6
|
+
children: ReactElement;
|
|
7
|
+
/** Content displayed inside the tooltip */
|
|
4
8
|
content: ReactNode;
|
|
5
|
-
|
|
6
|
-
|
|
9
|
+
/** Preferred side relative to the trigger */
|
|
10
|
+
side?: TooltipSide;
|
|
11
|
+
/** Alignment along the side axis */
|
|
12
|
+
align?: TooltipAlign;
|
|
13
|
+
/** Distance in pixels between trigger and tooltip */
|
|
14
|
+
sideOffset?: number;
|
|
15
|
+
/** Automatically shift to avoid viewport overflow */
|
|
16
|
+
avoidCollisions?: boolean;
|
|
17
|
+
/** Controlled open state */
|
|
18
|
+
open?: boolean;
|
|
19
|
+
/** Delay in ms before the tooltip opens (default: 300) */
|
|
20
|
+
delayDuration?: number;
|
|
21
|
+
/** Show the arrow pointer */
|
|
7
22
|
arrow?: boolean;
|
|
23
|
+
/** Color variant */
|
|
8
24
|
color?: 'dark' | 'secondary';
|
|
9
|
-
|
|
10
|
-
placement?: Placement;
|
|
11
|
-
visible?: boolean;
|
|
12
|
-
className?: string;
|
|
13
|
-
children: (ref: (node: ReferenceType | null) => void) => ReactElement;
|
|
25
|
+
/** CSS word-break override */
|
|
14
26
|
wordBreak?: CSSProperties['wordBreak'];
|
|
27
|
+
/** z-index for the tooltip portal */
|
|
15
28
|
zIndex?: number;
|
|
16
|
-
|
|
29
|
+
/** Additional className on the tooltip content */
|
|
30
|
+
className?: string;
|
|
31
|
+
/** ID for aria-labelledby */
|
|
32
|
+
id?: string;
|
|
17
33
|
};
|
|
18
34
|
/**
|
|
19
35
|
* ### Purpose
|
|
20
|
-
*
|
|
21
|
-
* A tooltip with this content is displayed when user hovers over a target element.
|
|
22
|
-
*
|
|
23
|
-
* ### General info
|
|
24
|
-
* - Tooltip automatically detects viewport overflow and changes placement to prevent it.
|
|
25
|
-
* - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
|
|
26
|
-
* - If "content" property is undefined, tooltip element will be removed from DOM entirely.
|
|
27
|
-
* - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
|
|
28
|
-
* - Use `updateToken` prop to update the tooltip position.
|
|
29
|
-
* - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
|
|
36
|
+
* Displays additional information when hovering over a trigger element.
|
|
30
37
|
*
|
|
31
38
|
* ### Usage
|
|
32
|
-
*
|
|
39
|
+
* Pass the trigger element as `children` and the tooltip text/content via `content`.
|
|
40
|
+
*
|
|
41
|
+
* ```tsx
|
|
42
|
+
* <Tooltip content="Save changes">
|
|
43
|
+
* <button>Save</button>
|
|
44
|
+
* </Tooltip>
|
|
45
|
+
* ```
|
|
33
46
|
*/
|
|
34
|
-
export declare const Tooltip:
|
|
47
|
+
export declare const Tooltip: ({ children, content, side, align, sideOffset, avoidCollisions, open, delayDuration, arrow: showArrow, color, wordBreak, zIndex, className, id, }: TooltipProps) => React.JSX.Element;
|
|
@@ -1,56 +1,31 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
3
3
|
import cn from 'classnames';
|
|
4
|
-
import styles from './Tooltip.module.
|
|
5
|
-
import { canUseDOM } from '../utils/ssr';
|
|
4
|
+
import styles from './Tooltip.module.css';
|
|
6
5
|
/**
|
|
7
6
|
* ### Purpose
|
|
8
|
-
*
|
|
9
|
-
* A tooltip with this content is displayed when user hovers over a target element.
|
|
10
|
-
*
|
|
11
|
-
* ### General info
|
|
12
|
-
* - Tooltip automatically detects viewport overflow and changes placement to prevent it.
|
|
13
|
-
* - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
|
|
14
|
-
* - If "content" property is undefined, tooltip element will be removed from DOM entirely.
|
|
15
|
-
* - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
|
|
16
|
-
* - Use `updateToken` prop to update the tooltip position.
|
|
17
|
-
* - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
|
|
7
|
+
* Displays additional information when hovering over a trigger element.
|
|
18
8
|
*
|
|
19
9
|
* ### Usage
|
|
20
|
-
*
|
|
10
|
+
* Pass the trigger element as `children` and the tooltip text/content via `content`.
|
|
11
|
+
*
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <Tooltip content="Save changes">
|
|
14
|
+
* <button>Save</button>
|
|
15
|
+
* </Tooltip>
|
|
16
|
+
* ```
|
|
21
17
|
*/
|
|
22
|
-
export const Tooltip = ({
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
...(autoPlacement ? [autoPlacementMiddleware()] : []),
|
|
33
|
-
offset(offsetY),
|
|
34
|
-
...(showArrow
|
|
35
|
-
? [
|
|
36
|
-
arrow({
|
|
37
|
-
element: arrowRef,
|
|
38
|
-
padding,
|
|
39
|
-
}),
|
|
40
|
-
]
|
|
41
|
-
: []),
|
|
42
|
-
],
|
|
43
|
-
});
|
|
44
|
-
const hover = useHover(context, { handleClose: safePolygon() });
|
|
45
|
-
const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
|
|
46
|
-
const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : isOpen;
|
|
47
|
-
return (React.createElement(React.Fragment, null,
|
|
48
|
-
cloneElement(children(refs.setReference), { ...getReferenceProps() }),
|
|
49
|
-
content !== undefined && isTooltipVisible && (React.createElement(React.Fragment, null,
|
|
50
|
-
React.createElement("span", { ...(id && { id }), className: cn(styles.tooltipSr, className), role: "tooltip", "data-test": "tooltip-sr" }, content),
|
|
51
|
-
React.createElement(FloatingPortal, { root: canUseDOM ? document.body : null },
|
|
52
|
-
React.createElement("span", { ref: refs.setFloating, className: cn(styles.overlay, color && [styles[color]], className), style: { ...floatingStyles, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", ...getFloatingProps() },
|
|
18
|
+
export const Tooltip = ({ children, content, side = 'top', align = 'center', sideOffset = 10, avoidCollisions = true, open, delayDuration = 300, arrow: showArrow = true, color, wordBreak, zIndex = 20, className, id, }) => {
|
|
19
|
+
if (content === undefined) {
|
|
20
|
+
return React.createElement(React.Fragment, null, children);
|
|
21
|
+
}
|
|
22
|
+
const rootProps = typeof open === 'boolean' ? { open } : {};
|
|
23
|
+
return (React.createElement(TooltipPrimitive.Provider, { delayDuration: delayDuration },
|
|
24
|
+
React.createElement(TooltipPrimitive.Root, { ...rootProps },
|
|
25
|
+
React.createElement(TooltipPrimitive.Trigger, { asChild: true }, children),
|
|
26
|
+
React.createElement(TooltipPrimitive.Portal, null,
|
|
27
|
+
React.createElement(TooltipPrimitive.Content, { id: id, side: side, align: align, sideOffset: sideOffset, avoidCollisions: avoidCollisions, className: cn(styles.content, color && styles[color], className), style: { zIndex, wordBreak }, "data-test": "tooltip-overlay" },
|
|
53
28
|
content,
|
|
54
|
-
showArrow && React.createElement(
|
|
29
|
+
showArrow && React.createElement(TooltipPrimitive.Arrow, { className: styles.arrow }))))));
|
|
55
30
|
};
|
|
56
31
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAoCzC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,EAAE,EACf,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,aAAa,GAAG,GAAG,EACnB,KAAK,EAAE,SAAS,GAAG,IAAI,EACvB,KAAK,EACL,SAAS,EACT,MAAM,GAAG,EAAE,EACX,SAAS,EACT,EAAE,GACW,EAAE,EAAE;IACjB,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO,0CAAG,QAAQ,CAAI,CAAA;IACxB,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAE3D,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,aAAa,EAAE,aAAa;QACrD,oBAAC,gBAAgB,CAAC,IAAI,OAAK,SAAS;YAClC,oBAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO,UAAE,QAAQ,CAA4B;YACvE,oBAAC,gBAAgB,CAAC,MAAM;gBACtB,oBAAC,gBAAgB,CAAC,OAAO,IACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAChE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,eAClB,iBAAiB;oBAE1B,OAAO;oBACP,SAAS,IAAI,oBAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,CACxC,CACH,CACJ,CACE,CAC7B,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
/* ── Keyframes ───────────────────────────────────────────────────── */
|
|
2
|
+
|
|
3
|
+
@keyframes hive-tooltip-fade-in-down {
|
|
4
|
+
from {
|
|
5
|
+
opacity: 0;
|
|
6
|
+
transform: translateY(-6px);
|
|
7
|
+
}
|
|
8
|
+
to {
|
|
9
|
+
opacity: 1;
|
|
10
|
+
transform: translateY(0);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@keyframes hive-tooltip-fade-in-up {
|
|
15
|
+
from {
|
|
16
|
+
opacity: 0;
|
|
17
|
+
transform: translateY(6px);
|
|
18
|
+
}
|
|
19
|
+
to {
|
|
20
|
+
opacity: 1;
|
|
21
|
+
transform: translateY(0);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@keyframes hive-tooltip-fade-in-right {
|
|
26
|
+
from {
|
|
27
|
+
opacity: 0;
|
|
28
|
+
transform: translateX(-6px);
|
|
29
|
+
}
|
|
30
|
+
to {
|
|
31
|
+
opacity: 1;
|
|
32
|
+
transform: translateX(0);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@keyframes hive-tooltip-fade-in-left {
|
|
37
|
+
from {
|
|
38
|
+
opacity: 0;
|
|
39
|
+
transform: translateX(6px);
|
|
40
|
+
}
|
|
41
|
+
to {
|
|
42
|
+
opacity: 1;
|
|
43
|
+
transform: translateX(0);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@keyframes hive-tooltip-fade-out {
|
|
48
|
+
from {
|
|
49
|
+
opacity: 1;
|
|
50
|
+
}
|
|
51
|
+
to {
|
|
52
|
+
opacity: 0;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* ── Base ────────────────────────────────────────────────────────── */
|
|
57
|
+
|
|
58
|
+
.content {
|
|
59
|
+
font-family: var(--hive-font-family-text);
|
|
60
|
+
font-size: var(--hive-font-size-body-small);
|
|
61
|
+
font-weight: var(--hive-font-weight-text-regular);
|
|
62
|
+
letter-spacing: var(--hive-letter-spacing-body-small);
|
|
63
|
+
line-height: var(--hive-line-height-body-small);
|
|
64
|
+
|
|
65
|
+
position: relative;
|
|
66
|
+
max-width: var(--hive-tooltip-max-width);
|
|
67
|
+
padding: calc(var(--hive-grid) * 3);
|
|
68
|
+
background: var(--hive-color-neutral-lighter);
|
|
69
|
+
border: var(--hive-border-width) solid var(--hive-color-neutral-light);
|
|
70
|
+
border-radius: var(--hive-border-radius);
|
|
71
|
+
color: var(--hive-color-text);
|
|
72
|
+
word-break: break-word;
|
|
73
|
+
text-align: center;
|
|
74
|
+
|
|
75
|
+
/* Arrow color — overridden per variant */
|
|
76
|
+
--tooltip-arrow-fill: var(--hive-color-neutral-light);
|
|
77
|
+
|
|
78
|
+
/* Smooth in */
|
|
79
|
+
will-change: transform, opacity;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* ── Enter animations (per side) ─────────────────────────────────── */
|
|
83
|
+
|
|
84
|
+
.content[data-state='delayed-open'][data-side='bottom'],
|
|
85
|
+
.content[data-state='instant-open'][data-side='bottom'] {
|
|
86
|
+
animation: hive-tooltip-fade-in-down 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.content[data-state='delayed-open'][data-side='top'],
|
|
90
|
+
.content[data-state='instant-open'][data-side='top'] {
|
|
91
|
+
animation: hive-tooltip-fade-in-up 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.content[data-state='delayed-open'][data-side='right'],
|
|
95
|
+
.content[data-state='instant-open'][data-side='right'] {
|
|
96
|
+
animation: hive-tooltip-fade-in-right 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.content[data-state='delayed-open'][data-side='left'],
|
|
100
|
+
.content[data-state='instant-open'][data-side='left'] {
|
|
101
|
+
animation: hive-tooltip-fade-in-left 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* ── Exit animation ──────────────────────────────────────────────── */
|
|
105
|
+
|
|
106
|
+
.content[data-state='closed'] {
|
|
107
|
+
animation: hive-tooltip-fade-out 120ms ease-out;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* ── Color variants ──────────────────────────────────────────────── */
|
|
111
|
+
|
|
112
|
+
.content.secondary {
|
|
113
|
+
border: none;
|
|
114
|
+
color: var(--hive-color-neutral-white);
|
|
115
|
+
background-color: var(--hive-color-text-subdued);
|
|
116
|
+
--tooltip-arrow-fill: var(--hive-color-text-subdued);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.content.dark {
|
|
120
|
+
border: none;
|
|
121
|
+
color: var(--hive-color-brand-text);
|
|
122
|
+
background-color: var(--hive-color-brand-accent);
|
|
123
|
+
--tooltip-arrow-fill: var(--hive-color-brand-accent);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.arrow {
|
|
127
|
+
fill: var(--tooltip-arrow-fill);
|
|
128
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { DataTestProp } from '../helpers/types';
|
|
3
|
-
import { TooltipProps } from './Tooltip';
|
|
3
|
+
import { TooltipProps } from './old/Tooltip';
|
|
4
4
|
interface TruncatedTextProps extends DataTestProp {
|
|
5
5
|
text: ReactNode;
|
|
6
6
|
forceUpdateToken?: string | number | boolean;
|
|
@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
5
5
|
import { useUID } from 'react-uid';
|
|
6
|
-
import { Tooltip } from './Tooltip';
|
|
6
|
+
import { Tooltip } from './old/Tooltip';
|
|
7
7
|
import styles from './TruncatedText.module.scss';
|
|
8
8
|
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', multiline, tooltipClassName, 'data-test': dataTest, }) => {
|
|
9
9
|
const textRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAahD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,SAAS,EACT,gBAAgB,EAChB,WAAW,EAAE,QAAQ,GACtB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC/D,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAE1B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,yCAAyC;QACzC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7G,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,OAAO,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,IACxH,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;QACpH,2CAAiB,QAAQ,qBAAmB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IACxE,IAAI,CACA,CACH,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { FC, ReactNode, CSSProperties, ReactElement } from 'react';
|
|
2
|
+
import { Placement, ReferenceType } from '@floating-ui/react';
|
|
3
|
+
export type TooltipProps = {
|
|
4
|
+
content: ReactNode;
|
|
5
|
+
id?: string;
|
|
6
|
+
offset?: number;
|
|
7
|
+
arrow?: boolean;
|
|
8
|
+
color?: 'dark' | 'secondary';
|
|
9
|
+
padding?: number;
|
|
10
|
+
placement?: Placement;
|
|
11
|
+
visible?: boolean;
|
|
12
|
+
className?: string;
|
|
13
|
+
children: (ref: (node: ReferenceType | null) => void) => ReactElement;
|
|
14
|
+
wordBreak?: CSSProperties['wordBreak'];
|
|
15
|
+
zIndex?: number;
|
|
16
|
+
autoPlacement?: boolean;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* ### Purpose
|
|
20
|
+
* Useful when you need to display additional information/actionable content.
|
|
21
|
+
* A tooltip with this content is displayed when user hovers over a target element.
|
|
22
|
+
*
|
|
23
|
+
* ### General info
|
|
24
|
+
* - Tooltip automatically detects viewport overflow and changes placement to prevent it.
|
|
25
|
+
* - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
|
|
26
|
+
* - If "content" property is undefined, tooltip element will be removed from DOM entirely.
|
|
27
|
+
* - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
|
|
28
|
+
* - Use `updateToken` prop to update the tooltip position.
|
|
29
|
+
* - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
|
|
30
|
+
*
|
|
31
|
+
* ### Usage
|
|
32
|
+
* Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
|
|
33
|
+
*/
|
|
34
|
+
export declare const Tooltip: FC<TooltipProps>;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React, { useRef, cloneElement, useState } from 'react';
|
|
2
|
+
import { FloatingArrow, offset, useFloating, arrow, useHover, useInteractions, autoUpdate, autoPlacement as autoPlacementMiddleware, FloatingPortal, safePolygon, } from '@floating-ui/react';
|
|
3
|
+
import cn from 'classnames';
|
|
4
|
+
// @deprecated — use Tooltip from @hazelcast/ui instead. This will be removed in v5.
|
|
5
|
+
import styles from './Tooltip.module.scss';
|
|
6
|
+
import { canUseDOM } from '../../utils/ssr';
|
|
7
|
+
/**
|
|
8
|
+
* ### Purpose
|
|
9
|
+
* Useful when you need to display additional information/actionable content.
|
|
10
|
+
* A tooltip with this content is displayed when user hovers over a target element.
|
|
11
|
+
*
|
|
12
|
+
* ### General info
|
|
13
|
+
* - Tooltip automatically detects viewport overflow and changes placement to prevent it.
|
|
14
|
+
* - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
|
|
15
|
+
* - If "content" property is undefined, tooltip element will be removed from DOM entirely.
|
|
16
|
+
* - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
|
|
17
|
+
* - Use `updateToken` prop to update the tooltip position.
|
|
18
|
+
* - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
|
|
19
|
+
*
|
|
20
|
+
* ### Usage
|
|
21
|
+
* Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
|
|
22
|
+
*/
|
|
23
|
+
export const Tooltip = ({ id, content, offset: offsetY = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, wordBreak, zIndex = 20, arrow: showArrow = true, color, autoPlacement = true, className, }) => {
|
|
24
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
25
|
+
const arrowRef = useRef(null);
|
|
26
|
+
const { refs, floatingStyles, context } = useFloating({
|
|
27
|
+
strategy: 'absolute',
|
|
28
|
+
placement,
|
|
29
|
+
whileElementsMounted: autoUpdate,
|
|
30
|
+
open: isOpen,
|
|
31
|
+
onOpenChange: setIsOpen,
|
|
32
|
+
middleware: [
|
|
33
|
+
...(autoPlacement ? [autoPlacementMiddleware()] : []),
|
|
34
|
+
offset(offsetY),
|
|
35
|
+
...(showArrow
|
|
36
|
+
? [
|
|
37
|
+
arrow({
|
|
38
|
+
element: arrowRef,
|
|
39
|
+
padding,
|
|
40
|
+
}),
|
|
41
|
+
]
|
|
42
|
+
: []),
|
|
43
|
+
],
|
|
44
|
+
});
|
|
45
|
+
const hover = useHover(context, { handleClose: safePolygon() });
|
|
46
|
+
const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
|
|
47
|
+
const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : isOpen;
|
|
48
|
+
return (React.createElement(React.Fragment, null,
|
|
49
|
+
cloneElement(children(refs.setReference), { ...getReferenceProps() }),
|
|
50
|
+
content !== undefined && isTooltipVisible && (React.createElement(React.Fragment, null,
|
|
51
|
+
React.createElement("span", { ...(id && { id }), className: cn(styles.tooltipSr, className), role: "tooltip", "data-test": "tooltip-sr" }, content),
|
|
52
|
+
React.createElement(FloatingPortal, { root: canUseDOM ? document.body : null },
|
|
53
|
+
React.createElement("span", { ref: refs.setFloating, className: cn(styles.overlay, color && [styles[color]], className), style: { ...floatingStyles, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", ...getFloatingProps() },
|
|
54
|
+
content,
|
|
55
|
+
showArrow && React.createElement(FloatingArrow, { ref: arrowRef, context: context, className: styles.arrow })))))));
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/old/Tooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@use 'sass:math';
|
|
2
|
+
@use '../../../styles/constants' as c;
|
|
3
|
+
@use '../../../styles/helpers' as h;
|
|
4
|
+
|
|
5
|
+
.tooltipSr {
|
|
6
|
+
@include h.visuallyHidden;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@mixin arrowPlacements($color) {
|
|
10
|
+
.arrow {
|
|
11
|
+
fill: $color;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.overlay {
|
|
16
|
+
@include c.typographyBodySmall;
|
|
17
|
+
|
|
18
|
+
position: relative;
|
|
19
|
+
max-width: c.$tooltipMaxWidth;
|
|
20
|
+
padding: c.$grid * 3;
|
|
21
|
+
background: c.$colorNeutralLighter;
|
|
22
|
+
border: c.$borderWidth solid c.$colorNeutralLight;
|
|
23
|
+
border-radius: c.$borderRadius;
|
|
24
|
+
color: c.$colorText;
|
|
25
|
+
word-break: break-word;
|
|
26
|
+
text-align: center;
|
|
27
|
+
|
|
28
|
+
&.secondary {
|
|
29
|
+
border: none;
|
|
30
|
+
color: c.$colorNeutralWhite;
|
|
31
|
+
background-color: c.$colorTextSubdued;
|
|
32
|
+
|
|
33
|
+
@include arrowPlacements(c.$colorTextSubdued);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.dark {
|
|
37
|
+
border: none;
|
|
38
|
+
color: c.$colorBrandText;
|
|
39
|
+
background-color: c.$colorBrandAccent;
|
|
40
|
+
|
|
41
|
+
@include arrowPlacements(c.$colorBrandAccent);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@include arrowPlacements(c.$colorNeutralLight);
|
|
45
|
+
}
|
package/lib/old/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/old/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,0DAA0D;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.1-canary.1",
|
|
4
4
|
"description": "Hazelcast design system components and utilities",
|
|
5
5
|
"homepage": "https://github.com/hazelcast/hive#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -16,6 +16,12 @@
|
|
|
16
16
|
"main": "lib/index.js",
|
|
17
17
|
"module": "lib/index.js",
|
|
18
18
|
"types": "lib/index.d.ts",
|
|
19
|
+
"exports": {
|
|
20
|
+
".": "./lib/index.js",
|
|
21
|
+
"./old": "./lib/old/index.js",
|
|
22
|
+
"./lib/*": "./lib/*",
|
|
23
|
+
"./styles/*": "./styles/*"
|
|
24
|
+
},
|
|
19
25
|
"directories": {
|
|
20
26
|
"lib": "lib",
|
|
21
27
|
"test": "__tests__"
|
|
@@ -29,10 +35,8 @@
|
|
|
29
35
|
"chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
|
|
30
36
|
"compile": "shx rm -f *.tsbuildinfo && shx rm -rf lib && shx mkdir lib && shx cp -r src/* lib && shx rm -rf lib/*.{tsx,ts} && shx rm -rf lib/**/*.{tsx,ts} && tsc -p tsconfig.build.json",
|
|
31
37
|
"generate-screenshots": "npm run build-storybook && loki update --reactUri file:./storybook-static --chromeDockerImage 'yukinying/chrome-headless-browser-stable:110.0.5481.77' --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
|
|
32
|
-
"lint": "npm run lint:ts
|
|
33
|
-
"lint:
|
|
34
|
-
"lint:css:fix": "stylelint --fix '**/*.{css,scss}'",
|
|
35
|
-
"lint:fix": "npm run lint:ts:fix && npm run lint:css:fix",
|
|
38
|
+
"lint": "npm run lint:ts",
|
|
39
|
+
"lint:fix": "npm run lint:ts:fix",
|
|
36
40
|
"lint:ts": "eslint .",
|
|
37
41
|
"lint:ts:fix": "npm run lint:ts --fix",
|
|
38
42
|
"prepack": "npm run compile",
|
|
@@ -51,6 +55,7 @@
|
|
|
51
55
|
"@floating-ui/react": "^0.26.28",
|
|
52
56
|
"@headlessui/react": "^2.2.0",
|
|
53
57
|
"@icons-pack/react-simple-icons": "^12.0.0",
|
|
58
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
54
59
|
"@tanstack/react-table": "^8.21.2",
|
|
55
60
|
"@types/react-modal": "3.16.3",
|
|
56
61
|
"classnames": "^2.5.1",
|
|
@@ -106,7 +111,6 @@
|
|
|
106
111
|
"babel-jest": "^29.7.0",
|
|
107
112
|
"chromatic": "^6.24.1",
|
|
108
113
|
"css-loader": "^7.1.2",
|
|
109
|
-
"doctoc": "^2.2.1",
|
|
110
114
|
"doiuse": "^6.0.5",
|
|
111
115
|
"eslint": "^9.20.1",
|
|
112
116
|
"eslint-config-prettier": "^10.0.1",
|
|
@@ -137,11 +141,6 @@
|
|
|
137
141
|
"shx": "^0.3.4",
|
|
138
142
|
"storybook": "^8.6.3",
|
|
139
143
|
"style-loader": "^4.0.0",
|
|
140
|
-
"stylelint": "^16.9.0",
|
|
141
|
-
"stylelint-config-standard": "^36.0.1",
|
|
142
|
-
"stylelint-config-standard-scss": "^13.1.0",
|
|
143
|
-
"stylelint-prettier": "^5.0.2",
|
|
144
|
-
"stylelint-scss": "^6.7.0",
|
|
145
144
|
"typescript": "^5.7.3",
|
|
146
145
|
"typescript-eslint": "^8.24.0"
|
|
147
146
|
},
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hive design tokens as CSS custom properties.
|
|
3
|
+
* This is the v4 replacement for styles/constants/*.scss.
|
|
4
|
+
*
|
|
5
|
+
* Apply to :root or a theme wrapper element.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
/* ─── Colors ─────────────────────────────────────────────────── */
|
|
10
|
+
|
|
11
|
+
--hive-color-primary-light: #2d7de4;
|
|
12
|
+
--hive-color-primary: #2160c0;
|
|
13
|
+
--hive-color-primary-dark: #003b87;
|
|
14
|
+
--hive-color-neutral-white: #fff;
|
|
15
|
+
--hive-color-neutral-gray: #e9f0f9;
|
|
16
|
+
--hive-color-neutral-gray-darker: #ccdff5;
|
|
17
|
+
--hive-color-neutral: #dbdbdb;
|
|
18
|
+
--hive-color-neutral-light: #b7c1cb;
|
|
19
|
+
--hive-color-neutral-lighter: #fafafa;
|
|
20
|
+
--hive-color-success: #85da66;
|
|
21
|
+
--hive-color-success-light: #d5f0d1;
|
|
22
|
+
--hive-color-success-dark: #64d03c;
|
|
23
|
+
--hive-color-success-darkest: #3b7044;
|
|
24
|
+
--hive-color-info: #76e7e7;
|
|
25
|
+
--hive-color-info-light: #d0f4f8;
|
|
26
|
+
--hive-color-info-dark: #4adfdf;
|
|
27
|
+
--hive-color-info-darkest: #006585;
|
|
28
|
+
--hive-color-warning: #ffec44;
|
|
29
|
+
--hive-color-warning-light: #f9f6c7;
|
|
30
|
+
--hive-color-warning-dark: #f6dd00;
|
|
31
|
+
--hive-color-warning-darkest: #8b5d00;
|
|
32
|
+
--hive-color-error: #dc084b;
|
|
33
|
+
--hive-color-error-light: #efb1c9;
|
|
34
|
+
--hive-color-error-dark: #8f001d;
|
|
35
|
+
--hive-color-text: #061827;
|
|
36
|
+
--hive-color-text-secondary: #707482;
|
|
37
|
+
--hive-color-text-subdued: #707482;
|
|
38
|
+
--hive-color-overlay-background: #f0f6ff;
|
|
39
|
+
--hive-color-accessibility-outline: #74f;
|
|
40
|
+
--hive-color-shadow: #dbdbdb;
|
|
41
|
+
--hive-color-brand: #00bac6;
|
|
42
|
+
--hive-color-brand-text: #10a4b3;
|
|
43
|
+
--hive-color-brand-primary: #c6ff3a;
|
|
44
|
+
--hive-color-brand-secondary: #061727;
|
|
45
|
+
--hive-color-brand-accent: #122d45;
|
|
46
|
+
--hive-color-brand-ocean: #0080a9;
|
|
47
|
+
--hive-color-brand-raspberry: #c91268;
|
|
48
|
+
--hive-color-brand-carrot: #f5911e;
|
|
49
|
+
--hive-color-brand-blueberry: #0019fe;
|
|
50
|
+
--hive-color-auth-secondary: #0b2b39;
|
|
51
|
+
|
|
52
|
+
/* ─── Spacing ─────────────────────────────────────────────────── */
|
|
53
|
+
/* Base grid unit: 4px = 0.25rem */
|
|
54
|
+
|
|
55
|
+
--hive-grid: 0.25rem;
|
|
56
|
+
|
|
57
|
+
/* ─── Borders ─────────────────────────────────────────────────── */
|
|
58
|
+
|
|
59
|
+
--hive-border-width: 1px;
|
|
60
|
+
--hive-border-width-button: 1px;
|
|
61
|
+
--hive-outline-width: 2px;
|
|
62
|
+
--hive-border-radius: 0.5rem; /* $grid * 2 */
|
|
63
|
+
--hive-border-radius-button-small: 1.25rem; /* $grid * 5 */
|
|
64
|
+
--hive-border-radius-toast: 37px;
|
|
65
|
+
--hive-border-radius-badge: 37px;
|
|
66
|
+
--hive-border-radius-time-field: 3px;
|
|
67
|
+
--hive-border-radius-notification: 3px;
|
|
68
|
+
|
|
69
|
+
/* ─── Icons ───────────────────────────────────────────────────── */
|
|
70
|
+
|
|
71
|
+
--hive-icon-stroke-width: 1.5px;
|
|
72
|
+
--hive-icon-stroke-width-bold: 3px;
|
|
73
|
+
--hive-icon-size-small: 1rem; /* $grid * 4 */
|
|
74
|
+
--hive-icon-size-small-medium: 1.25rem; /* $grid * 5 */
|
|
75
|
+
--hive-icon-size-medium: 1.5rem; /* $grid * 6 */
|
|
76
|
+
--hive-icon-size-large: 2.5rem; /* $grid * 10 */
|
|
77
|
+
--hive-icon-size-xlarge: 3rem; /* $grid * 12 */
|
|
78
|
+
|
|
79
|
+
/* ─── Component sizes ─────────────────────────────────────────── */
|
|
80
|
+
|
|
81
|
+
--hive-tooltip-max-width: 550px;
|
|
82
|
+
--hive-tooltip-arrow-size: 6px;
|
|
83
|
+
--hive-input-height: 2.5rem; /* $grid * 10 */
|
|
84
|
+
--hive-input-height-small: 1.875rem; /* $grid * 7.5 */
|
|
85
|
+
--hive-input-height-large: 3.25rem; /* $grid * 13 */
|
|
86
|
+
--hive-alert-width: 350px;
|
|
87
|
+
--hive-button-max-width: 370px;
|
|
88
|
+
--hive-toast-max-width: 580px;
|
|
89
|
+
--hive-overlay-content-max-width: 1000px;
|
|
90
|
+
--hive-modal-width: 75%;
|
|
91
|
+
--hive-modal-min-width: 480px;
|
|
92
|
+
--hive-modal-max-width: 960px;
|
|
93
|
+
--hive-modal-max-height: 75%;
|
|
94
|
+
--hive-dialog-width: 400px;
|
|
95
|
+
--hive-dialog-min-height: 200px;
|
|
96
|
+
--hive-table-column-min-width: 60px;
|
|
97
|
+
--hive-table-column-width: 170px;
|
|
98
|
+
--hive-table-column-max-width: 600px;
|
|
99
|
+
|
|
100
|
+
/* ─── Typography ──────────────────────────────────────────────── */
|
|
101
|
+
|
|
102
|
+
--hive-font-family-heading: 'PP Telegraf', 'Helvetica', 'Arial', sans-serif;
|
|
103
|
+
--hive-font-family-text: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
|
|
104
|
+
--hive-font-weight-heading-regular: 400;
|
|
105
|
+
--hive-font-weight-heading-bold: 500;
|
|
106
|
+
--hive-font-weight-text-regular: 400;
|
|
107
|
+
--hive-font-weight-text-bold: 600;
|
|
108
|
+
--hive-font-size-h1-hero: 2.875rem;
|
|
109
|
+
--hive-font-size-h1: 2.125rem;
|
|
110
|
+
--hive-font-size-h2: 1.625rem;
|
|
111
|
+
--hive-font-size-h3: 1.25rem;
|
|
112
|
+
--hive-font-size-button: 1rem;
|
|
113
|
+
--hive-font-size-button-small: 0.875rem;
|
|
114
|
+
--hive-font-size-body-normal: 1rem;
|
|
115
|
+
--hive-font-size-body-small: 0.875rem;
|
|
116
|
+
--hive-font-size-body-smaller: 0.75rem;
|
|
117
|
+
--hive-font-size-body-tiny: 0.625rem;
|
|
118
|
+
--hive-letter-spacing-h1-hero: 0.25px;
|
|
119
|
+
--hive-letter-spacing-h1: 0.25px;
|
|
120
|
+
--hive-letter-spacing-h2: 0.25px;
|
|
121
|
+
--hive-letter-spacing-h3: 0.25px;
|
|
122
|
+
--hive-letter-spacing-button: 1.25px;
|
|
123
|
+
--hive-letter-spacing-button-small: 0.25px;
|
|
124
|
+
--hive-letter-spacing-body-normal: 0.25px;
|
|
125
|
+
--hive-letter-spacing-body-small: 0.5px;
|
|
126
|
+
--hive-letter-spacing-body-smaller: normal;
|
|
127
|
+
--hive-letter-spacing-body-tiny: normal;
|
|
128
|
+
--hive-line-height-h1-hero: normal;
|
|
129
|
+
--hive-line-height-h1: normal;
|
|
130
|
+
--hive-line-height-h2: normal;
|
|
131
|
+
--hive-line-height-h3: normal;
|
|
132
|
+
--hive-line-height-button: normal;
|
|
133
|
+
--hive-line-height-body-normal: 1.4;
|
|
134
|
+
--hive-line-height-body-small: normal;
|
|
135
|
+
--hive-line-height-body-smaller: normal;
|
|
136
|
+
--hive-line-height-body-tiny: normal;
|
|
137
|
+
}
|