@zohodesk/components 1.0.0-alpha-272 → 1.0.0-alpha-274

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.
Files changed (168) hide show
  1. package/README.md +9 -0
  2. package/es/Accordion/Accordion.js +1 -0
  3. package/es/Accordion/AccordionItem.js +1 -0
  4. package/es/AppContainer/AppContainer.js +15 -6
  5. package/es/AppContainer/AppContainer.module.css +2 -2
  6. package/es/AppContainer/props/defaultProps.js +2 -1
  7. package/es/AppContainer/props/propTypes.js +1 -0
  8. package/es/Avatar/Avatar.js +3 -0
  9. package/es/Avatar/Avatar.module.css +18 -18
  10. package/es/AvatarTeam/AvatarTeam.js +1 -0
  11. package/es/AvatarTeam/AvatarTeam.module.css +35 -35
  12. package/es/Button/Button.js +1 -0
  13. package/es/Button/css/Button.module.css +70 -70
  14. package/es/Buttongroup/Buttongroup.js +1 -0
  15. package/es/Buttongroup/Buttongroup.module.css +14 -15
  16. package/es/CheckBox/CheckBox.module.css +15 -15
  17. package/es/DateTime/CalendarView.js +1 -0
  18. package/es/DateTime/DateTime.js +3 -1
  19. package/es/DateTime/DateTime.module.css +39 -39
  20. package/es/DateTime/DateWidget.js +2 -0
  21. package/es/DateTime/DateWidget.module.css +5 -5
  22. package/es/DateTime/YearView.module.css +15 -15
  23. package/es/DropBox/DropBoxElement/DropBoxElement.js +3 -0
  24. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +76 -76
  25. package/es/DropBox/css/DropBox.module.css +6 -6
  26. package/es/DropDown/DropDown.js +2 -1
  27. package/es/DropDown/DropDown.module.css +2 -2
  28. package/es/DropDown/DropDownHeading.js +1 -0
  29. package/es/DropDown/DropDownHeading.module.css +6 -6
  30. package/es/DropDown/DropDownItem.js +2 -1
  31. package/es/DropDown/DropDownItem.module.css +12 -12
  32. package/es/DropDown/DropDownSearch.module.css +3 -3
  33. package/es/DropDown/DropDownSeparator.module.css +2 -2
  34. package/es/Heading/Heading.js +1 -0
  35. package/es/Heading/Heading.module.css +2 -2
  36. package/es/Label/Label.js +1 -0
  37. package/es/Label/Label.module.css +5 -5
  38. package/es/Layout/Box.js +4 -3
  39. package/es/Layout/Container.js +4 -3
  40. package/es/Layout/Layout.module.css +15 -15
  41. package/es/Layout/props/defaultProps.js +2 -0
  42. package/es/Layout/props/propTypes.js +2 -0
  43. package/es/Layout/utils.js +5 -1
  44. package/es/ListItem/ListItem.module.css +38 -38
  45. package/es/MultiSelect/AdvancedGroupMultiSelect.js +1 -0
  46. package/es/MultiSelect/AdvancedMultiSelect.js +1 -0
  47. package/es/MultiSelect/EmptyState.js +4 -0
  48. package/es/MultiSelect/MultiSelect.js +1 -0
  49. package/es/MultiSelect/MultiSelect.module.css +31 -31
  50. package/es/MultiSelect/MultiSelectWithAvatar.js +1 -0
  51. package/es/MultiSelect/SelectedOptions.module.css +5 -5
  52. package/es/Popup/Popup.js +1 -4
  53. package/es/Radio/Radio.module.css +9 -9
  54. package/es/ResponsiveDropBox/ResponsiveDropBox.module.css +2 -2
  55. package/es/Ribbon/Ribbon.js +1 -0
  56. package/es/Ribbon/Ribbon.module.css +46 -48
  57. package/es/Select/GroupSelect.js +1 -0
  58. package/es/Select/Select.js +2 -1
  59. package/es/Select/Select.module.css +23 -23
  60. package/es/Select/SelectWithAvatar.js +2 -0
  61. package/es/Select/SelectWithIcon.js +2 -1
  62. package/es/Stencils/Stencils.module.css +11 -11
  63. package/es/Switch/Switch.js +1 -0
  64. package/es/Switch/Switch.module.css +23 -23
  65. package/es/Tab/Tab.module.css +14 -14
  66. package/es/Tab/Tabs.js +2 -1
  67. package/es/Tab/Tabs.module.css +22 -22
  68. package/es/Tag/Tag.js +1 -0
  69. package/es/Tag/Tag.module.css +25 -25
  70. package/es/TextBox/TextBox.js +1 -0
  71. package/es/TextBox/TextBox.module.css +9 -9
  72. package/es/TextBoxIcon/TextBoxIcon.module.css +7 -7
  73. package/es/Textarea/Textarea.js +1 -0
  74. package/es/Textarea/Textarea.module.css +21 -21
  75. package/es/Tooltip/Tooltip.js +2 -1
  76. package/es/Tooltip/Tooltip.module.css +5 -5
  77. package/es/common/animation.module.css +8 -8
  78. package/es/common/avatarsizes.module.css +16 -16
  79. package/es/common/basicReset.module.css +3 -3
  80. package/es/common/common.module.css +24 -24
  81. package/es/common/customscroll.module.css +2 -2
  82. package/es/deprecated/AdvancedMultiSelect.module.css +18 -18
  83. package/es/semantic/Button/Button.js +1 -0
  84. package/es/semantic/Button/semanticButton.module.css +1 -1
  85. package/lib/Accordion/Accordion.js +1 -0
  86. package/lib/Accordion/AccordionItem.js +1 -0
  87. package/lib/AppContainer/AppContainer.js +11 -6
  88. package/lib/AppContainer/AppContainer.module.css +2 -2
  89. package/lib/AppContainer/props/defaultProps.js +2 -1
  90. package/lib/AppContainer/props/propTypes.js +1 -0
  91. package/lib/Avatar/Avatar.js +3 -0
  92. package/lib/Avatar/Avatar.module.css +18 -18
  93. package/lib/AvatarTeam/AvatarTeam.js +1 -0
  94. package/lib/AvatarTeam/AvatarTeam.module.css +35 -35
  95. package/lib/Button/Button.js +1 -0
  96. package/lib/Button/css/Button.module.css +70 -70
  97. package/lib/Buttongroup/Buttongroup.js +1 -0
  98. package/lib/Buttongroup/Buttongroup.module.css +14 -15
  99. package/lib/CheckBox/CheckBox.module.css +15 -15
  100. package/lib/DateTime/CalendarView.js +1 -0
  101. package/lib/DateTime/DateTime.js +3 -1
  102. package/lib/DateTime/DateTime.module.css +39 -39
  103. package/lib/DateTime/DateWidget.js +2 -0
  104. package/lib/DateTime/DateWidget.module.css +5 -5
  105. package/lib/DateTime/YearView.module.css +15 -15
  106. package/lib/DropBox/DropBoxElement/DropBoxElement.js +3 -0
  107. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +76 -76
  108. package/lib/DropBox/css/DropBox.module.css +6 -6
  109. package/lib/DropDown/DropDown.js +2 -1
  110. package/lib/DropDown/DropDown.module.css +2 -2
  111. package/lib/DropDown/DropDownHeading.js +1 -0
  112. package/lib/DropDown/DropDownHeading.module.css +6 -6
  113. package/lib/DropDown/DropDownItem.js +2 -1
  114. package/lib/DropDown/DropDownItem.module.css +12 -12
  115. package/lib/DropDown/DropDownSearch.module.css +3 -3
  116. package/lib/DropDown/DropDownSeparator.module.css +2 -2
  117. package/lib/Heading/Heading.js +2 -1
  118. package/lib/Heading/Heading.module.css +2 -2
  119. package/lib/Label/Label.js +1 -0
  120. package/lib/Label/Label.module.css +5 -5
  121. package/lib/Layout/Box.js +8 -4
  122. package/lib/Layout/Container.js +8 -4
  123. package/lib/Layout/Layout.module.css +15 -15
  124. package/lib/Layout/props/defaultProps.js +2 -0
  125. package/lib/Layout/props/propTypes.js +2 -0
  126. package/lib/Layout/utils.js +5 -1
  127. package/lib/ListItem/ListItem.module.css +38 -38
  128. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +1 -0
  129. package/lib/MultiSelect/AdvancedMultiSelect.js +1 -0
  130. package/lib/MultiSelect/EmptyState.js +4 -0
  131. package/lib/MultiSelect/MultiSelect.js +1 -0
  132. package/lib/MultiSelect/MultiSelect.module.css +31 -31
  133. package/lib/MultiSelect/MultiSelectWithAvatar.js +1 -0
  134. package/lib/MultiSelect/SelectedOptions.module.css +5 -5
  135. package/lib/Popup/Popup.js +1 -4
  136. package/lib/Radio/Radio.module.css +9 -9
  137. package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css +2 -2
  138. package/lib/Ribbon/Ribbon.js +1 -0
  139. package/lib/Ribbon/Ribbon.module.css +46 -48
  140. package/lib/Select/GroupSelect.js +1 -0
  141. package/lib/Select/Select.js +2 -1
  142. package/lib/Select/Select.module.css +23 -23
  143. package/lib/Select/SelectWithAvatar.js +2 -0
  144. package/lib/Select/SelectWithIcon.js +2 -1
  145. package/lib/Stencils/Stencils.module.css +11 -11
  146. package/lib/Switch/Switch.js +1 -0
  147. package/lib/Switch/Switch.module.css +23 -23
  148. package/lib/Tab/Tab.module.css +14 -14
  149. package/lib/Tab/Tabs.js +2 -1
  150. package/lib/Tab/Tabs.module.css +22 -22
  151. package/lib/Tag/Tag.js +1 -0
  152. package/lib/Tag/Tag.module.css +25 -25
  153. package/lib/TextBox/TextBox.js +1 -0
  154. package/lib/TextBox/TextBox.module.css +9 -9
  155. package/lib/TextBoxIcon/TextBoxIcon.module.css +7 -7
  156. package/lib/Textarea/Textarea.js +1 -0
  157. package/lib/Textarea/Textarea.module.css +21 -21
  158. package/lib/Tooltip/Tooltip.js +2 -1
  159. package/lib/Tooltip/Tooltip.module.css +5 -5
  160. package/lib/common/animation.module.css +8 -8
  161. package/lib/common/avatarsizes.module.css +16 -16
  162. package/lib/common/basicReset.module.css +3 -3
  163. package/lib/common/common.module.css +24 -24
  164. package/lib/common/customscroll.module.css +2 -2
  165. package/lib/deprecated/AdvancedMultiSelect.module.css +18 -18
  166. package/lib/semantic/Button/Button.js +1 -0
  167. package/lib/semantic/Button/semanticButton.module.css +1 -1
  168. package/package.json +10 -19
