@fibery/ui-kit 1.28.3 → 1.29.0
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/package.json +7 -7
- package/src/actions-menu/actions-menu-item.tsx +15 -4
- package/src/button/button.tsx +5 -1
- package/src/button/icon-button.tsx +1 -1
- package/src/design-system.ts +8 -6
- package/src/emoji-picker/emoji-picker-content-with-color.tsx +3 -1
- package/src/emoji-picker/emoji-picker.tsx +3 -1
- package/src/emoji-picker/primitives/content.tsx +4 -1
- package/src/emoji-picker/primitives/grid.tsx +3 -1
- package/src/icons/ast/CheckCircleFilled.ts +8 -0
- package/src/icons/ast/InfoCircleFilled.ts +8 -0
- package/src/icons/ast/index.tsx +2 -4
- package/src/icons/react/CheckCircleFilled.tsx +12 -0
- package/src/icons/react/InfoCircleFilled.tsx +12 -0
- package/src/icons/react/index.tsx +2 -4
- package/src/lists/actions-menu-row-surface.tsx +4 -4
- package/src/lists/list-row-surface.tsx +8 -8
- package/src/loaders.tsx +1 -1
- package/src/tooltip.tsx +3 -1
- package/src/icons/ast/AntdFilledCheckCircle.ts +0 -8
- package/src/icons/ast/AntdFilledCloseCircle.ts +0 -8
- package/src/icons/ast/AntdFilledExclamationCircle.ts +0 -8
- package/src/icons/ast/AntdFilledInfoCircle.ts +0 -8
- package/src/icons/react/AntdFilledCheckCircle.tsx +0 -12
- package/src/icons/react/AntdFilledCloseCircle.tsx +0 -12
- package/src/icons/react/AntdFilledExclamationCircle.tsx +0 -12
- package/src/icons/react/AntdFilledInfoCircle.tsx +0 -12
- /package/src/{pallete.ts → palette.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fibery/ui-kit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.29.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"src/antd/styles.ts",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"src/select",
|
|
21
21
|
"src/error-alert",
|
|
22
22
|
"src/actions-menu",
|
|
23
|
-
"src/
|
|
23
|
+
"src/palette.ts",
|
|
24
24
|
"src/tooltip.tsx",
|
|
25
25
|
"src/tooltip-if-overflown.tsx",
|
|
26
26
|
"src/back-button.tsx",
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"react-virtuoso": "4.6.0",
|
|
76
76
|
"screenfull": "6.0.1",
|
|
77
77
|
"ua-parser-js": "0.7.24",
|
|
78
|
-
"@fibery/emoji-data": "2.
|
|
79
|
-
"@fibery/
|
|
80
|
-
"@fibery/
|
|
78
|
+
"@fibery/emoji-data": "2.6.0",
|
|
79
|
+
"@fibery/helpers": "1.3.0",
|
|
80
|
+
"@fibery/react": "1.4.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"react": "^18.2.0",
|
|
@@ -108,10 +108,10 @@
|
|
|
108
108
|
"react-dom": "18.2.0",
|
|
109
109
|
"svg-parser": "2.0.4",
|
|
110
110
|
"svgo": "2.8.0",
|
|
111
|
-
"typescript": "5.
|
|
111
|
+
"typescript": "5.4.3",
|
|
112
112
|
"unist-util-reduce": "0.2.2",
|
|
113
113
|
"@fibery/babel-preset": "7.4.0",
|
|
114
|
-
"@fibery/eslint-config": "8.
|
|
114
|
+
"@fibery/eslint-config": "8.6.0"
|
|
115
115
|
},
|
|
116
116
|
"jest": {
|
|
117
117
|
"testEnvironment": "jsdom",
|
|
@@ -117,10 +117,11 @@ export type ActionsMenuItemProps = {
|
|
|
117
117
|
loading?: boolean;
|
|
118
118
|
checked?: boolean;
|
|
119
119
|
children: ReactNode;
|
|
120
|
+
className?: string;
|
|
120
121
|
};
|
|
121
122
|
|
|
122
123
|
const ActionsMenuItemComponent: React.FC<
|
|
123
|
-
ActionsMenuItemProps & {id?: string; showWarning?: boolean; onSelect: (e: Event) => void}
|
|
124
|
+
ActionsMenuItemProps & {id?: string; showWarning?: boolean; onSelect: (e: Event) => void; className?: string}
|
|
124
125
|
> = memo(function ActionsMenuItemComponent({
|
|
125
126
|
id,
|
|
126
127
|
testId,
|
|
@@ -135,6 +136,7 @@ const ActionsMenuItemComponent: React.FC<
|
|
|
135
136
|
loading,
|
|
136
137
|
checked,
|
|
137
138
|
children,
|
|
139
|
+
className,
|
|
138
140
|
}) {
|
|
139
141
|
const {MenuPrimitive} = useActionsMenuContext();
|
|
140
142
|
const setActiveDangerousRow = useSetActiveDangerousRow();
|
|
@@ -167,7 +169,8 @@ const ActionsMenuItemComponent: React.FC<
|
|
|
167
169
|
rowCss,
|
|
168
170
|
dangerous && dangerousItemCss,
|
|
169
171
|
showWarning && dangerousConfirmationCss,
|
|
170
|
-
description && rowWithDescriptionCss
|
|
172
|
+
description && rowWithDescriptionCss,
|
|
173
|
+
className
|
|
171
174
|
)}
|
|
172
175
|
disabled={disabled}
|
|
173
176
|
>
|
|
@@ -191,11 +194,19 @@ const ActionsMenuItemComponent: React.FC<
|
|
|
191
194
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
192
195
|
const noop = () => {};
|
|
193
196
|
|
|
194
|
-
export const ActionsMenuItem: React.FC<ActionsMenuItemProps> = (props) => {
|
|
197
|
+
export const ActionsMenuItem: React.FC<ActionsMenuItemProps> = ({className, ...props}) => {
|
|
195
198
|
const id = useId();
|
|
196
199
|
const activeDangerousRow = useActiveDangerousRow();
|
|
197
200
|
|
|
198
201
|
const onSelect = useCallbackRef(props.onSelect || noop);
|
|
199
202
|
|
|
200
|
-
return
|
|
203
|
+
return (
|
|
204
|
+
<ActionsMenuItemComponent
|
|
205
|
+
{...props}
|
|
206
|
+
className={className}
|
|
207
|
+
id={id}
|
|
208
|
+
showWarning={activeDangerousRow === id}
|
|
209
|
+
onSelect={onSelect}
|
|
210
|
+
/>
|
|
211
|
+
);
|
|
201
212
|
};
|
package/src/button/button.tsx
CHANGED
|
@@ -15,6 +15,7 @@ type PositionInGroup = "first" | "middle" | "last";
|
|
|
15
15
|
|
|
16
16
|
export const ButtonSize = {
|
|
17
17
|
superSmall: ":button-size/super-small",
|
|
18
|
+
smaller: ":button-size/smaller",
|
|
18
19
|
small: ":button-size/small",
|
|
19
20
|
normal: ":button-size/normal",
|
|
20
21
|
big: ":button-size/big",
|
|
@@ -23,6 +24,7 @@ export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
|
|
|
23
24
|
|
|
24
25
|
const FontSizes = {
|
|
25
26
|
":button-size/super-small": 10,
|
|
27
|
+
":button-size/smaller": 12,
|
|
26
28
|
":button-size/small": 12,
|
|
27
29
|
":button-size/normal": 14,
|
|
28
30
|
":button-size/big": 16,
|
|
@@ -30,6 +32,7 @@ const FontSizes = {
|
|
|
30
32
|
|
|
31
33
|
const HorizontalPaddings = {
|
|
32
34
|
":button-size/super-small": 4,
|
|
35
|
+
":button-size/smaller": 8,
|
|
33
36
|
":button-size/small": 8,
|
|
34
37
|
":button-size/normal": 12,
|
|
35
38
|
":button-size/big": 16,
|
|
@@ -37,7 +40,8 @@ const HorizontalPaddings = {
|
|
|
37
40
|
|
|
38
41
|
const IconSizes = {
|
|
39
42
|
":button-size/super-small": 14,
|
|
40
|
-
":button-size/
|
|
43
|
+
":button-size/smaller": 16,
|
|
44
|
+
":button-size/small": 18,
|
|
41
45
|
":button-size/normal": 18,
|
|
42
46
|
":button-size/big": 20,
|
|
43
47
|
};
|
|
@@ -7,7 +7,7 @@ import cx from "classnames";
|
|
|
7
7
|
|
|
8
8
|
export type IconButtonSize = "super-small" | "small" | "normal" | "big";
|
|
9
9
|
|
|
10
|
-
export type IconButtonProps =
|
|
10
|
+
export type IconButtonProps = ButtonBaseProps & {
|
|
11
11
|
size?: IconButtonSize;
|
|
12
12
|
classNameOverride?: string;
|
|
13
13
|
};
|
package/src/design-system.ts
CHANGED
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
whiteA,
|
|
18
18
|
yellow,
|
|
19
19
|
yellowDark,
|
|
20
|
-
} from "./
|
|
20
|
+
} from "./palette";
|
|
21
21
|
import {a11yColor} from "./a11y-color";
|
|
22
22
|
import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
|
|
23
23
|
import {ThemeMode} from "./theme-settings";
|
|
@@ -448,6 +448,7 @@ export const themeColors = {
|
|
|
448
448
|
colorBgNotificationSelected: [indigo.indigo3, indigoDark.indigo4],
|
|
449
449
|
colorBgNotificationSelectedHover: [indigo.indigo4, indigoDark.indigo6],
|
|
450
450
|
disabledInversedTextColor: [shades.opacity25, lights.opacity25],
|
|
451
|
+
success: [teal.teal9, tealDark.teal9],
|
|
451
452
|
danger: [red.red9, redDark.red10],
|
|
452
453
|
active: [red.red9, redDark.red10],
|
|
453
454
|
warning: ["#FFD41E", "#FFD41E"],
|
|
@@ -691,7 +692,7 @@ export const getIconColor = _.memoize(
|
|
|
691
692
|
export const cardTypeColors = [
|
|
692
693
|
"#4A4A4A",
|
|
693
694
|
"#6A849B",
|
|
694
|
-
"#
|
|
695
|
+
"#99A2AB",
|
|
695
696
|
"#D40915",
|
|
696
697
|
"#E72065",
|
|
697
698
|
"#9C2BAF",
|
|
@@ -778,10 +779,11 @@ export const layout = {
|
|
|
778
779
|
viewSetupWidth: "30vw",
|
|
779
780
|
viewSetupMinWidth: 380,
|
|
780
781
|
inputHeight: 36, //TODO: merge input and item height?
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
782
|
+
timelineToolbarHeight: 60,
|
|
783
|
+
timelineLineHeight: 48,
|
|
784
|
+
timelineGroupPadding: 0,
|
|
785
|
+
timelineItemHeightRatio: 36 / 48,
|
|
786
|
+
timelineHeaderHeight: 48,
|
|
785
787
|
calendarEventHeight: 30,
|
|
786
788
|
calendarHeaderHeight: 30,
|
|
787
789
|
calendarToolbarHeight: 60,
|
|
@@ -46,7 +46,8 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
|
|
|
46
46
|
};
|
|
47
47
|
|
|
48
48
|
const collapsibleWrapperCss = css`
|
|
49
|
-
|
|
49
|
+
display: grid;
|
|
50
|
+
grid-template-rows: auto 1fr;
|
|
50
51
|
overflow: hidden;
|
|
51
52
|
`;
|
|
52
53
|
|
|
@@ -76,6 +77,7 @@ export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorPr
|
|
|
76
77
|
|
|
77
78
|
return (
|
|
78
79
|
<CollapsibleRoot
|
|
80
|
+
style={{maxHeight: `var(--fibery-emoji-content-max-height, 308px)`}}
|
|
79
81
|
className={collapsibleWrapperCss}
|
|
80
82
|
open={colorOpened}
|
|
81
83
|
onOpenChange={setColorOpened}
|
|
@@ -10,6 +10,7 @@ const i18n = {search: "Search emoji..."};
|
|
|
10
10
|
|
|
11
11
|
export type EmojiPickerProps = {
|
|
12
12
|
color?: string;
|
|
13
|
+
emojiSize?: number;
|
|
13
14
|
getHoverColor?: (color: string) => string | undefined;
|
|
14
15
|
colors?: string[];
|
|
15
16
|
onColorSelect?: (c: $TSFixMe) => void;
|
|
@@ -30,12 +31,13 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
|
|
|
30
31
|
getHoverColor,
|
|
31
32
|
showSkinTones,
|
|
32
33
|
searchRef,
|
|
34
|
+
emojiSize = 20,
|
|
33
35
|
}) => {
|
|
34
36
|
const showFooter = Boolean(onAddCustomEmoji) || showSkinTones;
|
|
35
37
|
|
|
36
38
|
return (
|
|
37
39
|
<EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect} onCustomCategorySettings={onCustomCategorySettings}>
|
|
38
|
-
<EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={
|
|
40
|
+
<EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={emojiSize}>
|
|
39
41
|
<EmojiPickerContentWithColor
|
|
40
42
|
color={color}
|
|
41
43
|
colors={colors}
|
|
@@ -7,6 +7,9 @@ import {contentHorizontalPadding, emojiPadding} from "./layout";
|
|
|
7
7
|
|
|
8
8
|
const emojiPickerCss = css`
|
|
9
9
|
background-color: ${themeVars.actionMenuBg};
|
|
10
|
+
display: grid;
|
|
11
|
+
grid-template-rows: 1fr auto;
|
|
12
|
+
height: 100%;
|
|
10
13
|
`;
|
|
11
14
|
|
|
12
15
|
type EmojiPickerContentSettings = {
|
|
@@ -47,7 +50,7 @@ export const EmojiPickerContent: React.FC<React.PropsWithChildren<EmojiPickerCon
|
|
|
47
50
|
{
|
|
48
51
|
"--fibery-emoji-container-size": `${emojiContainerSize}px`,
|
|
49
52
|
"--fibery-emoji-hover-color": emojiHoverColor,
|
|
50
|
-
width,
|
|
53
|
+
width: `var(--fibery-emoji-container-width, ${width}px)`,
|
|
51
54
|
} as CSSProperties
|
|
52
55
|
}
|
|
53
56
|
className={emojiPickerCss}
|
|
@@ -298,8 +298,10 @@ export const EmojiPickerGrid = forwardRef<EmojiPickerGridHandle, EmojiPickerGrid
|
|
|
298
298
|
|
|
299
299
|
return (
|
|
300
300
|
<div
|
|
301
|
+
style={{
|
|
302
|
+
height: `var(--fibery-emoji-grid-height, 258px)`,
|
|
303
|
+
}}
|
|
301
304
|
className={css`
|
|
302
|
-
height: 258px;
|
|
303
305
|
position: relative;
|
|
304
306
|
`}
|
|
305
307
|
>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const CheckCircleFilled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"m8.692 10.908 3.575-3.583a.833.833 0 1 1 1.175 1.183l-4.167 4.167a.834.834 0 0 1-1.175 0l-1.958-1.967a.833.833 0 1 1 1.175-1.175l1.375 1.375ZM5.37 3.071a8.333 8.333 0 1 1 9.26 13.858A8.333 8.333 0 0 1 5.37 3.07Z"},"children":[]}],"metadata":""}]},"name":"check-circle-filled"};
|
|
7
|
+
|
|
8
|
+
export default CheckCircleFilled;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const InfoCircleFilled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10 9.167a.833.833 0 0 0-.833.833v3.333a.833.833 0 0 0 1.666 0V10A.834.834 0 0 0 10 9.167Zm0-7.5a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666ZM9.683 5.9a.833.833 0 0 1 .634 0c.102.04.195.1.275.175a.832.832 0 0 1-.908 1.358.959.959 0 0 1-.276-.175.833.833 0 0 1-.175-.908.959.959 0 0 1 .175-.275.833.833 0 0 1 .275-.175Z"},"children":[]}],"metadata":""}]},"name":"info-circle-filled"};
|
|
7
|
+
|
|
8
|
+
export default InfoCircleFilled;
|
package/src/icons/ast/index.tsx
CHANGED
|
@@ -10,10 +10,6 @@ export { default as Add } from './Add';
|
|
|
10
10
|
export { default as AiAssistant } from './AiAssistant';
|
|
11
11
|
export { default as AiAvatar } from './AiAvatar';
|
|
12
12
|
export { default as AlertTriangle } from './AlertTriangle';
|
|
13
|
-
export { default as AntdFilledCheckCircle } from './AntdFilledCheckCircle';
|
|
14
|
-
export { default as AntdFilledCloseCircle } from './AntdFilledCloseCircle';
|
|
15
|
-
export { default as AntdFilledExclamationCircle } from './AntdFilledExclamationCircle';
|
|
16
|
-
export { default as AntdFilledInfoCircle } from './AntdFilledInfoCircle';
|
|
17
13
|
export { default as AppDetails } from './AppDetails';
|
|
18
14
|
export { default as AppStoreOneColor } from './AppStoreOneColor';
|
|
19
15
|
export { default as AppStore } from './AppStore';
|
|
@@ -50,6 +46,7 @@ export { default as Bolt } from './Bolt';
|
|
|
50
46
|
export { default as Cards } from './Cards';
|
|
51
47
|
export { default as ChatAi } from './ChatAi';
|
|
52
48
|
export { default as Chat } from './Chat';
|
|
49
|
+
export { default as CheckCircleFilled } from './CheckCircleFilled';
|
|
53
50
|
export { default as CheckCircle } from './CheckCircle';
|
|
54
51
|
export { default as Checked } from './Checked';
|
|
55
52
|
export { default as ClearValue } from './ClearValue';
|
|
@@ -108,6 +105,7 @@ export { default as Hint } from './Hint';
|
|
|
108
105
|
export { default as Home } from './Home';
|
|
109
106
|
export { default as ImageXmark } from './ImageXmark';
|
|
110
107
|
export { default as Import } from './Import';
|
|
108
|
+
export { default as InfoCircleFilled } from './InfoCircleFilled';
|
|
111
109
|
export { default as Integration } from './Integration';
|
|
112
110
|
export { default as InvitePeople } from './InvitePeople';
|
|
113
111
|
export { default as Items } from './Items';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import CheckCircleFilledSvg from '../ast/CheckCircleFilled';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
import { IconBaseProps } from '../types';
|
|
6
|
+
|
|
7
|
+
const CheckCircleFilled = (
|
|
8
|
+
props: IconBaseProps,
|
|
9
|
+
): JSX.Element => <Icon {...props} icon={CheckCircleFilledSvg} />;
|
|
10
|
+
|
|
11
|
+
CheckCircleFilled.displayName = 'CheckCircleFilled';
|
|
12
|
+
export default CheckCircleFilled;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import InfoCircleFilledSvg from '../ast/InfoCircleFilled';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
import { IconBaseProps } from '../types';
|
|
6
|
+
|
|
7
|
+
const InfoCircleFilled = (
|
|
8
|
+
props: IconBaseProps,
|
|
9
|
+
): JSX.Element => <Icon {...props} icon={InfoCircleFilledSvg} />;
|
|
10
|
+
|
|
11
|
+
InfoCircleFilled.displayName = 'InfoCircleFilled';
|
|
12
|
+
export default InfoCircleFilled;
|
|
@@ -10,10 +10,6 @@ export { default as Add } from './Add';
|
|
|
10
10
|
export { default as AiAssistant } from './AiAssistant';
|
|
11
11
|
export { default as AiAvatar } from './AiAvatar';
|
|
12
12
|
export { default as AlertTriangle } from './AlertTriangle';
|
|
13
|
-
export { default as AntdFilledCheckCircle } from './AntdFilledCheckCircle';
|
|
14
|
-
export { default as AntdFilledCloseCircle } from './AntdFilledCloseCircle';
|
|
15
|
-
export { default as AntdFilledExclamationCircle } from './AntdFilledExclamationCircle';
|
|
16
|
-
export { default as AntdFilledInfoCircle } from './AntdFilledInfoCircle';
|
|
17
13
|
export { default as AppDetails } from './AppDetails';
|
|
18
14
|
export { default as AppStoreOneColor } from './AppStoreOneColor';
|
|
19
15
|
export { default as AppStore } from './AppStore';
|
|
@@ -50,6 +46,7 @@ export { default as Bolt } from './Bolt';
|
|
|
50
46
|
export { default as Cards } from './Cards';
|
|
51
47
|
export { default as ChatAi } from './ChatAi';
|
|
52
48
|
export { default as Chat } from './Chat';
|
|
49
|
+
export { default as CheckCircleFilled } from './CheckCircleFilled';
|
|
53
50
|
export { default as CheckCircle } from './CheckCircle';
|
|
54
51
|
export { default as Checked } from './Checked';
|
|
55
52
|
export { default as ClearValue } from './ClearValue';
|
|
@@ -108,6 +105,7 @@ export { default as Hint } from './Hint';
|
|
|
108
105
|
export { default as Home } from './Home';
|
|
109
106
|
export { default as ImageXmark } from './ImageXmark';
|
|
110
107
|
export { default as Import } from './Import';
|
|
108
|
+
export { default as InfoCircleFilled } from './InfoCircleFilled';
|
|
111
109
|
export { default as Integration } from './Integration';
|
|
112
110
|
export { default as InvitePeople } from './InvitePeople';
|
|
113
111
|
export { default as Items } from './Items';
|
|
@@ -11,8 +11,8 @@ import {
|
|
|
11
11
|
ListRowContent,
|
|
12
12
|
ListRowContentProps,
|
|
13
13
|
ListRowSurfaceProps,
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
NATURAL_FOCUS_CLASS,
|
|
15
|
+
NATURAL_HOVER_CLASS,
|
|
16
16
|
NATURAL_HOVER,
|
|
17
17
|
listRowSurfaceStylesBase,
|
|
18
18
|
} from "./list-row-surface";
|
|
@@ -100,8 +100,8 @@ export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSu
|
|
|
100
100
|
listRowSurfaceStylesBase,
|
|
101
101
|
actionMenuItemSurface,
|
|
102
102
|
className,
|
|
103
|
-
hovered === undefined &&
|
|
104
|
-
focused === undefined &&
|
|
103
|
+
hovered === undefined && NATURAL_HOVER_CLASS,
|
|
104
|
+
focused === undefined && NATURAL_FOCUS_CLASS,
|
|
105
105
|
focused && "focus",
|
|
106
106
|
disabled && "done",
|
|
107
107
|
selected && "selected",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {css, cx} from "@linaria/core";
|
|
2
2
|
import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
|
|
3
|
-
import {border, space, textStyles, themeVars} from "../design-system";
|
|
3
|
+
import {border, space, textStyles, themeVars, transition} from "../design-system";
|
|
4
4
|
|
|
5
5
|
interface ListRowSurfaceBase extends HTMLAttributes<HTMLDivElement> {
|
|
6
6
|
testId?: string;
|
|
@@ -13,10 +13,10 @@ export interface ListRowSurfaceProps extends ListRowSurfaceBase {
|
|
|
13
13
|
hovered?: boolean;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
export const
|
|
17
|
-
export const
|
|
18
|
-
export const NATURAL_HOVER = `&.${
|
|
19
|
-
export const NATURAL_FOCUS = `&.${
|
|
16
|
+
export const NATURAL_HOVER_CLASS = "natural-hover";
|
|
17
|
+
export const NATURAL_FOCUS_CLASS = "natural-focus";
|
|
18
|
+
export const NATURAL_HOVER = `&.${NATURAL_HOVER_CLASS}:hover`;
|
|
19
|
+
export const NATURAL_FOCUS = `&.${NATURAL_FOCUS_CLASS}:focus`;
|
|
20
20
|
|
|
21
21
|
export const listRowSurfaceStylesBase = css`
|
|
22
22
|
max-width: 100%;
|
|
@@ -30,7 +30,7 @@ export const listRowSurfaceStylesBase = css`
|
|
|
30
30
|
${{...textStyles.regular}};
|
|
31
31
|
color: ${themeVars.textColor};
|
|
32
32
|
border-radius: ${border.radius6}px;
|
|
33
|
-
transition: background-color;
|
|
33
|
+
transition: background-color ${transition};
|
|
34
34
|
&:focus {
|
|
35
35
|
outline: none;
|
|
36
36
|
}
|
|
@@ -158,8 +158,8 @@ export const ListRowSurface = forwardRef<HTMLDivElement, ListRowSurfaceProps>(
|
|
|
158
158
|
listRowSurfaceStylesBase,
|
|
159
159
|
darker ? listRowSurfaceStatesDark : listRowSurfaceStatesDefault,
|
|
160
160
|
className,
|
|
161
|
-
hovered === undefined &&
|
|
162
|
-
focused === undefined &&
|
|
161
|
+
hovered === undefined && NATURAL_HOVER_CLASS,
|
|
162
|
+
focused === undefined && NATURAL_FOCUS_CLASS,
|
|
163
163
|
focused && "focus",
|
|
164
164
|
hovered && "hover",
|
|
165
165
|
selected && "selected",
|
package/src/loaders.tsx
CHANGED
|
@@ -7,7 +7,7 @@ import {getShiftStyle} from "./icons/get-shift-style";
|
|
|
7
7
|
import {LoadingSausage} from "./loading-sausage";
|
|
8
8
|
import {useTheme} from "./theme-provider";
|
|
9
9
|
|
|
10
|
-
export const LoadingView = styled.div<{absolute
|
|
10
|
+
export const LoadingView = styled.div<{absolute?: boolean; backgroundColor?: string}>`
|
|
11
11
|
position: ${(props) => (props.absolute ? "absolute" : "static")};
|
|
12
12
|
height: ${(props) => (props.absolute ? "auto" : "100%")};
|
|
13
13
|
background: ${(props) => props.backgroundColor || themeVars.mainBg};
|
package/src/tooltip.tsx
CHANGED
|
@@ -96,6 +96,7 @@ export const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> =
|
|
|
96
96
|
export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> & {
|
|
97
97
|
title?: ReactNode;
|
|
98
98
|
description?: ReactNode;
|
|
99
|
+
setContentElement?: (el: HTMLDivElement | null) => void;
|
|
99
100
|
content?: ReactNode;
|
|
100
101
|
side?: TooltipPrimitive.TooltipContentProps["side"];
|
|
101
102
|
sideOffset?: TooltipPrimitive.TooltipContentProps["sideOffset"];
|
|
@@ -142,7 +143,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
|
|
|
142
143
|
onVisibleChange,
|
|
143
144
|
keepOnClick,
|
|
144
145
|
disabled,
|
|
145
|
-
|
|
146
|
+
setContentElement,
|
|
146
147
|
...triggerProps
|
|
147
148
|
},
|
|
148
149
|
ref
|
|
@@ -171,6 +172,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
|
|
|
171
172
|
</TooltipPrimitive.Trigger>
|
|
172
173
|
<TooltipPrimitive.Portal>
|
|
173
174
|
<TooltipPrimitive.Content
|
|
175
|
+
ref={setContentElement}
|
|
174
176
|
side={side}
|
|
175
177
|
sideOffset={sideOffset}
|
|
176
178
|
align={align}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// This icon file is generated automatically.
|
|
3
|
-
|
|
4
|
-
import { IconDefinition } from '../types';
|
|
5
|
-
|
|
6
|
-
const AntdFilledCheckCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 1024 1024"},"children":[{"type":"element","tagName":"path","properties":{"d":"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"},"children":[]}],"metadata":""}]},"name":"antd-filled-check-circle"};
|
|
7
|
-
|
|
8
|
-
export default AntdFilledCheckCircle;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// This icon file is generated automatically.
|
|
3
|
-
|
|
4
|
-
import { IconDefinition } from '../types';
|
|
5
|
-
|
|
6
|
-
const AntdFilledCloseCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 1024 1024"},"children":[{"type":"element","tagName":"path","properties":{"d":"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"},"children":[]}],"metadata":""}]},"name":"antd-filled-close-circle"};
|
|
7
|
-
|
|
8
|
-
export default AntdFilledCloseCircle;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// This icon file is generated automatically.
|
|
3
|
-
|
|
4
|
-
import { IconDefinition } from '../types';
|
|
5
|
-
|
|
6
|
-
const AntdFilledExclamationCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 1024 1024"},"children":[{"type":"element","tagName":"path","properties":{"d":"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"},"children":[]}],"metadata":""}]},"name":"antd-filled-exclamation-circle"};
|
|
7
|
-
|
|
8
|
-
export default AntdFilledExclamationCircle;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// This icon file is generated automatically.
|
|
3
|
-
|
|
4
|
-
import { IconDefinition } from '../types';
|
|
5
|
-
|
|
6
|
-
const AntdFilledInfoCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 1024 1024"},"children":[{"type":"element","tagName":"path","properties":{"d":"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"},"children":[]}],"metadata":""}]},"name":"antd-filled-info-circle"};
|
|
7
|
-
|
|
8
|
-
export default AntdFilledInfoCircle;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
// This icon file is generated automatically.
|
|
2
|
-
|
|
3
|
-
import AntdFilledCheckCircleSvg from '../ast/AntdFilledCheckCircle';
|
|
4
|
-
import { Icon } from '../Icon';
|
|
5
|
-
import { IconBaseProps } from '../types';
|
|
6
|
-
|
|
7
|
-
const AntdFilledCheckCircle = (
|
|
8
|
-
props: IconBaseProps,
|
|
9
|
-
): JSX.Element => <Icon {...props} icon={AntdFilledCheckCircleSvg} />;
|
|
10
|
-
|
|
11
|
-
AntdFilledCheckCircle.displayName = 'AntdFilledCheckCircle';
|
|
12
|
-
export default AntdFilledCheckCircle;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
// This icon file is generated automatically.
|
|
2
|
-
|
|
3
|
-
import AntdFilledCloseCircleSvg from '../ast/AntdFilledCloseCircle';
|
|
4
|
-
import { Icon } from '../Icon';
|
|
5
|
-
import { IconBaseProps } from '../types';
|
|
6
|
-
|
|
7
|
-
const AntdFilledCloseCircle = (
|
|
8
|
-
props: IconBaseProps,
|
|
9
|
-
): JSX.Element => <Icon {...props} icon={AntdFilledCloseCircleSvg} />;
|
|
10
|
-
|
|
11
|
-
AntdFilledCloseCircle.displayName = 'AntdFilledCloseCircle';
|
|
12
|
-
export default AntdFilledCloseCircle;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
// This icon file is generated automatically.
|
|
2
|
-
|
|
3
|
-
import AntdFilledExclamationCircleSvg from '../ast/AntdFilledExclamationCircle';
|
|
4
|
-
import { Icon } from '../Icon';
|
|
5
|
-
import { IconBaseProps } from '../types';
|
|
6
|
-
|
|
7
|
-
const AntdFilledExclamationCircle = (
|
|
8
|
-
props: IconBaseProps,
|
|
9
|
-
): JSX.Element => <Icon {...props} icon={AntdFilledExclamationCircleSvg} />;
|
|
10
|
-
|
|
11
|
-
AntdFilledExclamationCircle.displayName = 'AntdFilledExclamationCircle';
|
|
12
|
-
export default AntdFilledExclamationCircle;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
// This icon file is generated automatically.
|
|
2
|
-
|
|
3
|
-
import AntdFilledInfoCircleSvg from '../ast/AntdFilledInfoCircle';
|
|
4
|
-
import { Icon } from '../Icon';
|
|
5
|
-
import { IconBaseProps } from '../types';
|
|
6
|
-
|
|
7
|
-
const AntdFilledInfoCircle = (
|
|
8
|
-
props: IconBaseProps,
|
|
9
|
-
): JSX.Element => <Icon {...props} icon={AntdFilledInfoCircleSvg} />;
|
|
10
|
-
|
|
11
|
-
AntdFilledInfoCircle.displayName = 'AntdFilledInfoCircle';
|
|
12
|
-
export default AntdFilledInfoCircle;
|
|
File without changes
|