@zohodesk/components 1.4.10-exp.1 → 1.4.10
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/README.md +3 -0
- package/es/AppContainer/AppContainer.js +0 -1
- package/es/AppContainer/AppContainer.module.css +2 -3
- package/es/Button/css/Button.module.css +4 -13
- package/es/DateTime/DateTime.module.css +9 -12
- package/es/DateTime/YearView.module.css +1 -1
- package/es/Heading/Heading.module.css +1 -0
- package/es/Label/Label.module.css +8 -8
- package/es/MultiSelect/MultiSelect.module.css +1 -1
- package/es/Select/Select.js +3 -3
- package/es/Tab/Tabs.module.css +1 -1
- package/es/TextBox/TextBox.module.css +4 -4
- package/es/Textarea/Textarea.module.css +1 -1
- package/es/Tooltip/Tooltip.module.css +1 -1
- package/es/Typography/css/Typography.module.css +4 -4
- package/es/common/basic.module.css +6 -39
- package/es/common/basicReset.module.css +2 -2
- package/es/common/common.module.css +5 -5
- package/es/utils/dropDownUtils.js +3 -1
- package/es/v1/Tab/v1Tabs.module.css +1 -1
- package/es/v1/Typography/css/v1_Typography.module.css +4 -4
- package/lib/AppContainer/AppContainer.js +0 -2
- package/lib/AppContainer/AppContainer.module.css +2 -3
- package/lib/Button/css/Button.module.css +4 -13
- package/lib/DateTime/DateTime.module.css +9 -12
- package/lib/DateTime/YearView.module.css +1 -1
- package/lib/Heading/Heading.module.css +1 -0
- package/lib/Label/Label.module.css +8 -8
- package/lib/MultiSelect/MultiSelect.module.css +1 -1
- package/lib/Select/Select.js +2 -2
- package/lib/Tab/Tabs.module.css +1 -1
- package/lib/TextBox/TextBox.module.css +4 -4
- package/lib/Textarea/Textarea.module.css +1 -1
- package/lib/Tooltip/Tooltip.module.css +1 -1
- package/lib/Typography/css/Typography.module.css +4 -4
- package/lib/common/basic.module.css +6 -39
- package/lib/common/basicReset.module.css +2 -2
- package/lib/common/common.module.css +5 -5
- package/lib/utils/dropDownUtils.js +3 -1
- package/lib/v1/Tab/v1Tabs.module.css +1 -1
- package/lib/v1/Typography/css/v1_Typography.module.css +4 -4
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -7,6 +7,9 @@ Dot UI is a customizable React component library built to deliver a clean, acces
|
|
|
7
7
|
- **Select, MultiSelect**
|
|
8
8
|
- Searching with leading spaces is not reflected the results correctly. Issue Fixed.
|
|
9
9
|
|
|
10
|
+
- **Select**
|
|
11
|
+
- Fixed performance issue in options formatting caused by unnecessary rendering triggers
|
|
12
|
+
|
|
10
13
|
# 1.4.9
|
|
11
14
|
|
|
12
15
|
- **MultiSelect , MultiSelectWithAvatar, AdvancedMultiSelect, AdvancedGroupMultiSelect**
|
|
@@ -9,7 +9,6 @@ import '@zohodesk/variables/assets/dotVariables.module.css';
|
|
|
9
9
|
import '@zohodesk/variables/assets/sizeVariables.module.css';
|
|
10
10
|
import '@zohodesk/variables/assets/fontsizeVariables.module.css';
|
|
11
11
|
import '@zohodesk/variables/es/fontFamilyVariables.module.css';
|
|
12
|
-
import '@zohodesk/variables/es/fontWeightVariables.module.css';
|
|
13
12
|
import '@zohodesk/variables/assets/transitionVariables.module.css';
|
|
14
13
|
import '@zohodesk/variables/assets/no_transitionVariables.module.css';
|
|
15
14
|
import "../common/a11y.module.css";
|
|
@@ -8,9 +8,8 @@
|
|
|
8
8
|
-moz-box-sizing: border-box;
|
|
9
9
|
-ms-box-sizing: border-box;
|
|
10
10
|
}
|
|
11
|
-
.container
|
|
12
|
-
|
|
13
|
-
font-family: var(--zd-font-family, ZDLato);
|
|
11
|
+
.container {
|
|
12
|
+
font-family: var(--zd_regular);
|
|
14
13
|
}
|
|
15
14
|
.tooltip {
|
|
16
15
|
height: 0 ;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
--button_cursor: pointer;
|
|
6
6
|
--button_font_size: var(--zd_font_size13);
|
|
7
7
|
--button_text_color: var(--zdt_button_default_text);
|
|
8
|
-
--
|
|
8
|
+
--button_font_family: var(--zd_regular);
|
|
9
9
|
--button_text_transform: capitalize;
|
|
10
10
|
--button_bg_color: var(--zdt_button_default_bg);
|
|
11
11
|
--button_border_radius: 4px;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
position: relative;
|
|
50
50
|
font-size: var(--button_font_size);
|
|
51
51
|
color: var(--button_text_color);
|
|
52
|
-
font-
|
|
52
|
+
font-family: var(--button_font_family);
|
|
53
53
|
text-transform: var(--button_text_transform);
|
|
54
54
|
min-width: var(--button_min_width);
|
|
55
55
|
height: var(--button_height);
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.bold {
|
|
66
|
-
--
|
|
66
|
+
--button_font_family: var(--zd_semibold);
|
|
67
67
|
composes: ftsmooth from '../../common/common.module.css';
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -569,7 +569,7 @@
|
|
|
569
569
|
}
|
|
570
570
|
|
|
571
571
|
.loader {
|
|
572
|
-
color: var(--dot_mirror)
|
|
572
|
+
color: var(--dot_mirror)
|
|
573
573
|
}
|
|
574
574
|
|
|
575
575
|
[dir=ltr] .strike {
|
|
@@ -579,43 +579,34 @@
|
|
|
579
579
|
[dir=rtl] .strike {
|
|
580
580
|
background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
|
|
581
581
|
}
|
|
582
|
-
|
|
583
582
|
.primaryStrike {
|
|
584
583
|
--button_strike_color: var(--zdt_button_primary_strike);
|
|
585
584
|
}
|
|
586
|
-
|
|
587
585
|
.primaryfilledStrike {
|
|
588
586
|
--button_strike_color: var(--zdt_button_primaryFilled_strike);
|
|
589
587
|
--button_border_color: var(--zdt_button_primaryfill_bg);
|
|
590
588
|
}
|
|
591
|
-
|
|
592
589
|
.dangerStrike {
|
|
593
590
|
--button_strike_color: var(--zdt_button_danger_strike);
|
|
594
591
|
}
|
|
595
|
-
|
|
596
592
|
.dangerfilledStrike {
|
|
597
593
|
--button_strike_color: var(--zdt_button_dangerFilled_strike);
|
|
598
594
|
--button_border_color: var(--zdt_button_dangerfill_bg);
|
|
599
595
|
}
|
|
600
|
-
|
|
601
596
|
.secondaryStrike {
|
|
602
597
|
--button_strike_color: var(--zdt_button_secondary_border);
|
|
603
598
|
}
|
|
604
|
-
|
|
605
599
|
.secondaryfilledStrike {
|
|
606
600
|
--button_strike_color: var(--zdt_button_secondaryFilled_strike);
|
|
607
601
|
--button_border_color: var(--zdt_button_secondaryfill_bg);
|
|
608
602
|
}
|
|
609
|
-
|
|
610
603
|
.tertiaryfilledStrike {
|
|
611
604
|
--button_strike_color: var(--zdt_button_tertiaryFilled_strike);
|
|
612
605
|
--button_border_color: var(--zdt_button_tertiaryfill_bg);
|
|
613
606
|
}
|
|
614
|
-
|
|
615
607
|
.successStrike {
|
|
616
608
|
--button_strike_color: var(--zdt_button_success_strike);
|
|
617
609
|
}
|
|
618
|
-
|
|
619
610
|
.successfilledStrike {
|
|
620
611
|
--button_strike_color: var(--zdt_button_successFilled_strike);
|
|
621
612
|
--button_border_color: var(--zdt_button_successfill_bg);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.semibold {
|
|
2
|
-
font-
|
|
2
|
+
font-family: var(--zd_semibold);
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
[dir=ltr] .boxPadding {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.datesStr {
|
|
32
|
-
font-
|
|
32
|
+
font-family: var(--zd_regular);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.grid {
|
|
@@ -122,8 +122,7 @@
|
|
|
122
122
|
color: var(--zdt_datetime_invalid_text);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
.invalidDate.holiday
|
|
126
|
-
.inActiveDate.holiday:hover {
|
|
125
|
+
.invalidDate.holiday,.inActiveDate.holiday:hover {
|
|
127
126
|
color: var(--zdt_datetime_invaliddate_text);
|
|
128
127
|
}
|
|
129
128
|
|
|
@@ -148,17 +147,15 @@
|
|
|
148
147
|
background-color: var(--zdt_datetime_selected_bg);
|
|
149
148
|
border-radius: 50%;
|
|
150
149
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
cursor: no-drop;
|
|
150
|
+
.inActiveDate{
|
|
151
|
+
color: var(--zdt_datetime_invalid_text);
|
|
152
|
+
cursor: no-drop;
|
|
155
153
|
}
|
|
156
|
-
|
|
157
|
-
|
|
154
|
+
.inActiveDate:hover
|
|
155
|
+
{
|
|
158
156
|
color: var(--zdt_datetime_invalid_text);
|
|
159
157
|
}
|
|
160
|
-
|
|
161
|
-
.inActiveDate:hover, .inActiveDate.holiday:hover {
|
|
158
|
+
.inActiveDate:hover, .inActiveDate.holiday:hover{
|
|
162
159
|
background-color: var(--zdt_datetime_inactivedate_hover_bg);
|
|
163
160
|
|
|
164
161
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/* label default variables */
|
|
3
3
|
--label_font_size: var(--zd_font_size14);
|
|
4
4
|
--label_text_color: var(--zdt_label_default_text);
|
|
5
|
-
--
|
|
5
|
+
--label_font_family: var(--zd_regular);
|
|
6
6
|
--label_cursor: default;
|
|
7
7
|
--label_line_height: 1.286;
|
|
8
8
|
}
|
|
@@ -13,24 +13,24 @@
|
|
|
13
13
|
line-height: var(--label_line_height);
|
|
14
14
|
font-size: var(--label_font_size);
|
|
15
15
|
color: var(--label_text_color);
|
|
16
|
-
font-
|
|
16
|
+
font-family: var(--label_font_family);
|
|
17
17
|
cursor: var(--label_cursor);
|
|
18
18
|
}
|
|
19
19
|
.xsmall {
|
|
20
20
|
--label_font_size: var(--zd_font_size12);
|
|
21
|
-
--label_line_height:
|
|
21
|
+
--label_line_height:1.5;
|
|
22
22
|
}
|
|
23
23
|
.small {
|
|
24
24
|
--label_font_size: var(--zd_font_size13);
|
|
25
|
-
--label_line_height:
|
|
25
|
+
--label_line_height:1.385;
|
|
26
26
|
}
|
|
27
27
|
.medium {
|
|
28
28
|
--label_font_size: var(--zd_font_size14);
|
|
29
|
-
--label_line_height:
|
|
29
|
+
--label_line_height:1.286;
|
|
30
30
|
}
|
|
31
31
|
.large {
|
|
32
32
|
--label_font_size: var(--zd_font_size26);
|
|
33
|
-
--label_line_height:
|
|
33
|
+
--label_line_height:0.6923;
|
|
34
34
|
composes: semibold from '../common/common.module.css';
|
|
35
35
|
}
|
|
36
36
|
.pointer {
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
display: inline-block;
|
|
47
47
|
}
|
|
48
48
|
.font_default {
|
|
49
|
-
--
|
|
49
|
+
--label_font_family: var(--zd_regular);
|
|
50
50
|
}
|
|
51
51
|
.font_primary {
|
|
52
|
-
--
|
|
52
|
+
--label_font_family: var(--zd_semibold);
|
|
53
53
|
composes: ftsmooth from '../common/common.module.css';
|
|
54
54
|
}
|
|
55
55
|
.dotted {
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
.more {
|
|
197
197
|
font-size: var(--zd_font_size14) ;
|
|
198
198
|
color: var(--zdt_multiselect_more_text);
|
|
199
|
-
font-
|
|
199
|
+
font-family: inherit;
|
|
200
200
|
cursor: pointer;
|
|
201
201
|
margin-top: var(--zd_size5) ;
|
|
202
202
|
background-color: var(--zdt_multiselect_delete_bg);
|
package/es/Select/Select.js
CHANGED
|
@@ -18,7 +18,7 @@ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
|
|
|
18
18
|
import Loader from '@zohodesk/svg/lib/Loader/Loader';
|
|
19
19
|
/**** Methods ****/
|
|
20
20
|
|
|
21
|
-
import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
|
|
21
|
+
import { dummyObj, makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
|
|
22
22
|
import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, getKeyValue } from "../utils/Common.js";
|
|
23
23
|
/**** CSS ****/
|
|
24
24
|
|
|
@@ -251,10 +251,10 @@ export class SelectComponent extends Component {
|
|
|
251
251
|
valueField,
|
|
252
252
|
textField,
|
|
253
253
|
allowValueFallback,
|
|
254
|
-
customProps =
|
|
254
|
+
customProps = dummyObj
|
|
255
255
|
} = props;
|
|
256
256
|
let {
|
|
257
|
-
listItemProps =
|
|
257
|
+
listItemProps = dummyObj
|
|
258
258
|
} = customProps;
|
|
259
259
|
return this.formatOptions({
|
|
260
260
|
options,
|
package/es/Tab/Tabs.module.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--textbox_width: 100%;
|
|
10
10
|
--textbox_height: var(--zd_size35);
|
|
11
11
|
--textbox_border_radius: none;
|
|
12
|
-
--
|
|
12
|
+
--textbox_font_family: var(--zd_regular);
|
|
13
13
|
/* Variable:Ignore */
|
|
14
14
|
--textbox_letter_spacing: 0.1px;
|
|
15
15
|
--textbox_padding: 0;
|
|
@@ -166,18 +166,18 @@
|
|
|
166
166
|
.primary,
|
|
167
167
|
.secondary,
|
|
168
168
|
.light {
|
|
169
|
-
font-
|
|
169
|
+
font-family: var(--textbox_font_family);
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
.primary {
|
|
173
173
|
--textbox_text_color: var(--zdt_textbox_default_text);
|
|
174
|
-
--
|
|
174
|
+
--textbox_font_family: var(--zd_semibold);
|
|
175
175
|
composes: ftsmooth from '../common/common.module.css';
|
|
176
176
|
}
|
|
177
177
|
|
|
178
178
|
.secondary {
|
|
179
179
|
--textbox_text_color: var(--zdt_textbox_secondary_text);
|
|
180
|
-
--
|
|
180
|
+
--textbox_font_family: var(--zd_light);
|
|
181
181
|
}
|
|
182
182
|
|
|
183
183
|
.light {
|
|
@@ -25,20 +25,20 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.font_regular {
|
|
28
|
-
font-
|
|
28
|
+
font-family: var(--zd_regular);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.font_light {
|
|
32
|
-
font-
|
|
32
|
+
font-family: var(--zd_light);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.font_semibold {
|
|
36
|
-
font-
|
|
36
|
+
font-family: var(--zd_semibold);
|
|
37
37
|
composes: ftsmooth from '../../common/common.module.css';
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.font_bold {
|
|
41
|
-
font-
|
|
41
|
+
font-family: var(--zd_bold);
|
|
42
42
|
composes: ftsmooth from '../../common/common.module.css';
|
|
43
43
|
}
|
|
44
44
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
@font-face {
|
|
2
|
-
font-family:
|
|
3
|
-
src: url('https://static.zohocdn.com/webfonts/
|
|
4
|
-
font-weight:
|
|
2
|
+
font-family: Regular;
|
|
3
|
+
src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
|
|
4
|
+
font-weight: 400;
|
|
5
5
|
font-style: normal;
|
|
6
6
|
font-display: swap;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
@font-face {
|
|
10
|
-
font-family:
|
|
11
|
-
src: url('https://static.zohocdn.com/webfonts/
|
|
12
|
-
font-weight:
|
|
10
|
+
font-family: Light;
|
|
11
|
+
src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
|
|
12
|
+
font-weight: 300;
|
|
13
13
|
font-style: normal;
|
|
14
14
|
font-display: swap;
|
|
15
15
|
}
|
|
@@ -29,36 +29,3 @@
|
|
|
29
29
|
font-style: normal;
|
|
30
30
|
font-display: swap;
|
|
31
31
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
@font-face {
|
|
35
|
-
font-family: ZDLato;
|
|
36
|
-
src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
|
|
37
|
-
font-weight: 100 300;
|
|
38
|
-
font-style: normal;
|
|
39
|
-
font-display: swap;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@font-face {
|
|
43
|
-
font-family: ZDLato;
|
|
44
|
-
src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
|
|
45
|
-
font-weight: 400;
|
|
46
|
-
font-style: normal;
|
|
47
|
-
font-display: swap;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@font-face {
|
|
51
|
-
font-family: ZDLato;
|
|
52
|
-
src: url('https://static.zohocdn.com/webfonts/lato2semibold/font.woff2') format('woff2');
|
|
53
|
-
font-weight: 500 600;
|
|
54
|
-
font-style: normal;
|
|
55
|
-
font-display: swap;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
@font-face {
|
|
59
|
-
font-family: ZDLato;
|
|
60
|
-
src: url('https://static.zohocdn.com/webfonts/lato2bold/font.woff2') format('woff2');
|
|
61
|
-
font-weight: 700 900;
|
|
62
|
-
font-style: normal;
|
|
63
|
-
font-display: swap;
|
|
64
|
-
}
|
|
@@ -27,7 +27,7 @@ html {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
textarea {
|
|
30
|
-
font-
|
|
30
|
+
font-family: var(--zd_regular);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
label, input[type='button'], input[type='submit'], input[type='file'], button {
|
|
@@ -37,4 +37,4 @@ label, input[type='button'], input[type='submit'], input[type='file'], button {
|
|
|
37
37
|
/*Moz Required Box shadow Isssue*/
|
|
38
38
|
input[required]:-moz-ui-invalid {
|
|
39
39
|
box-shadow: none;
|
|
40
|
-
}
|
|
40
|
+
}
|
|
@@ -303,22 +303,22 @@
|
|
|
303
303
|
resize: vertical;
|
|
304
304
|
}
|
|
305
305
|
|
|
306
|
-
/*font-
|
|
306
|
+
/*font-family*/
|
|
307
307
|
.regular {
|
|
308
|
-
font-
|
|
308
|
+
font-family: var(--zd_regular, Regular);
|
|
309
309
|
}
|
|
310
310
|
|
|
311
311
|
.light {
|
|
312
|
-
font-
|
|
312
|
+
font-family: var(--zd_light, Light);
|
|
313
313
|
}
|
|
314
314
|
|
|
315
315
|
.semibold {
|
|
316
|
-
font-
|
|
316
|
+
font-family: var(--zd_semibold, Semibold);
|
|
317
317
|
composes: ftsmooth;
|
|
318
318
|
}
|
|
319
319
|
|
|
320
320
|
.bold {
|
|
321
|
-
font-
|
|
321
|
+
font-family: var(--zd_bold, Bold);
|
|
322
322
|
composes: ftsmooth;
|
|
323
323
|
}
|
|
324
324
|
|
|
@@ -43,8 +43,10 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
|
|
|
43
43
|
|
|
44
44
|
const getListItemProps = props => props.listItemProps || '';
|
|
45
45
|
|
|
46
|
+
const defaultSearchFields = ['value'];
|
|
47
|
+
|
|
46
48
|
const getSearchFields = props => {
|
|
47
|
-
return props.searchFields ||
|
|
49
|
+
return props.searchFields || defaultSearchFields;
|
|
48
50
|
}; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
|
|
49
51
|
// const matchedFields = searchFields.filter(element => {
|
|
50
52
|
// return getSearchString(obj[element]).indexOf(searchStr) !== -1
|
|
@@ -19,17 +19,17 @@
|
|
|
19
19
|
display: initial;
|
|
20
20
|
}
|
|
21
21
|
.font_regular {
|
|
22
|
-
font-
|
|
22
|
+
font-family: var(--zd_regular);
|
|
23
23
|
}
|
|
24
24
|
.font_light {
|
|
25
|
-
font-
|
|
25
|
+
font-family: var(--zd_light);
|
|
26
26
|
}
|
|
27
27
|
.font_semibold {
|
|
28
|
-
font-
|
|
28
|
+
font-family: var(--zd_semibold);
|
|
29
29
|
composes: ftsmooth from '../../../common/common.module.css';
|
|
30
30
|
}
|
|
31
31
|
.font_bold {
|
|
32
|
-
font-
|
|
32
|
+
font-family: var(--zd_bold);
|
|
33
33
|
composes: ftsmooth from '../../../common/common.module.css';
|
|
34
34
|
}
|
|
35
35
|
.fontStyles_normal{
|
|
@@ -29,8 +29,6 @@ require("@zohodesk/variables/assets/fontsizeVariables.module.css");
|
|
|
29
29
|
|
|
30
30
|
require("@zohodesk/variables/es/fontFamilyVariables.module.css");
|
|
31
31
|
|
|
32
|
-
require("@zohodesk/variables/es/fontWeightVariables.module.css");
|
|
33
|
-
|
|
34
32
|
require("@zohodesk/variables/assets/transitionVariables.module.css");
|
|
35
33
|
|
|
36
34
|
require("@zohodesk/variables/assets/no_transitionVariables.module.css");
|
|
@@ -8,9 +8,8 @@
|
|
|
8
8
|
-moz-box-sizing: border-box;
|
|
9
9
|
-ms-box-sizing: border-box;
|
|
10
10
|
}
|
|
11
|
-
.container
|
|
12
|
-
|
|
13
|
-
font-family: var(--zd-font-family, ZDLato);
|
|
11
|
+
.container {
|
|
12
|
+
font-family: var(--zd_regular);
|
|
14
13
|
}
|
|
15
14
|
.tooltip {
|
|
16
15
|
height: 0 ;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
--button_cursor: pointer;
|
|
6
6
|
--button_font_size: var(--zd_font_size13);
|
|
7
7
|
--button_text_color: var(--zdt_button_default_text);
|
|
8
|
-
--
|
|
8
|
+
--button_font_family: var(--zd_regular);
|
|
9
9
|
--button_text_transform: capitalize;
|
|
10
10
|
--button_bg_color: var(--zdt_button_default_bg);
|
|
11
11
|
--button_border_radius: 4px;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
position: relative;
|
|
50
50
|
font-size: var(--button_font_size);
|
|
51
51
|
color: var(--button_text_color);
|
|
52
|
-
font-
|
|
52
|
+
font-family: var(--button_font_family);
|
|
53
53
|
text-transform: var(--button_text_transform);
|
|
54
54
|
min-width: var(--button_min_width);
|
|
55
55
|
height: var(--button_height);
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.bold {
|
|
66
|
-
--
|
|
66
|
+
--button_font_family: var(--zd_semibold);
|
|
67
67
|
composes: ftsmooth from '../../common/common.module.css';
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -569,7 +569,7 @@
|
|
|
569
569
|
}
|
|
570
570
|
|
|
571
571
|
.loader {
|
|
572
|
-
color: var(--dot_mirror)
|
|
572
|
+
color: var(--dot_mirror)
|
|
573
573
|
}
|
|
574
574
|
|
|
575
575
|
[dir=ltr] .strike {
|
|
@@ -579,43 +579,34 @@
|
|
|
579
579
|
[dir=rtl] .strike {
|
|
580
580
|
background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
|
|
581
581
|
}
|
|
582
|
-
|
|
583
582
|
.primaryStrike {
|
|
584
583
|
--button_strike_color: var(--zdt_button_primary_strike);
|
|
585
584
|
}
|
|
586
|
-
|
|
587
585
|
.primaryfilledStrike {
|
|
588
586
|
--button_strike_color: var(--zdt_button_primaryFilled_strike);
|
|
589
587
|
--button_border_color: var(--zdt_button_primaryfill_bg);
|
|
590
588
|
}
|
|
591
|
-
|
|
592
589
|
.dangerStrike {
|
|
593
590
|
--button_strike_color: var(--zdt_button_danger_strike);
|
|
594
591
|
}
|
|
595
|
-
|
|
596
592
|
.dangerfilledStrike {
|
|
597
593
|
--button_strike_color: var(--zdt_button_dangerFilled_strike);
|
|
598
594
|
--button_border_color: var(--zdt_button_dangerfill_bg);
|
|
599
595
|
}
|
|
600
|
-
|
|
601
596
|
.secondaryStrike {
|
|
602
597
|
--button_strike_color: var(--zdt_button_secondary_border);
|
|
603
598
|
}
|
|
604
|
-
|
|
605
599
|
.secondaryfilledStrike {
|
|
606
600
|
--button_strike_color: var(--zdt_button_secondaryFilled_strike);
|
|
607
601
|
--button_border_color: var(--zdt_button_secondaryfill_bg);
|
|
608
602
|
}
|
|
609
|
-
|
|
610
603
|
.tertiaryfilledStrike {
|
|
611
604
|
--button_strike_color: var(--zdt_button_tertiaryFilled_strike);
|
|
612
605
|
--button_border_color: var(--zdt_button_tertiaryfill_bg);
|
|
613
606
|
}
|
|
614
|
-
|
|
615
607
|
.successStrike {
|
|
616
608
|
--button_strike_color: var(--zdt_button_success_strike);
|
|
617
609
|
}
|
|
618
|
-
|
|
619
610
|
.successfilledStrike {
|
|
620
611
|
--button_strike_color: var(--zdt_button_successFilled_strike);
|
|
621
612
|
--button_border_color: var(--zdt_button_successfill_bg);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.semibold {
|
|
2
|
-
font-
|
|
2
|
+
font-family: var(--zd_semibold);
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
[dir=ltr] .boxPadding {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.datesStr {
|
|
32
|
-
font-
|
|
32
|
+
font-family: var(--zd_regular);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.grid {
|
|
@@ -122,8 +122,7 @@
|
|
|
122
122
|
color: var(--zdt_datetime_invalid_text);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
.invalidDate.holiday
|
|
126
|
-
.inActiveDate.holiday:hover {
|
|
125
|
+
.invalidDate.holiday,.inActiveDate.holiday:hover {
|
|
127
126
|
color: var(--zdt_datetime_invaliddate_text);
|
|
128
127
|
}
|
|
129
128
|
|
|
@@ -148,17 +147,15 @@
|
|
|
148
147
|
background-color: var(--zdt_datetime_selected_bg);
|
|
149
148
|
border-radius: 50%;
|
|
150
149
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
cursor: no-drop;
|
|
150
|
+
.inActiveDate{
|
|
151
|
+
color: var(--zdt_datetime_invalid_text);
|
|
152
|
+
cursor: no-drop;
|
|
155
153
|
}
|
|
156
|
-
|
|
157
|
-
|
|
154
|
+
.inActiveDate:hover
|
|
155
|
+
{
|
|
158
156
|
color: var(--zdt_datetime_invalid_text);
|
|
159
157
|
}
|
|
160
|
-
|
|
161
|
-
.inActiveDate:hover, .inActiveDate.holiday:hover {
|
|
158
|
+
.inActiveDate:hover, .inActiveDate.holiday:hover{
|
|
162
159
|
background-color: var(--zdt_datetime_inactivedate_hover_bg);
|
|
163
160
|
|
|
164
161
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/* label default variables */
|
|
3
3
|
--label_font_size: var(--zd_font_size14);
|
|
4
4
|
--label_text_color: var(--zdt_label_default_text);
|
|
5
|
-
--
|
|
5
|
+
--label_font_family: var(--zd_regular);
|
|
6
6
|
--label_cursor: default;
|
|
7
7
|
--label_line_height: 1.286;
|
|
8
8
|
}
|
|
@@ -13,24 +13,24 @@
|
|
|
13
13
|
line-height: var(--label_line_height);
|
|
14
14
|
font-size: var(--label_font_size);
|
|
15
15
|
color: var(--label_text_color);
|
|
16
|
-
font-
|
|
16
|
+
font-family: var(--label_font_family);
|
|
17
17
|
cursor: var(--label_cursor);
|
|
18
18
|
}
|
|
19
19
|
.xsmall {
|
|
20
20
|
--label_font_size: var(--zd_font_size12);
|
|
21
|
-
--label_line_height:
|
|
21
|
+
--label_line_height:1.5;
|
|
22
22
|
}
|
|
23
23
|
.small {
|
|
24
24
|
--label_font_size: var(--zd_font_size13);
|
|
25
|
-
--label_line_height:
|
|
25
|
+
--label_line_height:1.385;
|
|
26
26
|
}
|
|
27
27
|
.medium {
|
|
28
28
|
--label_font_size: var(--zd_font_size14);
|
|
29
|
-
--label_line_height:
|
|
29
|
+
--label_line_height:1.286;
|
|
30
30
|
}
|
|
31
31
|
.large {
|
|
32
32
|
--label_font_size: var(--zd_font_size26);
|
|
33
|
-
--label_line_height:
|
|
33
|
+
--label_line_height:0.6923;
|
|
34
34
|
composes: semibold from '../common/common.module.css';
|
|
35
35
|
}
|
|
36
36
|
.pointer {
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
display: inline-block;
|
|
47
47
|
}
|
|
48
48
|
.font_default {
|
|
49
|
-
--
|
|
49
|
+
--label_font_family: var(--zd_regular);
|
|
50
50
|
}
|
|
51
51
|
.font_primary {
|
|
52
|
-
--
|
|
52
|
+
--label_font_family: var(--zd_semibold);
|
|
53
53
|
composes: ftsmooth from '../common/common.module.css';
|
|
54
54
|
}
|
|
55
55
|
.dotted {
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
.more {
|
|
197
197
|
font-size: var(--zd_font_size14) ;
|
|
198
198
|
color: var(--zdt_multiselect_more_text);
|
|
199
|
-
font-
|
|
199
|
+
font-family: inherit;
|
|
200
200
|
cursor: pointer;
|
|
201
201
|
margin-top: var(--zd_size5) ;
|
|
202
202
|
background-color: var(--zdt_multiselect_delete_bg);
|
package/lib/Select/Select.js
CHANGED
|
@@ -309,9 +309,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
|
|
|
309
309
|
textField = props.textField,
|
|
310
310
|
allowValueFallback = props.allowValueFallback,
|
|
311
311
|
_props$customProps = props.customProps,
|
|
312
|
-
customProps = _props$customProps === void 0 ?
|
|
312
|
+
customProps = _props$customProps === void 0 ? _dropDownUtils.dummyObj : _props$customProps;
|
|
313
313
|
var _customProps$listItem = customProps.listItemProps,
|
|
314
|
-
listItemProps = _customProps$listItem === void 0 ?
|
|
314
|
+
listItemProps = _customProps$listItem === void 0 ? _dropDownUtils.dummyObj : _customProps$listItem;
|
|
315
315
|
return this.formatOptions({
|
|
316
316
|
options: options,
|
|
317
317
|
valueField: valueField,
|
package/lib/Tab/Tabs.module.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--textbox_width: 100%;
|
|
10
10
|
--textbox_height: var(--zd_size35);
|
|
11
11
|
--textbox_border_radius: none;
|
|
12
|
-
--
|
|
12
|
+
--textbox_font_family: var(--zd_regular);
|
|
13
13
|
/* Variable:Ignore */
|
|
14
14
|
--textbox_letter_spacing: 0.1px;
|
|
15
15
|
--textbox_padding: 0;
|
|
@@ -166,18 +166,18 @@
|
|
|
166
166
|
.primary,
|
|
167
167
|
.secondary,
|
|
168
168
|
.light {
|
|
169
|
-
font-
|
|
169
|
+
font-family: var(--textbox_font_family);
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
.primary {
|
|
173
173
|
--textbox_text_color: var(--zdt_textbox_default_text);
|
|
174
|
-
--
|
|
174
|
+
--textbox_font_family: var(--zd_semibold);
|
|
175
175
|
composes: ftsmooth from '../common/common.module.css';
|
|
176
176
|
}
|
|
177
177
|
|
|
178
178
|
.secondary {
|
|
179
179
|
--textbox_text_color: var(--zdt_textbox_secondary_text);
|
|
180
|
-
--
|
|
180
|
+
--textbox_font_family: var(--zd_light);
|
|
181
181
|
}
|
|
182
182
|
|
|
183
183
|
.light {
|
|
@@ -25,20 +25,20 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.font_regular {
|
|
28
|
-
font-
|
|
28
|
+
font-family: var(--zd_regular);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.font_light {
|
|
32
|
-
font-
|
|
32
|
+
font-family: var(--zd_light);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.font_semibold {
|
|
36
|
-
font-
|
|
36
|
+
font-family: var(--zd_semibold);
|
|
37
37
|
composes: ftsmooth from '../../common/common.module.css';
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.font_bold {
|
|
41
|
-
font-
|
|
41
|
+
font-family: var(--zd_bold);
|
|
42
42
|
composes: ftsmooth from '../../common/common.module.css';
|
|
43
43
|
}
|
|
44
44
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
@font-face {
|
|
2
|
-
font-family:
|
|
3
|
-
src: url('https://static.zohocdn.com/webfonts/
|
|
4
|
-
font-weight:
|
|
2
|
+
font-family: Regular;
|
|
3
|
+
src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
|
|
4
|
+
font-weight: 400;
|
|
5
5
|
font-style: normal;
|
|
6
6
|
font-display: swap;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
@font-face {
|
|
10
|
-
font-family:
|
|
11
|
-
src: url('https://static.zohocdn.com/webfonts/
|
|
12
|
-
font-weight:
|
|
10
|
+
font-family: Light;
|
|
11
|
+
src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
|
|
12
|
+
font-weight: 300;
|
|
13
13
|
font-style: normal;
|
|
14
14
|
font-display: swap;
|
|
15
15
|
}
|
|
@@ -29,36 +29,3 @@
|
|
|
29
29
|
font-style: normal;
|
|
30
30
|
font-display: swap;
|
|
31
31
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
@font-face {
|
|
35
|
-
font-family: ZDLato;
|
|
36
|
-
src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
|
|
37
|
-
font-weight: 100 300;
|
|
38
|
-
font-style: normal;
|
|
39
|
-
font-display: swap;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@font-face {
|
|
43
|
-
font-family: ZDLato;
|
|
44
|
-
src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
|
|
45
|
-
font-weight: 400;
|
|
46
|
-
font-style: normal;
|
|
47
|
-
font-display: swap;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@font-face {
|
|
51
|
-
font-family: ZDLato;
|
|
52
|
-
src: url('https://static.zohocdn.com/webfonts/lato2semibold/font.woff2') format('woff2');
|
|
53
|
-
font-weight: 500 600;
|
|
54
|
-
font-style: normal;
|
|
55
|
-
font-display: swap;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
@font-face {
|
|
59
|
-
font-family: ZDLato;
|
|
60
|
-
src: url('https://static.zohocdn.com/webfonts/lato2bold/font.woff2') format('woff2');
|
|
61
|
-
font-weight: 700 900;
|
|
62
|
-
font-style: normal;
|
|
63
|
-
font-display: swap;
|
|
64
|
-
}
|
|
@@ -27,7 +27,7 @@ html {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
textarea {
|
|
30
|
-
font-
|
|
30
|
+
font-family: var(--zd_regular);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
label, input[type='button'], input[type='submit'], input[type='file'], button {
|
|
@@ -37,4 +37,4 @@ label, input[type='button'], input[type='submit'], input[type='file'], button {
|
|
|
37
37
|
/*Moz Required Box shadow Isssue*/
|
|
38
38
|
input[required]:-moz-ui-invalid {
|
|
39
39
|
box-shadow: none;
|
|
40
|
-
}
|
|
40
|
+
}
|
|
@@ -303,22 +303,22 @@
|
|
|
303
303
|
resize: vertical;
|
|
304
304
|
}
|
|
305
305
|
|
|
306
|
-
/*font-
|
|
306
|
+
/*font-family*/
|
|
307
307
|
.regular {
|
|
308
|
-
font-
|
|
308
|
+
font-family: var(--zd_regular, Regular);
|
|
309
309
|
}
|
|
310
310
|
|
|
311
311
|
.light {
|
|
312
|
-
font-
|
|
312
|
+
font-family: var(--zd_light, Light);
|
|
313
313
|
}
|
|
314
314
|
|
|
315
315
|
.semibold {
|
|
316
|
-
font-
|
|
316
|
+
font-family: var(--zd_semibold, Semibold);
|
|
317
317
|
composes: ftsmooth;
|
|
318
318
|
}
|
|
319
319
|
|
|
320
320
|
.bold {
|
|
321
|
-
font-
|
|
321
|
+
font-family: var(--zd_bold, Bold);
|
|
322
322
|
composes: ftsmooth;
|
|
323
323
|
}
|
|
324
324
|
|
|
@@ -152,8 +152,10 @@ var getListItemProps = function getListItemProps(props) {
|
|
|
152
152
|
return props.listItemProps || '';
|
|
153
153
|
};
|
|
154
154
|
|
|
155
|
+
var defaultSearchFields = ['value'];
|
|
156
|
+
|
|
155
157
|
var getSearchFields = function getSearchFields(props) {
|
|
156
|
-
return props.searchFields ||
|
|
158
|
+
return props.searchFields || defaultSearchFields;
|
|
157
159
|
}; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
|
|
158
160
|
// const matchedFields = searchFields.filter(element => {
|
|
159
161
|
// return getSearchString(obj[element]).indexOf(searchStr) !== -1
|
|
@@ -19,17 +19,17 @@
|
|
|
19
19
|
display: initial;
|
|
20
20
|
}
|
|
21
21
|
.font_regular {
|
|
22
|
-
font-
|
|
22
|
+
font-family: var(--zd_regular);
|
|
23
23
|
}
|
|
24
24
|
.font_light {
|
|
25
|
-
font-
|
|
25
|
+
font-family: var(--zd_light);
|
|
26
26
|
}
|
|
27
27
|
.font_semibold {
|
|
28
|
-
font-
|
|
28
|
+
font-family: var(--zd_semibold);
|
|
29
29
|
composes: ftsmooth from '../../../common/common.module.css';
|
|
30
30
|
}
|
|
31
31
|
.font_bold {
|
|
32
|
-
font-
|
|
32
|
+
font-family: var(--zd_bold);
|
|
33
33
|
composes: ftsmooth from '../../../common/common.module.css';
|
|
34
34
|
}
|
|
35
35
|
.fontStyles_normal{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/components",
|
|
3
|
-
"version": "1.4.10
|
|
3
|
+
"version": "1.4.10",
|
|
4
4
|
"main": "es/index.js",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"private": false,
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"build:css:umd": "npm run clean && npm run init && react-cli build:css:umd",
|
|
40
40
|
"coverage": "react-cli coverage",
|
|
41
41
|
"prepare": "npm run init && npm run css:build ",
|
|
42
|
-
"prepublishOnly": "node prePublish.js && npm run test-clean
|
|
42
|
+
"prepublishOnly": "node prePublish.js && npm run test-clean && npm run download && npm run css:review && npm run review:props ",
|
|
43
43
|
"postpublish": "node postPublish.js",
|
|
44
44
|
"report": "react-cli publish:report",
|
|
45
45
|
"test": "react-cli test",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"snap-update": "npm run test-clean && npm run test -- -u",
|
|
49
49
|
"sstest": "npm run init && react-cli sstest",
|
|
50
50
|
"build:external": "npm run clean && npm run init && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
|
|
51
|
-
"download": "react-cli clean ./node_modules ./package-lock.json && npm install
|
|
51
|
+
"download": "react-cli clean ./node_modules ./package-lock.json && npm install ",
|
|
52
52
|
"expublish": "npm publish --tag experimental-version",
|
|
53
53
|
"css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
|
|
54
54
|
"cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
|