@gooddata/sdk-ui-kit 10.26.0-alpha.13 → 10.26.0-alpha.14
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.
- package/esm/@ui/UiButton/UiButton.d.ts +2 -2
- package/esm/@ui/UiButton/UiButton.d.ts.map +1 -1
- package/esm/@ui/UiButton/UiButton.js +6 -6
- package/esm/@ui/UiButton/UiButton.js.map +1 -1
- package/esm/@ui/UiIcon/UiIcon.d.ts +1 -1
- package/esm/@ui/UiIcon/UiIcon.d.ts.map +1 -1
- package/esm/@ui/UiIcon/UiIcon.js +3 -3
- package/esm/@ui/UiIcon/UiIcon.js.map +1 -1
- package/esm/@ui/UiIcon/icons.d.ts +1 -8
- package/esm/@ui/UiIcon/icons.d.ts.map +1 -1
- package/esm/@ui/UiIcon/icons.js +14 -53
- package/esm/@ui/UiIcon/icons.js.map +1 -1
- package/esm/index.d.ts +1 -2
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +1 -1
- package/esm/index.js.map +1 -1
- package/esm/sdk-ui-kit.d.ts +1 -9
- package/package.json +8 -8
- package/src/@ui/UiButton/UiButton.scss +29 -118
- package/src/@ui/UiChip/UiChip.scss +55 -18
- package/src/@ui/UiIcon/UiIcon.scss +3 -3
- package/styles/css/main.css +67 -180
- package/styles/css/main.css.map +1 -1
|
@@ -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:
|
|
27
|
+
padding: 0 var(--gd-spacing-10px);
|
|
63
28
|
font-size: 12px;
|
|
64
|
-
line-height: 14px;
|
|
65
29
|
|
|
66
|
-
&#{$root}--
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
30
|
+
&#{$root}--hasIconBefore {
|
|
31
|
+
padding-left: var(--gd-spacing-7px);
|
|
32
|
+
}
|
|
70
33
|
|
|
71
|
-
|
|
72
|
-
|
|
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:
|
|
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
|
-
|
|
88
|
-
|
|
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:
|
|
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
|
-
|
|
104
|
-
|
|
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
|
-
&:
|
|
206
|
-
|
|
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
|
-
&:
|
|
246
|
-
|
|
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
|
-
}
|
|
@@ -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);
|
|
@@ -90,9 +88,7 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
|
|
|
90
88
|
}
|
|
91
89
|
|
|
92
90
|
#{$root}__delete {
|
|
93
|
-
|
|
94
|
-
--gd-icon-fill-color: var(--gd-palette-error-base);
|
|
95
|
-
}
|
|
91
|
+
color: var(--gd-palette-error-base);
|
|
96
92
|
}
|
|
97
93
|
}
|
|
98
94
|
|
|
@@ -102,9 +98,14 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
|
|
|
102
98
|
|
|
103
99
|
&__trigger,
|
|
104
100
|
&__delete {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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;
|
|
108
109
|
height: 100%;
|
|
109
110
|
min-width: 0;
|
|
110
111
|
flex-shrink: 1;
|
|
@@ -112,6 +113,11 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
|
|
|
112
113
|
text-decoration: none;
|
|
113
114
|
padding: 0 10px;
|
|
114
115
|
border: none;
|
|
116
|
+
|
|
117
|
+
&:disabled {
|
|
118
|
+
cursor: default;
|
|
119
|
+
color: var(--gd-palette-complementary-5);
|
|
120
|
+
}
|
|
115
121
|
}
|
|
116
122
|
|
|
117
123
|
&__trigger {
|
|
@@ -136,6 +142,18 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
|
|
|
136
142
|
}
|
|
137
143
|
}
|
|
138
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
|
+
|
|
139
157
|
&:not(&--isDeletable) {
|
|
140
158
|
border-radius: $border-radius;
|
|
141
159
|
border: none;
|
|
@@ -146,31 +164,44 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
|
|
|
146
164
|
flex-shrink: 0;
|
|
147
165
|
border-radius: 0 $border-radius $border-radius 0;
|
|
148
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
|
+
}
|
|
149
179
|
}
|
|
150
180
|
|
|
151
181
|
&__label {
|
|
152
|
-
|
|
153
|
-
|
|
182
|
+
transition: var(--gd-transition-all);
|
|
154
183
|
white-space: nowrap;
|
|
155
184
|
overflow: hidden;
|
|
156
185
|
text-overflow: ellipsis;
|
|
157
186
|
}
|
|
158
187
|
|
|
159
188
|
&__tag {
|
|
160
|
-
|
|
161
|
-
|
|
189
|
+
transition: var(--gd-transition-all);
|
|
162
190
|
margin-left: 2px;
|
|
163
191
|
}
|
|
164
192
|
|
|
165
193
|
&__icon-before {
|
|
166
|
-
|
|
167
|
-
|
|
194
|
+
display: flex;
|
|
195
|
+
align-items: center;
|
|
196
|
+
justify-content: center;
|
|
197
|
+
transition: var(--gd-transition-all);
|
|
168
198
|
margin-right: 5px;
|
|
169
199
|
}
|
|
170
200
|
|
|
171
201
|
&__icon-chevron {
|
|
172
|
-
|
|
173
|
-
|
|
202
|
+
align-items: center;
|
|
203
|
+
justify-content: center;
|
|
204
|
+
transition: var(--gd-transition-all);
|
|
174
205
|
display: none;
|
|
175
206
|
margin-left: 5px;
|
|
176
207
|
|
|
@@ -185,12 +216,18 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
|
|
|
185
216
|
}
|
|
186
217
|
|
|
187
218
|
&__icon-lock {
|
|
188
|
-
|
|
219
|
+
display: flex;
|
|
220
|
+
align-items: center;
|
|
221
|
+
justify-content: center;
|
|
222
|
+
transition: var(--gd-transition-all);
|
|
189
223
|
|
|
190
224
|
margin-left: 5px;
|
|
191
225
|
}
|
|
192
226
|
|
|
193
227
|
&__icon-delete {
|
|
194
|
-
|
|
228
|
+
display: flex;
|
|
229
|
+
align-items: center;
|
|
230
|
+
justify-content: center;
|
|
231
|
+
transition: var(--gd-transition-all);
|
|
195
232
|
}
|
|
196
233
|
}
|
|
@@ -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
|
-
|
|
58
|
+
path {
|
|
58
59
|
transition: var(--gd-transition-all);
|
|
59
|
-
fill: var(--gd-icon-fill-color);
|
|
60
60
|
}
|
|
61
61
|
}
|