@gooddata/sdk-ui-kit 10.26.0-alpha.4 → 10.26.0-alpha.41

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 (53) hide show
  1. package/esm/@ui/UiButton/UiButton.d.ts +2 -2
  2. package/esm/@ui/UiButton/UiButton.d.ts.map +1 -1
  3. package/esm/@ui/UiButton/UiButton.js +6 -6
  4. package/esm/@ui/UiButton/UiButton.js.map +1 -1
  5. package/esm/@ui/UiChip/UiChip.d.ts +10 -1
  6. package/esm/@ui/UiChip/UiChip.d.ts.map +1 -1
  7. package/esm/@ui/UiChip/UiChip.js +21 -12
  8. package/esm/@ui/UiChip/UiChip.js.map +1 -1
  9. package/esm/@ui/UiIcon/UiIcon.d.ts +1 -1
  10. package/esm/@ui/UiIcon/UiIcon.d.ts.map +1 -1
  11. package/esm/@ui/UiIcon/UiIcon.js +3 -3
  12. package/esm/@ui/UiIcon/UiIcon.js.map +1 -1
  13. package/esm/@ui/UiIcon/icons.d.ts +4 -5
  14. package/esm/@ui/UiIcon/icons.d.ts.map +1 -1
  15. package/esm/@ui/UiIcon/icons.js +17 -53
  16. package/esm/@ui/UiIcon/icons.js.map +1 -1
  17. package/esm/Dialog/ConfirmDialogBase.d.ts.map +1 -1
  18. package/esm/Dialog/ConfirmDialogBase.js +7 -2
  19. package/esm/Dialog/ConfirmDialogBase.js.map +1 -1
  20. package/esm/Dialog/DialogBase.d.ts.map +1 -1
  21. package/esm/Dialog/DialogBase.js +1 -1
  22. package/esm/Dialog/DialogBase.js.map +1 -1
  23. package/esm/Dialog/typings.d.ts +1 -0
  24. package/esm/Dialog/typings.d.ts.map +1 -1
  25. package/esm/Icon/icons/QuestionMark.d.ts.map +1 -1
  26. package/esm/Icon/icons/QuestionMark.js +3 -3
  27. package/esm/Icon/icons/QuestionMark.js.map +1 -1
  28. package/esm/RecurrenceForm/CronExpression.d.ts.map +1 -1
  29. package/esm/RecurrenceForm/CronExpression.js +13 -5
  30. package/esm/RecurrenceForm/CronExpression.js.map +1 -1
  31. package/esm/RecurrenceForm/DateTime.d.ts.map +1 -1
  32. package/esm/RecurrenceForm/DateTime.js +2 -1
  33. package/esm/RecurrenceForm/DateTime.js.map +1 -1
  34. package/esm/RecurrenceForm/RepeatTypeDescription.d.ts.map +1 -1
  35. package/esm/RecurrenceForm/RepeatTypeDescription.js +3 -2
  36. package/esm/RecurrenceForm/RepeatTypeDescription.js.map +1 -1
  37. package/esm/RichText/plugins/rehype-references.d.ts.map +1 -1
  38. package/esm/RichText/plugins/rehype-references.js +18 -15
  39. package/esm/RichText/plugins/rehype-references.js.map +1 -1
  40. package/esm/index.d.ts +2 -1
  41. package/esm/index.d.ts.map +1 -1
  42. package/esm/index.js +1 -0
  43. package/esm/index.js.map +1 -1
  44. package/esm/sdk-ui-kit.d.ts +15 -1
  45. package/package.json +8 -8
  46. package/src/@ui/UiButton/UiButton.scss +29 -118
  47. package/src/@ui/UiChip/UiChip.scss +60 -19
  48. package/src/@ui/UiIcon/UiIcon.scss +3 -3
  49. package/styles/css/main.css +84 -181
  50. package/styles/css/main.css.map +1 -1
  51. package/styles/css/recurrenceForm.css +13 -0
  52. package/styles/css/recurrenceForm.css.map +1 -1
  53. package/styles/scss/recurrenceForm.scss +16 -0
package/src/@ui/UiButton/UiButton.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  // (C) 2024-2025 GoodData Corporation
2
2
 
