@fibery/ui-kit 1.19.0 → 1.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -5
- package/src/a11y-color.ts +9 -6
- package/src/antd/styles.ts +6 -6
- package/src/button/button.tsx +5 -5
- package/src/design-system.ts +19 -18
- package/src/emoji-picker/emoji-picker-content-with-color.tsx +1 -1
- package/src/emoji-picker/emoji-picker.tsx +2 -2
- package/src/emoji-picker/icon-emoji-picker.tsx +1 -1
- package/src/emoji-picker/primitives/category.tsx +2 -2
- package/src/emoji-picker/primitives/emoji.tsx +26 -3
- package/src/emoji-picker/primitives/footer.tsx +1 -1
- package/src/emoji-picker/primitives/header.tsx +1 -1
- package/src/emoji-picker/primitives/layout.ts +2 -2
- package/src/emoji-picker/primitives/search.tsx +5 -5
- package/src/error-alert.tsx +3 -3
- package/src/form-field-loader.tsx +3 -3
- package/src/icons/ast/AlertTriangle.ts +8 -0
- package/src/icons/ast/DragBlockHandleSingle.ts +8 -0
- package/src/icons/ast/Eye.ts +8 -0
- package/src/icons/ast/NetworkAdd.ts +8 -0
- package/src/icons/ast/RemovePeople.ts +8 -0
- package/src/icons/ast/RicheditorMarkTextBackgroundColor.ts +8 -0
- package/src/icons/ast/index.tsx +6 -1
- package/src/icons/react/AlertTriangle.tsx +12 -0
- package/src/icons/react/DragBlockHandleSingle.tsx +12 -0
- package/src/icons/react/Eye.tsx +12 -0
- package/src/icons/react/NetworkAdd.tsx +12 -0
- package/src/icons/react/RemovePeople.tsx +12 -0
- package/src/icons/react/RicheditorMarkTextBackgroundColor.tsx +12 -0
- package/src/icons/react/index.tsx +6 -1
- package/src/lists/list-item.tsx +139 -0
- package/src/loaders.tsx +10 -10
- package/src/loading-sausage.tsx +2 -2
- package/src/media-query-utils.ts +1 -1
- package/src/select/custom-select-partials/group-heading.tsx +2 -2
- package/src/select/custom-select-partials/menu.tsx +9 -1
- package/src/select/custom-select-partials/no-option-message.tsx +1 -1
- package/src/select/custom-select-partials/option.tsx +64 -7
- package/src/select/index.tsx +1 -1
- package/src/select/select-in-popover.tsx +10 -10
- package/src/select/styles.ts +12 -4
- package/src/toast/primitives.tsx +21 -8
- package/src/toast/toast-action.tsx +9 -1
- package/src/toast/toast-provider.tsx +15 -0
- package/src/toast/{toast-queue.tsx → toast-queue.ts} +21 -25
- package/src/toast/toast.tsx +35 -28
- package/src/toast/toaster.tsx +11 -48
- package/src/toast/utils/toastify-item-name.ts +6 -0
- package/src/tooltip.tsx +2 -2
- package/src/icons/ast/RicheditorMarkHighlight.ts +0 -8
- package/src/icons/react/RicheditorMarkHighlight.tsx +0 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fibery/ui-kit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.20.1",
|
|
4
4
|
"main": "index.ts",
|
|
5
5
|
"private": false,
|
|
6
6
|
"files": [
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
"src/button",
|
|
26
26
|
"src/emoji-picker/**/*.ts*",
|
|
27
27
|
"src/toast/**/*.ts*",
|
|
28
|
+
"src/lists/**/*.ts*",
|
|
28
29
|
"src/a11y-color.ts"
|
|
29
30
|
],
|
|
30
31
|
"license": "UNLICENSED",
|
|
@@ -48,11 +49,12 @@
|
|
|
48
49
|
"cmdk": "0.2.0",
|
|
49
50
|
"color-hash": "1.0.3",
|
|
50
51
|
"d3-shape": "1.3.7",
|
|
51
|
-
"date-fns": "
|
|
52
|
+
"date-fns": "2.29.2",
|
|
52
53
|
"invariant": "2.2.4",
|
|
53
54
|
"lodash": "4.17.21",
|
|
54
55
|
"md5": "2.2.1",
|
|
55
56
|
"moment": "2.29.4",
|
|
57
|
+
"popper-max-size-modifier": "0.2.0",
|
|
56
58
|
"prop-types": "15.7.2",
|
|
57
59
|
"rc-input-number": "7.3.11",
|
|
58
60
|
"rc-menu": "9.8.1",
|
|
@@ -68,7 +70,7 @@
|
|
|
68
70
|
"ua-parser-js": "0.7.24",
|
|
69
71
|
"@fibery/emoji-data": "2.2.1",
|
|
70
72
|
"@fibery/helpers": "1.2.0",
|
|
71
|
-
"@fibery/react": "1.
|
|
73
|
+
"@fibery/react": "1.3.0"
|
|
72
74
|
},
|
|
73
75
|
"peerDependencies": {
|
|
74
76
|
"react": "^18.2.0",
|
|
@@ -101,8 +103,8 @@
|
|
|
101
103
|
"svgo": "2.8.0",
|
|
102
104
|
"typescript": "5.1.6",
|
|
103
105
|
"unist-util-reduce": "0.2.2",
|
|
104
|
-
"@fibery/
|
|
105
|
-
"@fibery/
|
|
106
|
+
"@fibery/babel-preset": "7.3.0",
|
|
107
|
+
"@fibery/eslint-config": "8.5.0"
|
|
106
108
|
},
|
|
107
109
|
"jest": {
|
|
108
110
|
"testEnvironment": "jsdom",
|
package/src/a11y-color.ts
CHANGED
|
@@ -59,23 +59,26 @@ const checkColor = (colorValue: string) => {
|
|
|
59
59
|
* @return {string} - The closest hex color for `toMakeA11y` on `background`
|
|
60
60
|
*/
|
|
61
61
|
export function a11yColor(toMakeA11y: string, background: string, minimumContrast = 3.0) {
|
|
62
|
+
const key = toMakeA11y + background + minimumContrast;
|
|
63
|
+
if (cache.has(key)) {
|
|
64
|
+
return cache.get(key);
|
|
65
|
+
}
|
|
62
66
|
if (!checkColor(toMakeA11y) || !checkColor(background)) {
|
|
67
|
+
cache.put(key, toMakeA11y);
|
|
63
68
|
return toMakeA11y;
|
|
64
69
|
}
|
|
65
70
|
|
|
66
71
|
if (minimumContrast < 0 && minimumContrast > 21) {
|
|
67
72
|
throw new Error(`Minimum contrast must be a number between 0 and 21. It was ${minimumContrast}`);
|
|
68
73
|
}
|
|
69
|
-
const key = toMakeA11y + background + minimumContrast;
|
|
70
|
-
if (cache.has(key)) {
|
|
71
|
-
return cache.get(key);
|
|
72
|
-
}
|
|
73
74
|
const a11y = chroma(toMakeA11y);
|
|
74
75
|
const bg = chroma(background);
|
|
75
76
|
|
|
76
77
|
// Check the ratio straight away, if it passes return the value as hex
|
|
77
78
|
if (chroma.contrast(background, toMakeA11y) >= minimumContrast) {
|
|
78
|
-
|
|
79
|
+
const val = a11y.hex();
|
|
80
|
+
cache.put(key, val);
|
|
81
|
+
return val;
|
|
79
82
|
}
|
|
80
83
|
|
|
81
84
|
// Ratio didn't pass so we need to find the nearest color
|
|
@@ -142,6 +145,6 @@ export function a11yColor(toMakeA11y: string, background: string, minimumContras
|
|
|
142
145
|
minLightness = midLightness;
|
|
143
146
|
}
|
|
144
147
|
}
|
|
145
|
-
|
|
148
|
+
cache.put(key, foundColor);
|
|
146
149
|
return foundColor;
|
|
147
150
|
}
|
package/src/antd/styles.ts
CHANGED
|
@@ -27,8 +27,8 @@ export const inputOverrides = {
|
|
|
27
27
|
minHeight: layout.inputHeight,
|
|
28
28
|
paddingTop: 0,
|
|
29
29
|
paddingBottom: 0,
|
|
30
|
-
paddingLeft: space.
|
|
31
|
-
paddingRight: space.
|
|
30
|
+
paddingLeft: space.s12,
|
|
31
|
+
paddingRight: space.s12,
|
|
32
32
|
border: 0,
|
|
33
33
|
borderColor: colors.transparent,
|
|
34
34
|
transition: `box-shadow ${transition}`,
|
|
@@ -114,8 +114,8 @@ export const inputStyles = css`
|
|
|
114
114
|
"& .ant-input.ant-input-disabled": inputOverrides.disabled,
|
|
115
115
|
},
|
|
116
116
|
"& textarea.ant-input": {
|
|
117
|
-
paddingTop: space.
|
|
118
|
-
paddingBottom: space.
|
|
117
|
+
paddingTop: space.s8,
|
|
118
|
+
paddingBottom: space.s8,
|
|
119
119
|
},
|
|
120
120
|
"& .ant-select-disabled .ant-select-selection": {
|
|
121
121
|
backgroundColor: colors.transparent,
|
|
@@ -128,7 +128,7 @@ export const inputStyles = css`
|
|
|
128
128
|
"&& input::placeholder, && textarea::placeholder": {
|
|
129
129
|
color: themeVars.inputPlaceholderTextColor,
|
|
130
130
|
},
|
|
131
|
-
"& .ant-input-affix-wrapper .ant-input-prefix": {left: space.
|
|
132
|
-
"& .ant-input-affix-wrapper .ant-input:not(:first-child)": {paddingLeft: space.
|
|
131
|
+
"& .ant-input-affix-wrapper .ant-input-prefix": {left: space.s6},
|
|
132
|
+
"& .ant-input-affix-wrapper .ant-input:not(:first-child)": {paddingLeft: space.s6 + space.s24 + space.s8}, // Match TitlePreview spacing
|
|
133
133
|
}}
|
|
134
134
|
`;
|
package/src/button/button.tsx
CHANGED
|
@@ -119,11 +119,11 @@ const shortcutStyle = css`
|
|
|
119
119
|
...textStyles.small,
|
|
120
120
|
color: "currentColor",
|
|
121
121
|
borderRadius: border.radius4,
|
|
122
|
-
paddingLeft: space.
|
|
123
|
-
paddingRight: space.
|
|
124
|
-
paddingBottom: space.
|
|
125
|
-
marginRight: -space.
|
|
126
|
-
marginLeft: space.
|
|
122
|
+
paddingLeft: space.s4,
|
|
123
|
+
paddingRight: space.s4,
|
|
124
|
+
paddingBottom: space.s2,
|
|
125
|
+
marginRight: -space.s4,
|
|
126
|
+
marginLeft: space.s2,
|
|
127
127
|
opacity: opacity.opacity80,
|
|
128
128
|
display: "inline-block",
|
|
129
129
|
}}
|
package/src/design-system.ts
CHANGED
|
@@ -348,6 +348,11 @@ export const themeColors = {
|
|
|
348
348
|
`0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
|
|
349
349
|
],
|
|
350
350
|
|
|
351
|
+
colorBgMenuHeaderAvatar: [whiteA.whiteA0, slateDark.slate2],
|
|
352
|
+
shadowMenuHeaderAvatar: [
|
|
353
|
+
`0px 1px 4px ${getOpacities(slate.slate11).opacity10}, 0 0 0 1px ${getOpacities(slate.slate5).opacity50}`,
|
|
354
|
+
`0 0 0 1px ${getOpacities(slateDark.slate9).opacity20}`,
|
|
355
|
+
],
|
|
351
356
|
// Main Menu Items Styles and States
|
|
352
357
|
// Dragged
|
|
353
358
|
opacityMenuItemDragged: [`${opacity.opacity40}`, `${opacity.opacity40}`],
|
|
@@ -365,6 +370,8 @@ export const themeColors = {
|
|
|
365
370
|
colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo6],
|
|
366
371
|
// :focus, :focus:hover
|
|
367
372
|
colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo6],
|
|
373
|
+
colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
|
|
374
|
+
colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
|
|
368
375
|
allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
|
|
369
376
|
relationViewBgColor: [slate.slate2, slateDark.slate3],
|
|
370
377
|
unitBg: [slate.slate3, slateDark.slate6],
|
|
@@ -407,10 +414,10 @@ export const themeColors = {
|
|
|
407
414
|
progressIconFill: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity80],
|
|
408
415
|
progressIconDoneBg: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity90],
|
|
409
416
|
progressIconDoneFill: [getOpacities(slate.slate1).opacity95, getOpacities(slateDark.slate1).opacity80],
|
|
410
|
-
instrumentsMenuBg: [getOpacities(whiteA.whiteA0).
|
|
417
|
+
instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity95, getOpacities(slateDark.slate4).opacity95],
|
|
411
418
|
instrumentsMenuShadow: [
|
|
412
|
-
`0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px
|
|
413
|
-
`
|
|
419
|
+
`0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 8px -6px ${getOpacities(slate.slate10).opacity30}`,
|
|
420
|
+
`0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 2px 8px -6px ${getOpacities(slateDark.slate1).opacity40}`,
|
|
414
421
|
],
|
|
415
422
|
selectedColorBorder: [getOpacities(slate.slate6).opacity50, getOpacities(slate.slate6).opacity20],
|
|
416
423
|
formBg: [slate.slate2, slateDark.slate2],
|
|
@@ -447,7 +454,7 @@ export const themeColors = {
|
|
|
447
454
|
richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
|
|
448
455
|
gridHeaderBgColor: [slate.slate2, slateDark.slate3],
|
|
449
456
|
gridHeaderHoverBgColor: [slate.slate3, slateDark.slate4],
|
|
450
|
-
gridHeaderTextColor: [slate.
|
|
457
|
+
gridHeaderTextColor: [slate.slate10, slateDark.slate11],
|
|
451
458
|
gridCellBgColor: [whiteA.whiteA0, slateDark.slate2],
|
|
452
459
|
gridCellBorderColor: [slate.slate5, slateDark.slate6],
|
|
453
460
|
gridPinnedCellBorderColor: [slate.slate8, slateDark.slate8],
|
|
@@ -459,7 +466,7 @@ export const themeColors = {
|
|
|
459
466
|
gridDisabledSelectedCellBgColor: [indigo.indigo4, indigoDark.indigo5],
|
|
460
467
|
gridActiveCellBorderColor: [indigo.indigo8, indigoDark.indigo9],
|
|
461
468
|
colorBgReactionsDefault: [slate.slate3, slateDark.slate6],
|
|
462
|
-
colorBgReactionsHover: [
|
|
469
|
+
colorBgReactionsHover: [whiteA.whiteA0, slateDark.slate2],
|
|
463
470
|
colorBorderReactionsHover: [slate.slate8, slateDark.slate9],
|
|
464
471
|
colorBgReactionsSelectedDefault: [indigo.indigo3, indigoDark.indigo8],
|
|
465
472
|
colorBorderReactionsSelectedDefault: [indigo.indigo8, indigoDark.indigo8],
|
|
@@ -467,6 +474,7 @@ export const themeColors = {
|
|
|
467
474
|
colorBorderReactionsSelectedHover: [indigo.indigo9, indigo.indigo10],
|
|
468
475
|
colorTextReactionsSelected: [indigo.indigo10, slateDark.slate12],
|
|
469
476
|
colorBgToastDefault: [slate.slate1, slateDark.slate1],
|
|
477
|
+
colorBgDbTabHover: [slate.slate3, slateDark.slate4],
|
|
470
478
|
} as const;
|
|
471
479
|
|
|
472
480
|
type ThemeDefs = typeof themeColors;
|
|
@@ -695,14 +703,6 @@ export const colors = {
|
|
|
695
703
|
} as const;
|
|
696
704
|
|
|
697
705
|
export const space = {
|
|
698
|
-
xxs: 2, // Not recommended
|
|
699
|
-
xs: 4,
|
|
700
|
-
s: 6,
|
|
701
|
-
m: 8,
|
|
702
|
-
l: 12,
|
|
703
|
-
xl: 24,
|
|
704
|
-
xxl: 48, // Not recommended
|
|
705
|
-
// new spacing set
|
|
706
706
|
spaceAuto: "auto",
|
|
707
707
|
s0: 0,
|
|
708
708
|
s1: 1,
|
|
@@ -725,6 +725,7 @@ export const space = {
|
|
|
725
725
|
s56: 56,
|
|
726
726
|
s64: 64,
|
|
727
727
|
s80: 80,
|
|
728
|
+
s96: 96,
|
|
728
729
|
s112: 112,
|
|
729
730
|
s128: 128,
|
|
730
731
|
} as const;
|
|
@@ -732,12 +733,12 @@ export const space = {
|
|
|
732
733
|
export const spaceNestedTreeLevel = 28;
|
|
733
734
|
export const spaceNestedTreeInterval = 0;
|
|
734
735
|
export const layout = {
|
|
735
|
-
logoSize:
|
|
736
|
+
logoSize: 16,
|
|
736
737
|
menuDefaultWidth: 243,
|
|
737
|
-
menuMinWidth:
|
|
738
|
+
menuMinWidth: 47, //TODO: make dependency to itemHeight
|
|
738
739
|
menuMaxWidth: 480,
|
|
739
740
|
menuItemMinWidth: 80,
|
|
740
|
-
menuGroupHeaderIndent:
|
|
741
|
+
menuGroupHeaderIndent: 28, // I'm ok
|
|
741
742
|
menuItemLevelIndent: 24,
|
|
742
743
|
listItemHeight: 38,
|
|
743
744
|
itemHeight: 36,
|
|
@@ -745,7 +746,7 @@ export const layout = {
|
|
|
745
746
|
groupTitleHeight: 30,
|
|
746
747
|
menuItemHeight: 32,
|
|
747
748
|
newMenuItemHeight: 30, // I'm ok
|
|
748
|
-
viewHeaderHeight: space.
|
|
749
|
+
viewHeaderHeight: space.s12 * 7,
|
|
749
750
|
viewHeaderCompactHeight: 52,
|
|
750
751
|
columnMinWidth: 240,
|
|
751
752
|
columnWidths: {compact: 200, default: 240, list: 280, full: 320},
|
|
@@ -753,7 +754,7 @@ export const layout = {
|
|
|
753
754
|
typeEditorWidth: "30vw",
|
|
754
755
|
typeEditorMinWidth: 480,
|
|
755
756
|
viewSetupWidth: "30vw",
|
|
756
|
-
viewSetupMinWidth:
|
|
757
|
+
viewSetupMinWidth: 380,
|
|
757
758
|
inputHeight: 36, //TODO: merge input and item height?
|
|
758
759
|
timelineLineHeight: 46,
|
|
759
760
|
timelineGroupPadding: 6,
|
|
@@ -61,10 +61,10 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
|
|
|
61
61
|
className={css`
|
|
62
62
|
position: absolute;
|
|
63
63
|
top: 4px;
|
|
64
|
-
right: ${space.
|
|
64
|
+
right: ${space.s12}px;
|
|
65
65
|
`}
|
|
66
66
|
style={{
|
|
67
|
-
right: space.
|
|
67
|
+
right: space.s12 + measureScrollbar(),
|
|
68
68
|
}}
|
|
69
69
|
>
|
|
70
70
|
<EmojiPickerSkinTone />
|
|
@@ -86,7 +86,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
|
|
|
86
86
|
onReset ? (
|
|
87
87
|
<div
|
|
88
88
|
className={css`
|
|
89
|
-
padding-right: ${space.
|
|
89
|
+
padding-right: ${space.s12}px;
|
|
90
90
|
`}
|
|
91
91
|
>
|
|
92
92
|
<Button Icon={EmojiDelete} size={":button-size/small"} onClick={onReset}>
|
|
@@ -18,13 +18,13 @@ const categoryLabelCss = css`
|
|
|
18
18
|
${textStyles.heading6}
|
|
19
19
|
color: ${themeVars.accentTextColor};
|
|
20
20
|
background-color: ${themeVars.actionMenuBg};
|
|
21
|
-
padding: ${space.
|
|
21
|
+
padding: ${space.s12}px ${space.s6}px ${space.s4}px ${space.s6}px;
|
|
22
22
|
position: sticky;
|
|
23
23
|
top: 0;
|
|
24
24
|
|
|
25
25
|
display: flex;
|
|
26
26
|
align-items: center;
|
|
27
|
-
gap: ${space.
|
|
27
|
+
gap: ${space.s4}px;
|
|
28
28
|
|
|
29
29
|
z-index: 1;
|
|
30
30
|
`;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {FC} from "react";
|
|
2
|
-
import {EmojiItem, EmojiSkin} from "@fibery/emoji-data";
|
|
2
|
+
import {EmojiItem, EmojiSkin, NativeEmoji} from "@fibery/emoji-data";
|
|
3
3
|
import {css, cx} from "@linaria/core";
|
|
4
4
|
import {themeVars} from "../../design-system";
|
|
5
5
|
import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
|
|
@@ -22,11 +22,13 @@ const emojiInlineImgCss = css`
|
|
|
22
22
|
height: 1em;
|
|
23
23
|
vertical-align: -0.1em;
|
|
24
24
|
object-fit: contain;
|
|
25
|
+
overflow: hidden;
|
|
25
26
|
`;
|
|
26
27
|
const emojiSizedImgCss = css`
|
|
27
28
|
width: 100%;
|
|
28
29
|
height: 100%;
|
|
29
30
|
object-fit: contain;
|
|
31
|
+
overflow: hidden;
|
|
30
32
|
`;
|
|
31
33
|
|
|
32
34
|
// This is needed to keep text-selection working for image based emojis Details: https://the.fibery.io/SoftDev/bug/Improve-selection-text-with-emojis-8963
|
|
@@ -43,9 +45,25 @@ export type EmojiProps = {
|
|
|
43
45
|
/** render emoji as native unicode if possible */
|
|
44
46
|
native?: boolean;
|
|
45
47
|
fallback?: "shortcode" | "hidden";
|
|
48
|
+
showTitle?: boolean;
|
|
46
49
|
};
|
|
47
50
|
|
|
48
|
-
|
|
51
|
+
function getTitle(emoji: EmojiItem) {
|
|
52
|
+
if ((emoji as NativeEmoji).native) {
|
|
53
|
+
return emoji.colons;
|
|
54
|
+
}
|
|
55
|
+
return `:${emoji.name}:`;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export const Emoji: FC<EmojiProps> = ({
|
|
59
|
+
emoji: idOrColons,
|
|
60
|
+
size,
|
|
61
|
+
version = 14,
|
|
62
|
+
fallback = "hidden",
|
|
63
|
+
skin,
|
|
64
|
+
native,
|
|
65
|
+
showTitle = false,
|
|
66
|
+
}) => {
|
|
49
67
|
const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
|
|
50
68
|
|
|
51
69
|
if (!emoji) {
|
|
@@ -85,7 +103,12 @@ export const Emoji: FC<EmojiProps> = ({emoji: idOrColons, size, version = 14, fa
|
|
|
85
103
|
const style = size ? {fontSize: size, width: size, height: size} : {};
|
|
86
104
|
|
|
87
105
|
return (
|
|
88
|
-
<span
|
|
106
|
+
<span
|
|
107
|
+
style={style}
|
|
108
|
+
title={showTitle ? getTitle(emoji) : undefined}
|
|
109
|
+
className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}
|
|
110
|
+
aria-label={emoji.name}
|
|
111
|
+
>
|
|
89
112
|
{emojiNode}
|
|
90
113
|
</span>
|
|
91
114
|
);
|
|
@@ -3,7 +3,7 @@ import {space} from "../../design-system";
|
|
|
3
3
|
import {contentHorizontalPadding} from "./layout";
|
|
4
4
|
|
|
5
5
|
const pickerHeader = css`
|
|
6
|
-
padding: ${space.
|
|
6
|
+
padding: ${space.s6}px ${contentHorizontalPadding}px;
|
|
7
7
|
position: relative;
|
|
8
8
|
`;
|
|
9
9
|
export const EmojiPickerHeader: React.FC<React.PropsWithChildren> = ({children}) => {
|
|
@@ -22,8 +22,8 @@ const searchCss = css`
|
|
|
22
22
|
|
|
23
23
|
display: flex;
|
|
24
24
|
align-items: center;
|
|
25
|
-
padding-left: ${space.
|
|
26
|
-
gap: ${space.
|
|
25
|
+
padding-left: ${space.s12}px;
|
|
26
|
+
gap: ${space.s2}px;
|
|
27
27
|
|
|
28
28
|
/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
|
|
29
29
|
& .sr-only {
|
|
@@ -56,13 +56,13 @@ const searchInputCss = css`
|
|
|
56
56
|
`;
|
|
57
57
|
|
|
58
58
|
const searchIconCss = css`
|
|
59
|
-
padding: ${space.
|
|
59
|
+
padding: ${space.s2}px;
|
|
60
60
|
`;
|
|
61
61
|
|
|
62
62
|
const extraActionSlotCss = css`
|
|
63
63
|
background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
|
|
64
|
-
border-top-right-radius: ${space.
|
|
65
|
-
border-bottom-right-radius: ${space.
|
|
64
|
+
border-top-right-radius: ${space.s6}px;
|
|
65
|
+
border-bottom-right-radius: ${space.s6}px;
|
|
66
66
|
`;
|
|
67
67
|
|
|
68
68
|
export type EmojiPickerSearchProps = {
|
package/src/error-alert.tsx
CHANGED
|
@@ -6,11 +6,11 @@ import {useTheme} from "./theme-provider";
|
|
|
6
6
|
|
|
7
7
|
const errorAlert = css`
|
|
8
8
|
background-color: ${themeVars.errorBgColor};
|
|
9
|
-
padding: ${space.
|
|
9
|
+
padding: ${space.s8}px ${space.s12}px;
|
|
10
10
|
min-height: ${layout.itemHeight}px;
|
|
11
11
|
border-radius: ${border.radius6}px;
|
|
12
12
|
display: flex;
|
|
13
|
-
gap: ${space.
|
|
13
|
+
gap: ${space.s6}px;
|
|
14
14
|
align-items: center;
|
|
15
15
|
`;
|
|
16
16
|
|
|
@@ -31,7 +31,7 @@ export function ErrorAlert({
|
|
|
31
31
|
onClose,
|
|
32
32
|
}: {
|
|
33
33
|
message: string;
|
|
34
|
-
description?:
|
|
34
|
+
description?: React.ReactNode;
|
|
35
35
|
closable?: boolean;
|
|
36
36
|
onClose?: () => void;
|
|
37
37
|
}): JSX.Element {
|
|
@@ -5,9 +5,9 @@ import {space, border, themeVars} from "./design-system";
|
|
|
5
5
|
|
|
6
6
|
const loaderStyle = css`
|
|
7
7
|
border-radius: ${border.radius6}px;
|
|
8
|
-
padding-top: ${space.
|
|
9
|
-
padding-bottom: ${space.
|
|
10
|
-
padding-left: ${space.
|
|
8
|
+
padding-top: ${space.s8}px;
|
|
9
|
+
padding-bottom: ${space.s8}px;
|
|
10
|
+
padding-left: ${space.s12}px;
|
|
11
11
|
padding-right: 0;
|
|
12
12
|
box-sizing: border-box;
|
|
13
13
|
border: none;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const AlertTriangle: 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":"M18.892 14.558 12.183 2.892a2.5 2.5 0 0 0-4.366 0L1.15 14.558a2.5 2.5 0 0 0 2.133 3.775h13.434a2.5 2.5 0 0 0 2.175-3.775ZM10 6.667a.833.833 0 0 0-.833.833v3.333a.833.833 0 0 0 1.666 0V7.5A.834.834 0 0 0 10 6.667Zm-.463 6.807a.833.833 0 1 1 .926 1.385.833.833 0 0 1-.926-1.385Z"},"children":[]}],"metadata":""}]},"name":"alert-triangle"};
|
|
7
|
+
|
|
8
|
+
export default AlertTriangle;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const DragBlockHandleSingle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 2 10"},"children":[{"type":"element","tagName":"circle","properties":{"r":1,"cx":1,"cy":1},"children":[]},{"type":"element","tagName":"circle","properties":{"r":1,"cx":1,"cy":5},"children":[]},{"type":"element","tagName":"circle","properties":{"r":1,"cx":1,"cy":9},"children":[]}],"metadata":""}]},"name":"drag-block-handle-single"};
|
|
7
|
+
|
|
8
|
+
export default DragBlockHandleSingle;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const Eye: 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":"M2.839 10a7.587 7.587 0 0 0 14.323 0A7.587 7.587 0 0 0 2.84 10Zm-1.506-.225a9.087 9.087 0 0 1 17.335 0 .75.75 0 0 1 0 .45 9.087 9.087 0 0 1-17.335 0 .75.75 0 0 1 0-.45ZM10 8.25a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5ZM6.75 10a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Z"},"children":[]}],"metadata":""}]},"name":"eye"};
|
|
7
|
+
|
|
8
|
+
export default Eye;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const NetworkAdd: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20","fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"M7 4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-.25v1.25h2.583a.75.75 0 0 1 0 1.5H6.667a.917.917 0 0 0-.917.917V12H6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h.25v-.333A2.417 2.417 0 0 1 6.667 9.25H9.25V8H9a2 2 0 0 1-2-2V4Zm2-.5a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5V4a.5.5 0 0 0-.5-.5H9Zm-5 10a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5H4Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M15 12a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0v-1.5h-1.5a.75.75 0 0 1 0-1.5h1.5v-1.5A.75.75 0 0 1 15 12Z"},"children":[]}],"metadata":""}]},"name":"network-add"};
|
|
7
|
+
|
|
8
|
+
export default NetworkAdd;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const RemovePeople: 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.502 10.7c1.27 0 2.629.198 3.784.747 1.174.557 2.155 1.489 2.565 2.92.18.63.172 1.405.136 1.96C14.92 17.33 14.067 18 13.152 18H3.85c-.915 0-1.77-.67-1.835-1.672-.036-.556-.045-1.33.136-1.961.41-1.431 1.392-2.363 2.566-2.92 1.156-.549 2.515-.747 3.785-.747Zm3.14 2.102c.87.412 1.499 1.043 1.767 1.978.105.367.115.921.081 1.45-.008.126-.123.27-.338.27H3.85c-.215 0-.33-.144-.338-.27-.034-.529-.024-1.084.081-1.45.268-.935.898-1.565 1.768-1.978.887-.421 2.005-.602 3.141-.602 1.137 0 2.253.18 3.14.602ZM8.5 2a3.65 3.65 0 1 1 0 7.3 3.65 3.65 0 0 1 0-7.3Zm0 1.5a2.15 2.15 0 1 1 0 4.3 2.15 2.15 0 0 1 0-4.3Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M18.25 8.75h-4.5a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5Z"},"children":[]}],"metadata":""}]},"name":"remove-people"};
|
|
7
|
+
|
|
8
|
+
export default RemovePeople;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const RicheditorMarkTextBackgroundColor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"d":"m5.07 16.9.898-.625h2.418c.643 0 1.197-.177 1.66-.607.15-.14.135-.377-.012-.522L5.23 10.438c-.156-.153-.408-.154-.535.023-.34.476-.509 1.087-.509 1.698v2.37l-.89.873c-.382.39-.17.154-.597.624 1.517.595 2.37.874 2.37.874ZM10.653 14.177c.255.25.51.25.764 0l5.997-7.786a1.474 1.474 0 0 0 0-1.746l-1.909-1.87a1.247 1.247 0 0 0-1.781 0l-7.61 6.313c-.255.249-.255.498 0 .748l4.54 4.341Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-mark-text-background-color"};
|
|
7
|
+
|
|
8
|
+
export default RicheditorMarkTextBackgroundColor;
|
package/src/icons/ast/index.tsx
CHANGED
|
@@ -9,6 +9,7 @@ export { default as AddReactions } from './AddReactions';
|
|
|
9
9
|
export { default as Add } from './Add';
|
|
10
10
|
export { default as AiAssistant } from './AiAssistant';
|
|
11
11
|
export { default as AiAvatar } from './AiAvatar';
|
|
12
|
+
export { default as AlertTriangle } from './AlertTriangle';
|
|
12
13
|
export { default as AntdFilledCheckCircle } from './AntdFilledCheckCircle';
|
|
13
14
|
export { default as AntdFilledCloseCircle } from './AntdFilledCloseCircle';
|
|
14
15
|
export { default as AntdFilledExclamationCircle } from './AntdFilledExclamationCircle';
|
|
@@ -58,6 +59,7 @@ export { default as Delete } from './Delete';
|
|
|
58
59
|
export { default as Demo } from './Demo';
|
|
59
60
|
export { default as DoubleArrowLeft } from './DoubleArrowLeft';
|
|
60
61
|
export { default as DoubleArrowRight } from './DoubleArrowRight';
|
|
62
|
+
export { default as DragBlockHandleSingle } from './DragBlockHandleSingle';
|
|
61
63
|
export { default as DragBlockHandle } from './DragBlockHandle';
|
|
62
64
|
export { default as DragHandle } from './DragHandle';
|
|
63
65
|
export { default as DynamicFilterValue } from './DynamicFilterValue';
|
|
@@ -70,6 +72,7 @@ export { default as ExtensionComments } from './ExtensionComments';
|
|
|
70
72
|
export { default as ExtensionFiles } from './ExtensionFiles';
|
|
71
73
|
export { default as ExtensionReferences } from './ExtensionReferences';
|
|
72
74
|
export { default as ExtensionWorkflow } from './ExtensionWorkflow';
|
|
75
|
+
export { default as Eye } from './Eye';
|
|
73
76
|
export { default as FavoritesChecked } from './FavoritesChecked';
|
|
74
77
|
export { default as FavoritesOff } from './FavoritesOff';
|
|
75
78
|
export { default as Favorites } from './Favorites';
|
|
@@ -114,6 +117,7 @@ export { default as Monitor } from './Monitor';
|
|
|
114
117
|
export { default as MoreCompact } from './MoreCompact';
|
|
115
118
|
export { default as More } from './More';
|
|
116
119
|
export { default as MySpace } from './MySpace';
|
|
120
|
+
export { default as NetworkAdd } from './NetworkAdd';
|
|
117
121
|
export { default as Network } from './Network';
|
|
118
122
|
export { default as Notifications } from './Notifications';
|
|
119
123
|
export { default as ObjChild } from './ObjChild';
|
|
@@ -130,6 +134,7 @@ export { default as People } from './People';
|
|
|
130
134
|
export { default as Photo } from './Photo';
|
|
131
135
|
export { default as Popup } from './Popup';
|
|
132
136
|
export { default as Posts } from './Posts';
|
|
137
|
+
export { default as RemovePeople } from './RemovePeople';
|
|
133
138
|
export { default as Remove } from './Remove';
|
|
134
139
|
export { default as Reply } from './Reply';
|
|
135
140
|
export { default as Restore } from './Restore';
|
|
@@ -167,9 +172,9 @@ export { default as RicheditorListOrdered } from './RicheditorListOrdered';
|
|
|
167
172
|
export { default as RicheditorListUnindent } from './RicheditorListUnindent';
|
|
168
173
|
export { default as RicheditorMarkCode } from './RicheditorMarkCode';
|
|
169
174
|
export { default as RicheditorMarkEm } from './RicheditorMarkEm';
|
|
170
|
-
export { default as RicheditorMarkHighlight } from './RicheditorMarkHighlight';
|
|
171
175
|
export { default as RicheditorMarkStrike } from './RicheditorMarkStrike';
|
|
172
176
|
export { default as RicheditorMarkStrong } from './RicheditorMarkStrong';
|
|
177
|
+
export { default as RicheditorMarkTextBackgroundColor } from './RicheditorMarkTextBackgroundColor';
|
|
173
178
|
export { default as RicheditorMarkUnderline } from './RicheditorMarkUnderline';
|
|
174
179
|
export { default as RicheditorOpenLink } from './RicheditorOpenLink';
|
|
175
180
|
export { default as RicheditorTableCreate } from './RicheditorTableCreate';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import AlertTriangleSvg from '../ast/AlertTriangle';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
import { IconBaseProps } from '../types';
|
|
6
|
+
|
|
7
|
+
const AlertTriangle = (
|
|
8
|
+
props: IconBaseProps,
|
|
9
|
+
): JSX.Element => <Icon {...props} icon={AlertTriangleSvg} />;
|
|
10
|
+
|
|
11
|
+
AlertTriangle.displayName = 'AlertTriangle';
|
|
12
|
+
export default AlertTriangle;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import DragBlockHandleSingleSvg from '../ast/DragBlockHandleSingle';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
import { IconBaseProps } from '../types';
|
|
6
|
+
|
|
7
|
+
const DragBlockHandleSingle = (
|
|
8
|
+
props: IconBaseProps,
|
|
9
|
+
): JSX.Element => <Icon {...props} icon={DragBlockHandleSingleSvg} />;
|
|
10
|
+
|
|
11
|
+
DragBlockHandleSingle.displayName = 'DragBlockHandleSingle';
|
|
12
|
+
export default DragBlockHandleSingle;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import EyeSvg from '../ast/Eye';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
import { IconBaseProps } from '../types';
|
|
6
|
+
|
|
7
|
+
const Eye = (
|
|
8
|
+
props: IconBaseProps,
|
|
9
|
+
): JSX.Element => <Icon {...props} icon={EyeSvg} />;
|
|
10
|
+
|
|
11
|
+
Eye.displayName = 'Eye';
|
|
12
|
+
export default Eye;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import NetworkAddSvg from '../ast/NetworkAdd';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
import { IconBaseProps } from '../types';
|
|
6
|
+
|
|
7
|
+
const NetworkAdd = (
|
|
8
|
+
props: IconBaseProps,
|
|
9
|
+
): JSX.Element => <Icon {...props} icon={NetworkAddSvg} />;
|
|
10
|
+
|
|
11
|
+
NetworkAdd.displayName = 'NetworkAdd';
|
|
12
|
+
export default NetworkAdd;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import RemovePeopleSvg from '../ast/RemovePeople';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
import { IconBaseProps } from '../types';
|
|
6
|
+
|
|
7
|
+
const RemovePeople = (
|
|
8
|
+
props: IconBaseProps,
|
|
9
|
+
): JSX.Element => <Icon {...props} icon={RemovePeopleSvg} />;
|
|
10
|
+
|
|
11
|
+
RemovePeople.displayName = 'RemovePeople';
|
|
12
|
+
export default RemovePeople;
|