@innovaccer/design-system 4.11.2 → 4.13.0

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 (50) hide show
  1. package/CHANGELOG.md +101 -0
  2. package/css/dist/index.css +209 -26
  3. package/css/dist/index.css.map +1 -1
  4. package/css/src/components/button.module.css +2 -0
  5. package/css/src/components/chip.module.css +10 -2
  6. package/css/src/components/chipInput.module.css +36 -8
  7. package/css/src/components/editableInput.module.css +7 -2
  8. package/css/src/components/input.module.css +8 -0
  9. package/css/src/components/label.module.css +7 -0
  10. package/css/src/components/link.module.css +1 -0
  11. package/css/src/components/menu.module.css +7 -0
  12. package/css/src/components/message.module.css +30 -2
  13. package/css/src/components/metricInput.module.css +66 -9
  14. package/css/src/components/select.module.css +22 -1
  15. package/css/src/components/statusHint.module.css +1 -2
  16. package/css/src/components/textarea.module.css +6 -0
  17. package/css/src/components/tooltip.module.css +4 -0
  18. package/dist/brotli/index.js +1 -1
  19. package/dist/brotli/index.js.br +0 -0
  20. package/dist/cjs/index.js +1 -1
  21. package/dist/core/common.type.d.ts +1 -0
  22. package/dist/core/components/atoms/_chip/index.d.ts +2 -1
  23. package/dist/core/components/atoms/badge/Badge.d.ts +2 -2
  24. package/dist/core/components/atoms/chip/Chip.d.ts +2 -0
  25. package/dist/core/components/atoms/label/Label.d.ts +2 -0
  26. package/dist/core/components/atoms/message/Message.d.ts +2 -0
  27. package/dist/core/components/atoms/metricInput/MetricInput.d.ts +1 -1
  28. package/dist/core/components/atoms/statusHint/StatusHint.d.ts +2 -0
  29. package/dist/core/components/atoms/textarea/Textarea.d.ts +2 -0
  30. package/dist/core/components/molecules/chipInput/ChipInput.d.ts +2 -0
  31. package/dist/core/components/molecules/editableChipInput/EditableChipInput.d.ts +2 -0
  32. package/dist/core/components/molecules/tooltip/Tooltip.d.ts +2 -0
  33. package/dist/core/components/organisms/grid/Cell.d.ts +7 -2
  34. package/dist/core/components/organisms/grid/Grid.d.ts +3 -0
  35. package/dist/core/components/organisms/grid/GridContext.d.ts +2 -0
  36. package/dist/core/components/organisms/grid/utility.d.ts +1 -0
  37. package/dist/core/components/organisms/menu/MenuList.d.ts +3 -0
  38. package/dist/core/components/organisms/select/SelectContext.d.ts +2 -1
  39. package/dist/core/components/organisms/table/Header.d.ts +2 -0
  40. package/dist/core/components/organisms/verticalNav/MenuItem.d.ts +1 -0
  41. package/dist/core/components/organisms/verticalNav/VerticalNav.d.ts +1 -0
  42. package/dist/esm/index.js +464 -280
  43. package/dist/gzip/index.js +1 -1
  44. package/dist/gzip/index.js.gz +0 -0
  45. package/dist/index.js +505 -325
  46. package/dist/index.js.map +1 -1
  47. package/dist/index.umd.css +209 -26
  48. package/dist/index.umd.js +1 -1
  49. package/dist/types/tsconfig.type.tsbuildinfo +66 -62
  50. package/package.json +1 -1
package/css/src/components/button.module.css CHANGED
@@ -50,6 +50,8 @@
50
50
  padding-left: var(--spacing-20);
51
51
  padding-top: var(--spacing-10);
52
52
  padding-bottom: var(--spacing-10);
53
+ font-size: var(--font-size-s);
54
+ font-weight: var(--font-weight-medium);
53
55
  }
54
56
 