3
- .gd-ui-kit-button,
4
- %ui-button {
3
+ .gd-ui-kit-button {
5
4
  $root: &;
6
5
 
7
6
  font-family: var(--gd-font-family);
@@ -19,90 +18,49 @@
19
18
  cursor: default;
20
19
  }
21
20
 
22
- &:not(&:disabled, &--variant-tertiary, &--variant-popout) {
23
- &:active {
24
- #{$root}__text {
25
- // Move text inside the button on :active state.
26
- padding-top: 1px;
27
- }
28
-
29
- #{$root}__icon {
30
- // Move icon inside the button on :active state.
31
- padding-top: 1px;
32
- }
33
- }
34
- }
35
-
36
- &__text,
37
- %ui-button__text {
38
- transition: var(--gd-transition-all);
39
- }
40
-
41
- &__icon,
42
- %ui-button__icon {
43
- display: flex;
44
- align-items: center;
45
- justify-content: center;
46
- transition: var(--gd-transition-all);
47
- }
48
-
49
- &--isLoading {
50
- #{$root}__icon {
51
- // Spin icon on loading state.
52
- animation: rotate 1s infinite steps(30);
53
- }
54
- }
55
-
56
21
  /**
57
22
  * Size
58
23
  */
59
24
  &--size {
60
25
  &-small {
61
26
  height: var(--gd-button-S);
62
- padding: var(--gd-spacing-6px) var(--gd-spacing-10px);
27
+ padding: 0 var(--gd-spacing-10px);
63
28
  font-size: 12px;
64
- line-height: 14px;
65
29
 
66
- &#{$root}--iconPosition {
67
- &-left {
68
- padding-left: var(--gd-spacing-7px);
69
- }
30
+ &#{$root}--hasIconBefore {
31
+ padding-left: var(--gd-spacing-7px);
32
+ }
70
33
 
71
- &-right {
72
- padding-right: var(--gd-spacing-7px);
73
- }
34
+ &#{$root}--hasIconAfter {
35
+ padding-right: var(--gd-spacing-7px);
74
36
  }
75
37
  }
76
38
 
77
39
  &-medium {
78
40
  height: var(--gd-button-M);
79
- padding: var(--gd-spacing-6px) var(--gd-spacing-15px);
41
+ padding: 0 var(--gd-spacing-15px);
80
42
  font-size: 14px;
81
- line-height: 16px;
82
- &#{$root}--iconPosition {
83
- &-left {
84
- padding-left: var(--gd-spacing-10px);
85
- }
86
43
 
87
- &-right {
88
- padding-right: var(--gd-spacing-10px);
89
- }
44
+ &#{$root}--hasIconBefore {
45
+ padding-left: var(--gd-spacing-10px);
46
+ }
47
+
48
+ &#{$root}--hasIconAfter {
49
+ padding-right: var(--gd-spacing-10px);
90
50
  }
91
51
  }
92
52
 
93
53
  &-large {
94
54
  height: var(--gd-button-L);
95
- padding: var(--gd-spacing-6px) var(--gd-spacing-20px);
55
+ padding: 0 var(--gd-spacing-20px);
96
56
  font-size: 16px;
97
- line-height: 18px;
98
- &#{$root}--iconPosition {
99
- &-left {
100
- padding-left: var(--gd-spacing-15px);
101
- }
102
57
 
103
- &-right {
104
- padding-right: var(--gd-spacing-15px);
105
- }
58
+ &#{$root}--hasIconBefore {
59
+ padding-left: var(--gd-spacing-15px);
60
+ }
61
+
62
+ &#{$root}--hasIconAfter {
63
+ padding-right: var(--gd-spacing-15px);
106
64
  }
107
65
  }
108
66
  }
