@geotab/zenith 3.14.0-beta.1 → 3.14.0-beta.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.
Files changed (20) hide show
  1. package/README.md +2 -3
  2. package/dist/commonStyles/caption/caption.less +5 -3
  3. package/dist/commonStyles/colors/colors.less +19 -4
  4. package/dist/commonStyles/columnsList.less +0 -1
  5. package/dist/commonStyles/common.less +2 -1
  6. package/dist/commonStyles/ellipsis.less +1 -1
  7. package/dist/commonStyles/fonts/roboto.less +7 -7
  8. package/dist/commonStyles/link/link.less +1 -1
  9. package/dist/commonStyles/notSelectable.less +4 -0
  10. package/dist/commonStyles/pillStyles/pillContent.less +2 -6
  11. package/dist/commonStyles/pillStyles/pillStyles.less +1 -1
  12. package/dist/commonStyles/pillStyles/pillTextContent.less +0 -3
  13. package/dist/commonStyles/pillStyles/pillTypes.less +0 -10
  14. package/dist/commonStyles/rangeFieldMixin.less +6 -3
  15. package/dist/commonStyles/shadows/shadows.less +3 -3
  16. package/dist/commonStyles/typography/typography.less +4 -4
  17. package/dist/index.css +476 -372
  18. package/dist/table/table.js +7 -5
  19. package/esm/table/table.js +7 -5
  20. package/package.json +1 -10
