@gitlab/ui 49.4.0 → 49.5.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 (25) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/components/base/datepicker/datepicker.js +14 -2
  3. package/dist/components/charts/discrete_scatter/discrete_scatter.js +1 -1
  4. package/dist/components/charts/heatmap/heatmap.js +1 -1
  5. package/dist/components/charts/legend/legend.js +1 -1
  6. package/dist/components/charts/line/line.js +1 -1
  7. package/dist/index.css +2 -2
  8. package/dist/index.css.map +1 -1
  9. package/dist/utility_classes.css +1 -1
  10. package/dist/utility_classes.css.map +1 -1
  11. package/dist/utils/charts/theme.js +8 -8
  12. package/dist/utils/constants.js +5 -1
  13. package/package.json +3 -3
  14. package/scss_to_js/scss_variables.js +23 -23
  15. package/scss_to_js/scss_variables.json +35 -35
  16. package/src/components/base/datepicker/datepicker.scss +0 -7
  17. package/src/components/base/datepicker/datepicker.spec.js +15 -0
  18. package/src/components/base/datepicker/datepicker.stories.js +23 -2
  19. package/src/components/base/datepicker/datepicker.vue +20 -3
  20. package/src/components/base/filtered_search/__snapshots__/filtered_search_term.spec.js.snap +23 -4
  21. package/src/components/base/icon/__snapshots__/icon.spec.js.snap +9 -2
  22. package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap +0 -70
  23. package/src/components/base/path/__snapshots__/path.spec.js.snap +3 -68
  24. package/src/scss/variables.scss +12 -12
  25. package/src/utils/constants.js +5 -0
package/src/components/base/path/__snapshots__/path.spec.js.snap CHANGED
@@ -20,7 +20,6 @@ exports[`Path matches the snapshot 1`] = `
20
20
  />
21
21
  </button>
22
22
  </span>
23
-
24
23
  <ul
25
24
  class="gl-path-nav-list"
26
25
  >
@@ -31,7 +30,6 @@ exports[`Path matches the snapshot 1`] = `
31
30
  <button
32
31
  class="gl-path-button gl-path-active-item-indigo"
33
32
  >
34
- <!---->
35
33
 
36
34
  First
37
35
  <span
@@ -40,7 +38,6 @@ exports[`Path matches the snapshot 1`] = `
40
38
  1d
41
39
  </span>
42
40
  </button>
43
-
44
41
  </li>
45
42
  <li
46
43
  class="gl-path-nav-list-item"
@@ -49,7 +46,6 @@ exports[`Path matches the snapshot 1`] = `
49
46
  <button
50
47
  class="gl-path-button"
51
48
  >
52
- <!---->
53
49
 
54
50
  Second
55
51
  <span
@@ -58,7 +54,6 @@ exports[`Path matches the snapshot 1`] = `
58
54
  2d
59
55
  </span>
60
56
  </button>
61
-
62
57
  </li>
63
58
  <li
64
59
  class="gl-path-nav-list-item"
@@ -67,7 +62,6 @@ exports[`Path matches the snapshot 1`] = `
67
62
  <button
68
63
  class="gl-path-button"
69
64
  >
70
- <!---->
71
65
 
72
66
  Third
73
67
  <span
@@ -76,7 +70,6 @@ exports[`Path matches the snapshot 1`] = `
76
70
  3d
77
71
  </span>
78
72
  </button>
79
-
80
73
  </li>
81
74
  <li
82
75
  class="gl-path-nav-list-item"
@@ -85,7 +78,6 @@ exports[`Path matches the snapshot 1`] = `
85
78
  <button
86
79
  class="gl-path-button"
87
80
  >
88
- <!---->
89
81
 
90
82
  Fourth
91
83
  <span
@@ -94,7 +86,6 @@ exports[`Path matches the snapshot 1`] = `
94
86
  4d
95
87
  </span>
96
88
  </button>
97
-
98
89
  </li>
99
90
  <li
100
91
  class="gl-path-nav-list-item"
@@ -103,7 +94,6 @@ exports[`Path matches the snapshot 1`] = `
103
94
  <button
104
95
  class="gl-path-button"
105
96
  >
106
- <!---->
107
97
 
108
98
  Fifth
109
99
  <span