@@ -113,7 +71,6 @@
113
71
  &--variant {
114
72
  &-primary {
115
73
  --gd-icon-fill-color: var(--gd-palette-complementary-0);
116
-
117
74
  color: var(--gd-palette-complementary-0);
118
75
  background-color: var(--gd-palette-primary-base);
119
76
  border-color: var(--gd-palette-complementary-9-t90);
@@ -147,7 +104,6 @@
147
104
 
148
105
  &-secondary {
149
106
  --gd-icon-fill-color: var(--gd-palette-complementary-5);
150
-
151
107
  color: var(--gd-palette-complementary-7);
152
108
  border-color: var(--gd-palette-complementary-4);
153
109
  background-color: var(--gd-palette-complementary-0);
@@ -192,26 +148,17 @@
192
148
  }
193
149
  }
194
150
 
195
- &-tertiary,
196
- %ui-button--variant-tertiary {
151
+ &-tertiary {
197
152
  --gd-icon-fill-color: var(--gd-palette-complementary-5);
198
-
199
153
  color: var(--gd-palette-complementary-7);
154
+ padding: 0;
200
155
  text-decoration: underline;
201
156
  background-color: transparent;
202
157
  border-color: transparent;
203
158
 
204
159
  &:not(&:disabled) {
205
- &:focus {
206
- --gd-icon-fill-color: var(--gd-palette-primary-base);
207
-
208
- color: var(--gd-palette-complementary-8);
209
- }
210
- &:hover {
211
- --gd-icon-fill-color: var(--gd-palette-primary-base);
212
-
213
- color: var(--gd-palette-complementary-8);
214
- }
160
+ &:hover,
161
+ &:focus,
215
162
  &:active {
216
163
  --gd-icon-fill-color: var(--gd-palette-primary-base);
217
164
 
@@ -223,36 +170,19 @@
223
170
  color: var(--gd-palette-complementary-5);
224
171
  text-decoration: none;
225
172
  }
226
-
227
- &#{$root}--size {
228
- &-small,
229
- &-medium,
230
- &-large {
231
- padding: 0;
232
- height: auto;
233
- }
234
- }
235
173
  }
236
174
 
237
175
  &-popout {
238
176
  --gd-icon-fill-color: var(--gd-palette-primary-base);
239
-
240
177
  color: var(--gd-palette-primary-base);
178
+ padding: 0;
241
179
  background-color: transparent;
242
180
  border-color: transparent;
243
181
 
244
182
  &:not(&:disabled) {
245
- &:focus {
246
- text-decoration: underline;
247
- }
248
-
249
- &:hover {
250
- color: var(--gd-palette-complementary-8);
251
- text-decoration: underline;
252
- }
253
-
183
+ &:hover,
184
+ &:focus,
254
185
  &:active {
255
- color: var(--gd-palette-primary-base);
256
186
  text-decoration: underline;
257
187
  }
258
188
  }
@@ -260,22 +190,12 @@
260
190
  &:disabled {
261
191
  color: var(--gd-palette-complementary-5);
262
192
  }
263
-
264
- &#{$root}--size {
265
- &-small,
266
- &-medium,
267
- &-large {
268
- padding: 0;
269
- height: auto;
270
- }
271
- }
272
193
  }
273
194
 
274
195
  &-danger {
275
196
  --gd-icon-fill-color: var(--gd-palette-complementary-0);
276
-
277
- background: var(--gd-palette-error-base);
278
197
  color: var(--gd-palette-complementary-0);
198
+ background: var(--gd-palette-error-base);
279
199
  border-color: var(--gd-palette-complementary-9-t90);
280
200
  font-weight: 700;
281
201
 
@@ -309,12 +229,3 @@
309
229
  }
310
230
  }
311
231
  }
312
-
313
- @keyframes rotate {
314
- from {
315
- transform: rotate(0deg);
316
- }
317
- to {
318
- transform: rotate(360deg);
319
- }
320
- }
package/src/@ui/UiChip/UiChip.scss CHANGED
@@ -1,7 +1,5 @@
1
1
  // (C) 2025 GoodData Corporation
2
2
 
3
- @use "../UiButton//UiButton.scss";
4
-
5
3
  $border-radius: 20px;
6
4
  $background-color: var(--gd-palette-complementary-0);
7
5
  $border-color: var(--gd-palette-complementary-4);
@@ -19,7 +17,7 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
19
17
  height: 27px;
20
18
  max-width: 245px;
21
19
 
22
- display: flex;
20
+ display: inline-flex;
23
21
  flex-direction: row;
24
22
  align-items: center;
25
23
  justify-content: center;
@@ -90,17 +88,24 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
90
88
  }
91
89
 
92
90
  #{$root}__delete {
93
- svg {
94
- --gd-icon-fill-color: var(--gd-palette-error-base);
95
- }
91
+ color: var(--gd-palette-error-base);
96
92
  }
97
93
  }
98
94
 
95
+ #{$root}__trigger--isDeletable {
96
+ border-right: 1px solid transparent;
97
+ }
98
+
99
99
  &__trigger,
