superdesk-ui-framework 2.4.14 → 2.4.15

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 (141) hide show
  1. package/app/index.js +1 -0
  2. package/app/scripts/modals.js +23 -9
  3. package/app/styles/_buttons.scss +17 -0
  4. package/app/styles/_modals.scss +23 -17
  5. package/app/styles/_tooltips.scss +66 -0
  6. package/app/styles/app.scss +1 -0
  7. package/app/styles/components/_sd-toaster.scss +6 -5
  8. package/app/styles/form-elements/_inputs.scss +1 -0
  9. package/app/styles/form-elements/_select-grid.scss +77 -0
  10. package/app/styles/pr-superdesk-theme.scss +3 -1
  11. package/app/styles/primereact/_pr-menu.scss +38 -0
  12. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  13. package/app/styles/variables/_colors.scss +30 -18
  14. package/app-typescript/components/Button.tsx +2 -2
  15. package/app-typescript/components/DropdownFirst.tsx +2 -2
  16. package/app-typescript/components/IconPicker.tsx +277 -0
  17. package/app-typescript/components/ListItemLoader.tsx +30 -0
  18. package/app-typescript/components/Menu.tsx +149 -0
  19. package/app-typescript/components/PropsList.tsx +2 -2
  20. package/app-typescript/components/Radio.tsx +19 -10
  21. package/app-typescript/components/SelectGrid.tsx +233 -0
  22. package/app-typescript/components/SelectWithTemplate.tsx +0 -2
  23. package/app-typescript/components/Skeleton.tsx +48 -0
  24. package/app-typescript/components/Toast.tsx +31 -5
  25. package/app-typescript/components/ToastMessage.tsx +9 -16
  26. package/app-typescript/components/ToastText.tsx +2 -4
  27. package/app-typescript/components/ToastWrapper.tsx +4 -4
  28. package/app-typescript/components/Togglebox.tsx +108 -0
  29. package/app-typescript/components/Tooltip.tsx +25 -1
  30. package/app-typescript/index.ts +8 -0
  31. package/dist/components/modals.html +180 -4
  32. package/dist/examples.bundle.css +52 -36
  33. package/dist/examples.bundle.js +5527 -2989
  34. package/dist/react/Alerts.tsx +4 -4
  35. package/dist/react/Autocomplete.tsx +17 -17
  36. package/dist/react/Badges.tsx +4 -4
  37. package/dist/react/BigIconFont.tsx +3 -3
  38. package/dist/react/ButtonGroups.tsx +6 -6
  39. package/dist/react/Buttons.tsx +11 -11
  40. package/dist/react/Carousel.tsx +15 -15
  41. package/dist/react/Checkboxs.tsx +10 -10
  42. package/dist/react/DatePicker.tsx +6 -6
  43. package/dist/react/Dropdowns.tsx +15 -15
  44. package/dist/react/EmptyStates.tsx +4 -4
  45. package/dist/react/GridItem.tsx +8 -8
  46. package/dist/react/GridList.tsx +3 -3
  47. package/dist/react/IconButtons.tsx +3 -3
  48. package/dist/react/IconFont.tsx +10 -9
  49. package/dist/react/IconLabels.tsx +4 -4
  50. package/dist/react/IconPicker.tsx +65 -0
  51. package/dist/react/Index.tsx +27 -2
  52. package/dist/react/Inputs.tsx +9 -9
  53. package/dist/react/Labels.tsx +6 -6
  54. package/dist/react/LeftNavigations.tsx +6 -6
  55. package/dist/react/ListItems.tsx +34 -0
  56. package/dist/react/Menu.tsx +159 -0
  57. package/dist/react/Modal.tsx +9 -9
  58. package/dist/react/NavButtons.tsx +7 -7
  59. package/dist/react/Popover.tsx +5 -5
  60. package/dist/react/Radios.tsx +29 -29
  61. package/dist/react/SelectGrid.tsx +121 -0
  62. package/dist/react/Selects.tsx +8 -8
  63. package/dist/react/Switch.tsx +5 -5
  64. package/dist/react/Tabs.tsx +12 -12
  65. package/dist/react/TimePicker.tsx +4 -4
  66. package/dist/react/Toasts.tsx +44 -56
  67. package/dist/react/Togglebox.tsx +51 -0
  68. package/dist/react/Tooltips.tsx +48 -4
  69. package/dist/superdesk-ui.bundle.css +3771 -94
  70. package/dist/superdesk-ui.bundle.js +4468 -2037
  71. package/dist/vendor.bundle.js +53380 -53380
  72. package/examples/pages/components/modals.html +180 -4
  73. package/examples/pages/react/Alerts.tsx +4 -4
  74. package/examples/pages/react/Autocomplete.tsx +17 -17
  75. package/examples/pages/react/Badges.tsx +4 -4
  76. package/examples/pages/react/BigIconFont.tsx +3 -3
  77. package/examples/pages/react/ButtonGroups.tsx +6 -6
  78. package/examples/pages/react/Buttons.tsx +11 -11
  79. package/examples/pages/react/Carousel.tsx +15 -15
  80. package/examples/pages/react/Checkboxs.tsx +10 -10
  81. package/examples/pages/react/DatePicker.tsx +6 -6
  82. package/examples/pages/react/Dropdowns.tsx +15 -15
  83. package/examples/pages/react/EmptyStates.tsx +4 -4
  84. package/examples/pages/react/GridItem.tsx +8 -8
  85. package/examples/pages/react/GridList.tsx +3 -3
  86. package/examples/pages/react/IconButtons.tsx +3 -3
  87. package/examples/pages/react/IconFont.tsx +10 -9
  88. package/examples/pages/react/IconLabels.tsx +4 -4
  89. package/examples/pages/react/IconPicker.tsx +65 -0
  90. package/examples/pages/react/Index.tsx +27 -2
  91. package/examples/pages/react/Inputs.tsx +9 -9
  92. package/examples/pages/react/Labels.tsx +6 -6
  93. package/examples/pages/react/LeftNavigations.tsx +6 -6
  94. package/examples/pages/react/ListItems.tsx +34 -0
  95. package/examples/pages/react/Menu.tsx +159 -0
  96. package/examples/pages/react/Modal.tsx +9 -9
  97. package/examples/pages/react/NavButtons.tsx +7 -7
  98. package/examples/pages/react/Popover.tsx +5 -5
  99. package/examples/pages/react/Radios.tsx +29 -29
  100. package/examples/pages/react/SelectGrid.tsx +121 -0
  101. package/examples/pages/react/Selects.tsx +8 -8
  102. package/examples/pages/react/Switch.tsx +5 -5
  103. package/examples/pages/react/Tabs.tsx +12 -12
  104. package/examples/pages/react/TimePicker.tsx +4 -4
  105. package/examples/pages/react/Toasts.tsx +44 -56
  106. package/examples/pages/react/Togglebox.tsx +51 -0
  107. package/examples/pages/react/Tooltips.tsx +48 -4
  108. package/package.json +2 -2
  109. package/patches/@superdesk+primereact+5.0.2-4.patch +13 -0
  110. package/react/components/Button.d.ts +1 -1
  111. package/react/components/Button.js +2 -1
  112. package/react/components/DropdownFirst.js +1 -1
  113. package/react/components/IconPicker.d.ts +24 -0
  114. package/react/components/IconPicker.js +283 -0
  115. package/react/components/ListItemLoader.d.ts +4 -0
  116. package/react/components/ListItemLoader.js +62 -0
  117. package/react/components/Menu.d.ts +59 -0
  118. package/react/components/Menu.js +92 -0
  119. package/react/components/PropsList.d.ts +1 -1
  120. package/react/components/PropsList.js +1 -1
  121. package/react/components/Radio.d.ts +8 -7
  122. package/react/components/Radio.js +1 -1
  123. package/react/components/SelectGrid.d.ts +45 -0
  124. package/react/components/SelectGrid.js +179 -0
  125. package/react/components/SelectWithTemplate.js +0 -1
  126. package/react/components/Skeleton.d.ts +30 -0
  127. package/react/components/Skeleton.js +55 -0
  128. package/react/components/Toast.d.ts +15 -0
  129. package/react/components/Toast.js +69 -0
  130. package/react/components/ToastMessage.d.ts +18 -0
  131. package/react/components/ToastMessage.js +66 -0
  132. package/react/components/ToastText.d.ts +9 -0
  133. package/react/components/ToastText.js +42 -0
  134. package/react/components/ToastWrapper.d.ts +31 -0
  135. package/react/components/ToastWrapper.js +116 -0
  136. package/react/components/Togglebox.d.ts +27 -0
  137. package/react/components/Togglebox.js +76 -0
  138. package/react/components/Tooltip.d.ts +2 -5
  139. package/react/components/Tooltip.js +48 -7
  140. package/react/index.d.ts +7 -0
  141. package/react/index.js +14 -0