@@ -112,7 +102,6 @@ exports[`Path matches the snapshot 1`] = `
112
102
  5d
113
103
  </span>
114
104
  </button>
115
-
116
105
  </li>
117
106
  <li
118
107
  class="gl-path-nav-list-item"
@@ -121,7 +110,6 @@ exports[`Path matches the snapshot 1`] = `
121
110
  <button
122
111
  class="gl-path-button"
123
112
  >
124
- <!---->
125
113
 
126
114
  Sixth
127
115
  <span
@@ -130,7 +118,6 @@ exports[`Path matches the snapshot 1`] = `
130
118
  6d
131
119
  </span>
132
120
  </button>
133
-
134
121
  </li>
135
122
  <li
136
123
  class="gl-path-nav-list-item"
@@ -139,7 +126,6 @@ exports[`Path matches the snapshot 1`] = `
139
126
  <button
140
127
  class="gl-path-button"
141
128
  >
142
- <!---->
143
129
 
144
130
  Seventh
145
131
  <span
@@ -148,7 +134,6 @@ exports[`Path matches the snapshot 1`] = `
148
134
  7d
149
135
  </span>
150
136
  </button>
151
-
152
137
  </li>
153
138
  <li
154
139
  class="gl-path-nav-list-item"
@@ -157,9 +142,8 @@ exports[`Path matches the snapshot 1`] = `
157
142
  <button
158
143
  category="tertiary"
159
144
  class="gl-path-button"
160
- disabled="disabled"
145
+ disabled=""
161
146
  >
162
- <!---->
163
147
 
164
148
  Eighth
165
149
  <span
@@ -168,7 +152,6 @@ exports[`Path matches the snapshot 1`] = `
168
152
  8d
169
153
  </span>
170
154
  </button>
171
-
172
155
  </li>
173
156
  <li
174
157
  class="gl-path-nav-list-item"
@@ -177,7 +160,6 @@ exports[`Path matches the snapshot 1`] = `
177
160
  <button
178
161
  class="gl-path-button"
179
162
  >
180
- <!---->
181
163
 
182
164
  Ninth
183
165
  <span
@@ -186,7 +168,6 @@ exports[`Path matches the snapshot 1`] = `
186
168
  9d
187
169
  </span>
188
170
  </button>
189
-
190
171
  </li>
191
172
  <li
192
173
  class="gl-path-nav-list-item"
@@ -195,7 +176,6 @@ exports[`Path matches the snapshot 1`] = `
195
176
  <button
196
177
  class="gl-path-button"
197
178
  >
198
- <!---->
199
179
 
200
180
  Tenth
201
181
  <span
