@qoretechnologies/reqore 0.28.0 → 0.28.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/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +12 -9
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Collection/item.js +1 -1
- package/dist/components/Collection/item.js.map +1 -1
- package/dist/components/Effect/index.d.ts.map +1 -1
- package/dist/components/Effect/index.js +2 -1
- package/dist/components/Effect/index.js.map +1 -1
- package/dist/components/Notifications/notification.d.ts.map +1 -1
- package/dist/components/Notifications/notification.js +1 -1
- package/dist/components/Notifications/notification.js.map +1 -1
- package/dist/components/Panel/index.js +1 -1
- package/dist/components/Panel/index.js.map +1 -1
- package/dist/components/Tabs/list.d.ts.map +1 -1
- package/dist/components/Tabs/list.js +5 -3
- package/dist/components/Tabs/list.js.map +1 -1
- package/dist/components/Tag/index.d.ts +3 -2
- package/dist/components/Tag/index.d.ts.map +1 -1
- package/dist/components/Tag/index.js +48 -23
- package/dist/components/Tag/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Button/index.tsx +24 -8
- package/src/components/Collection/item.tsx +1 -1
- package/src/components/Effect/index.tsx +4 -0
- package/src/components/Notifications/notification.tsx +3 -0
- package/src/components/Panel/index.tsx +2 -2
- package/src/components/Tabs/list.tsx +5 -3
- package/src/components/Tag/index.tsx +119 -42
- package/src/mock/collectionData.tsx +1 -1
- package/src/stories/Panel/Panel.stories.tsx +1 -0
- package/src/stories/Tag/Tag.stories.tsx +43 -0
- package/tests.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAAgC;AAChC,qCAAgC;AAChC,+BAAsD;AACtD,qEAAgD;AAChD,2BAAsC;AACtC,+CAO+B;AAE/B,4EAAsD;AACtD,+CAA+F;AAC/F,+DAA8D;AAC9D,qDAAoD;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -173,8 +173,8 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
|
|
|
173
173
|
|
|
174
174
|
${InactiveIconScale}
|
|
175
175
|
|
|
176
|
-
${({ readOnly, animate }) =>
|
|
177
|
-
!readOnly
|
|
176
|
+
${({ readOnly, animate, active }) =>
|
|
177
|
+
!readOnly && !active
|
|
178
178
|
? css`
|
|
179
179
|
&:not(:disabled) {
|
|
180
180
|
${ScaleIconOnHover}
|
|
@@ -187,11 +187,16 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
|
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
&:hover,
|
|
190
|
+
&:active,
|
|
190
191
|
&:focus {
|
|
191
|
-
background-color: ${({ theme, color }: IReqoreButtonStyle) =>
|
|
192
|
-
changeLightness(getButtonMainColor(theme, color), 0.05)};
|
|
193
|
-
color: ${({ theme, color }) =>
|
|
194
|
-
getReadableColor(
|
|
192
|
+
background-color: ${({ theme, color, minimal }: IReqoreButtonStyle) =>
|
|
193
|
+
minimal ? `#00000030` : changeLightness(getButtonMainColor(theme, color), 0.05)};
|
|
194
|
+
color: ${({ theme, color, minimal }) =>
|
|
195
|
+
getReadableColor(
|
|
196
|
+
{ main: minimal ? '#00000030' : getButtonMainColor(theme, color) },
|
|
197
|
+
undefined,
|
|
198
|
+
undefined
|
|
199
|
+
)};
|
|
195
200
|
border-color: ${({ flat, theme, color }) =>
|
|
196
201
|
flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
|
|
197
202
|
|
|
@@ -212,17 +217,28 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
|
|
|
212
217
|
}
|
|
213
218
|
}
|
|
214
219
|
`
|
|
215
|
-
:
|
|
220
|
+
: readOnly
|
|
221
|
+
? css`
|
|
216
222
|
${ReadOnlyElement};
|
|
217
|
-
`
|
|
223
|
+
`
|
|
224
|
+
: undefined}
|
|
218
225
|
|
|
219
226
|
${({ active, flat, theme, color }: IReqoreButtonStyle) =>
|
|
220
227
|
active &&
|
|
221
228
|
css`
|
|
229
|
+
cursor: pointer;
|
|
222
230
|
background-color: ${changeLightness(getButtonMainColor(theme, color), 0.1)};
|
|
223
231
|
color: ${getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
|
|
224
232
|
border-color: ${flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.175)};
|
|
225
233
|
|
|
234
|
+
&:hover,
|
|
235
|
+
&:active,
|
|
236
|
+
&:focus {
|
|
237
|
+
border-color: ${flat
|
|
238
|
+
? undefined
|
|
239
|
+
: changeLightness(getButtonMainColor(theme, color), 0.275)};
|
|
240
|
+
}
|
|
241
|
+
|
|
226
242
|
${ActiveIconScale}
|
|
227
243
|
`}
|
|
228
244
|
|
|
@@ -182,7 +182,7 @@ export const ReqoreCollectionItem = ({
|
|
|
182
182
|
{ icon: 'CloseLine', onClick: handleItemClick },
|
|
183
183
|
] as IReqorePanelAction[])
|
|
184
184
|
: size(actions)
|
|
185
|
-
? [{ icon: 'More2Fill', actions }]
|
|
185
|
+
? [{ icon: 'More2Fill', actions, minimal: true, flat: true }]
|
|
186
186
|
: undefined;
|
|
187
187
|
|
|
188
188
|
return (
|
|
@@ -72,6 +72,8 @@ export const StyledEffect = styled.span`
|
|
|
72
72
|
const gradient = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColors})`;
|
|
73
73
|
const gradientActive = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColorsActive})`;
|
|
74
74
|
|
|
75
|
+
console.log(effect);
|
|
76
|
+
|
|
75
77
|
return css`
|
|
76
78
|
background-image: ${gradient};
|
|
77
79
|
// Get the first color from the colors object
|
|
@@ -86,6 +88,8 @@ export const StyledEffect = styled.span`
|
|
|
86
88
|
|
|
87
89
|
${effect.interactive &&
|
|
88
90
|
css`
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
|
|
89
93
|
&:hover,
|
|
90
94
|
&:focus,
|
|
91
95
|
&:active {
|
|
@@ -459,7 +459,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
|
|
|
459
459
|
) : (
|
|
460
460
|
label
|
|
461
461
|
)}
|
|
462
|
-
{badge
|
|
462
|
+
{badge || badge === 0 ? (
|
|
463
463
|
<>
|
|
464
464
|
<ButtonBadge
|
|
465
465
|
color={changeLightness(theme.main, 0.18)}
|
|
@@ -468,7 +468,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
|
|
|
468
468
|
/>
|
|
469
469
|
<ReqoreSpacer width={PADDING_FROM_SIZE.normal} />
|
|
470
470
|
</>
|
|
471
|
-
)}
|
|
471
|
+
) : null}
|
|
472
472
|
</StyledPanelTitleHeader>
|
|
473
473
|
<ReqoreControlGroup>
|
|
474
474
|
{actions.map(renderActions)}
|
|
@@ -203,9 +203,11 @@ const ReqoreTabsList = ({
|
|
|
203
203
|
label: getMoreLabel(item, activeTab),
|
|
204
204
|
active: !!isTabHidden(item, activeTab),
|
|
205
205
|
activeIntent: activeTabIntent,
|
|
206
|
-
customTheme:
|
|
207
|
-
|
|
208
|
-
|
|
206
|
+
customTheme: !!isTabHidden(item, activeTab)
|
|
207
|
+
? {
|
|
208
|
+
main: currentTabColor,
|
|
209
|
+
}
|
|
210
|
+
: theme,
|
|
209
211
|
vertical,
|
|
210
212
|
flat,
|
|
211
213
|
size,
|
|
@@ -20,6 +20,7 @@ import {
|
|
|
20
20
|
IReqoreDisabled,
|
|
21
21
|
IReqoreIntent,
|
|
22
22
|
IWithReqoreEffect,
|
|
23
|
+
IWithReqoreMinimal,
|
|
23
24
|
IWithReqoreTooltip,
|
|
24
25
|
} from '../../types/global';
|
|
25
26
|
import { IReqoreIconName } from '../../types/icons';
|
|
@@ -35,7 +36,8 @@ export interface IReqoreTagProps
|
|
|
35
36
|
extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
|
|
36
37
|
IWithReqoreTooltip,
|
|
37
38
|
IReqoreDisabled,
|
|
38
|
-
IWithReqoreEffect
|
|
39
|
+
IWithReqoreEffect,
|
|
40
|
+
IWithReqoreMinimal {
|
|
39
41
|
size?: TSizes;
|
|
40
42
|
label?: string | number;
|
|
41
43
|
labelKey?: string | number;
|
|
@@ -48,6 +50,7 @@ export interface IReqoreTagProps
|
|
|
48
50
|
width?: string;
|
|
49
51
|
badge?: boolean;
|
|
50
52
|
intent?: TReqoreIntent;
|
|
53
|
+
wrap?: boolean;
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
export interface IReqoreTagStyle extends IReqoreTagProps {
|
|
@@ -60,39 +63,55 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
|
|
|
60
63
|
display: inline-flex;
|
|
61
64
|
justify-content: center;
|
|
62
65
|
flex-shrink: 0;
|
|
63
|
-
align-items:
|
|
66
|
+
align-items: stretch;
|
|
64
67
|
font-family: system-ui;
|
|
65
68
|
font-weight: 600;
|
|
66
69
|
overflow: hidden;
|
|
67
70
|
vertical-align: middle;
|
|
68
71
|
font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
|
|
69
|
-
|
|
72
|
+
|
|
70
73
|
min-width: ${({ size }) => SIZE_TO_PX[size]}px;
|
|
71
74
|
border-radius: ${({ badge, size }) => (badge ? 18 : RADIUS_FROM_SIZE[size])}px;
|
|
72
75
|
width: ${({ width }) => width || undefined};
|
|
73
76
|
transition: all 0.2s ease-out;
|
|
74
77
|
|
|
75
|
-
${({
|
|
78
|
+
${({ wrap, hasWidth }) =>
|
|
79
|
+
wrap || hasWidth
|
|
80
|
+
? css`
|
|
81
|
+
min-height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
|
|
82
|
+
`
|
|
83
|
+
: css`
|
|
84
|
+
height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
|
|
85
|
+
`}
|
|
86
|
+
|
|
87
|
+
${({ theme, color, labelKey, minimal }: IReqoreTagStyle) =>
|
|
76
88
|
css`
|
|
77
89
|
background-color: ${color || changeLightness(theme.main, 0.1)};
|
|
78
|
-
color: ${
|
|
90
|
+
color: ${minimal
|
|
91
|
+
? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
|
|
92
|
+
: color
|
|
93
|
+
? getReadableColorFrom(color)
|
|
94
|
+
: getReadableColor(theme, undefined, undefined)};
|
|
79
95
|
|
|
80
|
-
${
|
|
96
|
+
${StyledTagKeyWrapper} {
|
|
81
97
|
background-color: ${labelKey ? rgba('#000000', 0.2) : undefined};
|
|
82
98
|
}
|
|
83
99
|
`}
|
|
84
100
|
|
|
85
|
-
${({ theme, color, interactive }) =>
|
|
86
|
-
interactive &&
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
101
|
+
${({ theme, color, interactive, minimal, effect }) =>
|
|
102
|
+
interactive && !effect?.gradient
|
|
103
|
+
? css`
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
&:hover {
|
|
106
|
+
background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
|
|
107
|
+
color: ${minimal
|
|
108
|
+
? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
|
|
109
|
+
: color
|
|
110
|
+
? getReadableColorFrom(color)
|
|
111
|
+
: getReadableColor(theme, undefined, undefined)};
|
|
112
|
+
}
|
|
113
|
+
`
|
|
114
|
+
: undefined}
|
|
96
115
|
|
|
97
116
|
|
|
98
117
|
${({ disabled }) =>
|
|
@@ -106,34 +125,58 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
|
|
|
106
125
|
|
|
107
126
|
const StyledTagRightIcon = styled(ReqoreIcon)``;
|
|
108
127
|
|
|
109
|
-
const
|
|
128
|
+
const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
|
|
110
129
|
display: flex;
|
|
111
130
|
align-items: center;
|
|
112
131
|
justify-content: center;
|
|
132
|
+
flex: ${({ hasKey }) => (hasKey ? 1 : undefined)};
|
|
113
133
|
flex-shrink: 0;
|
|
134
|
+
min-height: 100%;
|
|
135
|
+
`;
|
|
136
|
+
|
|
137
|
+
const StyledTagContentWrapper = styled.span<{ size: TSizes }>`
|
|
138
|
+
display: flex;
|
|
139
|
+
align-items: center;
|
|
140
|
+
justify-content: center;
|
|
114
141
|
flex: 1;
|
|
115
|
-
|
|
116
|
-
height: 100%;
|
|
142
|
+
flex-shrink: 0;
|
|
143
|
+
min-height: 100%;
|
|
117
144
|
`;
|
|
118
145
|
|
|
119
146
|
const StyledTagContent = styled.span<{ size: TSizes }>`
|
|
120
|
-
padding:
|
|
121
|
-
height: 100%;
|
|
147
|
+
padding: 4px ${({ size }) => PADDING_FROM_SIZE[size]}px;
|
|
148
|
+
min-height: 100%;
|
|
122
149
|
display: flex;
|
|
123
150
|
align-items: center;
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
151
|
+
flex: 1;
|
|
152
|
+
|
|
153
|
+
${({ wrap, hasWidth }) =>
|
|
154
|
+
!wrap && !hasWidth
|
|
155
|
+
? css`
|
|
156
|
+
overflow: hidden;
|
|
157
|
+
text-overflow: ellipsis;
|
|
158
|
+
white-space: nowrap;
|
|
159
|
+
`
|
|
160
|
+
: css`
|
|
161
|
+
word-break: break-word;
|
|
162
|
+
`}
|
|
127
163
|
`;
|
|
128
164
|
|
|
129
165
|
const StyledTagContentKey = styled(StyledTagContent)`
|
|
130
166
|
font-weight: 800;
|
|
167
|
+
flex: 1;
|
|
168
|
+
|
|
169
|
+
${({ wrap, hasWidth }) =>
|
|
170
|
+
!wrap && !hasWidth
|
|
171
|
+
? undefined
|
|
172
|
+
: css`
|
|
173
|
+
word-break: break-word;
|
|
174
|
+
`}
|
|
131
175
|
`;
|
|
132
176
|
|
|
133
|
-
const StyledButtonWrapper = styled.
|
|
177
|
+
const StyledButtonWrapper = styled.span<IReqoreTagStyle>`
|
|
134
178
|
flex-shrink: 0;
|
|
135
179
|
font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
|
|
136
|
-
height: ${({ size }) => SIZE_TO_PX[size]}px;
|
|
137
180
|
width: ${({ size }) => SIZE_TO_PX[size]}px;
|
|
138
181
|
display: flex;
|
|
139
182
|
justify-content: center;
|
|
@@ -172,6 +215,9 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
|
|
|
172
215
|
badge,
|
|
173
216
|
intent,
|
|
174
217
|
color,
|
|
218
|
+
minimal,
|
|
219
|
+
wrap = false,
|
|
220
|
+
width,
|
|
175
221
|
...rest
|
|
176
222
|
}: IReqoreTagProps,
|
|
177
223
|
ref
|
|
@@ -182,38 +228,69 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
|
|
|
182
228
|
useTooltip(targetRef.current, tooltip);
|
|
183
229
|
|
|
184
230
|
// If color or intent was specified, set the color
|
|
185
|
-
|
|
231
|
+
let customColor = intent ? theme.intents[intent] : color;
|
|
232
|
+
customColor = minimal ? `${customColor || '#000000'}40` : customColor;
|
|
186
233
|
|
|
187
234
|
return (
|
|
188
235
|
<StyledTag
|
|
189
236
|
{...rest}
|
|
237
|
+
effect={{
|
|
238
|
+
...rest.effect,
|
|
239
|
+
interactive: !!onClick && !rest.disabled,
|
|
240
|
+
}}
|
|
241
|
+
width={width}
|
|
190
242
|
labelKey={labelKey}
|
|
191
243
|
color={customColor}
|
|
192
244
|
className={`${className || ''} reqore-tag`}
|
|
193
245
|
size={size}
|
|
194
246
|
ref={targetRef}
|
|
195
247
|
badge={badge}
|
|
248
|
+
minimal={minimal}
|
|
196
249
|
removable={!!onRemoveClick}
|
|
197
250
|
interactive={!!onClick && !rest.disabled}
|
|
251
|
+
wrap={wrap}
|
|
252
|
+
hasWidth={!!width}
|
|
198
253
|
>
|
|
199
254
|
{icon || labelKey ? (
|
|
200
|
-
<
|
|
255
|
+
<StyledTagKeyWrapper
|
|
256
|
+
size={size}
|
|
257
|
+
className='reqore-tag-key-content'
|
|
258
|
+
onClick={onClick}
|
|
259
|
+
wrap={wrap}
|
|
260
|
+
hasWidth={!!width}
|
|
261
|
+
hasKey={!!labelKey}
|
|
262
|
+
>
|
|
201
263
|
{icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'left' : 'both'} />}
|
|
202
|
-
{labelKey &&
|
|
203
|
-
|
|
264
|
+
{labelKey && (
|
|
265
|
+
<StyledTagContentKey wrap={wrap} hasWidth={!!width} size={size}>
|
|
266
|
+
{labelKey}
|
|
267
|
+
</StyledTagContentKey>
|
|
268
|
+
)}
|
|
269
|
+
</StyledTagKeyWrapper>
|
|
204
270
|
) : null}
|
|
205
|
-
{label
|
|
206
|
-
<
|
|
207
|
-
{label}
|
|
208
|
-
</StyledTagContent>
|
|
209
|
-
)}
|
|
210
|
-
{rightIcon && (
|
|
211
|
-
<StyledTagRightIcon
|
|
212
|
-
icon={rightIcon}
|
|
271
|
+
{label || label === 0 || rightIcon ? (
|
|
272
|
+
<StyledTagContentWrapper
|
|
213
273
|
size={size}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
274
|
+
className='reqore-tag-content'
|
|
275
|
+
onClick={onClick}
|
|
276
|
+
wrap={wrap}
|
|
277
|
+
hasWidth={!!width}
|
|
278
|
+
hasKey={!!labelKey}
|
|
279
|
+
>
|
|
280
|
+
{label || label === 0 ? (
|
|
281
|
+
<StyledTagContent size={size} onClick={onClick} wrap={wrap} hasWidth={!!width}>
|
|
282
|
+
{label}
|
|
283
|
+
</StyledTagContent>
|
|
284
|
+
) : null}
|
|
285
|
+
{rightIcon && (
|
|
286
|
+
<StyledTagRightIcon
|
|
287
|
+
icon={rightIcon}
|
|
288
|
+
size={size}
|
|
289
|
+
margin={label || icon ? 'right' : 'both'}
|
|
290
|
+
/>
|
|
291
|
+
)}
|
|
292
|
+
</StyledTagContentWrapper>
|
|
293
|
+
) : null}
|
|
217
294
|
{_size(actions)
|
|
218
295
|
? actions.map((action) => (
|
|
219
296
|
<>
|
|
@@ -113,6 +113,49 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
|
|
|
113
113
|
actions={null}
|
|
114
114
|
onRemoveClick={null}
|
|
115
115
|
/>
|
|
116
|
+
<ReqoreTag
|
|
117
|
+
{...args}
|
|
118
|
+
label='Minimal Tag'
|
|
119
|
+
minimal
|
|
120
|
+
icon='ShareForward2Fill'
|
|
121
|
+
rightIcon={args.rightIcon}
|
|
122
|
+
actions={null}
|
|
123
|
+
onRemoveClick={null}
|
|
124
|
+
/>
|
|
125
|
+
<ReqoreTag
|
|
126
|
+
{...args}
|
|
127
|
+
label='Minimal Tag with Intent'
|
|
128
|
+
minimal
|
|
129
|
+
intent='warning'
|
|
130
|
+
icon='ShareForward2Fill'
|
|
131
|
+
rightIcon={args.rightIcon}
|
|
132
|
+
actions={null}
|
|
133
|
+
onRemoveClick={null}
|
|
134
|
+
/>
|
|
135
|
+
<ReqoreTag
|
|
136
|
+
{...args}
|
|
137
|
+
labelKey='This is the key for a wrapped tag'
|
|
138
|
+
label='Wrapped tag with some long text and width specified, no wrap specified'
|
|
139
|
+
icon='ShareForward2Fill'
|
|
140
|
+
rightIcon={args.rightIcon}
|
|
141
|
+
width='400px'
|
|
142
|
+
onRemoveClick={null}
|
|
143
|
+
actions={[
|
|
144
|
+
{
|
|
145
|
+
icon: '24HoursFill',
|
|
146
|
+
onClick: noop,
|
|
147
|
+
disabled: true,
|
|
148
|
+
intent: 'info',
|
|
149
|
+
tooltip: { content: 'I am a tooltip' },
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
icon: 'SpyFill',
|
|
153
|
+
onClick: noop,
|
|
154
|
+
intent: 'success',
|
|
155
|
+
tooltip: { content: 'Hm, another tooltip', openOnMount: true },
|
|
156
|
+
},
|
|
157
|
+
]}
|
|
158
|
+
/>
|
|
116
159
|
</ReqoreTagGroup>
|
|
117
160
|
);
|
|
118
161
|
};
|