55
57
  .Button--tinySquare {
package/css/src/components/chip.module.css CHANGED
@@ -3,7 +3,6 @@
3
3
  box-sizing: border-box;
4
4
  border-radius: var(--border-radius-30);
5
5
  padding-right: var(--spacing-20);
6
- padding-left: var(--spacing-20);
7
6
  padding-top: var(--spacing-05);
8
7
  padding-bottom: var(--spacing-05);
9
8
  width: fit-content;
@@ -13,10 +12,18 @@
13
12
  align-items: center;
14
13
  flex-direction: row;
15
14
  cursor: default;
16
- height: var(--spacing-60);
17
15
  transition: var(--duration--fast-01) var(--standard-productive-curve);
18
16
  }
19
17
 
18
+ .Chip-size--regular {
19
+ height: var(--spacing-60);
20
+ padding-left: var(--spacing-20);
21
+ }
22
+ .Chip-size--small {
23
+ height: 20px;
24
+ padding-left: var(--spacing-15);
25
+ }
26
+
20
27
  .Chip-wrapper {
21
28
  display: inline-flex;
22
29
  align-items: center;
@@ -31,6 +38,7 @@
31
38
  .Chip-icon--right {
32
39
  display: flex;
33
40
  align-items: center;
41
+ justify-content: center;
34
42
  border-radius: var(--border-radius-full);
35
43
  margin-left: var(--spacing-05);
36
44
  }
package/css/src/components/chipInput.module.css CHANGED
@@ -2,13 +2,21 @@
2
2
  display: flex;
3
3
  border-radius: var(--border-radius-10);
4
4
  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
5
- padding-left: 10px;
6
- padding-right: 10px;
7
5
  background: var(--white);
8
6
  cursor: text;
9
7
  flex: 100%;
10
8
  }
11
9
 
10
+ .ChipInput--regular {
11
+ padding-left: 10px;
12
+ padding-right: 10px;
13
+ }
14
+
15
+ .ChipInput--small {
16
+ padding-left: var(--spacing-20);
17
+ padding-right: var(--spacing-20);
18
+ }
19
+
12
20
  .ChipInput:focus,
13
21
  .ChipInput:focus-visible {
14
22
  outline: var(--spacing-2-5) var(--primary);
@@ -63,11 +71,23 @@
63
71
  min-width: 15%;
64
72
  flex: 0px;
65
73
  box-sizing: border-box;
74
+ font-family: var(--font-family);
75
+ font-size: var(--font-size);
76
+ }
77
+
78
+ .ChipInput-input--small {
79
+ height: 20px;
80
+ margin-top: var(--spacing-05);
81
+ margin-bottom: var(--spacing-05);
82
+ font-size: var(--font-size-s);
83
+ line-height: var(--font-height-s);
84
+ font-weight: var(--font-weight-medium);
85
+ }
86
+
87
+ .ChipInput-input--regular {
66
88
  height: var(--spacing-60);
67
89
  margin-top: var(--spacing-10);
68
90
  margin-bottom: var(--spacing-10);
69
- font-family: var(--font-family);
70
- font-size: var(--font-size);
71
91
  }
72
92
 
73
93
  .ChipInput:hover .ChipInput-input {
@@ -79,14 +99,22 @@
79
99
  }
80
100
 
81
101
  .ChipInput-icon {
82
- height: var(--spacing-40);
83
- padding: var(--spacing-05);
84
- margin-left: var(--spacing-20);
85
- margin-top: var(--spacing-15);
86
102
  cursor: pointer;
87
103
  border-radius: var(--border-radius-full);
88
104
  }
89
105
 
106
+ .ChipInput-icon--small {
107
+ margin-left: var(--spacing-15);
108
+ margin-top: var(--spacing-15);
109
+ height: var(--spacing-30);
110
+ }
111
+
112
+ .ChipInput-icon--regular {
113
+ height: var(--spacing-40);
114
+ margin-left: var(--spacing-20);
115
+ margin-top: var(--spacing-20);
116
+ }
117
+
90
118
  .ChipInput-icon:hover {
91
119
  background-color: var(--secondary);
92
120
  }