@@ -204,10 +184,8 @@ exports[`Path matches the snapshot 1`] = `
204
184
  10d
205
185
  </span>
206
186
  </button>
207
-
208
187
  </li>
209
188
  </ul>
210
-
211
189
  <span
212
190
  class="gl-path-fade gl-path-fade-right"
213
191
  style="display: none;"
@@ -245,7 +223,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
245
223
  />
246
224
  </button>
247
225
  </span>
248
-
249
226
  <ul
250
227
  class="gl-path-nav-list"
251
228
  >
@@ -270,7 +247,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
270
247
  12d
271
248
  </span>
272
249
  </button>
273
-
274
250
  </li>
275
251
  <li
276
252
  class="gl-path-nav-list-item"
@@ -279,7 +255,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
279
255
  <button
280
256
  class="gl-path-button"
281
257
  >
282
- <!---->
283
258
 
284
259
  Second
285
260
  <span
@@ -288,7 +263,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
288
263
  2d
289
264
  </span>
290
265
  </button>
291
-
292
266
  </li>
293
267
  <li
294
268
  class="gl-path-nav-list-item"
@@ -297,7 +271,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
297
271
  <button
298
272
  class="gl-path-button"
299
273
  >
300
- <!---->
301
274
 
302
275
  Third
303
276
  <span
@@ -306,7 +279,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
306
279
  3d
307
280
  </span>
308
281
  </button>
309
-
310
282
  </li>
311
283
  <li
312
284
  class="gl-path-nav-list-item"
@@ -315,7 +287,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
315
287
  <button
316
288
  class="gl-path-button"
317
289
  >
318
- <!---->
319
290
 
320
291
  Fourth
321
292
  <span
@@ -324,7 +295,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
324
295
  4d
325
296
  </span>
326
297
  </button>
327
-
328
298
  </li>
329
299
  <li
330
300
  class="gl-path-nav-list-item"
@@ -333,7 +303,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
333
303
  <button
334
304
  class="gl-path-button"
335
305
  >
336
- <!---->
337
306
 
338
307
  Fifth
339
308
  <span
@@ -342,7 +311,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
342
311
  5d
343
312
  </span>
344
313
  </button>
345
-
346
314
  </li>
347
315
  <li
348
316
  class="gl-path-nav-list-item"
@@ -351,7 +319,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
351
319
  <button
352
320
  class="gl-path-button"
353
321
  >
354
- <!---->
355
322
 
356
323
  Sixth
357
324
  <span
@@ -360,7 +327,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
360
327
  6d
361
328
  </span>
362
329
  </button>
363
-
364
330
  </li>
365
331
  <li
366
332
  class="gl-path-nav-list-item"
@@ -369,7 +335,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
369
335
  <button
370
336
  class="gl-path-button"
371
337
  >
372
- <!---->
373
338
 
374
339
  Seventh
375
340
  <span
@@ -378,7 +343,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
378
343
  7d
379
344
  </span>
380
345
  </button>
381
-
382
346
  </li>
383
347
  <li
384
348
  class="gl-path-nav-list-item"
@@ -387,9 +351,8 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
387
351
  <button
388
352
  category="tertiary"
389
353
  class="gl-path-button"
390
- disabled="disabled"
354
+ disabled=""
391
355
  >
392
- <!---->
393
356
 
394
357
  Eighth
395
358
  <span
@@ -398,7 +361,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
398
361
  8d
399
362
  </span>
400
363
  </button>
401
-
402
364
  </li>
403
365
  <li
404
366
  class="gl-path-nav-list-item"
@@ -407,7 +369,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
407
369
  <button
408
370
  class="gl-path-button"
409
371
  >
410
- <!---->
411
372
 
412
373
  Ninth
413
374
  <span
@@ -416,7 +377,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
416
377
  9d
417
378
  </span>
418
379
  </button>
419
-
420
380
  </li>
421
381
  <li
422
382
  class="gl-path-nav-list-item"
@@ -425,7 +385,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
425
385
  <button
426
386
  class="gl-path-button"
427
387
  >
428
- <!---->
429
388
 
430
389
  Tenth
431
390
  <span
@@ -434,10 +393,8 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
434
393
  10d
435
394
  </span>
436
395
  </button>
437
-
438
396
  </li>
439
397
  </ul>
440
-
441
398
  <span
442
399
  class="gl-path-fade gl-path-fade-right"
443
400
  style="display: none;"
@@ -475,7 +432,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
475
432
  />
476
433
  </button>
477
434
  </span>
478
-
479
435
  <ul
480
436
  class="gl-path-nav-list"
481
437
  >
@@ -486,7 +442,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
486
442
  <button
487
443
  class="gl-path-button gl-path-active-item-indigo"
488
444
  >
489
- <!---->
490
445
 
491
446
  First
492
447
  <span
@@ -495,7 +450,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
495
450
  12d
496
451
  </span>
497
452
  </button>
498
-
499
453
  </li>
500
454
  <li
501
455
  class="gl-path-nav-list-item"
@@ -504,7 +458,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
504
458
  <button
505
459
  class="gl-path-button"
506
460
  >
507
- <!---->
508
461
 
509
462
  Second
510
463
  <span
@@ -513,7 +466,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
513
466
  2d
514
467
  </span>
515
468
  </button>
516
-
517
469
  </li>
518
470
  <li
519
471
  class="gl-path-nav-list-item"
@@ -522,7 +474,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
522
474
  <button
523
475
  class="gl-path-button"
524
476
  >
525
- <!---->
526
477
 
527
478
  Third
528
479
  <span
@@ -531,7 +482,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
531
482
  3d
532
483
  </span>
533
484
  </button>
534
-
535
485
  </li>
536
486
  <li
537
487
  class="gl-path-nav-list-item"
@@ -540,7 +490,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
540
490
  <button
541
491
  class="gl-path-button"
542
492
  >
543
- <!---->
544
493
 
545
494
  Fourth
546
495
  <span
@@ -549,7 +498,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
549
498
  4d
550
499
  </span>
551
500
  </button>
552
-
553
501
  </li>
554
502
  <li
555
503
  class="gl-path-nav-list-item"
@@ -558,7 +506,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
558
506
  <button
559
507
  class="gl-path-button"
560
508
  >
561
- <!---->
562
509
 
563
510
  Fifth
564
511
  <span
@@ -567,7 +514,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
567
514
  5d
568
515
  </span>
569
516
  </button>
570
-
571
517
  </li>
572
518
  <li
573
519
  class="gl-path-nav-list-item"
@@ -576,7 +522,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
576
522
  <button
577
523
  class="gl-path-button"
578
524
  >
579
- <!---->
580
525
 
581
526
  Sixth
582
527
  <span
@@ -585,7 +530,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
585
530
  6d
586
531
  </span>
587
532
  </button>
588
-
589
533
  </li>
590
534
  <li
591
535
  class="gl-path-nav-list-item"
@@ -594,7 +538,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
594
538
  <button
595
539
  class="gl-path-button"
596
540
  >
597
- <!---->
598
541
 
599
542
  Seventh
600
543
  <span
@@ -603,7 +546,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
603
546
  7d
604
547
  </span>
605
548
  </button>
606
-
607
549
  </li>
608
550
  <li
609
551
  class="gl-path-nav-list-item"
@@ -612,9 +554,8 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
612
554
  <button
613
555
  category="tertiary"
614
556
  class="gl-path-button"
615
- disabled="disabled"
557
+ disabled=""
616
558
  >
617
- <!---->
618
559
 
619
560
  Eighth
620
561
  <span
@@ -623,7 +564,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
623
564
  8d
624
565
  </span>
625
566
  </button>
626
-
627
567
  </li>
628
568
  <li
629
569
  class="gl-path-nav-list-item"
@@ -632,7 +572,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
632
572
  <button
633
573
  class="gl-path-button"
634
574
  >
635
- <!---->
636
575
 
637
576
  Ninth
638
577
  <span
@@ -641,7 +580,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
641
580
  9d
642
581
  </span>
643
582
  </button>
644
-
645
583
  </li>
646
584
  <li
647
585
  class="gl-path-nav-list-item"
@@ -650,7 +588,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
650
588
  <button
651
589
  class="gl-path-button"
652
590
  >
653
- <!---->
654
591
 
655
592
  Tenth
656
593
  <span
@@ -659,10 +596,8 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
659
596
  10d
660
597
  </span>
661
598
  </button>
662
-
663
599
  </li>
664
600
  </ul>
665
-
666
601
  <span
667
602
  class="gl-path-fade gl-path-fade-right"
668
603
  style="display: none;"
package/src/scss/variables.scss CHANGED
@@ -137,18 +137,18 @@ Before After (reflected below)
137
137
  * Passes 4.5:1 contrast ratio on $gray-10
138
138
  */
139
139
 
140
- $gray-10: #f5f5f5 !default;
141
- $gray-50: #f0f0f0 !default;
142
- $gray-100: #dbdbdb !default;
143
- $gray-200: #bfbfbf !default;
144
- $gray-300: #999 !default;
145
- $gray-400: #868686 !default;
146
- $gray-500: #666 !default;
147
- $gray-600: #5e5e5e !default;
148
- $gray-700: #525252 !default;
149
- $gray-800: #404040 !default;
150
- $gray-900: #303030 !default;
151
- $gray-950: #1f1f1f !default;
140
+ $gray-10: #fbfafd !default;
141
+ $gray-50: #ececef !default;
142
+ $gray-100: #dcdcde !default;
143
+ $gray-200: #bfbfc3 !default;
144
+ $gray-300: #a4a3a8 !default;
145
+ $gray-400: #89888d !default;
146
+ $gray-500: #737278 !default;
147
+ $gray-600: #626168 !default;
148
+ $gray-700: #535158 !default;
149
+ $gray-800: #434248 !default;
150
+ $gray-900: #333238 !default;
151
+ $gray-950: #1f1e24 !default;
152
152
 
153
153
  // The indigo light and indigo dark use $theme-indigo variables.
154
154
  $theme-indigo-50: #f1f1ff !default;
package/src/utils/constants.js CHANGED
@@ -132,6 +132,11 @@ export const buttonSizeOptionsMap = {
132
132
  medium: 'md',
133
133
  };
134
134
 
135
+ export const datepickerSizeOptionsMap = {
136
+ small: 'sm',
137
+ medium: 'md',
138
+ };
139
+
135
140
  // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
136
141
  export const iconSizeOptions = glIconSizesVariable.split(' ').map(Number);
137
142