package/app/index.js CHANGED
@@ -36,6 +36,7 @@ export {
36
36
  NavButton,
37
37
  Tab,
38
38
  TabList,
39
+ toasted,
39
40
  Menu,
40
41
  SubNav,
41
42
  SlidingToolbar,
@@ -4,16 +4,17 @@ sdModal.$inject = ['$document', '$rootScope'];
4
4
  function sdModal($document, $rootScope) {
5
5
  return {
6
6
  template:
7
- `<div class="modal" data-backdrop="static" data-test-id="{{testId}}">
8
- <div class="modal__dialog" ng-if="model">
9
- <div class="modal__content" ng-transclude></div>
10
- </div>
11
- </div>
12
- <div class="modal__backdrop fade in" ng-if="model"></div>`,
7
+ `<div class="modal" data-theme="{{theme}}" data-backdrop="static" data-test-id="{{testId}}">
8
+ <div class="modal__dialog" ng-if="model">
9
+ <div class="modal__content" ng-transclude></div>
10
+ </div>
11
+ </div>
12
+ <div class="modal__backdrop fade in" ng-if="model"></div>`,
13
13
  transclude: true,
14
14
  scope: {
15
15
  model: '=',
16
16
  testId: '=?',
17
+ theme: '@',
17
18
  },
18
19
  link: function (scope, element) {
19
20
  scope.testId = scope.testId || '';
@@ -30,25 +31,38 @@ function sdModal($document, $rootScope) {
30
31
  content[0].style = 'z-index: ' + (1050 + $rootScope.modals);
31
32
  content[1].style = 'z-index: ' + (1049 + $rootScope.modals);
32
33
  _initialized = true;
34
+ console.log(content);
33
35
  }
34
36
  content.show().addClass('in');
35
37
  $document.find('body').addClass('modal-open');
36
38
  $rootScope.modals++;
37
39
  } else if (initialized()) {
38
40
  content.hide().removeClass('in');
39
- $document.find('body').removeClass('modal-open');
41
+
42
+ // If multiple modals are opened,
43
+ // remove modal class only when last one is closed
44
+ if ($rootScope.modals === 1) {
45
+ $document.find('body').removeClass('modal-open');
46
+ }
47
+
40
48
  closeModal();
41
49
  }
42
50
  });
43
51
 
44
52
  var closeModal = function () {
45
53
  scope.model = false;
46
- $rootScope.modals--;
54
+
55
+ if ($rootScope.modals > 0) {
56
+ $rootScope.modals--;
57
+ }
58
+
47
59
  scope.$evalAsync();
48
60
  };
49
61
 
50
62
  $document.bind('keydown', (evt) => {
51
- if (evt.which === 27) {
63
+ evt.preventDefault();
64
+
65
+ if (evt.which === 27 && $rootScope.modals > 0) {
52
66
  closeModal();
53
67
  }
54
68
  });
@@ -811,6 +811,7 @@ $button-nav-color: currentColor;
811
811
  //------------------------------------------------------
812
812
 
813
813
  .dark-ui,
814
+ [data-theme="dark-ui"],
814
815
  [class^="--dark-ui"],
815
816
  [class*="--dark-ui"] {
816
817
  .btn.btn--ui-dark.btn--hollow.btn--active {
@@ -822,6 +823,22 @@ $button-nav-color: currentColor;
822
823
  }
823
824
  }
824
825
 
826
+ .btn:not(.btn--success):not(.btn--primary):not(.btn--alert):not(.btn--warning):not(.btn--highlight):not(.btn--sd-green):not(.btn--hollow):not(.btn--text-only) {
827
+ color: inherit;
828
+ background-color: hsla(0, 0%, 50%, 0.5);
829
+ &:hover {
830
+ background-color: hsla(0, 0%, 40%, 0.5);
831
+ }
832
+ }
833
+ .btn.btn--text-only {
834
+ &:not(.btn--success):not(.btn--primary):not(.btn--alert):not(.btn--warning):not(.btn--highlight):not(.btn--sd-green):not(.btn--hollow) {
835
+ color: inherit;
836
+ &:hover {
837
+ background-color: hsla(0, 0%, 40%, 0.5);
838
+ }
839
+ }
840
+ }
841
+
825
842
  .btn {
826
843
  &.btn--hollow {
827
844
  @include button-hollow;
@@ -24,19 +24,18 @@ $modal-x-large-width : 1000px;
24
24
  $modal-fill-width: 100%;
25
25
  $modal-fullscreen-width: 100%;
26
26
 
27
- $modal-border-radius: 4px;
28
- $modal-line-color: #e4e4e4;
27
+ $modal-border-radius: $border-radius__base--large;
28
+ $modal-line-color: var(--color-line__modal);
29
+ $modal-bg-color: var(--color-bg__modal);
29
30
 
30
31
  $modal-header-height : $nav-height;
31
32
  $modal-footer-height : 48px;
32
33
  $modal-subnav-height : $nav-height;
33
34
 
34
35
  $modal-padding : $sd-base-increment * 2;
36
+ $modal-box-shadow: 0 0 8px 2px hsla(0, 0%, 0%, 0.3);
37
+
35
38
 
36
- // Box shadow
37
- @mixin modal-box-shadow {
38
- @include box-shadow(0, 0, 8px, 2px, rgba(0, 0, 0, 0.3));
39
- }
40
39
  // Map with all modal sizes
41
40
  $modal-sizes: (
42
41
  default: $modal-base-width,
@@ -68,12 +67,12 @@ $modal-sizes: (
68
67
  margin: 0 auto;
69
68
  }
70
69
  @mixin modal-content() {
71
- background-color: $white;
70
+ background-color: $modal-bg-color;
72
71
  display: flex;
73
72
  flex-direction: column;
74
73
  margin: 10px 0;
75
- @include border-radius($modal-border-radius);
76
- @include modal-box-shadow();
74
+ border-radius: $modal-border-radius;
75
+ box-shadow: $modal-box-shadow;
77
76
  }
78
77
  @mixin modal-header() {
79
78
  padding: $modal-padding - $sd-base-increment $modal-padding;
@@ -81,7 +80,7 @@ $modal-sizes: (
81
80
  min-height: $modal-header-height;
82
81
  }
83
82
  @mixin modal-body() {
84
- background: $sd-background;
83
+ background: $modal-bg-color;
85
84
  overflow-y: auto;
86
85
  padding: $modal-padding;
87
86
  position: relative;
@@ -240,11 +239,11 @@ $modal-sizes: (
240
239
  }
241
240
  }
242
241
  // modifier, change body to white background
243
- &.modal--white {
244
- .modal__body {
245
- background: $white !important;
246
- }
247
- }
242
+ // &.modal--white {
243
+ // .modal__body {
244
+ // background: $white !important;
245
+ // }
246
+ // }
248
247
  // fix for calling a modal from another modal
249
248
  &.modal--double {
250
249
  z-index: 1060;
@@ -269,7 +268,6 @@ $modal-sizes: (
269
268
  .modal__body-header {
270
269
  height: 48px;
271
270
  width: 100%;
272
- background: $white;
273
271
  border-bottom: 1px solid $modal-line-color;
274
272
  padding: 0;
275
273
  &--add-padding {
@@ -288,7 +286,6 @@ $modal-sizes: (
288
286
  width: 100%;
289
287
  overflow-y: auto;
290
288
  padding: $modal-padding;
291
- background: $sd-background;
292
289
  min-height: 60px;
293
290
  }
294
291
  .modal__body-footer {
@@ -391,4 +388,13 @@ $modal-sizes: (
391
388
  .modal__header, .modal__body {
392
389
  @include sd-padding('3', 'left');
393
390
  }
391
+ }
392
+
393
+ .dark-ui,
394
+ [data-theme="dark-ui"] {
395
+ .modal__content {
396
+ .side-panel {
397
+ --color-bg-00: hsla(0, 0%, 14%, 1);
398
+ }
399
+ }
394
400
  }
@@ -310,8 +310,74 @@ $tooltip-dark-UI: #222;
310
310
  }
311
311
  }
312
312
 
313
+ .p-tooltip {
314
+ position:absolute;
315
+ z-index: 1000;
316
+ min-width: 3em;
317
+ max-width: 21em;
318
+ }
313
319
 
320
+ .p-tooltip.p-tooltip-right,
321
+ .p-tooltip.p-tooltip-left {
322
+ padding: 0 5px;
323
+ }
314
324
 
325
+ .p-tooltip.p-tooltip-top,
326
+ .p-tooltip.p-tooltip-bottom {
327
+ padding: 5px 0;
328
+ }
315
329
 
330
+ .p-tooltip .p-tooltip-text {
331
+ white-space: pre-line;
332
+ min-width: 3em;
333
+ max-width: 21em;
334
+ white-space: nowrap;
335
+ overflow: hidden;
336
+ text-overflow: ellipsis;
337
+ padding: 0.8rem 1.2rem 0.9rem;
338
+ border-radius: 2px;
339
+ background: #333;
340
+ color: #fff;
341
+ font-weight: 400;
342
+ }
316
343
 
344
+ .p-tooltip-arrow {
345
+ border: 10px solid transparent;
346
+ z-index: 1001;
347
+ text-transform: none;
348
+ font-size: 1.2rem;
349
+ line-height: 1;
350
+ user-select: none;
351
+ pointer-events: none;
352
+ position: absolute;
353
+ width: 5px;
354
+ height: 5px;
355
+ }
317
356
 
357
+ .p-tooltip-top .p-tooltip-arrow {
358
+ bottom: 0;
359
+ left: 50%;
360
+ border-bottom-width: 0;
361
+ border-top-color: #333;
362
+ }
363
+
364
+ .p-tooltip-bottom .p-tooltip-arrow {
365
+ top: 0;
366
+ left: 50%;
367
+ border-top-width: 0;
368
+ border-bottom-color: #333;
369
+ }
370
+
371
+ .p-tooltip-right .p-tooltip-arrow {
372
+ top: 50%;
373
+ left: 0;
374
+ border-left-width: 0;
375
+ border-right-color: #333;
376
+ }
377
+
378
+ .p-tooltip-left .p-tooltip-arrow {
379
+ top: 50%;
380
+ right: 0;
381
+ border-right-width: 0;
382
+ border-left-color: #333;
383
+ }
@@ -73,6 +73,7 @@
73
73
  @import 'form-elements/checkbox';
74
74
  @import 'form-elements/radio';
75
75
  @import 'form-elements/autocomplete';
76
+ @import 'form-elements/select-grid';
76
77
 
77
78
  // Menus
78
79
  @import 'menus/sd-sidebar-menu';
@@ -4,6 +4,8 @@ $sd-toast-max-width: 56rem !default;
4
4
  $sd-toast-margin: 2rem !default;
5
5
 
6
6
  $toast-palette: $sd-basic-palette;
7
+ $sd-toast-position-top: 5.6rem;
8
+ $sd-toast-z-index: 9999;
7
9
 
8
10
  $toast-sizes: (
9
11
  fixed-s: 32rem,
@@ -12,7 +14,6 @@ $toast-sizes: (
12
14
  fixed-xl: 56rem,
13
15
  );
14
16
 
15
-
16
17
  .sd-toast__container {
17
18
  display: flex!important;
18
19
  flex-direction: column;
@@ -20,21 +21,21 @@ $toast-sizes: (
20
21
  position: fixed;
21
22
  right: 0;
22
23
  left: 0;
23
- z-index: 40;
24
+ z-index: $sd-toast-z-index;
24
25
  overflow: hidden;
25
26
  padding: 0 20px 20px;
26
27
  pointer-events: none;
27
28
  &.sd-toast__container--top {
28
- top: 0;
29
+ top: $sd-toast-position-top;
29
30
  bottom: auto;
30
31
  }
31
32
  &.sd-toast__container--top-left {
32
- top: 0;
33
+ top: $sd-toast-position-top;
33
34
  bottom: auto;
34
35
  align-items: flex-start;
35
36
  }
36
37
  &.sd-toast__container--top-right {
37
- top: 0;
38
+ top: $sd-toast-position-top;
38
39
  bottom: auto;
39
40
  align-items: flex-end;
40
41
  }
@@ -777,6 +777,7 @@
777
777
  color:inherit;
778
778
  font-size: 1.4rem;
779
779
  line-height: 2rem;
780
+ background-color: var(--color-bg__select-option);
780
781
  }
781
782
  }
782
783
  cursor: pointer;
@@ -0,0 +1,77 @@
1
+ .select-grid__overlay-panel {
2
+ z-index: 1500 !important;
3
+ margin-top: 1px;
4
+ }
5
+
6
+ .select-grid__panel {
7
+ width: 450px;
8
+ max-height: 550px;
9
+ background-color: var(--color-bg-00);
10
+ display: flex;
11
+ flex-direction: column;
12
+ }
13
+
14
+ .select-grid__header {
15
+ padding: 1rem;
16
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
17
+ }
18
+
19
+ .select-grid__body {
20
+ overflow-y: auto;
21
+ margin: 0;
22
+ padding: 1rem;
23
+ position: relative;
24
+ }
25
+
26
+ .select-grid__item {
27
+ display: flex;
28
+ flex-direction: column;
29
+ align-items: center;
30
+ color: $sd-text;
31
+
32
+ &:hover, &:focus {
33
+ color: $sd-blue;
34
+ cursor: pointer;
35
+
36
+ i {
37
+ color: $sd-blue;
38
+ }
39
+ }
40
+
41
+ &:hover {
42
+ background: $sd-colour-background__menu-item--hover;
43
+ }
44
+
45
+ &:focus {
46
+ outline: 2px solid $sd-colour-interactive__base;
47
+ outline-offset: -2px;
48
+ }
49
+ }
50
+
51
+ .sd-input--grid-select {
52
+ .btn {
53
+ grid-row: 2/3;
54
+ grid-column: 2/4;
55
+ background-color: var(--color-input-bg);
56
+ border-bottom: 1px solid var(--color-input-border);
57
+ width: 3.2rem;
58
+ }
59
+
60
+ .btn:hover {
61
+ background-color: var(--color-input-bg--hover);
62
+ border-color: var(--color-input-border-hover);
63
+ }
64
+
65
+ .btn:focus {
66
+ background-color: var(--color-input-bg--focus);
67
+ box-shadow: 0 1px 0 0 $sd-blue;
68
+ }
69
+ }
70
+
71
+ .form__item--auto-width {
72
+ .sd-input--grid-select {
73
+ .btn {
74
+ margin-top: 0;
75
+ }
76
+ }
77
+ }
@@ -2,4 +2,6 @@
2
2
  @import 'primereact/pr-autocomplete.scss';
3
3
  @import 'primereact/pr-dropdown.scss';
4
4
  @import 'primereact/pr-datepicker.scss';
5
- @import 'primereact/pr-dialog.scss';
5
+ @import 'primereact/pr-dialog.scss';
6
+ @import 'primereact/pr-menu.scss';
7
+ @import 'primereact/pr-skeleton.scss';
@@ -0,0 +1,38 @@
1
+ .p-tieredmenu {
2
+ &, .p-submenu-list {
3
+ padding-top: 0.4rem;
4
+ padding-bottom: 0.4rem;
5
+ background: $white;
6
+ box-shadow: 0 3px 7px rgba(0,0,0,0.3);
7
+ }
8
+ }
9
+
10
+ .p-menuitem-text {
11
+ font-size: 1.2rem;
12
+ }
13
+
14
+ .p-menu-separator {
15
+ width: 100%;
16
+ height: 1px;
17
+ background: #e5e5e5;
18
+ }
19
+
20
+ .p-menuitem-link {
21
+ padding: .8rem 1.6rem;
22
+ min-width: 100px;
23
+ font-size: 14px;
24
+ color: $sd-text;
25
+
26
+ &:hover {
27
+ background: $sd-colour-background__menu-item--hover;
28
+ }
29
+
30
+ &:focus {
31
+ outline: 2px solid $sd-colour-interactive__base;
32
+ outline-offset: -2px;
33
+ }
34
+ }
35
+
36
+ .p-menuitem-icon {
37
+ margin-right: 0.8rem;
38
+ }
@@ -0,0 +1,35 @@
1
+ .p-skeleton {
2
+ position: relative;
3
+ overflow: hidden;
4
+ background-color: #e9ecef;
5
+ }
6
+
7
+ .p-skeleton::after {
8
+ content: "";
9
+ animation: p-skeleton-animation 1.2s infinite;
10
+ height: 100%;
11
+ left: 0;
12
+ position: absolute;
13
+ right: 0;
14
+ top: 0;
15
+ transform: translateX(-100%);
16
+ z-index: 1;
17
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
18
+ }
19
+
20
+ .p-skeleton-circle {
21
+ border-radius: 50%;
22
+ }
23
+
24
+ .p-skeleton-none::after {
25
+ animation: none;
26
+ }
27
+
28
+ @keyframes p-skeleton-animation {
29
+ from {
30
+ transform: translateX(-100%);
31
+ }
32
+ to {
33
+ transform: translateX(100%);
34
+ }
35
+ }
@@ -269,11 +269,11 @@ $baseColors: (
269
269
  --color-selected-bg: #eaf2f5;
270
270
  --color-selected-bg--hover: #dfebf0;
271
271
 
272
- --color-bg-00: #ffffff;
273
- --color-bg-50: #f8f8f8;
274
- --color-bg-100: #ededed;
275
- --color-bg-150: #dfdfdf;
276
- --color-bg-200: #a1a1a1;
272
+ --color-bg-00: hsl(0, 0%, 100%);
273
+ --color-bg-50: hsl(0, 0%, 97%);
274
+ --color-bg-100: hsl(0, 0%, 93%);
275
+ --color-bg-150: hsl(0, 0%, 87%);
276
+ --color-bg-200: hsl(0, 0%, 63%);
277
277
 
278
278
  --color-bg-800: #2c2c2c;
279
279
 
@@ -283,14 +283,19 @@ $baseColors: (
283
283
  --color-inset-search-border: rgba(0,0,0,.20);
284
284
  --color-inset-search-border-hover: rgba(0,0,0,.35);
285
285
 
286
- --color-assignment-to-do: #c4170b; //red--700
287
- --color-assignment-progress: #d17d00; //orange--600
288
- --color-assignment-completed: #74a838; //light-green--600
286
+ --color-assignment-to-do: #c4170b; //red--700
287
+ --color-assignment-progress: #d17d00; //orange--600
288
+ --color-assignment-completed: #74a838; //light-green--600
289
289
 
290
- --color-grid-item-Bg: #fff;
290
+ --color-grid-item-Bg: hsl(0, 0%, 100%);
291
291
 
292
- --color-dropdown-menu-Bg: rgb(255,255,255);
293
- --color-dropdown-menu-text: rgb(51, 51, 51);
292
+ --color-dropdown-menu-Bg: rgb(255,255,255);
293
+ --color-dropdown-menu-text: rgb(51, 51, 51);
294
+
295
+ --color-bg__modal: hsla(0, 0%, 100%, 1);
296
+ --color-line__modal: hsla(0, 0%, 90%);
297
+
298
+ --color-bg__select-option: hsla(0, 0%, 100%, 1);
294
299
  }
295
300
 
296
301
  // CSS variables for dark theme
@@ -311,8 +316,8 @@ $baseColors: (
311
316
  --color-text: rgb(244, 244, 244);
312
317
  --color-text-light: rgba(244, 244, 244,0.75);
313
318
 
314
- --color-contrast-bg: #333;
315
- --color-contrast-bg--hover: #383838;
319
+ --color-contrast-bg: hsl(0, 0%, 20%);
320
+ --color-contrast-bg--hover: hsl(0, 0%, 22%);
316
321
 
317
322
  --color-selected-bg: #35393b;
318
323
  --color-selected-bg--hover: #3b4246;
@@ -327,7 +332,7 @@ $baseColors: (
327
332
 
328
333
  --color-kanban-border: #8e8e8e;
329
334
 
330
- --color-inset-search-bg: rgba(0,0,0,0.2);
335
+ --color-inset-search-bg: rgba(0,0,0,0.2);
331
336
  --color-inset-search-border: rgba(255,255,255,0.35);
332
337
  --color-inset-search-border-hover: rgba(255,255,255,0.55);
333
338
 
@@ -335,13 +340,20 @@ $baseColors: (
335
340
  [class*=" big-icon--"] {
336
341
  color: $white;
337
342
  }
338
- --color-grid-item-Bg: #272727;
343
+ --color-grid-item-Bg: hsl(0, 0%, 15%);
344
+
345
+ --color-bg__modal: hsla(0, 0%, 20%);
346
+ --color-line__modal: hsla(0, 0%, 25%);
347
+
348
+ --color-bg__select-option: hsla(0, 0%, 20%, 1);
339
349
  }
340
350
 
341
351
  [class^="--dark-ui"],
342
- [class*="--dark-ui"] {
343
- --color-contrast-bg: #333;
344
- --color-contrast-bg--hover: #383838;
352
+ [class*="--dark-ui"],
353
+ .dark-ui {
354
+ --color-contrast-bg: hsl(0, 0%, 20%);
355
+ --color-contrast-bg--hover: hsl(0, 0%, 22%);
356
+ --color-bg__select-option: hsla(0, 0%, 20%, 1);
345
357
  }
346
358
 
347
359
  [data-theme="accessible-light-ui"] {
@@ -11,7 +11,7 @@ interface IButtonBase {
11
11
  icon?: string;
12
12
  disabled?: boolean;
13
13
  iconOnly?: boolean;
14
- onClick(): void;
14
+ onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
15
15
  'data-test-id'?: string;
16
16
  }
17
17
 
@@ -40,7 +40,7 @@ export class Button extends React.PureComponent<IPropsButton> {
40
40
  id={this.props.id}
41
41
  className={classes}
42
42
  tabIndex={0}
43
- onClick={this.props.disabled ? () => false : this.props.onClick}
43
+ onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
44
44
  aria-label={this.props.iconOnly ? this.props.text : ''}
45
45
  data-test-id={this.props['data-test-id']}>
46
46
  {this.props.icon ? <Icon name={this.props.icon} /> : null}
@@ -43,7 +43,7 @@ export const DropdownFirst = ({
43
43
  const [open, setOpen] = React.useState(false);
44
44
  const [height, setHeight] = React.useState(false);
45
45
  const ref = React.useRef(null);
46
- let inDebounce: NodeJS.Timeout;
46
+ let inDebounce: number;
47
47
 
48
48
  function calculate() {
49
49
  let number = getDimensions(ref.current);
@@ -61,7 +61,7 @@ export const DropdownFirst = ({
61
61
  return function() {
62
62
  const context = children;
63
63
  clearTimeout(inDebounce);
64
- inDebounce = setTimeout(() => calculate.apply(context), delay);
64
+ inDebounce = window.setTimeout(() => calculate.apply(context), delay);
65
65
  };
66
66
  };
67
67