@hazelcast/ui 4.0.1-canary.2 → 4.0.1-canary.4
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/lib/components/Badge.d.ts +1 -2
- package/lib/components/Badge.js +3 -7
- package/lib/components/Badge.js.map +1 -1
- package/lib/components/Badge.module.scss +18 -29
- package/lib/components/Button.d.ts +0 -22
- package/lib/components/Button.js +2 -29
- package/lib/components/Button.js.map +1 -1
- package/lib/components/Button.module.scss +2 -8
- package/lib/{components/old → old}/Tooltip.js +1 -1
- package/lib/old/Tooltip.js.map +1 -0
- package/package.json +1 -7
- package/lib/components/old/Tooltip.js.map +0 -1
- package/lib/old/index.d.ts +0 -2
- package/lib/old/index.js +0 -4
- package/lib/old/index.js.map +0 -1
- /package/lib/{components/old → old}/Tooltip.d.ts +0 -0
- /package/lib/{components/old → old}/Tooltip.module.scss +0 -0
|
@@ -8,11 +8,10 @@ export type BadgeIconDescriptor = {
|
|
|
8
8
|
export declare const BadgeIcon: {
|
|
9
9
|
[key in BadgeType]: BadgeIconDescriptor;
|
|
10
10
|
};
|
|
11
|
-
export type BadgeSize = 'small' | 'normal';
|
|
12
11
|
export type BadgeProps = {
|
|
13
12
|
type: BadgeType;
|
|
14
|
-
size?: BadgeSize;
|
|
15
13
|
content: ReactNode;
|
|
14
|
+
icon?: BadgeIconDescriptor;
|
|
16
15
|
className?: string;
|
|
17
16
|
};
|
|
18
17
|
export declare const Badge: FC<BadgeProps>;
|
package/lib/components/Badge.js
CHANGED
|
@@ -25,20 +25,16 @@ export const BadgeIcon = {
|
|
|
25
25
|
ariaLabel: 'Info critical circle icon',
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
|
-
export const Badge = ({ type, content,
|
|
29
|
-
const { icon, ariaLabel } = BadgeIcon[type];
|
|
28
|
+
export const Badge = ({ type, content, icon, className }) => {
|
|
29
|
+
const { icon: resolvedIcon, ariaLabel } = icon !== null && icon !== void 0 ? icon : BadgeIcon[type];
|
|
30
30
|
return (React.createElement("div", { "data-test": "badge-container", className: cn(styles.badge, {
|
|
31
|
-
// Colors
|
|
32
31
|
[styles.neutral]: type === 'neutral',
|
|
33
32
|
[styles.success]: type === 'success',
|
|
34
33
|
[styles.info]: type === 'info',
|
|
35
34
|
[styles.warning]: type === 'warning',
|
|
36
35
|
[styles.critical]: type === 'critical',
|
|
37
|
-
// Size
|
|
38
|
-
[styles.normal]: size === 'normal',
|
|
39
|
-
[styles.small]: size === 'small',
|
|
40
36
|
}, className) },
|
|
41
|
-
React.createElement(Icon, { "data-test": "badge-icon", ariaLabel: ariaLabel, icon:
|
|
37
|
+
React.createElement(Icon, { "data-test": "badge-icon", ariaLabel: ariaLabel, icon: resolvedIcon, className: styles.icon, size: "small" }),
|
|
42
38
|
React.createElement("div", { "data-test": "badge-content", className: styles.content }, content)));
|
|
43
39
|
};
|
|
44
40
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,MAAM,eAAe,CAAA;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,MAAM,eAAe,CAAA;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;AASD,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1E,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,CAAC,IAAI,CAAC,CAAA;IAEjE,OAAO,CACL,0CACY,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;SACvC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,GAAG;QAC9G,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IACrD,OAAO,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -4,52 +4,41 @@
|
|
|
4
4
|
display: inline-flex;
|
|
5
5
|
flex-direction: row;
|
|
6
6
|
align-items: center;
|
|
7
|
-
border-radius:
|
|
7
|
+
border-radius: 8px;
|
|
8
|
+
padding: c.$grid * 0.5 c.$grid * 2;
|
|
8
9
|
|
|
9
10
|
.content {
|
|
10
11
|
margin-left: c.$grid;
|
|
12
|
+
@include c.typographyBodySmall;
|
|
11
13
|
}
|
|
12
14
|
|
|
13
|
-
// Sizes
|
|
14
|
-
&.normal {
|
|
15
|
-
padding: c.$grid * 2 c.$grid * 3;
|
|
16
|
-
|
|
17
|
-
.content {
|
|
18
|
-
@include c.typographyBodyNormal;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&.small {
|
|
23
|
-
padding: c.$grid c.$grid * 2;
|
|
24
|
-
|
|
25
|
-
.content {
|
|
26
|
-
@include c.typographyBodySmall;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
// Themes
|
|
31
15
|
&.neutral {
|
|
32
|
-
background-color:
|
|
33
|
-
color:
|
|
16
|
+
background-color: lab(from var(--hive-color-text-secondary) 97% a b);
|
|
17
|
+
color: var(--hive-color-text-secondary);
|
|
18
|
+
border: 1px solid var(--hive-color-text-secondary);
|
|
34
19
|
}
|
|
35
20
|
|
|
36
21
|
&.success {
|
|
37
|
-
background-color:
|
|
38
|
-
color:
|
|
22
|
+
background-color: lab(from var(--hive-color-success-darkest) 95% a b);
|
|
23
|
+
color: var(--hive-color-success-darkest);
|
|
24
|
+
border: 1px solid var(--hive-color-success-darkest);
|
|
39
25
|
}
|
|
40
26
|
|
|
41
27
|
&.info {
|
|
42
|
-
background-color:
|
|
43
|
-
color:
|
|
28
|
+
background-color: lab(from var(--hive-color-info-darkest) 95% a b);
|
|
29
|
+
color: var(--hive-color-info-darkest);
|
|
30
|
+
border: 1px solid var(--hive-color-info-darkest);
|
|
44
31
|
}
|
|
45
32
|
|
|
46
33
|
&.warning {
|
|
47
|
-
background-color:
|
|
48
|
-
color:
|
|
34
|
+
background-color: lab(from var(--hive-color-warning-darkest) 95% a b);
|
|
35
|
+
color: var(--hive-color-warning-darkest);
|
|
36
|
+
border: 1px solid var(--hive-color-warning-darkest);
|
|
49
37
|
}
|
|
50
38
|
|
|
51
39
|
&.critical {
|
|
52
|
-
background-color:
|
|
53
|
-
color:
|
|
40
|
+
background-color: lab(from var(--hive-color-error) 95% a b);
|
|
41
|
+
color: var(--hive-color-error);
|
|
42
|
+
border: 1px solid var(--hive-color-error);
|
|
54
43
|
}
|
|
55
44
|
}
|
|
@@ -5,7 +5,6 @@ import { LinkRel, LinkTarget } from './Link';
|
|
|
5
5
|
import { DataTestProp } from '../helpers/types';
|
|
6
6
|
export type ButtonVariant = 'contained' | 'outlined' | 'text';
|
|
7
7
|
export type ButtonColor = 'primary' | 'secondary' | 'warning' | 'brand' | 'authPrimary' | 'authSecondary' | 'light';
|
|
8
|
-
export type ButtonSize = 'medium' | 'small';
|
|
9
8
|
export type ButtonAccessibleIconLeftProps = {
|
|
10
9
|
iconLeft: IconProps['icon'];
|
|
11
10
|
iconLeftAriaLabel: string;
|
|
@@ -43,7 +42,6 @@ export type ButtonDisabledProps = {
|
|
|
43
42
|
export type ButtonOutlineType = 'outline' | 'inset';
|
|
44
43
|
export type ButtonCommonProps = {
|
|
45
44
|
children: string | ReactElement;
|
|
46
|
-
size?: ButtonSize;
|
|
47
45
|
iconSize?: IconSize;
|
|
48
46
|
color?: ButtonColor;
|
|
49
47
|
capitalize?: boolean;
|
|
@@ -73,25 +71,5 @@ export type ButtonTypeButtonProps = {
|
|
|
73
71
|
} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'autoFocus' | 'type'>;
|
|
74
72
|
export type ButtonTypeProps = ButtonTypeAnchorProps | ButtonTypeButtonProps;
|
|
75
73
|
export type ButtonProps<T = ButtonTypeProps> = ButtonCommonProps & T & ButtonAccessibleIconLeftProps & ButtonAccessibleIconRightProps & DataTestProp;
|
|
76
|
-
/**
|
|
77
|
-
* ### Purpose
|
|
78
|
-
* Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.
|
|
79
|
-
* Prioritize the actions on a page and use the button sizes and types to make it clear to users which are the most important. If you have many actions, consider using button links to offer less important ones.
|
|
80
|
-
*
|
|
81
|
-
* ### General Info
|
|
82
|
-
* - Use 4 types of Button: Primary, Secondary, Danger and Transparent
|
|
83
|
-
* - There are two sizes: `small` with height of `30px` and `medium` with height of `40px`
|
|
84
|
-
* - Button can stand only with the label, icon on the left side, icon on the right side, icon on both left and right side, or only icon (depends on the type of the button).
|
|
85
|
-
* - You can use an icon with the label to draw more attention.
|
|
86
|
-
* - Button label is always in upper-case
|
|
87
|
-
* - The labels should be actionable (e.g. "EDIT" or "ADD NEW FILTER") and it should be clear from the button label what will happen when the user interacts with it. Make button labels short and clear. Avoid long explanations in the button text.
|
|
88
|
-
* - You can change underlying semantics with a component property. Typescript will guard you on providing other properties related to the component type.
|
|
89
|
-
*
|
|
90
|
-
* ### Usage
|
|
91
|
-
* - **Primary**: Use primary button for the single primary action on the screen. To call attention to an action on a form, or highlight the strongest call to action on a page. Primary button should only appear once per screen. Not every screen requires a primary button.
|
|
92
|
-
* - **Secondary**: Use secondary buttons for all remaining actions. Secondary button is the standard button for most use cases.
|
|
93
|
-
* - **Danger**: Use danger button for potentially destructive actions.
|
|
94
|
-
* - **Transparent**: Use for IconButton and similar use-cases.
|
|
95
|
-
*/
|
|
96
74
|
export declare const Button: React.ForwardRefExoticComponent<ButtonProps<ButtonTypeProps> & React.RefAttributes<HTMLElement>>;
|
|
97
75
|
export {};
|
package/lib/components/Button.js
CHANGED
|
@@ -7,35 +7,9 @@ import { Tooltip } from './Tooltip';
|
|
|
7
7
|
import { Loader } from './Loader';
|
|
8
8
|
import styles from './Button.module.scss';
|
|
9
9
|
const capitalizeFirstCharacter = (str) => `${str[0].toUpperCase()}${str.slice(1)}`;
|
|
10
|
-
|
|
11
|
-
* ### Purpose
|
|
12
|
-
* Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.
|
|
13
|
-
* Prioritize the actions on a page and use the button sizes and types to make it clear to users which are the most important. If you have many actions, consider using button links to offer less important ones.
|
|
14
|
-
*
|
|
15
|
-
* ### General Info
|
|
16
|
-
* - Use 4 types of Button: Primary, Secondary, Danger and Transparent
|
|
17
|
-
* - There are two sizes: `small` with height of `30px` and `medium` with height of `40px`
|
|
18
|
-
* - Button can stand only with the label, icon on the left side, icon on the right side, icon on both left and right side, or only icon (depends on the type of the button).
|
|
19
|
-
* - You can use an icon with the label to draw more attention.
|
|
20
|
-
* - Button label is always in upper-case
|
|
21
|
-
* - The labels should be actionable (e.g. "EDIT" or "ADD NEW FILTER") and it should be clear from the button label what will happen when the user interacts with it. Make button labels short and clear. Avoid long explanations in the button text.
|
|
22
|
-
* - You can change underlying semantics with a component property. Typescript will guard you on providing other properties related to the component type.
|
|
23
|
-
*
|
|
24
|
-
* ### Usage
|
|
25
|
-
* - **Primary**: Use primary button for the single primary action on the screen. To call attention to an action on a form, or highlight the strongest call to action on a page. Primary button should only appear once per screen. Not every screen requires a primary button.
|
|
26
|
-
* - **Secondary**: Use secondary buttons for all remaining actions. Secondary button is the standard button for most use cases.
|
|
27
|
-
* - **Danger**: Use danger button for potentially destructive actions.
|
|
28
|
-
* - **Transparent**: Use for IconButton and similar use-cases.
|
|
29
|
-
*/
|
|
30
|
-
export const Button = forwardRef(({ component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true,
|
|
31
|
-
// Disabled tooltip
|
|
32
|
-
disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement,
|
|
33
|
-
// Left icon
|
|
34
|
-
iconLeft, iconLeftAriaLabel, iconLeftColor, iconLeftClassName,
|
|
35
|
-
// Right icon
|
|
36
|
-
iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', tooltip, size = 'small', active, truncate = true, iconSize: propIconSize, tooltipColor, ...rest }, ref) => {
|
|
10
|
+
export const Button = forwardRef(({ component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true, disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, iconLeft, iconLeftAriaLabel, iconLeftColor, iconLeftClassName, iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', tooltip, active, truncate = true, iconSize: propIconSize, tooltipColor, ...rest }, ref) => {
|
|
37
11
|
const tooltipId = useUID();
|
|
38
|
-
const iconSize = propIconSize
|
|
12
|
+
const iconSize = propIconSize !== null && propIconSize !== void 0 ? propIconSize : 'small';
|
|
39
13
|
const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
|
|
40
14
|
const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
|
|
41
15
|
return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip, open: disabled && disabledTooltipVisible, side: disabledTooltipPlacement },
|
|
@@ -43,7 +17,6 @@ iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopen
|
|
|
43
17
|
[styles[`color${capitalizeFirstCharacter(color)}`]]: true,
|
|
44
18
|
[styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
|
|
45
19
|
[styles.active]: active,
|
|
46
|
-
[styles[size]]: size !== 'small',
|
|
47
20
|
}, 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
21
|
React.createElement("span", { "data-test": "button-outline", className: cn(styles.outline, { [styles.inset]: outline === 'inset' }, outlineClassName) }),
|
|
49
22
|
React.createElement("span", { className: cn(styles.body, bodyClassName) },
|
|
@@ -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,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,EAAe,MAAM,WAAW,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,MAAM,MAAM,sBAAsB,CAAA;
|
|
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,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,EAAe,MAAM,WAAW,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,MAAM,MAAM,sBAAsB,CAAA;AA6FzC,MAAM,wBAAwB,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,SAAS,EAAE,SAAS,GAAG,QAAQ,EAC/B,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,QAAQ,EACR,eAAe,EACf,sBAAsB,EACtB,wBAAwB,EACxB,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,GAAG,GAAG,UAAU,EAChB,MAAM,EACN,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,OAAO,GAAG,WAAW,EACrB,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,QAAQ,EAAE,YAAY,EACtB,YAAY,EACZ,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAa,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,OAAO,CAAA;IAClD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IACzD,MAAM,uBAAuB,GAAG,OAAO,IAAI,SAAS,IAAI,kBAAkB,IAAI,CAAC,CAAC,QAAQ,IAAI,iBAAiB,CAAC,CAAA;IAE9G,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,EAC7C,IAAI,EAAE,QAAQ,IAAI,sBAAsB,EACxC,IAAI,EAAE,wBAAwB;QAE9B,oBAAC,SAAS,iBACE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb;gBACE,CAAC,MAAM,CAAC,QAAQ,wBAAwB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;gBACzD,CAAC,MAAM,CAAC,UAAU,wBAAwB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;gBAC7D,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM;aACxB,EACD,SAAS,CACV,sBACiB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAClD,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,EAC7B,GAAG,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7C,MAAM,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,IAAI,EAAE,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC/C,GAAG,EAAE,GAAuD,KACxD,IAAI;YAER,2CAAgB,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,OAAO,EAAE,EAAE,gBAAgB,CAAC,GAAI;YAC7H,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC;gBAC5C,OAAO,IAAI,CAAC,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI;gBAC7F,QAAQ,IAAI,iBAAiB,IAAI,CAAC,OAAO,IAAI,CAC5C,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,iBAAiB,eAClB,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACjD,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,aAAa,GACpB,CACH;gBACA,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,aAAa,IACZ,IAAI,EAAE,UAAU,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACpF;;;;;sBAKE;oBACF,cAAc,EAAE,QAAQ,IAAI,sBAAsB,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAChF,CACH,CAAC,CAAC,CAAC,CACF,QAAQ,CACT;gBACA,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;gBAClF,CAAC,uBAAuB,IAAI,SAAS,IAAI,kBAAkB,IAAI,CAC9D,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,kBAAkB,eACnB,mBAAmB,EAC7B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,EACnD,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,cAAc,GACrB,CACH,CACI,CACG,CACJ,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
cursor: pointer;
|
|
22
22
|
border: none;
|
|
23
23
|
padding: 0;
|
|
24
|
-
border-radius:
|
|
24
|
+
border-radius: 8px;
|
|
25
25
|
height: c.$inputHeightSmall;
|
|
26
26
|
max-width: c.$buttonMaxWidth;
|
|
27
27
|
|
|
@@ -30,15 +30,9 @@
|
|
|
30
30
|
|
|
31
31
|
@include c.typographyButton('small');
|
|
32
32
|
|
|
33
|
-
&.medium {
|
|
34
|
-
height: c.$grid * 10.75;
|
|
35
|
-
|
|
36
|
-
@include c.typographyButton('medium');
|
|
37
|
-
}
|
|
38
|
-
|
|
39
33
|
.outline {
|
|
40
34
|
position: absolute;
|
|
41
|
-
border-radius:
|
|
35
|
+
border-radius: 8px;
|
|
42
36
|
pointer-events: none;
|
|
43
37
|
top: 50%;
|
|
44
38
|
left: 50%;
|
|
@@ -3,7 +3,7 @@ import { FloatingArrow, offset, useFloating, arrow, useHover, useInteractions, a
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
// @deprecated — use Tooltip from @hazelcast/ui instead. This will be removed in v5.
|
|
5
5
|
import styles from './Tooltip.module.scss';
|
|
6
|
-
import { canUseDOM } from '
|
|
6
|
+
import { canUseDOM } from '../utils/ssr';
|
|
7
7
|
/**
|
|
8
8
|
* ### Purpose
|
|
9
9
|
* Useful when you need to display additional information/actionable content.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/old/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "4.0.1-canary.
|
|
3
|
+
"version": "4.0.1-canary.4",
|
|
4
4
|
"description": "Hazelcast design system components and utilities",
|
|
5
5
|
"homepage": "https://github.com/hazelcast/hive#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -16,12 +16,6 @@
|
|
|
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
|
-
},
|
|
25
19
|
"directories": {
|
|
26
20
|
"lib": "lib",
|
|
27
21
|
"test": "__tests__"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/old/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/lib/old/index.d.ts
DELETED
package/lib/old/index.js
DELETED
package/lib/old/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
File without changes
|
|
File without changes
|