@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/README.md
CHANGED
|
@@ -2,11 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
|
|
4
4
|
|
|
5
|
+
# 1.4.3
|
|
6
|
+
|
|
7
|
+
- **ListItem**
|
|
8
|
+
- Added `SecondaryValue` prop to supported.
|
|
9
|
+
|
|
5
10
|
# 1.4.2
|
|
6
11
|
|
|
7
12
|
- **Switch(v1)** - ?. operator removed
|
|
8
13
|
|
|
9
|
-
|
|
10
14
|
# 1.4.1
|
|
11
15
|
|
|
12
16
|
- **Switch(v1)** - labelPlacement top | bottom alignment and hover style issue fixed.
|
package/es/ListItem/ListItem.js
CHANGED
|
@@ -70,7 +70,8 @@ export default class ListItem extends React.Component {
|
|
|
70
70
|
a11y,
|
|
71
71
|
customClass,
|
|
72
72
|
customProps,
|
|
73
|
-
needMultiLineText
|
|
73
|
+
needMultiLineText,
|
|
74
|
+
secondaryValue
|
|
74
75
|
} = this.props;
|
|
75
76
|
let {
|
|
76
77
|
ListItemProps = {},
|
|
@@ -113,6 +114,11 @@ export default class ListItem extends React.Component {
|
|
|
113
114
|
eleRef: this.getRef,
|
|
114
115
|
customProps: ListItemProps,
|
|
115
116
|
...ContainerProps
|
|
117
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
118
|
+
flexible: true,
|
|
119
|
+
className: style.leftBox
|
|
120
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
121
|
+
className: style.titleBox
|
|
116
122
|
}, value ? /*#__PURE__*/React.createElement(Box, {
|
|
117
123
|
shrink: true,
|
|
118
124
|
adjust: true,
|
|
@@ -121,7 +127,10 @@ export default class ListItem extends React.Component {
|
|
|
121
127
|
shrink: true,
|
|
122
128
|
adjust: true,
|
|
123
129
|
className: style.children
|
|
124
|
-
}, children) : null,
|
|
130
|
+
}, children) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
|
|
131
|
+
"data-title": isDisabled ? null : secondaryValue,
|
|
132
|
+
className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
|
|
133
|
+
}, secondaryValue) : null), needTick && active ? /*#__PURE__*/React.createElement(Box, {
|
|
125
134
|
className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
|
|
126
135
|
"aria-hidden": ariaHidden,
|
|
127
136
|
dataId: `${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
|
`;
|
|
@@ -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>
|