package/css/src/components/editableInput.module.css CHANGED
@@ -25,8 +25,6 @@
25
25
  border: var(--border-width-2-5) solid transparent;
26
26
  box-sizing: border-box;
27
27
  white-space: nowrap;
28
- padding-left: var(--spacing-30);
29
- padding-right: var(--spacing-30);
30
28
  display: flex;
31
29
  align-items: center;
32
30
  }
@@ -34,11 +32,18 @@
34
32
  .EditableInput-default--regular {
35
33
  min-width: var(--spacing-640);
36
34
  height: var(--spacing-80);
35
+ padding-left: var(--spacing-30);
36
+ padding-right: var(--spacing-30);
37
37
  }
38
38
 
39
39
  .EditableInput-default--tiny {
40
40
  min-width: var(--spacing-240);
41
41
  height: var(--spacing-60);
42
+ font-size: var(--font-size-s);
43
+ font-weight: var(--font-weight-medium);
44
+ line-height: var(--font-height-s);
45
+ padding-left: var(--spacing-20);
46
+ padding-right: var(--spacing-20);
42
47
  }
43
48
 
44
49
  .EditableInput-Input--tiny {
package/css/src/components/input.module.css CHANGED
@@ -22,6 +22,8 @@
22
22
  height: var(--font-height-m);
23
23
  padding-top: var(--spacing-10);
24
24
  padding-bottom: var(--spacing-10);
25
+ padding-left: var(--spacing-20);
26
+ padding-right: var(--spacing-20);
25
27
  }
26
28
 
27
29
  .Input--regular {
@@ -117,6 +119,12 @@
117
119
  font-size: var(--font-size-m);
118
120
  }
119
121
 
122
+ .Input-input--tiny {
123
+ line-height: var(--font-height-s);
124
+ font-size: var(--font-size-s);
125
+ font-weight: var(--font-weight-medium);
126
+ }
127
+
120
128
  .Input-icon {
121
129
  display: flex;
122
130
  align-content: center;
package/css/src/components/label.module.css CHANGED
@@ -2,6 +2,9 @@
2
2
  .Label {
3
3
  display: inline-flex;
4
4
  }
5
+ .Label--small {
6
+ font-size: var(--font-size-s);
7
+ }
5
8
 
6
9
  .Label--withInput {
7
10
  margin-bottom: var(--spacing-10);
@@ -22,6 +25,10 @@
22
25
  margin-left: var(--spacing-10);
23
26
  }
24
27
 
28
+ .Label-optionalText--small {
29
+ font-size: var(--font-size-s);
30
+ }
31
+
25
32
  .Label--disabled {
26
33
  color: var(--text-disabled);
27
34
  }
package/css/src/components/link.module.css CHANGED
@@ -3,6 +3,7 @@
3
3
  font-weight: var(--font-weight-medium);
4
4
  transition: var(--duration--fast-01) var(--standard-productive-curve);
5
5
  box-sizing: border-box;
6
+ border-bottom: var(--border-width-2-5) solid transparent;
6
7
  }
7
8
 
8
9
  .Link:focus-visible {
package/css/src/components/menu.module.css CHANGED
@@ -13,6 +13,13 @@
13
13
  box-sizing: border-box;
14
14
  }
15
15
 
16
+ .Menu-Item--tight {
17
+ padding: var(--spacing-10) var(--spacing-20);
18
+ font-size: var(--font-size-s);
19
+ font-weight: var(--font-weight-medium);
20
+ line-height: var(--font-height-s);
21
+ }
22
+
16
23
  .Menu-Group-Label {
17
24
  display: flex;
18
25
  align-items: center;
package/css/src/components/message.module.css CHANGED
@@ -9,6 +9,10 @@
9
9
  box-sizing: border-box;
10
10
  }
11
11
 
12
+ .Message--small {
13
+ padding: var(--spacing-20);
14
+ }
15
+
12
16
  .Message--alert {
13
17
  border-color: var(--alert);
14
18
  background-color: color-mod(var(--alert) a(var(--opacity-1)));
@@ -29,11 +33,16 @@
29
33
  background-color: color-mod(var(--accent1) a(var(--opacity-1)));
30
34
  }
