@hazelcast/ui 3.0.13 → 4.0.1-canary.2
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 +10 -9
- package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js.map +1 -1
- package/lib/components/Button.d.ts +3 -3
- package/lib/components/Button.js +21 -21
- package/lib/components/Button.js.map +1 -1
- package/lib/components/Error.d.ts +2 -2
- package/lib/components/Help.d.ts +2 -2
- package/lib/components/Help.js +3 -2
- package/lib/components/Help.js.map +1 -1
- package/lib/components/IconButton.d.ts +3 -3
- package/lib/components/IconButton.js +9 -9
- package/lib/components/IconButton.js.map +1 -1
- package/lib/components/Table/Cell.js +6 -7
- package/lib/components/Table/Cell.js.map +1 -1
- package/lib/components/TextField.d.ts +2 -2
- 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 +2 -2
- package/lib/components/TruncatedText.js +3 -3
- 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
|
|
@@ -10,14 +10,15 @@ import styles from './AppSidebarItem.module.scss';
|
|
|
10
10
|
export const AppSidebarItem = ({ id, title, className, active, icon, iconAriaLabel, disabled, disabledTooltip, onClick, color = 'light', adornment, available, adornmentClassName, 'data-test': dataTest, }) => {
|
|
11
11
|
const { isOpen } = useContext(appSidebarContext);
|
|
12
12
|
const ctx = useContext(appSidebarSectionContext);
|
|
13
|
-
return (React.createElement(Tooltip, { arrow: false,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
React.createElement(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
adornment,
|
|
21
|
-
|
|
13
|
+
return (React.createElement(Tooltip, { arrow: false, side: "right", align: "start", color: "dark", open: isOpen ? false : undefined, content: iconAriaLabel },
|
|
14
|
+
React.createElement("div", { className: cn(styles.root, { [styles.collapsed]: !isOpen, [styles.nested]: !!ctx }), "data-test": dataTest },
|
|
15
|
+
id && ctx && React.createElement(AppSidebarFavoriteButton, { id: id, className: styles.favorite }),
|
|
16
|
+
React.createElement(Button, { variant: "text", color: color, active: active, truncate: false, onClick: onClick, outline: "inset", disabled: disabled, disabledTooltip: disabledTooltip, bodyClassName: styles.content, "data-test": "sidebar-menu-item-title", className: cn(styles.button, { [styles.active]: active }, className) },
|
|
17
|
+
React.createElement(React.Fragment, null,
|
|
18
|
+
icon && React.createElement(Icon, { size: "medium", icon: icon, ariaLabel: iconAriaLabel, className: styles.icon }),
|
|
19
|
+
title,
|
|
20
|
+
(adornment || available !== undefined) && (React.createElement("div", { className: cn(styles.adornment, adornmentClassName) },
|
|
21
|
+
adornment,
|
|
22
|
+
available !== undefined && React.createElement("span", { className: cn(styles.status, { [styles.available]: available }) }))))))));
|
|
22
23
|
};
|
|
23
24
|
//# sourceMappingURL=AppSidebarItem.js.map
|
|
@@ -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,eAAe,CAAA;AACvC,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,
|
|
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,eAAe,CAAA;AACvC,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,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa;QACrH,6BAAK,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;YAC1G,EAAE,IAAI,GAAG,IAAI,oBAAC,wBAAwB,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI;YAC9E,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;gBAEpE;oBACG,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;oBAC5F,KAAK;oBACL,CAAC,SAAS,IAAI,SAAS,KAAK,SAAS,CAAC,IAAI,CACzC,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC;wBACrD,SAAS;wBACT,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,CACE,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 {
|
|
3
|
+
import { TooltipSide } from './Tooltip';
|
|
4
4
|
import { LinkRel, LinkTarget } from './Link';
|
|
5
5
|
import { DataTestProp } from '../helpers/types';
|
|
6
6
|
export type ButtonVariant = 'contained' | 'outlined' | 'text';
|
|
@@ -38,7 +38,7 @@ export type ButtonDisabledProps = {
|
|
|
38
38
|
disabledTooltip?: string;
|
|
39
39
|
disabled: boolean;
|
|
40
40
|
disabledTooltipVisible?: boolean;
|
|
41
|
-
disabledTooltipPlacement?:
|
|
41
|
+
disabledTooltipPlacement?: TooltipSide;
|
|
42
42
|
};
|
|
43
43
|
export type ButtonOutlineType = 'outline' | 'inset';
|
|
44
44
|
export type ButtonCommonProps = {
|
|
@@ -52,7 +52,7 @@ export type ButtonCommonProps = {
|
|
|
52
52
|
outlineClassName?: string;
|
|
53
53
|
outline?: ButtonOutlineType;
|
|
54
54
|
tooltip?: string;
|
|
55
|
-
tooltipColor?:
|
|
55
|
+
tooltipColor?: 'dark' | 'secondary';
|
|
56
56
|
active?: boolean;
|
|
57
57
|
truncate?: boolean;
|
|
58
58
|
} & (ButtonDisabledProps | ButtonNotDisabledProps) & Pick<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'className' | 'onClick' | 'tabIndex' | 'style'>;
|
package/lib/components/Button.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
|
-
import mergeRefs from 'react-merge-refs';
|
|
4
3
|
import { useUID } from 'react-uid';
|
|
5
4
|
import { Icon } from './Icon';
|
|
6
5
|
import { TruncatedText } from './TruncatedText';
|
|
@@ -39,26 +38,27 @@ iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopen
|
|
|
39
38
|
const iconSize = propIconSize || (size === 'medium' ? 'smallMedium' : 'small');
|
|
40
39
|
const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
|
|
41
40
|
const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
|
|
42
|
-
return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
41
|
+
return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip, open: disabled && disabledTooltipVisible, side: disabledTooltipPlacement },
|
|
42
|
+
React.createElement(Component, { "data-test": "button", className: cn(styles.button, {
|
|
43
|
+
[styles[`color${capitalizeFirstCharacter(color)}`]]: true,
|
|
44
|
+
[styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
|
|
45
|
+
[styles.active]: active,
|
|
46
|
+
[styles[size]]: size !== 'small',
|
|
47
|
+
}, className), "aria-describedby": disabled ? tooltipId : undefined, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, ref: ref, ...rest },
|
|
48
|
+
React.createElement("span", { "data-test": "button-outline", className: cn(styles.outline, { [styles.inset]: outline === 'inset' }, outlineClassName) }),
|
|
49
|
+
React.createElement("span", { className: cn(styles.body, bodyClassName) },
|
|
50
|
+
loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: iconSize }),
|
|
51
|
+
iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: iconSize, color: iconLeftColor })),
|
|
52
|
+
truncate ? (React.createElement(TruncatedText, { text: capitalize && typeof children === 'string' ? children.toUpperCase() : children,
|
|
53
|
+
/*
|
|
54
|
+
If a button is disabled and text is long we don't want to show 2 popups.
|
|
55
|
+
1. In case a button is disabled and no `disabledTooltipVisible` is enforced, we just hide truncated popup.
|
|
56
|
+
2. In case a button is disabled and disabledTooltip is hidden with a false flag, there is a space to show
|
|
57
|
+
the truncated popup -> setting it to undefined will leave the default behaviour.
|
|
58
|
+
*/
|
|
59
|
+
tooltipVisible: disabled && disabledTooltipVisible !== false ? false : undefined })) : (children),
|
|
60
|
+
loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconRight, size: iconSize }),
|
|
61
|
+
!loadingAnimationOnRight && iconRight && iconRightAriaLabel && (React.createElement(Icon, { icon: iconRight, ariaLabel: iconRightAriaLabel, "data-test": "button-icon-right", className: cn(styles.iconRight, iconRightClassName), size: iconSize, color: iconRightColor }))))));
|
|
62
62
|
});
|
|
63
63
|
Button.displayName = 'Button';
|
|
64
64
|
//# sourceMappingURL=Button.js.map
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { DataTestProp } from '../helpers/types';
|
|
3
|
-
import {
|
|
3
|
+
import { TooltipSide } from './Tooltip';
|
|
4
4
|
export declare const errorId: (inputId: string) => string;
|
|
5
5
|
interface ErrorProps extends DataTestProp {
|
|
6
6
|
error?: string;
|
|
7
7
|
className?: string;
|
|
8
8
|
inputId: string;
|
|
9
9
|
truncated?: boolean;
|
|
10
|
-
tooltipPlacement?:
|
|
10
|
+
tooltipPlacement?: TooltipSide;
|
|
11
11
|
}
|
|
12
12
|
export declare const Error: FC<ErrorProps>;
|
|
13
13
|
export {};
|
package/lib/components/Help.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { CSSProperties, FC, ReactElement } from 'react';
|
|
2
2
|
import { IconSize } from './Icon';
|
|
3
|
-
import {
|
|
3
|
+
import { TooltipSide } from './Tooltip';
|
|
4
4
|
import { DataTestProp } from '../helpers/types';
|
|
5
5
|
export declare const helpTooltipId: (inputId: string) => string;
|
|
6
6
|
export interface HelpProps extends DataTestProp {
|
|
7
7
|
parentId: string;
|
|
8
8
|
helperText: string | ReactElement;
|
|
9
|
-
placement?:
|
|
9
|
+
placement?: TooltipSide;
|
|
10
10
|
className?: string;
|
|
11
11
|
size?: IconSize;
|
|
12
12
|
tooltipWordBreak?: CSSProperties['wordBreak'];
|
package/lib/components/Help.js
CHANGED
|
@@ -8,7 +8,8 @@ import styles from './Help.module.scss';
|
|
|
8
8
|
export const helpTooltipId = (inputId) => `${inputId}-help`;
|
|
9
9
|
export const Help = ({ helperText, placement = 'top', parentId, className, tooltipWordBreak, size = 'small', 'data-test': dataTest = 'help', }) => {
|
|
10
10
|
const tooltipId = helpTooltipId(parentId);
|
|
11
|
-
return (React.createElement(Tooltip, {
|
|
12
|
-
React.createElement(
|
|
11
|
+
return (React.createElement(Tooltip, { side: placement, content: helperText, id: tooltipId, wordBreak: tooltipWordBreak },
|
|
12
|
+
React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className) },
|
|
13
|
+
React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, color: styleConsts.colorPrimary, icon: HelpCircle, className: styles.icon, size: size }))));
|
|
13
14
|
};
|
|
14
15
|
//# sourceMappingURL=Help.js.map
|
|
@@ -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,
|
|
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,EAAe,MAAM,WAAW,CAAA;AAGhD,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,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;QACvF,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;YAClE,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,CACE,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 {
|
|
4
|
+
import { TooltipSide } from './Tooltip';
|
|
5
5
|
import { LinkRel, LinkTarget } from './Link';
|
|
6
6
|
import { DataTestProp } from '../helpers/types';
|
|
7
7
|
export type IconButtonKind = 'primary' | 'transparent';
|
|
@@ -16,7 +16,7 @@ type IconButtonCommonProps = {
|
|
|
16
16
|
padding?: 'normal';
|
|
17
17
|
tooltip?: string;
|
|
18
18
|
tooltipVisible?: boolean;
|
|
19
|
-
tooltipPlacement?:
|
|
19
|
+
tooltipPlacement?: TooltipSide;
|
|
20
20
|
} & DataTestProp & IconAriaProps & Pick<ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'onClick' | 'onMouseDown' | 'className' | 'tabIndex' | 'style'>;
|
|
21
21
|
export type IconButtonNotDisabledProps = {
|
|
22
22
|
disabledTooltip?: never;
|
|
@@ -27,7 +27,7 @@ export type IconButtonNotDisabledProps = {
|
|
|
27
27
|
export type IconButtonDisabledProps = {
|
|
28
28
|
disabledTooltip: string;
|
|
29
29
|
disabled: boolean;
|
|
30
|
-
disabledTooltipPlacement?:
|
|
30
|
+
disabledTooltipPlacement?: TooltipSide;
|
|
31
31
|
disabledTooltipVisible?: boolean;
|
|
32
32
|
};
|
|
33
33
|
type IconButtonComponentProps = ({
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { useUID } from 'react-uid';
|
|
4
|
-
import mergeRefs from 'react-merge-refs';
|
|
5
4
|
import { Icon } from './Icon';
|
|
6
5
|
import { Tooltip } from './Tooltip';
|
|
7
6
|
import { Loader } from './Loader';
|
|
@@ -12,14 +11,15 @@ disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, rel
|
|
|
12
11
|
const tooltipId = useUID();
|
|
13
12
|
const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
|
|
14
13
|
const labelledByFinal = [ariaLabelledBy, disabled ? tooltipId : undefined].filter(Boolean).join(' ');
|
|
15
|
-
return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, side: disabled ? disabledTooltipPlacement : tooltipPlacement, open: disabled ? disabledTooltipVisible : tooltipVisible },
|
|
15
|
+
React.createElement(Component, { className: cn(styles.iconButton, {
|
|
16
|
+
[styles.primary]: kind === 'primary',
|
|
17
|
+
[styles.transparent]: kind === 'transparent',
|
|
18
|
+
[styles.paddingNormal]: padding === 'normal',
|
|
19
|
+
}, className), "aria-hidden": ariaHidden, "aria-label": ariaLabel, "aria-labelledby": labelledByFinal, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, "data-test": dataTest, ...rest },
|
|
20
|
+
React.createElement("span", { className: styles.body, ref: ref },
|
|
21
|
+
loading && React.createElement(Loader, { role: loaderRole, size: size }),
|
|
22
|
+
!loading && (React.createElement(Icon, { role: iconRole, className: iconClassName, color: iconColor, "data-test": `${dataTest}-icon`, icon: icon, size: size, ariaHidden: true }))))));
|
|
23
23
|
});
|
|
24
24
|
IconButton.displayName = 'IconButton';
|
|
25
25
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react';
|
|
2
2
|
import { AlertTriangle } from 'react-feather';
|
|
3
|
-
import { useUID } from 'react-uid';
|
|
4
3
|
import cn from 'classnames';
|
|
5
4
|
import { Icon } from '../Icon';
|
|
6
5
|
import { Tooltip } from '../Tooltip';
|
|
@@ -8,13 +7,13 @@ import { useOpenCloseState } from '../../hooks';
|
|
|
8
7
|
import { CellCopyablePopover } from './features/columnsSelection';
|
|
9
8
|
import styles from './Cell.module.scss';
|
|
10
9
|
export const CellWarning = ({ align, warning }) => {
|
|
11
|
-
const id = useUID();
|
|
12
10
|
const dataTest = 'cell-warning-content';
|
|
13
|
-
return (React.createElement(Tooltip, {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
return (React.createElement(Tooltip, { content: warning },
|
|
12
|
+
React.createElement("div", { "data-test": dataTest, className: cn(styles.warningIcon, {
|
|
13
|
+
[styles.left]: align === 'left',
|
|
14
|
+
[styles.right]: align === 'right',
|
|
15
|
+
}) },
|
|
16
|
+
React.createElement(Icon, { "data-test": `${dataTest}-icon`, icon: AlertTriangle, ariaLabel: warning, size: "small" }))));
|
|
18
17
|
};
|
|
19
18
|
export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role = 'cell', cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
|
|
20
19
|
const rootRef = useRef(null);
|
|
@@ -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,
|
|
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 {
|
|
6
|
+
import { TooltipSide } from './Tooltip';
|
|
7
7
|
export type TextFieldSize = 'medium' | 'small' | 'large';
|
|
8
8
|
export type TextFieldVariant = 'primary' | 'secondary';
|
|
9
9
|
type TextFieldTrailingIcon = {
|
|
@@ -40,7 +40,7 @@ export type TextFieldExtraProps<T extends TextFieldTypes> = {
|
|
|
40
40
|
type?: T;
|
|
41
41
|
readOnly?: boolean;
|
|
42
42
|
clearable?: boolean;
|
|
43
|
-
errorTooltipPlacement?:
|
|
43
|
+
errorTooltipPlacement?: TooltipSide;
|
|
44
44
|
children?: React.ReactNode;
|
|
45
45
|
} & DataTestProp & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'autoFocus' | 'disabled' | 'autoComplete' | 'required' | 'placeholder'> & TextFieldTrailingIcon & Omit<FieldHeaderProps, 'id'>;
|
|
46
46
|
export type TextFieldProps<T extends TextFieldTypes> = TextFieldCoreProps<T> & TextFieldExtraProps<T>;
|
|
@@ -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 {
|
|
3
|
+
import { TooltipSide } from './Tooltip';
|
|
4
4
|
interface TruncatedTextProps extends DataTestProp {
|
|
5
5
|
text: ReactNode;
|
|
6
6
|
forceUpdateToken?: string | number | boolean;
|
|
@@ -8,7 +8,7 @@ interface TruncatedTextProps extends DataTestProp {
|
|
|
8
8
|
multiline?: boolean;
|
|
9
9
|
tooltipVisible?: boolean;
|
|
10
10
|
tooltipClassName?: string;
|
|
11
|
-
tooltipPlacement?:
|
|
11
|
+
tooltipPlacement?: TooltipSide;
|
|
12
12
|
}
|
|
13
13
|
export declare const TruncatedText: FC<TruncatedTextProps>;
|
|
14
14
|
export {};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { useRef, useState } from 'react';
|
|
2
|
-
import mergeRefs from 'react-merge-refs';
|
|
3
2
|
import cn from 'classnames';
|
|
4
3
|
import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
5
4
|
import { useUID } from 'react-uid';
|
|
@@ -17,7 +16,8 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
|
|
|
17
16
|
// https://codepen.io/triple-j/pen/wadKQB
|
|
18
17
|
setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined);
|
|
19
18
|
}, [text, forceUpdateToken]);
|
|
20
|
-
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip,
|
|
21
|
-
React.createElement("
|
|
19
|
+
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, open: tooltipVisible, className: tooltipClassName, side: tooltipPlacement },
|
|
20
|
+
React.createElement("div", { ref: textRef, className: cn(styles.truncatedText, { [styles.multiline]: multiline }, className) },
|
|
21
|
+
React.createElement("span", { "data-test": dataTest, "aria-labelledby": tooltip ? idTooltip : undefined }, text))));
|
|
22
22
|
};
|
|
23
23
|
//# sourceMappingURL=TruncatedText.js.map
|
|
@@ -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,
|
|
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,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAEhD,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,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,gBAAgB;QACjH,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;YAClG,2CAAiB,QAAQ,qBAAmB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IACxE,IAAI,CACA,CACH,CACE,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.2",
|
|
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
|
+
}
|