package/README.md CHANGED
@@ -53,9 +53,8 @@ Markdown reference for each component (used by AI tooling and IRIS) lives in [`d
53
53
 
54
54
  - Add `prefix` prop to `Summary` component for mixed-color value styling
55
55
  - Add logical alignment support to `Tooltip` for correct RTL popup direction
56
- - Remove hardcoded 400px minimum height from `Table` component
57
- - Migrate remaining LESS files to CSS logical properties for RTL support
58
- - Apply Tech Content-reviewed copy updates to component strings and translations
56
+ - Tooltip/Popup alignment updates for RTL support
57
+ - Updated translations
59
58
  - Fix `DataFeed` calling `onFeedEnd` repeatedly — now fires once per approach
60
59
  - Fix RTL scroll navigation direction in `Tabs`, `FiltersBar`, and `SummaryTileBar`
61
60
  - Fix nested `Menu` submenu opening on the wrong side in RTL
package/dist/commonStyles/caption/caption.less CHANGED
@@ -1,5 +1,6 @@
1
1
  .zen-caption {
2
2
  @button-line-height: 16px;
3
+
3
4
  display: inline-flex;
4
5
  align-items: center;
5
6
  overflow: hidden;
@@ -9,7 +10,7 @@
9
10
  justify-content: center;
10
11
 
11
12
  .zen-caption__content {
12
- margin-inline-end: 0;
13
+ margin-right: 0;
13
14
  }
14
15
  }
15
16
 
@@ -21,7 +22,8 @@
21
22
  line-height: @button-line-height;
22
23
  font-weight: 400;
23
24
  white-space: nowrap;
24
- margin-inline: 0 auto;
25
+ margin-left: 0;
26
+ margin-right: auto;
25
27
  }
26
28
 
27
29
  &--hidden {
@@ -31,7 +33,7 @@
31
33
  &--wrapped {
32
34
  .zen-caption__content {
33
35
  white-space: normal;
34
- overflow-wrap: break-word;
36
+ word-wrap: break-word;
35
37
  }
36
38
  }
37
39
  }
package/dist/commonStyles/colors/colors.less CHANGED
@@ -7,11 +7,11 @@
7
7
  --text-nav-highlight: #0069bf;
8
8
  --text-error-message: #c51a11;
9
9
  --text-button-disabled: #c0ccd8;
10
- --text-reverse-primary: #fff;
10
+ --text-reverse-primary: #ffffff;
11
11
  --text-reverse-primary-button: var(--text-reverse-primary);
12
12
 
13
13
  // backgrounds
14
- --backgrounds-main: #fff;
14
+ --backgrounds-main: #ffffff;
15
15
  --backgrounds-content-0: #f9fafb;
16
16
  --backgrounds-content-1: #f2f5f7;
17
17
  --backgrounds-content-2: #d9e1e8;
@@ -36,22 +36,28 @@
36
36
  --action-primary--default: #0078d3;
37
37
  --action-primary--hover: #005aa8;
38
38
  --action-primary--active: #004080;
39
+
39
40
  --action-secondary--default: #4e677e;
40
41
  --action-secondary--hover: #3e5265;
41
42
  --action-secondary--active: #2f3d4c;
43
+
42
44
  --action-destructive--default: #c51a11;
43
45
  --action-destructive--hover: #b11810;
44
46
  --action-destructive--active: #a01f0e;
47
+
45
48
  --action-tertiary--hover: #e6ebef;
46
49
  --action-tertiary--active: #3e5265;
47
50
 
48
51
  // accents
49
52
  --accents-warning--main: #fef7ed;
50
53
  --accents-warning--detail: #59480d;
54
+
51
55
  --accents-error--main: #ffeceb;
52
56
  --accents-error--detail: #a01f0e;
57
+
53
58
  --accents-success--main: #edfef2;
54
59
  --accents-success--detail: #2b6436;
60
+
55
61
  --accents-general--main: #ebf6ff;
56
62
  --accents-general--detail: #25477b;
57
63
 
@@ -59,11 +65,13 @@
59
65
  --chart-sequential-green-1: #4aa75e;
60
66
  --chart-divergent-red-blue-3: #b72931;
61
67
  --chart-sequential-blue-5: #0c74c3;
68
+
62
69
  --duty-status-workday: #faad41;
63
70
  --duty-status-cycle: #c0c1c6;
64
71
  --duty-status-rest: #fe6867;
65
72
  --duty-status-drive: #49c649;
66
73
  --duty-status-exemption: #4e677e;
74
+
67
75
  --data--categorical-light-blue: #3ccde5;
68
76
  --data--categorical-blue: #428aff;
69
77
  --data--categorical-purple: #8256e5;
@@ -76,7 +84,7 @@
76
84
 
77
85
  .zen-dark {
78
86
  // text
79
- --text-primary: #fff;
87
+ --text-primary: #ffffff;
80
88
  --text-secondary: #c0ccd8;
81
89
  --text-placeholder: #a6b8c9;
82
90
  --text-hyperlink: #ebf6ff;
@@ -96,7 +104,7 @@
96
104
  --backgrounds-overlay: rgba(31, 40, 51, 0.4);
97
105
  --backgrounds-primary-brand: #4cb2ff;
98
106
  --backgrounds-reverse-2: #5282cb;
99
- --backgrounds-reverse-1: #fff;
107
+ --backgrounds-reverse-1: #ffffff;
100
108
  --backgrounds-reverse-0: #f2f5f7;
101
109
 
102
110
  // borders
@@ -111,22 +119,28 @@
111
119
  --action-primary--default: #4cb2ff;
112
120
  --action-primary--hover: #9ed5ff;
113
121
  --action-primary--active: #ebf6ff;
122
+
114
123
  --action-secondary--default: #e6ebef;
115
124
  --action-secondary--hover: #f2f5f7;
116
125
  --action-secondary--active: #f9fafb;
126
+
117
127
  --action-destructive--default: #f7a1a2;
118
128
  --action-destructive--hover: #fac7c7;
119
129
  --action-destructive--active: #ffeceb;
130
+
120
131
  --action-tertiary--hover: rgba(31, 40, 51, 0.07);
121
132
  --action-tertiary--active: rgba(31, 40, 51, 0.14);
122
133
 
123
134
  // accents
124
135
  --accents-warning--main: #a17a18;
125
136
  --accents-warning--detail: #fef7ed;
137
+
126
138
  --accents-error--main: #c51a11;
127
139
  --accents-error--detail: #ffeceb;
140
+
128
141
  --accents-success--main: #46af55;
129
142
  --accents-success--detail: #edfef2;
143
+
130
144
  --accents-general--main: #396dbc;
131
145
  --accents-general--detail: #eff4fa;
132
146
 
@@ -134,6 +148,7 @@
134
148
  --chart-sequential-green-1: #4aa75e;
135
149
  --chart-divergent-red-blue-3: #b72931;
136
150
  --chart-sequential-blue-5: #0c74c3;
151
+
137
152
  --duty-status-workday: #59480d;
138
153
  --duty-status-cycle: #3e5265;
139
154
  --duty-status-rest: #a01f0e;
package/dist/commonStyles/columnsList.less CHANGED
@@ -36,7 +36,6 @@
36
36
  padding: (2 / @rem) (8 / @rem);
37
37
  display: flex;
38
38
  justify-content: flex-end;
39
-
40
39
  .zen-columns-list__reset:focus {
41
40
  outline: none;
42
41
  border: 1px solid var(--borders-form-field--active);
package/dist/commonStyles/common.less CHANGED
@@ -9,6 +9,7 @@
9
9
  @rem: 16rem;
10
10
 
11
11
  @import "typography/typography.less";
12
+
12
13
  @import "colors/colors.less";
13
14
  @import "caption/caption.less";
14
15
  @import "ellipsis.less";
@@ -38,6 +39,7 @@
38
39
  }
39
40
 
40
41
  .zen-visually-hidden {
42
+ clip: rect(0 0 0 0);
41
43
  clip-path: inset(50%);
42
44
  height: 1px;
43
45
  overflow: hidden;
@@ -49,7 +51,6 @@
49
51
  // Styles reset
50
52
  .box-sizing() {
51
53
  box-sizing: border-box;
52
-
53
54
  * {
54
55
  box-sizing: border-box;
55
56
  }
package/dist/commonStyles/ellipsis.less CHANGED
@@ -2,5 +2,5 @@
2
2
  overflow: hidden;
3
3
  text-overflow: ellipsis;
4
4
  white-space: nowrap;
5
- overflow-wrap: normal;
5
+ word-wrap: normal;
6
6
  }
package/dist/commonStyles/fonts/roboto.less CHANGED
@@ -1,5 +1,5 @@
1
1
  @font-face {
2
- font-family: Roboto;
2
+ font-family: "Roboto";
3
3
  font-style: normal;
4
4
  font-weight: 300;
5
5
  src:
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  @font-face {
11
- font-family: Roboto;
11
+ font-family: "Roboto";
12
12
  font-style: normal;
13
13
  font-weight: 400;
14
14
  src:
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  @font-face {
20
- font-family: Roboto;
20
+ font-family: "Roboto";
21
21
  font-style: normal;
22
22
  font-weight: 500;
23
23
  src:
@@ -26,7 +26,7 @@
26
26
  }
27
27
 
28
28
  @font-face {
29
- font-family: Roboto;
29
+ font-family: "Roboto";
30
30
  font-style: normal;
31
31
  font-weight: 700;
32
32
  src:
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  @font-face {
38
- font-family: Roboto;
38
+ font-family: "Roboto";
39
39
  font-style: italic;
40
40
  font-weight: 300;
41
41
  src:
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  @font-face {
47
- font-family: Roboto;
47
+ font-family: "Roboto";
48
48
  font-style: italic;
49
49
  font-weight: 400;
50
50
  src:
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  @font-face {
56
- font-family: Roboto;
56
+ font-family: "Roboto";
57
57
  font-style: italic;
58
58
  font-weight: 700;
59
59
  src:
package/dist/commonStyles/link/link.less CHANGED
@@ -7,7 +7,7 @@
7
7
  cursor: pointer;
8
8
  background: none;
9
9
  border: none;
10
- overflow-wrap: break-word;
10
+ word-wrap: break-word;
11
11
 
12
12
  &:hover,
13
13
  &:focus,
package/dist/commonStyles/notSelectable.less CHANGED
@@ -1,4 +1,8 @@
1
1
  .zen-not-selectable {
2
2
  -webkit-touch-callout: none;
3
+ -webkit-user-select: none;
4
+ -khtml-user-select: none;
5
+ -moz-user-select: none;
6
+ -ms-user-select: none;
3
7
  user-select: none;
4
8
  }
package/dist/commonStyles/pillStyles/pillContent.less CHANGED
@@ -10,12 +10,14 @@
10
10
  @pill-height--mobile: 34px;
11
11
 
12
12
  .zen-body-s-400();
13
+ display: flex;
13
14
  align-items: center;
14
15
  justify-content: space-between;
15
16
  border-radius: (30 / @rem);
16
17
  height: @pill-height;
17
18
  display: grid;
18
19
  grid-auto-flow: column;
20
+
19
21
  gap: (8 / @rem);
20
22
 
21
23
  &--icon-left {
@@ -42,11 +44,9 @@
42
44
  &--hidden {
43
45
  gap: (4 / @rem);
44
46
  }
45
-
46
47
  &.zen-pill-new-content--drive,
47
48
  &.zen-pill-new-content--drive-tablet {
48
49
  height: @pill-height--drive;
49
-
50
50
  .zen-pill-non-actionable__icon {
51
51
  min-width: (16 / @rem);
52
52
  max-width: 16px;
@@ -70,11 +70,9 @@
70
70
  }
71
71
  }
72
72
  }
73
-
74
73
  &.zen-pill-new-content--mobile {
75
74
  height: @pill-height--mobile;
76
75
  .zen-body-m-400-short();
77
-
78
76
  .zen-pill-non-actionable__icon {
79
77
  min-width: (16 / @rem);
80
78
  max-width: 16px;
@@ -98,11 +96,9 @@
98
96
  }
99
97
  }
100
98
  }
101
-
102
99
  &.zen-pill-new-content--drive {
103
100
  .zen-body-s-400-drive();
104
101
  }
105
-
106
102
  &.zen-pill-new-content--drive-tablet {
107
103
  .zen-body-s-400-drive();
108
104
  }
package/dist/commonStyles/pillStyles/pillStyles.less CHANGED
@@ -6,7 +6,7 @@
6
6
  color: var(--text-primary);
7
7
  align-items: center;
8
8
  justify-content: space-between;
9
- padding: (4 / @rem) (12 / @rem);
9
+ padding: (4 / @rem) (12 / @rem) (4 / @rem) (12 / @rem);
10
10
  border-radius: (30 / @rem);
11
11
  background: var(--backgrounds-content-1);
12
12
  }
package/dist/commonStyles/pillStyles/pillTextContent.less CHANGED
@@ -7,16 +7,13 @@
7
7
  &--hidden {
8
8
  visibility: hidden;
9
9
  }
10
-
11
10
  &.zen-pill-text-content--drive,
12
11
  &.zen-pill-text-content--drive-tablet {
13
12
  height: 20px;
14
13
  }
15
-
16
14
  &.zen-pill-text-content--drive {
17
15
  .zen-body-s-400-drive();
18
16
  }
19
-
20
17
  &.zen-pill-text-content--drive-tablet {
21
18
  .zen-body-s-400-drive();
22
19
  }
package/dist/commonStyles/pillStyles/pillTypes.less CHANGED
@@ -5,10 +5,8 @@
5
5
  background: var(--backgrounds-content-1);
6
6
  color: var(--text-primary);
7
7
  fill: var(--text-primary);
8
-
9
8
  .zen-pill-non-actionable__close-button {
10
9
  fill: var(--text-primary);
11
-
12
10
  &:active .zen-pill-non-actionable__close-icon,
13
11
  &:hover .zen-pill-non-actionable__close-icon,
14
12
  &:focus .zen-pill-non-actionable__close-icon {
@@ -23,10 +21,8 @@
23
21
  color: var(--accents-success--detail);
24
22
  background-color: var(--accents-success--main);
25
23
  fill: var(--accents-success--detail);
26
-
27
24
  .zen-pill-non-actionable__close-button {
28
25
  fill: var(--accents-success--detail);
29
-
30
26
  &:active .zen-pill-non-actionable__close-icon,
31
27
  &:hover .zen-pill-non-actionable__close-icon,
32
28
  &:focus .zen-pill-non-actionable__close-icon {
@@ -41,10 +37,8 @@
41
37
  background-color: var(--accents-error--main);
42
38
  color: var(--accents-error--detail);
43
39
  fill: var(--accents-error--detail);
44
-
45
40
  .zen-pill-non-actionable__close-button {
46
41
  fill: var(--accents-error--detail);
47
-
48
42
  &:active .zen-pill-non-actionable__close-icon,
49
43
  &:hover .zen-pill-non-actionable__close-icon,
50
44
  &:focus .zen-pill-non-actionable__close-icon {
@@ -59,10 +53,8 @@
59
53
  background-color: var(--accents-warning--main);
60
54
  color: var(--accents-warning--detail);
61
55
  fill: var(--accents-warning--detail);
62
-
63
56
  .zen-pill-non-actionable__close-button {
64
57
  fill: var(--accents-warning--detail);
65
-
66
58
  &:active .zen-pill-non-actionable__close-icon,
67
59
  &:hover .zen-pill-non-actionable__close-icon,
68
60
  &:focus .zen-pill-non-actionable__close-icon {
@@ -77,10 +69,8 @@
77
69
  background-color: var(--accents-general--main);
78
70
  color: var(--accents-general--detail);
79
71
  fill: var(--accents-general--detail);
80
-
81
72
  .zen-pill-non-actionable__close-button {
82
73
  fill: var(--accents-general--detail);
83
-
84
74
  &:active .zen-pill-non-actionable__close-icon,
85
75
  &:hover .zen-pill-non-actionable__close-icon,
86
76
  &:focus .zen-pill-non-actionable__close-icon {
package/dist/commonStyles/rangeFieldMixin.less CHANGED
@@ -3,12 +3,14 @@
3
3
  grid-template-columns: minmax(min-content, auto) minmax(auto, 168px) minmax(0, auto);
4
4
  grid-template-rows: auto auto;
5
5
  gap: (4 / @rem) (8 / @rem);
6
- place-items: center start;
6
+ align-items: center;
7
+ justify-items: start;
7
8
  }
8
9
 
9
10
  .zen-range-field-wrapper-row {
10
11
  display: grid;
11
- place-items: center start;
12
+ align-items: center;
13
+ justify-items: start;
12
14
  grid-template-columns:
13
15
  minmax((24 / @rem), (32 / @rem))
14
16
  minmax((64 / @rem), (64 / @rem))
@@ -16,5 +18,6 @@
16
18
  minmax((24 / @rem), (32 / @rem))
17
19
  minmax((64 / @rem), (64 / @rem))
18
20
  minmax((24 / @rem), (32 / @rem));
19
- gap: (4 / @rem) (8 / @rem);
21
+ row-gap: (4 / @rem);
22
+ column-gap: (8 / @rem);
20
23
  }
package/dist/commonStyles/shadows/shadows.less CHANGED
@@ -1,11 +1,11 @@
1
1
  .zen-shadow-dropdown-default {
2
- box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
2
+ box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
3
3
  }
4
4
 
5
5
  .zen-card-shadow {
6
- box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
6
+ box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
7
7
  }
8
8
 
9
9
  .zen-chip-shadow {
10
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
10
+ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
11
11
  }
package/dist/commonStyles/typography/typography.less CHANGED
@@ -548,10 +548,10 @@
548
548
  }
549
549
 
550
550
  :root {
551
- --main-font: roboto, "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
552
- --main-font-data: "Roboto Mono", "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
553
- --data-font-drive: "Roboto Mono", "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
554
- --arabic-font-family: "Noto Sans Arabic", roboto, "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
551
+ --main-font: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
552
+ --main-font-data: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
553
+ --data-font-drive: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
554
+ --arabic-font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
555
555
  }
556
556
 
557
557
  // Labels