31
35
 
32
- .Message-icon {
36
+ .Message-icon--regular {
33
37
  margin-right: var(--spacing-40);
34
38
  padding-top: var(--spacing-05);
35
39
  }
36
40
 
41
+ .Message-icon--small {
42
+ margin-right: var(--spacing-20);
43
+ padding-top: var(--spacing-05) !important;
44
+ }
45
+
37
46
  .Message-icon--withTitle {
38
47
  padding-top: var(--spacing-10);
39
48
  }
@@ -42,10 +51,22 @@
42
51
  color: var(--accent1);
43
52
  }
44
53
 
45
- .Message-heading {
54
+ .Message-heading--regular {
46
55
  margin-bottom: var(--spacing-10);
47
56
  }
48
57
 
58
+ .Message-heading--small {
59
+ font-size: var(--font-size);
60
+ line-height: var(--font-height);
61
+ margin-bottom: var(--spacing-05);
62
+ }
63
+
64
+ .Message-text--small {
65
+ font-size: var(--font-size-s);
66
+ line-height: var(--font-height-s);
67
+ font-weight: var(--font-weight-medium);
68
+ }
69
+
49
70
  .Message-heading--alert,
50
71
  .Message-text--alert {
51
72
  color: var(--alert-darker) !important;
@@ -69,5 +90,12 @@
69
90
  .Message-actions {
70
91
  display: flex;
71
92
  align-items: center;
93
+ }
94
+
95
+ .Message-actions--regular {
72
96
  margin-top: var(--spacing-30);
73
97
  }
98
+
99
+ .Message-actions--small {
100
+ margin-top: var(--spacing-10);
101
+ }
package/css/src/components/metricInput.module.css CHANGED
@@ -10,8 +10,8 @@
10
10
  box-sizing: border-box;
11
11
  border-radius: var(--border-radius-10);
12
12
  border: var(--border);
13
- padding-right: var(--spacing-10);
14
13
  background: var(--white);
14
+ overflow: hidden;
15
15
  transition: var(--duration--fast-01) var(--standard-productive-curve);
16
16
  }
17
17
 
@@ -25,6 +25,11 @@
25
25
  padding-left: var(--spacing-40);
26
26
  }
27
27
 
28
+ .MetricInput--small {
29
+ height: var(--spacing-60);
30
+ padding-left: var(--spacing-20);
31
+ }
32
+
28
33
  .MetricInput:hover {
29
34
  background: var(--secondary-lightest);
30
35
  cursor: text;
@@ -89,6 +94,17 @@
89
94
  font-size: var(--font-size-m);
90
95
  }
91
96
 
97
+ .MetricInput-input--regular {
98
+ line-height: var(--font-height);
99
+ font-size: var(--font-size);
100
+ }
101
+
102
+ .MetricInput-input--small {
103
+ line-height: var(--font-height-s);
104
+ font-size: var(--font-size-s);
105
+ font-weight: var(--font-weight-medium);
106
+ }
107
+
92
108
  .MetricInput-input::placeholder {
93
109
  color: var(--inverse-lighter);
94
110
  }
@@ -111,6 +127,10 @@
111
127
  line-height: var(--font-height-m);
112
128
  }
113
129
 
130
+ .MetricInput-icon--small {
131
+ margin-right: var(--spacing-10);
132
+ }
133
+
114
134
  .MetricInput-input::-webkit-inner-spin-button,
115
135
  .MetricInput-input::-webkit-outer-spin-button {
116
136
  -webkit-appearance: none;
@@ -119,14 +139,51 @@
119
139
  margin: 0;
120
140
  }
121
141
 