100
100
  &__delete {
101
- @extend %ui-button;
102
- @extend %ui-button--variant-tertiary;
103
-
101
+ color: var(--gd-palette-complementary-7);
102
+ background-color: transparent;
103
+ border-radius: var(--gd-button-borderRadius);
104
+ transition: var(--gd-transition-all);
105
+ display: inline-flex;
106
+ justify-content: center;
107
+ align-items: center;
108
+ cursor: pointer;
104
109
  height: 100%;
105
110
  min-width: 0;
106
111
  flex-shrink: 1;
@@ -108,6 +113,11 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
108
113
  text-decoration: none;
109
114
  padding: 0 10px;
110
115
  border: none;
116
+
117
+ &:disabled {
118
+ cursor: default;
119
+ color: var(--gd-palette-complementary-5);
120
+ }
111
121
  }
112
122
 
113
123
  &__trigger {
@@ -132,6 +142,18 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
132
142
  }
133
143
  }
134
144
 
145
+ &:not(&:disabled) {
146
+ &:hover,
147
+ &:focus,
148
+ &:active {
149
+ svg {
150
+ color: var(--gd-palette-primary-base);
151
+ }
152
+
153
+ color: var(--gd-palette-complementary-8);
154
+ }
155
+ }
156
+
135
157
  &:not(&--isDeletable) {
136
158
  border-radius: $border-radius;
137
159
  border: none;
@@ -142,31 +164,44 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
142
164
  flex-shrink: 0;
143
165
  border-radius: 0 $border-radius $border-radius 0;
144
166
  padding: 0 7px 0 5px;
167
+
168
+ &:not(&:disabled) {
169
+ &:hover,
170
+ &:focus,
171
+ &:active {
172
+ svg {
173
+ color: var(--gd-palette-error-base);
174
+ }
175
+
176
+ color: var(--gd-palette-complementary-8);
177
+ }
178
+ }
145
179
  }
146
180
 
147
181
  &__label {
148
- @extend %ui-button__text;
149
-
182
+ transition: var(--gd-transition-all);
150
183
  white-space: nowrap;
151
184
  overflow: hidden;
152
185
  text-overflow: ellipsis;
153
186
  }
154
187
 
155
188
  &__tag {
156
- @extend %ui-button__text;
157
-
189
+ transition: var(--gd-transition-all);
158
190
  margin-left: 2px;
159
191
  }
160
192
 
161
193
  &__icon-before {
162
- @extend %ui-button__icon;
163
-
194
+ display: flex;
195
+ align-items: center;
196
+ justify-content: center;
197
+ transition: var(--gd-transition-all);
164
198
  margin-right: 5px;
165
199
  }
166
200
 
167
201
  &__icon-chevron {
168
- @extend %ui-button__icon;
169
-
202
+ align-items: center;
203
+ justify-content: center;
204
+ transition: var(--gd-transition-all);
170
205
  display: none;
171
206
  margin-left: 5px;
172
207
 
@@ -181,12 +216,18 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
181
216
  }
182
217
 
183
218
  &__icon-lock {
184
- @extend %ui-button__icon;
219
+ display: flex;
220
+ align-items: center;
221
+ justify-content: center;
222
+ transition: var(--gd-transition-all);
185
223
 
186
224
  margin-left: 5px;
187
225
  }
188
226
 
189
227
  &__icon-delete {
190
- @extend %ui-button__icon;
228
+ display: flex;
229
+ align-items: center;
230
+ justify-content: center;
231
+ transition: var(--gd-transition-all);
191
232
  }
192
233
  }
package/src/@ui/UiIcon/UiIcon.scss CHANGED
@@ -1,5 +1,6 @@
1
- // (C) 2024 GoodData Corporation
1
+ // (C) 2024-2025 GoodData Corporation
2
2
  .gd-ui-kit-icon {
3
+ fill: var(--gd-icon-fill-color);
3
4
  &--color {
4
5
  &-primary {
5
6
  --gd-icon-fill-color: var(--gd-palette-primary-base);
@@ -54,8 +55,7 @@
54
55
  }
55
56
  }
56
57
 
57
- &__fill {
58
+ path {
58
59
  transition: var(--gd-transition-all);
59
- fill: var(--gd-icon-fill-color);
60
60
  }
61
61
  }