@@ -52,8 +52,8 @@
52
52
  .cboth::after {
53
53
  content: '.';
54
54
  display: block;
55
- font-size: 0;
56
- height: 0;
55
+ font-size: 0 ;
56
+ height: 0 ;
57
57
  line-height: 0;
58
58
  visibility: hidden;
59
59
  clear: both;
@@ -81,21 +81,21 @@
81
81
  .disabled::after,
82
82
  .readonly::after {
83
83
  position: absolute;
84
- top: 0;
85
- bottom: 0;
84
+ top: 0 ;
85
+ bottom: 0 ;
86
86
  z-index: 2;
87
87
  content: '';
88
88
  user-select: none;
89
89
  }
90
90
 
91
91
  [dir=ltr] .disable::after, [dir=ltr] .disabled::after, [dir=ltr] .readonly::after {
92
- left: 0;
93
- right: 0;
92
+ left: 0 ;
93
+ right: 0 ;
94
94
  }
95
95
 
96
96
  [dir=rtl] .disable::after, [dir=rtl] .disabled::after, [dir=rtl] .readonly::after {
97
- right: 0;
98
- left: 0;
97
+ right: 0 ;
98
+ left: 0 ;
99
99
  }
100
100
 
101
101
  .disabled, .readonly {
@@ -201,8 +201,8 @@
201
201
  -webkit-box-flex: 1;
202
202
  -ms-flex-positive: 1;
203
203
  flex-grow: 1;
204
- min-height: 0;
205
- min-width: 0;
204
+ min-height: 0 ;
205
+ min-width: 0 ;
206
206
  }
207
207
 
208
208
  .flexshrink {
@@ -213,7 +213,7 @@
213
213
  }
214
214
 
215
215
  .flexbasis {
216
- flex-basis: 0%;
216
+ flex-basis: 0% ;
217
217
  -webkit-flex-basis: 0%;
218
218
  -moz-flex-basis: 0%;
219
219
  -ms-flex-basis: 0%;
@@ -331,11 +331,11 @@
331
331
 
332
332
  /* --Width Props-- */
333
333
  .w100 {
334
- width: 100%;
334
+ width: 100% ;
335
335
  }
336
336
 
337
337
  .h100 {
338
- height: 100%;
338
+ height: 100% ;
339
339
  }
340
340
 
341
341
  .rounded {
@@ -378,15 +378,15 @@
378
378
  }
379
379
 
380
380
  .t50 {
381
- top: 50%;
381
+ top: 50% ;
382
382
  }
383
383
 
384
384
  [dir=ltr] .l50 {
385
- left: 50%;
385
+ left: 50% ;
386
386
  }
387
387
 
388
388
  [dir=rtl] .l50 {
389
- right: 50%;
389
+ right: 50% ;
390
390
  }
391
391
 
392
392
  [dir=ltr] .middle {
@@ -405,15 +405,15 @@
405
405
 
406
406
  .middleBoth {
407
407
  composes: middle;
408
- top: 50%;
408
+ top: 50% ;
409
409
  }
410
410
 
411
411
  [dir=ltr] .middleBoth {
412
- left: 50%;
412
+ left: 50% ;
413
413
  }
414
414
 
415
415
  [dir=rtl] .middleBoth {
416
- right: 50%;
416
+ right: 50% ;
417
417
  }
418
418
 
419
419
  .middleY {
@@ -466,7 +466,7 @@
466
466
  content: '';
467
467
  vertical-align: middle;
468
468
  display: inline-block;
469
- height: 100%;
469
+ height: 100% ;
470
470
  }
471
471
 
472
472
  .wbreak {
@@ -515,11 +515,11 @@
515
515
  }
516
516
 
517
517
  .fitContWidth {
518
- width: fit-content;
519
- width: -moz-fit-content;
518
+ width: fit-content ;
519
+ width: undefined ;
520
520
  }
521
521
 
522
522
  .fitContHeight {
523
- height: fit-content;
524
- height: -moz-fit-content;
523
+ height: fit-content ;
524
+ height: undefined ;
525
525
  }
@@ -40,8 +40,8 @@
40
40
  .scroll::-webkit-scrollbar-button,
41
41
  .scroll ::-webkit-scrollbar-button {
42
42
  display: none;
43
- width: 0;
44
- height: 0;
43
+ width: 0 ;
44
+ height: 0 ;
45
45
  }
46
46
  [dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
47
47
  border-left: 1px solid transparent;
@@ -5,7 +5,7 @@
5
5
  cursor: not-allowed;
6
6
  }
7
7
  .container {
8
- max-height: 120px;
8
+ max-height: var(--zd_size120) ;
9
9
  composes: oflowy from '../common/common.module.css';
10
10
  }
11
11
  .hasBorder {
@@ -41,37 +41,37 @@
41
41
  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
42
42
  }
43
43
  [dir=ltr] .container.medium {
44
- padding: 0 34px 7px 0;
44
+ padding: 0 var(--zd_size34) var(--zd_size7) 0 ;
45
45
  }
46
46
  [dir=rtl] .container.medium {
47
- padding: 0 0 7px 34px;
47
+ padding: 0 0 var(--zd_size7) var(--zd_size34) ;
48
48
  }
49
49
  .container.xmedium {
50
- min-height: 30px;
50
+ min-height: var(--zd_size30) ;
51
51
  }
52
52
  [dir=ltr] .container.xmedium {
53
- padding: 0 34px 1px 0;
53
+ padding: 0 var(--zd_size34) var(--zd_size1) 0 ;
54
54
  }
55
55
  [dir=rtl] .container.xmedium {
56
- padding: 0 0 1px 34px;
56
+ padding: 0 0 var(--zd_size1) var(--zd_size34) ;
57
57
  }
58
58
 
59
59
  .delete {
60
60
  position: absolute;
61
- bottom: 0;
61
+ bottom: 0 ;
62
62
  color: var(--zdt_advancedmultiselect_delete_text);
63
- padding-bottom: 10px;
63
+ padding-bottom: var(--zd_size10) ;
64
64
  cursor: pointer;
65
65
  background-color: var(--zdt_advancedmultiselect_delete_bg);
66
66
  border: 0;
67
67
  }
68
68
 
69
69
  [dir=ltr] .delete {
70
- right: 15px;
70
+ right: var(--zd_size15) ;
71
71
  }
72
72
 
73
73
  [dir=rtl] .delete {
74
- left: 15px;
74
+ left: var(--zd_size15) ;
75
75
  }
76
76
 
77
77
  .delete:hover {
@@ -91,25 +91,25 @@
91
91
  }
92
92
 
93
93
  .small {
94
- max-height: 200px;
94
+ max-height: var(--zd_size200) ;
95
95
  }
96
96
 
97
97
  .medium {
98
- max-height: 350px;
98
+ max-height: var(--zd_size350) ;
99
99
  }
100
100
 
101
101
  .large {
102
- max-height: 400px;
102
+ max-height: var(--zd_size400) ;
103
103
  }
104
104
 
105
105
  .dropContainer {
106
106
  display: inline-block;
107
- max-width: 100%;
108
- margin-bottom: 5px;
107
+ max-width: 100% ;
108
+ margin-bottom: var(--zd_size5) ;
109
109
  }
110
110
 
111
111
  .dropPopup {
112
- font-size: 13px;
112
+ font-size: var(--zd_font_size13) ;
113
113
  }
114
114
 
115
115
  .dropPopup :global .toggleDropIcon {
@@ -117,11 +117,11 @@
117
117
  }
118
118
 
119
119
  .more {
120
- font-size: 14px;
120
+ font-size: var(--zd_font_size14) ;
121
121
  color: var(--zdt_advancedmultiselect_more_text);
122
122
  font-family: inherit;
123
123
  cursor: pointer;
124
- margin-top: 5px;
124
+ margin-top: var(--zd_size5) ;
125
125
  background-color: var(--zdt_advancedmultiselect_delete_bg);
126
126
  border: 0;
127
127
  }
@@ -84,6 +84,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
84
84
  disabled: disabled,
85
85
  ref: ref,
86
86
  "data-id": dataId,
87
+ "data-test-id": dataId,
87
88
  onClick: onClick,
88
89
  "data-title": title
89
90
  }, children ? children : text);
@@ -4,6 +4,6 @@
4
4
  color: inherit;
5
5
  border: inherit;
6
6
  background-color: inherit;
7
- padding: 0;
7
+ padding: 0 ;
8
8
  text-align: inherit;
9
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-alpha-272",
3
+ "version": "1.0.0-alpha-274",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -31,13 +31,13 @@
31
31
  "docs": "npm run dubCheck && react-cli docs",
32
32
  "build:lib": "react-cli build:component:cmjs",
33
33
  "build:es": "react-cli build:library:es",
34
- "build": "npm run build:lib && npm run build:es && npm run cssVariableConvert",
35
- "build:local": " npm run build && npm run rtl ",
34
+ "build": "npm run build:lib && npm run build:es",
35
+ "build:local": " npm run build && npm run rtl && npm run cssVariableConvert",
36
36
  "build:watch": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
37
37
  "rtl:watch": "react-cli rtl ./src ./es -w",
38
38
  "build:css:umd": "npm run clean && npm run init && react-cli build:css:umd",
39
39
  "coverage": "react-cli coverage",
40
- "prepare": "react-cli clean assets && npm run init && npm run build && npm run rtl && npm run cssVariableConvert ",
40
+ "prepare": "npm run init && npm run build && npm run rtl && npm run cssVariableConvert ",
41
41
  "postpublish": "react-cli postpublish",
42
42
  "report": "react-cli publish:report",
43
43
  "test": "react-cli test",
@@ -81,26 +81,17 @@
81
81
  "preprocess": {
82
82
  "runner": "./preprocess/index.js"
83
83
  },
84
- "app": {
85
- "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
86
- "patterns": {
87
- "cssVariableReplacement": [
88
- "src",
89
- "lib",
90
- "es",
91
- "!node_modules"
92
- ]
93
- }
94
- },
95
84
  "css": {
96
85
  "plugins": {
97
86
  "hasRTL": true,
98
87
  "cssVariableReplacement": true
99
88
  },
100
- "exclude": {
101
- "rtl": [
102
- "@zohodesk/icons",
103
- "@zohodesk/variables"
89
+ "patterns": {
90
+ "cssVariableReplacement": [
91
+ "**/src/**",
92
+ "**/lib/**",
93
+ "**/es/**",
94
+ "!**/node_modules/**"
104
95
  ]
105
96
  },
106
97
  "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"