122
- .MetricInput-arrowIcon--large {
123
- height: var(--spacing-40);
124
- width: var(--spacing-40);
125
- border-radius: var(--border-radius-05);
142
+ .MetricInput-arrowIcons {
143
+ border-left: var(--border);
144
+ box-sizing: border-box;
145
+ border-radius: 0;
146
+ background: transparent;
147
+ display: flex;
148
+ flex-direction: column;
149
+ height: 100%;
150
+ flex-shrink: 0;
151
+ overflow: hidden;
152
+ }
153
+
154
+ .MetricInput-arrowButton {
155
+ height: 50%;
156
+ border: none;
157
+ background: var(--secondary-light);
158
+ color: var(--inverse);
159
+ cursor: pointer;
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: center;
163
+ padding: 0;
164
+ margin: 0;
165
+ user-select: none;
166
+ overflow: hidden;
167
+ }
168
+
169
+ .MetricInput-arrowButton:hover {
170
+ background: var(--secondary);
171
+ }
172
+
173
+ .MetricInput-arrowButton:active {
174
+ background: var(--secondary-dark);
175
+ }
176
+
177
+ .MetricInput-arrowButton:focus {
178
+ outline: 0;
179
+ box-shadow: var(--shadow-spread) var(--secondary-shadow);
180
+ }
181
+
182
+ .MetricInput-arrowIcons--small,
183
+ .MetricInput-arrowIcons--regular {
184
+ width: 20px;
126
185
  }
127
186
 
128
- .MetricInput-arrowIcon--regular {
129
- height: var(--spacing-30);
130
- width: var(--spacing-30);
131
- border-radius: var(--border-radius-05);
187
+ .MetricInput-arrowIcons--large {
188
+ width: var(--spacing-60);
132
189
  }
package/css/src/components/select.module.css CHANGED
@@ -68,7 +68,7 @@
68
68
 
69
69
  .Select-trigger--small {
70
70
  height: var(--spacing-60);
71
- padding-right: var(--spacing-20);
71
+ padding-right: var(--spacing-10);
72
72
  padding-left: var(--spacing-20);
73
73
  }
74
74
 
@@ -136,3 +136,24 @@
136
136
  align-items: flex-start;
137
137
  width: 100%;
138
138
  }
139
+
140
+ .Select-trigger--textSmall {
141
+ font-size: var(--font-size-s);
142
+ line-height: var(--font-height-s);
143
+ font-weight: var(--font-weight-medium);
144
+ }
145
+
146
+ .Select-option--tight {
147
+ padding: var(--spacing-10) var(--spacing-20);
148
+ }
149
+
150
+ .Select-input--tiny {
151
+ padding-right: var(--spacing-10);
152
+ height: var(--spacing-60);
153
+ }
154
+
155
+ .Select-option--textTight {
156
+ font-size: var(--font-size-s);
157
+ line-height: var(--font-height-s);
158
+ font-weight: var(--font-weight-medium);
159
+ }
package/css/src/components/statusHint.module.css CHANGED
@@ -2,6 +2,7 @@
2
2
  display: flex;
3
3
  flex-direction: row;
4
4
  width: fit-content;
5
+ align-items: center;
5
6
  }
6
7
 
7
8
  .StatusHint-icon {
@@ -9,8 +10,6 @@
9
10
  border-radius: var(--border-radius-full);
10
11
  height: var(--spacing-20);
11
12
  width: var(--spacing-20);
12
- margin-right: var(--spacing-20);
13
- margin-top: var(--spacing-15);
14
13
  }
15
14
 
16
15
  .StatusHint--alert {
package/css/src/components/textarea.module.css CHANGED
@@ -55,3 +55,9 @@
55
55
  .Textarea--resize {
56
56
  resize: both;
57
57
  }
58
+
59
+ .Textarea--small {
60
+ font-size: var(--font-size-s);
61
+ font-weight: var(--font-weight-medium);
62
+ line-height: var(--font-height-s);
63
+ }
package/css/src/components/tooltip.module.css CHANGED
@@ -10,6 +10,10 @@
10
10
  transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
11
11
  }
12
12
 
13
+ .Tooltip--small {
14
+ line-height: var(--font-height-s);
15
+ }
16
+
13
17
  .Tooltip-text {
14
18
  word-break: break-word;
15
19
  hyphens: auto;