@zohodesk/components 1.4.2 → 1.4.3
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/.cli/propValidation_report.html +1 -1
- package/README.md +5 -1
- package/es/ListItem/ListItem.js +11 -2
- package/es/ListItem/ListItem.module.css +9 -0
- package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +15 -1
- package/es/ListItem/props/propTypes.js +2 -1
- package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +80 -10
- package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +512 -64
- package/lib/ListItem/ListItem.js +12 -3
- package/lib/ListItem/ListItem.module.css +9 -0
- package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +15 -1
- package/lib/ListItem/props/propTypes.js +2 -1
- package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +80 -10
- package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +512 -64
- package/package.json +1 -1
- package/result.json +1 -1
package/lib/ListItem/ListItem.js
CHANGED
|
@@ -122,7 +122,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
|
|
|
122
122
|
a11y = _this$props4.a11y,
|
|
123
123
|
customClass = _this$props4.customClass,
|
|
124
124
|
customProps = _this$props4.customProps,
|
|
125
|
-
needMultiLineText = _this$props4.needMultiLineText
|
|
125
|
+
needMultiLineText = _this$props4.needMultiLineText,
|
|
126
|
+
secondaryValue = _this$props4.secondaryValue;
|
|
126
127
|
var _customProps$ListItem = customProps.ListItemProps,
|
|
127
128
|
ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
|
|
128
129
|
_customProps$Containe = customProps.ContainerProps,
|
|
@@ -162,7 +163,12 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
|
|
|
162
163
|
onMouseEnter: this.handleMouseEnter,
|
|
163
164
|
eleRef: this.getRef,
|
|
164
165
|
customProps: ListItemProps
|
|
165
|
-
}, ContainerProps),
|
|
166
|
+
}, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
167
|
+
flexible: true,
|
|
168
|
+
className: _ListItemModule["default"].leftBox
|
|
169
|
+
}, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
170
|
+
className: _ListItemModule["default"].titleBox
|
|
171
|
+
}, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
166
172
|
shrink: true,
|
|
167
173
|
adjust: true,
|
|
168
174
|
className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
|
|
@@ -170,7 +176,10 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
|
|
|
170
176
|
shrink: true,
|
|
171
177
|
adjust: true,
|
|
172
178
|
className: _ListItemModule["default"].children
|
|
173
|
-
}, children) : null,
|
|
179
|
+
}, children) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
180
|
+
"data-title": isDisabled ? null : secondaryValue,
|
|
181
|
+
className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
|
|
182
|
+
}, secondaryValue) : null), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
174
183
|
className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
|
|
175
184
|
"aria-hidden": ariaHidden,
|
|
176
185
|
dataId: "".concat(dataIdString, "_tickIcon"),
|
|
@@ -250,3 +250,12 @@
|
|
|
250
250
|
padding-top: var(--zd_size10) ;
|
|
251
251
|
padding-bottom: var(--zd_size10) ;
|
|
252
252
|
}
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
.leftBox {
|
|
256
|
+
composes: dflex flexcolumn from '../common/common.module.css';
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.titleBox {
|
|
260
|
+
composes: dflex alignVertical from '../common/common.module.css';
|
|
261
|
+
}
|
|
@@ -10,6 +10,20 @@ exports[`ListItem rendering the defult props 1`] = `
|
|
|
10
10
|
data-test-id="listItem"
|
|
11
11
|
role="option"
|
|
12
12
|
tabindex="0"
|
|
13
|
-
|
|
13
|
+
>
|
|
14
|
+
<div
|
|
15
|
+
class="leftBox grow basis shrinkOff"
|
|
16
|
+
data-id="boxComponent"
|
|
17
|
+
data-selector-id="box"
|
|
18
|
+
data-test-id="boxComponent"
|
|
19
|
+
>
|
|
20
|
+
<div
|
|
21
|
+
class="titleBox shrinkOff"
|
|
22
|
+
data-id="boxComponent"
|
|
23
|
+
data-selector-id="box"
|
|
24
|
+
data-test-id="boxComponent"
|
|
25
|
+
/>
|
|
26
|
+
</div>
|
|
27
|
+
</li>
|
|
14
28
|
</DocumentFragment>
|
|
15
29
|
`;
|
|
@@ -81,7 +81,8 @@ var ListItem_Props = {
|
|
|
81
81
|
}),
|
|
82
82
|
customProps: _propTypes["default"].shape({
|
|
83
83
|
ListItemProps: _propTypes["default"].object
|
|
84
|
-
})
|
|
84
|
+
}),
|
|
85
|
+
secondaryValue: _propTypes["default"].string
|
|
85
86
|
};
|
|
86
87
|
exports.ListItem_Props = ListItem_Props;
|
|
87
88
|
var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
|
|
@@ -215,12 +215,26 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
|
|
|
215
215
|
tabindex="0"
|
|
216
216
|
>
|
|
217
217
|
<div
|
|
218
|
-
class="
|
|
218
|
+
class="leftBox grow basis shrinkOff"
|
|
219
219
|
data-id="boxComponent"
|
|
220
220
|
data-selector-id="box"
|
|
221
221
|
data-test-id="boxComponent"
|
|
222
222
|
>
|
|
223
|
-
|
|
223
|
+
<div
|
|
224
|
+
class="titleBox shrinkOff"
|
|
225
|
+
data-id="boxComponent"
|
|
226
|
+
data-selector-id="box"
|
|
227
|
+
data-test-id="boxComponent"
|
|
228
|
+
>
|
|
229
|
+
<div
|
|
230
|
+
class="value basisAuto shrinkOn"
|
|
231
|
+
data-id="boxComponent"
|
|
232
|
+
data-selector-id="box"
|
|
233
|
+
data-test-id="boxComponent"
|
|
234
|
+
>
|
|
235
|
+
Apple
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
224
238
|
</div>
|
|
225
239
|
</li>
|
|
226
240
|
<li
|
|
@@ -237,12 +251,26 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
|
|
|
237
251
|
tabindex="0"
|
|
238
252
|
>
|
|
239
253
|
<div
|
|
240
|
-
class="
|
|
254
|
+
class="leftBox grow basis shrinkOff"
|
|
241
255
|
data-id="boxComponent"
|
|
242
256
|
data-selector-id="box"
|
|
243
257
|
data-test-id="boxComponent"
|
|
244
258
|
>
|
|
245
|
-
|
|
259
|
+
<div
|
|
260
|
+
class="titleBox shrinkOff"
|
|
261
|
+
data-id="boxComponent"
|
|
262
|
+
data-selector-id="box"
|
|
263
|
+
data-test-id="boxComponent"
|
|
264
|
+
>
|
|
265
|
+
<div
|
|
266
|
+
class="value basisAuto shrinkOn"
|
|
267
|
+
data-id="boxComponent"
|
|
268
|
+
data-selector-id="box"
|
|
269
|
+
data-test-id="boxComponent"
|
|
270
|
+
>
|
|
271
|
+
Orange
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
246
274
|
</div>
|
|
247
275
|
</li>
|
|
248
276
|
<li
|
|
@@ -259,12 +287,26 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
|
|
|
259
287
|
tabindex="0"
|
|
260
288
|
>
|
|
261
289
|
<div
|
|
262
|
-
class="
|
|
290
|
+
class="leftBox grow basis shrinkOff"
|
|
263
291
|
data-id="boxComponent"
|
|
264
292
|
data-selector-id="box"
|
|
265
293
|
data-test-id="boxComponent"
|
|
266
294
|
>
|
|
267
|
-
|
|
295
|
+
<div
|
|
296
|
+
class="titleBox shrinkOff"
|
|
297
|
+
data-id="boxComponent"
|
|
298
|
+
data-selector-id="box"
|
|
299
|
+
data-test-id="boxComponent"
|
|
300
|
+
>
|
|
301
|
+
<div
|
|
302
|
+
class="value basisAuto shrinkOn"
|
|
303
|
+
data-id="boxComponent"
|
|
304
|
+
data-selector-id="box"
|
|
305
|
+
data-test-id="boxComponent"
|
|
306
|
+
>
|
|
307
|
+
string test
|
|
308
|
+
</div>
|
|
309
|
+
</div>
|
|
268
310
|
</div>
|
|
269
311
|
</li>
|
|
270
312
|
</div>
|
|
@@ -421,12 +463,26 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
|
|
|
421
463
|
tabindex="0"
|
|
422
464
|
>
|
|
423
465
|
<div
|
|
424
|
-
class="
|
|
466
|
+
class="leftBox grow basis shrinkOff"
|
|
425
467
|
data-id="boxComponent"
|
|
426
468
|
data-selector-id="box"
|
|
427
469
|
data-test-id="boxComponent"
|
|
428
470
|
>
|
|
429
|
-
|
|
471
|
+
<div
|
|
472
|
+
class="titleBox shrinkOff"
|
|
473
|
+
data-id="boxComponent"
|
|
474
|
+
data-selector-id="box"
|
|
475
|
+
data-test-id="boxComponent"
|
|
476
|
+
>
|
|
477
|
+
<div
|
|
478
|
+
class="value basisAuto shrinkOn"
|
|
479
|
+
data-id="boxComponent"
|
|
480
|
+
data-selector-id="box"
|
|
481
|
+
data-test-id="boxComponent"
|
|
482
|
+
>
|
|
483
|
+
Apple
|
|
484
|
+
</div>
|
|
485
|
+
</div>
|
|
430
486
|
</div>
|
|
431
487
|
</li>
|
|
432
488
|
<li
|
|
@@ -443,12 +499,26 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
|
|
|
443
499
|
tabindex="0"
|
|
444
500
|
>
|
|
445
501
|
<div
|
|
446
|
-
class="
|
|
502
|
+
class="leftBox grow basis shrinkOff"
|
|
447
503
|
data-id="boxComponent"
|
|
448
504
|
data-selector-id="box"
|
|
449
505
|
data-test-id="boxComponent"
|
|
450
506
|
>
|
|
451
|
-
|
|
507
|
+
<div
|
|
508
|
+
class="titleBox shrinkOff"
|
|
509
|
+
data-id="boxComponent"
|
|
510
|
+
data-selector-id="box"
|
|
511
|
+
data-test-id="boxComponent"
|
|
512
|
+
>
|
|
513
|
+
<div
|
|
514
|
+
class="value basisAuto shrinkOn"
|
|
515
|
+
data-id="boxComponent"
|
|
516
|
+
data-selector-id="box"
|
|
517
|
+
data-test-id="boxComponent"
|
|
518
|
+
>
|
|
519
|
+
Orange
|
|
520
|
+
</div>
|
|
521
|
+
</div>
|
|
452
522
|
</div>
|
|
453
523
|
</li>
|
|
454
524
|
</div>
|