uikit-react-public 0.45.2 → 0.45.5

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 (35) hide show
  1. package/dist/components/Alert/Alert.d.ts +4 -1
  2. package/dist/components/Alert/Alert.stories.d.ts +1 -1
  3. package/dist/components/Label/Label.d.ts +1 -0
  4. package/dist/components/Label/Label.stories.d.ts +1 -0
  5. package/dist/index.js +76 -63
  6. package/lib/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap +2 -2
  7. package/lib/components/Alert/Alert.tsx +18 -2
  8. package/lib/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap +16 -8
  9. package/lib/components/AppMenu/__tests__/__snapshots__/AppMenu.test.tsx.snap +2 -2
  10. package/lib/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +6 -6
  11. package/lib/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap +4 -4
  12. package/lib/components/Breadcrumbs/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +4 -4
  13. package/lib/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +2 -2
  14. package/lib/components/Calendar/__tests__/__snapshots__/Calendar.test.tsx.snap +8 -8
  15. package/lib/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap +2 -2
  16. package/lib/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +5 -5
  17. package/lib/components/Datepicker/__tests__/__snapshots__/Datepicker.test.tsx.snap +2 -2
  18. package/lib/components/FileInput/__tests__/__snapshots__/FileInput.test.tsx.snap +2 -2
  19. package/lib/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap +21 -21
  20. package/lib/components/FooterNew/__tests__/__snapshots__/Footer.test.tsx.snap +27 -27
  21. package/lib/components/HeaderDraft/__tests__/__snapshots__/Header.test.tsx.snap +1 -1
  22. package/lib/components/Icon/BaseIcon.tsx +1 -0
  23. package/lib/components/Icon/__tests__/__snapshots__/Icon.test.tsx.snap +4 -4
  24. package/lib/components/IconButton/__tests__/__snapshots__/IconButton.test.tsx.snap +3 -3
  25. package/lib/components/Label/Label.stories.tsx +17 -0
  26. package/lib/components/Label/Label.tsx +4 -7
  27. package/lib/components/Label/__tests__/Label.test.tsx +15 -0
  28. package/lib/components/Label/__tests__/__snapshots__/Label.test.tsx.snap +1 -3
  29. package/lib/components/Search/__tests__/__snapshots__/Search.test.tsx.snap +4 -4
  30. package/lib/components/Select/__tests__/__snapshots__/Select.test.tsx.snap +1 -1
  31. package/lib/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap +6 -6
  32. package/lib/components/Snackbar/__tests__/__snapshots__/Snackbar.test.tsx.snap +3 -3
  33. package/lib/components/Table/__tests__/__snapshots__/Table.test.tsx.snap +1 -1
  34. package/lib/components/Table/subcomponents/Cell/__tests__/__snapshots__/Cell.test.tsx.snap +1 -1
  35. package/package.json +1 -1
package/lib/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap CHANGED
@@ -22,7 +22,7 @@ exports[`Chip > snapshot: checked prop 1`] = `
22
22
  class="css-vv99xy"
23
23
  >
24
24
  <svg
25
- class="ucl-uikit-icon css-1fx6elc"
25
+ class="ucl-uikit-icon css-yrrn6x"
26
26
  data-testid="ucl-uikit-icon"
27
27
  fill="none"
28
28
  focusable="false"
@@ -74,7 +74,7 @@ exports[`Chip > snapshot: disabled and checked props 1`] = `
74
74
  class="css-vv99xy"
75
75
  >
76
76
  <svg
77
- class="ucl-uikit-icon css-1fx6elc"
77
+ class="ucl-uikit-icon css-yrrn6x"
78
78
  data-testid="ucl-uikit-icon"
79
79
  fill="none"
80
80
  focusable="false"
@@ -125,7 +125,7 @@ exports[`Chip > snapshot: disabled prop 1`] = `
125
125
  class="css-vv99xy"
126
126
  >
127
127
  <svg
128
- class="ucl-uikit-icon css-10yks9o"
128
+ class="ucl-uikit-icon css-1tcswh6"
129
129
  data-testid="ucl-uikit-icon"
130
130
  fill="none"
131
131
  focusable="false"
@@ -175,7 +175,7 @@ exports[`Chip > snapshot: no props 1`] = `
175
175
  class="css-vv99xy"
176
176
  >
177
177
  <svg
178
- class="ucl-uikit-icon css-10yks9o"
178
+ class="ucl-uikit-icon css-1tcswh6"
179
179
  data-testid="ucl-uikit-icon"
180
180
  fill="none"
181
181
  focusable="false"
@@ -225,7 +225,7 @@ exports[`Chip > snapshot: testId prop 1`] = `
225
225
  class="css-vv99xy"
226
226
  >
227
227
  <svg
228
- class="ucl-uikit-icon css-10yks9o"
228
+ class="ucl-uikit-icon css-1tcswh6"
229
229
  data-testid="ucl-uikit-icon"
230
230
  fill="none"
231
231
  focusable="false"
package/lib/components/Datepicker/__tests__/__snapshots__/Datepicker.test.tsx.snap CHANGED
@@ -25,7 +25,7 @@ exports[`Datepicker > Snapshot: no date provided 1`] = `
25
25
  type="button"
26
26
  >
27
27
  <svg
28
- class="ucl-uikit-icon css-19m0hpd"
28
+ class="ucl-uikit-icon css-kzaqcy"
29
29
  data-testid="ucl-uikit-icon"
30
30
  fill="none"
31
31
  focusable="false"
@@ -80,7 +80,7 @@ exports[`Datepicker > Snapshot: with date provided 1`] = `
80
80
  type="button"
81
81
  >
82
82
  <svg
83
- class="ucl-uikit-icon css-19m0hpd"
83
+ class="ucl-uikit-icon css-kzaqcy"
84
84
  data-testid="ucl-uikit-icon"
85
85
  fill="none"
86
86
  focusable="false"
package/lib/components/FileInput/__tests__/__snapshots__/FileInput.test.tsx.snap CHANGED
@@ -9,7 +9,7 @@ exports[`Input > snapshot: no props 1`] = `
9
9
  for="file-input-1"
10
10
  >
11
11
  <svg
12
- class="ucl-uikit-icon css-148hpxb"
12
+ class="ucl-uikit-icon css-f962ig"
13
13
  data-testid="ucl-uikit-icon"
14
14
  fill="none"
15
15
  focusable="false"
@@ -46,7 +46,7 @@ exports[`Input > snapshot: value prop 1`] = `
46
46
  for="file-input-1"
47
47
  >
48
48
  <svg
49
- class="ucl-uikit-icon css-148hpxb"
49
+ class="ucl-uikit-icon css-f962ig"
50
50
  data-testid="ucl-uikit-icon"
51
51
  fill="none"
52
52
  focusable="false"
package/lib/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap CHANGED
@@ -41,7 +41,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
41
41
  >
42
42
  <svg
43
43
  aria-hidden="true"
44
- class="ucl-uikit-icon css-148hpxb"
44
+ class="ucl-uikit-icon css-f962ig"
45
45
  data-testid="ucl-uikit-icon"
46
46
  fill="currentColor"
47
47
  focusable="false"
@@ -67,7 +67,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
67
67
  >
68
68
  <svg
69
69
  aria-hidden="true"
70
- class="ucl-uikit-icon css-148hpxb"
70
+ class="ucl-uikit-icon css-f962ig"
71
71
  data-testid="ucl-uikit-icon"
72
72
  fill="currentColor"
73
73
  focusable="false"
@@ -93,7 +93,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
93
93
  >
94
94
  <svg
95
95
  aria-hidden="true"
96
- class="ucl-uikit-icon css-148hpxb"
96
+ class="ucl-uikit-icon css-f962ig"
97
97
  data-testid="ucl-uikit-icon"
98
98
  fill="currentColor"
99
99
  focusable="false"
@@ -119,7 +119,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
119
119
  >
120
120
  <svg
121
121
  aria-hidden="true"
122
- class="ucl-uikit-icon css-148hpxb"
122
+ class="ucl-uikit-icon css-f962ig"
123
123
  data-testid="ucl-uikit-icon"
124
124
  fill="currentColor"
125
125
  focusable="false"
@@ -145,7 +145,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
145
145
  >
146
146
  <svg
147
147
  aria-hidden="true"
148
- class="ucl-uikit-icon css-148hpxb"
148
+ class="ucl-uikit-icon css-f962ig"
149
149
  data-testid="ucl-uikit-icon"
150
150
  fill="currentColor"
151
151
  focusable="false"
@@ -173,7 +173,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
173
173
  >
174
174
  <svg
175
175
  aria-hidden="true"
176
- class="ucl-uikit-icon css-148hpxb"
176
+ class="ucl-uikit-icon css-f962ig"
177
177
  data-testid="ucl-uikit-icon"
178
178
  fill="currentColor"
179
179
  focusable="false"
@@ -199,7 +199,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
199
199
  >
200
200
  <svg
201
201
  aria-hidden="true"
202
- class="ucl-uikit-icon css-148hpxb"
202
+ class="ucl-uikit-icon css-f962ig"
203
203
  data-testid="ucl-uikit-icon"
204
204
  fill="currentColor"
205
205
  focusable="false"
@@ -396,7 +396,7 @@ exports[`Footer > snapshot: nav links 1`] = `
396
396
  >
397
397
  <svg
398
398
  aria-hidden="true"
399
- class="ucl-uikit-icon css-148hpxb"
399
+ class="ucl-uikit-icon css-f962ig"
400
400
  data-testid="ucl-uikit-icon"
401
401
  fill="currentColor"
402
402
  focusable="false"
@@ -422,7 +422,7 @@ exports[`Footer > snapshot: nav links 1`] = `
422
422
  >
423
423
  <svg
424
424
  aria-hidden="true"
425
- class="ucl-uikit-icon css-148hpxb"
425
+ class="ucl-uikit-icon css-f962ig"
426
426
  data-testid="ucl-uikit-icon"
427
427
  fill="currentColor"
428
428
  focusable="false"
@@ -448,7 +448,7 @@ exports[`Footer > snapshot: nav links 1`] = `
448
448
  >
449
449
  <svg
450
450
  aria-hidden="true"
451
- class="ucl-uikit-icon css-148hpxb"
451
+ class="ucl-uikit-icon css-f962ig"
452
452
  data-testid="ucl-uikit-icon"
453
453
  fill="currentColor"
454
454
  focusable="false"
@@ -474,7 +474,7 @@ exports[`Footer > snapshot: nav links 1`] = `
474
474
  >
475
475
  <svg
476
476
  aria-hidden="true"
477
- class="ucl-uikit-icon css-148hpxb"
477
+ class="ucl-uikit-icon css-f962ig"
478
478
  data-testid="ucl-uikit-icon"
479
479
  fill="currentColor"
480
480
  focusable="false"
@@ -500,7 +500,7 @@ exports[`Footer > snapshot: nav links 1`] = `
500
500
  >
501
501
  <svg
502
502
  aria-hidden="true"
503
- class="ucl-uikit-icon css-148hpxb"
503
+ class="ucl-uikit-icon css-f962ig"
504
504
  data-testid="ucl-uikit-icon"
505
505
  fill="currentColor"
506
506
  focusable="false"
@@ -528,7 +528,7 @@ exports[`Footer > snapshot: nav links 1`] = `
528
528
  >
529
529
  <svg
530
530
  aria-hidden="true"
531
- class="ucl-uikit-icon css-148hpxb"
531
+ class="ucl-uikit-icon css-f962ig"
532
532
  data-testid="ucl-uikit-icon"
533
533
  fill="currentColor"
534
534
  focusable="false"
@@ -554,7 +554,7 @@ exports[`Footer > snapshot: nav links 1`] = `
554
554
  >
555
555
  <svg
556
556
  aria-hidden="true"
557
- class="ucl-uikit-icon css-148hpxb"
557
+ class="ucl-uikit-icon css-f962ig"
558
558
  data-testid="ucl-uikit-icon"
559
559
  fill="currentColor"
560
560
  focusable="false"
@@ -700,7 +700,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
700
700
  >
701
701
  <svg
702
702
  aria-hidden="true"
703
- class="ucl-uikit-icon css-148hpxb"
703
+ class="ucl-uikit-icon css-f962ig"
704
704
  data-testid="ucl-uikit-icon"
705
705
  fill="currentColor"
706
706
  focusable="false"
@@ -726,7 +726,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
726
726
  >
727
727
  <svg
728
728
  aria-hidden="true"
729
- class="ucl-uikit-icon css-148hpxb"
729
+ class="ucl-uikit-icon css-f962ig"
730
730
  data-testid="ucl-uikit-icon"
731
731
  fill="currentColor"
732
732
  focusable="false"
@@ -752,7 +752,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
752
752
  >
753
753
  <svg
754
754
  aria-hidden="true"
755
- class="ucl-uikit-icon css-148hpxb"
755
+ class="ucl-uikit-icon css-f962ig"
756
756
  data-testid="ucl-uikit-icon"
757
757
  fill="currentColor"
758
758
  focusable="false"
@@ -778,7 +778,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
778
778
  >
779
779
  <svg
780
780
  aria-hidden="true"
781
- class="ucl-uikit-icon css-148hpxb"
781
+ class="ucl-uikit-icon css-f962ig"
782
782
  data-testid="ucl-uikit-icon"
783
783
  fill="currentColor"
784
784
  focusable="false"
@@ -804,7 +804,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
804
804
  >
805
805
  <svg
806
806
  aria-hidden="true"
807
- class="ucl-uikit-icon css-148hpxb"
807
+ class="ucl-uikit-icon css-f962ig"
808
808
  data-testid="ucl-uikit-icon"
809
809
  fill="currentColor"
810
810
  focusable="false"
@@ -832,7 +832,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
832
832
  >
833
833
  <svg
834
834
  aria-hidden="true"
835
- class="ucl-uikit-icon css-148hpxb"
835
+ class="ucl-uikit-icon css-f962ig"
836
836
  data-testid="ucl-uikit-icon"
837
837
  fill="currentColor"
838
838
  focusable="false"
@@ -858,7 +858,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
858
858
  >
859
859
  <svg
860
860
  aria-hidden="true"
861
- class="ucl-uikit-icon css-148hpxb"
861
+ class="ucl-uikit-icon css-f962ig"
862
862
  data-testid="ucl-uikit-icon"
863
863
  fill="currentColor"
864
864
  focusable="false"
package/lib/components/FooterNew/__tests__/__snapshots__/Footer.test.tsx.snap CHANGED
@@ -60,7 +60,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
60
60
  >
61
61
  <svg
62
62
  aria-hidden="true"
63
- class="ucl-uikit-icon css-148hpxb"
63
+ class="ucl-uikit-icon css-f962ig"
64
64
  data-testid="ucl-uikit-icon"
65
65
  fill="currentColor"
66
66
  focusable="false"
@@ -89,7 +89,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
89
89
  >
90
90
  <svg
91
91
  aria-hidden="true"
92
- class="ucl-uikit-icon css-148hpxb"
92
+ class="ucl-uikit-icon css-f962ig"
93
93
  data-testid="ucl-uikit-icon"
94
94
  fill="currentColor"
95
95
  focusable="false"
@@ -117,7 +117,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
117
117
  >
118
118
  <svg
119
119
  aria-hidden="true"
120
- class="ucl-uikit-icon css-148hpxb"
120
+ class="ucl-uikit-icon css-f962ig"
121
121
  data-testid="ucl-uikit-icon"
122
122
  fill="currentColor"
123
123
  focusable="false"
@@ -143,7 +143,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
143
143
  >
144
144
  <svg
145
145
  aria-hidden="true"
146
- class="ucl-uikit-icon css-148hpxb"
146
+ class="ucl-uikit-icon css-f962ig"
147
147
  data-testid="ucl-uikit-icon"
148
148
  fill="currentColor"
149
149
  focusable="false"
@@ -169,7 +169,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
169
169
  >
170
170
  <svg
171
171
  aria-hidden="true"
172
- class="ucl-uikit-icon css-148hpxb"
172
+ class="ucl-uikit-icon css-f962ig"
173
173
  data-testid="ucl-uikit-icon"
174
174
  fill="currentColor"
175
175
  focusable="false"
@@ -195,7 +195,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
195
195
  >
196
196
  <svg
197
197
  aria-hidden="true"
198
- class="ucl-uikit-icon css-148hpxb"
198
+ class="ucl-uikit-icon css-f962ig"
199
199
  data-testid="ucl-uikit-icon"
200
200
  fill="currentColor"
201
201
  focusable="false"
@@ -221,7 +221,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
221
221
  >
222
222
  <svg
223
223
  aria-hidden="true"
224
- class="ucl-uikit-icon css-148hpxb"
224
+ class="ucl-uikit-icon css-f962ig"
225
225
  data-testid="ucl-uikit-icon"
226
226
  fill="currentColor"
227
227
  focusable="false"
@@ -248,7 +248,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
248
248
  >
249
249
  <svg
250
250
  aria-hidden="true"
251
- class="ucl-uikit-icon css-148hpxb"
251
+ class="ucl-uikit-icon css-f962ig"
252
252
  data-testid="ucl-uikit-icon"
253
253
  fill="currentColor"
254
254
  focusable="false"
@@ -279,7 +279,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
279
279
  >
280
280
  Back to top
281
281
  <svg
282
- class="ucl-uikit-icon css-148hpxb"
282
+ class="ucl-uikit-icon css-f962ig"
283
283
  data-testid="ucl-uikit-icon"
284
284
  fill="none"
285
285
  focusable="false"
@@ -478,7 +478,7 @@ exports[`Footer > snapshot: nav links 1`] = `
478
478
  >
479
479
  <svg
480
480
  aria-hidden="true"
481
- class="ucl-uikit-icon css-148hpxb"
481
+ class="ucl-uikit-icon css-f962ig"
482
482
  data-testid="ucl-uikit-icon"
483
483
  fill="currentColor"
484
484
  focusable="false"
@@ -507,7 +507,7 @@ exports[`Footer > snapshot: nav links 1`] = `
507
507
  >
508
508
  <svg
509
509
  aria-hidden="true"
510
- class="ucl-uikit-icon css-148hpxb"
510
+ class="ucl-uikit-icon css-f962ig"
511
511
  data-testid="ucl-uikit-icon"
512
512
  fill="currentColor"
513
513
  focusable="false"
@@ -535,7 +535,7 @@ exports[`Footer > snapshot: nav links 1`] = `
535
535
  >
536
536
  <svg
537
537
  aria-hidden="true"
538
- class="ucl-uikit-icon css-148hpxb"
538
+ class="ucl-uikit-icon css-f962ig"
539
539
  data-testid="ucl-uikit-icon"
540
540
  fill="currentColor"
541
541
  focusable="false"
@@ -561,7 +561,7 @@ exports[`Footer > snapshot: nav links 1`] = `
561
561
  >
562
562
  <svg
563
563
  aria-hidden="true"
564
- class="ucl-uikit-icon css-148hpxb"
564
+ class="ucl-uikit-icon css-f962ig"
565
565
  data-testid="ucl-uikit-icon"
566
566
  fill="currentColor"
567
567
  focusable="false"
@@ -587,7 +587,7 @@ exports[`Footer > snapshot: nav links 1`] = `
587
587
  >
588
588
  <svg
589
589
  aria-hidden="true"
590
- class="ucl-uikit-icon css-148hpxb"
590
+ class="ucl-uikit-icon css-f962ig"
591
591
  data-testid="ucl-uikit-icon"
592
592
  fill="currentColor"
593
593
  focusable="false"
@@ -613,7 +613,7 @@ exports[`Footer > snapshot: nav links 1`] = `
613
613
  >
614
614
  <svg
615
615
  aria-hidden="true"
616
- class="ucl-uikit-icon css-148hpxb"
616
+ class="ucl-uikit-icon css-f962ig"
617
617
  data-testid="ucl-uikit-icon"
618
618
  fill="currentColor"
619
619
  focusable="false"
@@ -639,7 +639,7 @@ exports[`Footer > snapshot: nav links 1`] = `
639
639
  >
640
640
  <svg
641
641
  aria-hidden="true"
642
- class="ucl-uikit-icon css-148hpxb"
642
+ class="ucl-uikit-icon css-f962ig"
643
643
  data-testid="ucl-uikit-icon"
644
644
  fill="currentColor"
645
645
  focusable="false"
@@ -666,7 +666,7 @@ exports[`Footer > snapshot: nav links 1`] = `
666
666
  >
667
667
  <svg
668
668
  aria-hidden="true"
669
- class="ucl-uikit-icon css-148hpxb"
669
+ class="ucl-uikit-icon css-f962ig"
670
670
  data-testid="ucl-uikit-icon"
671
671
  fill="currentColor"
672
672
  focusable="false"
@@ -697,7 +697,7 @@ exports[`Footer > snapshot: nav links 1`] = `
697
697
  >
698
698
  Back to top
699
699
  <svg
700
- class="ucl-uikit-icon css-148hpxb"
700
+ class="ucl-uikit-icon css-f962ig"
701
701
  data-testid="ucl-uikit-icon"
702
702
  fill="none"
703
703
  focusable="false"
@@ -843,7 +843,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
843
843
  >
844
844
  <svg
845
845
  aria-hidden="true"
846
- class="ucl-uikit-icon css-148hpxb"
846
+ class="ucl-uikit-icon css-f962ig"
847
847
  data-testid="ucl-uikit-icon"
848
848
  fill="currentColor"
849
849
  focusable="false"
@@ -872,7 +872,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
872
872
  >
873
873
  <svg
874
874
  aria-hidden="true"
875
- class="ucl-uikit-icon css-148hpxb"
875
+ class="ucl-uikit-icon css-f962ig"
876
876
  data-testid="ucl-uikit-icon"
877
877
  fill="currentColor"
878
878
  focusable="false"
@@ -900,7 +900,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
900
900
  >
901
901
  <svg
902
902
  aria-hidden="true"
903
- class="ucl-uikit-icon css-148hpxb"
903
+ class="ucl-uikit-icon css-f962ig"
904
904
  data-testid="ucl-uikit-icon"
905
905
  fill="currentColor"
906
906
  focusable="false"
@@ -926,7 +926,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
926
926
  >
927
927
  <svg
928
928
  aria-hidden="true"
929
- class="ucl-uikit-icon css-148hpxb"
929
+ class="ucl-uikit-icon css-f962ig"
930
930
  data-testid="ucl-uikit-icon"
931
931
  fill="currentColor"
932
932
  focusable="false"
@@ -952,7 +952,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
952
952
  >
953
953
  <svg
954
954
  aria-hidden="true"
955
- class="ucl-uikit-icon css-148hpxb"
955
+ class="ucl-uikit-icon css-f962ig"
956
956
  data-testid="ucl-uikit-icon"
957
957
  fill="currentColor"
958
958
  focusable="false"
@@ -978,7 +978,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
978
978
  >
979
979
  <svg
980
980
  aria-hidden="true"
981
- class="ucl-uikit-icon css-148hpxb"
981
+ class="ucl-uikit-icon css-f962ig"
982
982
  data-testid="ucl-uikit-icon"
983
983
  fill="currentColor"
984
984
  focusable="false"
@@ -1004,7 +1004,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
1004
1004
  >
1005
1005
  <svg
1006
1006
  aria-hidden="true"
1007
- class="ucl-uikit-icon css-148hpxb"
1007
+ class="ucl-uikit-icon css-f962ig"
1008
1008
  data-testid="ucl-uikit-icon"
1009
1009
  fill="currentColor"
1010
1010
  focusable="false"
@@ -1031,7 +1031,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
1031
1031
  >
1032
1032
  <svg
1033
1033
  aria-hidden="true"
1034
- class="ucl-uikit-icon css-148hpxb"
1034
+ class="ucl-uikit-icon css-f962ig"
1035
1035
  data-testid="ucl-uikit-icon"
1036
1036
  fill="currentColor"
1037
1037
  focusable="false"
@@ -1062,7 +1062,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
1062
1062
  >
1063
1063
  Back to top
1064
1064
  <svg
1065
- class="ucl-uikit-icon css-148hpxb"
1065
+ class="ucl-uikit-icon css-f962ig"
1066
1066
  data-testid="ucl-uikit-icon"
1067
1067
  fill="none"
1068
1068
  focusable="false"
package/lib/components/HeaderDraft/__tests__/__snapshots__/Header.test.tsx.snap CHANGED
@@ -69,7 +69,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
69
69
  </div>
70
70
  </div>
71
71
  <svg
72
- class="ucl-uikit-icon css-10o3g4f"
72
+ class="ucl-uikit-icon css-egvb7h"
73
73
  data-testid="ucl-uikit-icon"
74
74
  fill="none"
75
75
  focusable="false"
package/lib/components/Icon/BaseIcon.tsx CHANGED
@@ -26,6 +26,7 @@ const BaseIcon = ({
26
26
  }: BaseIconProps) => {
27
27
  const baseStyle = css`
28
28
  vertical-align: middle;
29
+ flex-shrink: 0;
29
30
  `;
30
31
 
31
32
  const style = cx(NAME, baseStyle, className);
package/lib/components/Icon/__tests__/__snapshots__/Icon.test.tsx.snap CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  exports[`Icon > Snapshot: title prop 1`] = `
4
4
  <svg
5
- class="ucl-uikit-icon css-148hpxb"
5
+ class="ucl-uikit-icon css-f962ig"
6
6
  data-testid="ucl-uikit-icon"
7
7
  fill="none"
8
8
  focusable="false"
@@ -26,7 +26,7 @@ exports[`Icon > Snapshot: title prop 1`] = `
26
26
 
27
27
  exports[`Icon > snapshot: className prop 1`] = `
28
28
  <svg
29
- class="ucl-uikit-icon css-148hpxb a-class-name"
29
+ class="ucl-uikit-icon css-f962ig a-class-name"
30
30
  data-testid="ucl-uikit-icon"
31
31
  fill="none"
32
32
  focusable="false"
@@ -47,7 +47,7 @@ exports[`Icon > snapshot: className prop 1`] = `
47
47
 
48
48
  exports[`Icon > snapshot: no props 1`] = `
49
49
  <svg
50
- class="ucl-uikit-icon css-148hpxb"
50
+ class="ucl-uikit-icon css-f962ig"
51
51
  data-testid="ucl-uikit-icon"
52
52
  fill="none"
53
53
  focusable="false"
@@ -68,7 +68,7 @@ exports[`Icon > snapshot: no props 1`] = `
68
68
 
69
69
  exports[`Icon > snapshot: size prop 1`] = `
70
70
  <svg
71
- class="ucl-uikit-icon css-148hpxb"
71
+ class="ucl-uikit-icon css-f962ig"
72
72
  data-testid="ucl-uikit-icon"
73
73
  fill="none"
74
74
  focusable="false"
package/lib/components/IconButton/__tests__/__snapshots__/IconButton.test.tsx.snap CHANGED
@@ -7,7 +7,7 @@ exports[`IconButton > snapshot: disabled prop 1`] = `
7
7
  disabled=""
8
8
  >
9
9
  <svg
10
- class="ucl-uikit-icon css-148hpxb"
10
+ class="ucl-uikit-icon css-f962ig"
11
11
  data-testid="ucl-uikit-icon"
12
12
  fill="none"
13
13
  focusable="false"
@@ -33,7 +33,7 @@ exports[`IconButton > snapshot: no props 1`] = `
33
33
  data-testid="ucl-uikit-icon-button"
34
34
  >
35
35
  <svg
36
- class="ucl-uikit-icon css-148hpxb"
36
+ class="ucl-uikit-icon css-f962ig"
37
37
  data-testid="ucl-uikit-icon"
38
38
  fill="none"
39
39
  focusable="false"
@@ -59,7 +59,7 @@ exports[`IconButton > snapshot: testId prop 1`] = `
59
59
  data-testid="abc"
60
60
  >
61
61
  <svg
62
- class="ucl-uikit-icon css-148hpxb"
62
+ class="ucl-uikit-icon css-f962ig"
63
63
  data-testid="ucl-uikit-icon"
64
64
  fill="none"
65
65
  focusable="false"
package/lib/components/Label/Label.stories.tsx CHANGED
@@ -38,6 +38,23 @@ export const Optional: Story = {
38
38
  },
39
39
  };
40
40
 
41
+ export const OptionalWithCustomStyle: Story = {
42
+ name: 'Optional with custom style',
43
+ args: {
44
+ children: 'Optional label',
45
+ optional: true,
46
+ optionalClassName: 'custom-optional-style',
47
+ },
48
+ decorators: [
49
+ (Story) => (
50
+ <>
51
+ <style>{`.custom-optional-style { font-weight: normal; color: #565656; }`}</style>
52
+ <Story />
53
+ </>
54
+ ),
55
+ ],
56
+ };
57
+
41
58
  export const WithLongText: Story = {
42
59
  name: 'With long text',
43
60
  args: {
package/lib/components/Label/Label.tsx CHANGED
@@ -10,6 +10,7 @@ export interface LabelBaseProps extends LabelHTMLAttributes<HTMLLabelElement> {
10
10
  type?: 'block' | 'inline';
11
11
  disabled?: boolean;
12
12
  optional?: boolean;
13
+ optionalClassName?: string;
13
14
  testId?: string;
14
15
  }
15
16
 
@@ -23,6 +24,7 @@ const Label = forwardRef<Ref, LabelProps>(
23
24
  type = 'block',
24
25
  disabled,
25
26
  optional,
27
+ optionalClassName,
26
28
  testId = NAME,
27
29
  className,
28
30
  children,
@@ -40,7 +42,7 @@ const Label = forwardRef<Ref, LabelProps>(
40
42
  disabled = disabled ?? contextDisabled;
41
43
  optional = optional ?? contextOptional;
42
44
  const htmlFor = props.htmlFor ?? contextId;
43
- const { md, mdSemibold } = theme.typography.body;
45
+ const { mdSemibold } = theme.typography.body;
44
46
 
45
47
  const baseStyle = css`
46
48
  width: 100%;
@@ -74,11 +76,6 @@ const Label = forwardRef<Ref, LabelProps>(
74
76
  className
75
77
  );
76
78
 
77
- const optionalStyle = css`
78
- font-weight: ${md.fontWeight};
79
- font-style: italic;
80
- `;
81
-
82
79
  return (
83
80
  <label
84
81
  ref={ref}
@@ -91,7 +88,7 @@ const Label = forwardRef<Ref, LabelProps>(
91
88
  {optional && (
92
89
  <>
93
90
  {' '}
94
- <span className={optionalStyle}>(optional)</span>
91
+ <span className={optionalClassName}>(optional)</span>
95
92
  </>
96
93
  )}
97
94
  </label>
package/lib/components/Label/__tests__/Label.test.tsx CHANGED
@@ -51,6 +51,21 @@ describe('Label', () => {
51
51
  expect(renderResult.container.firstChild).toMatchSnapshot();
52
52
  });
53
53
 
54
+ test('optional text can accept a custom class name', () => {
55
+ render(
56
+ <ThemeContextProvider>
57
+ <Label
58
+ optional
59
+ optionalClassName='custom-optional-class'
60
+ >
61
+ Name
62
+ </Label>
63
+ </ThemeContextProvider>
64
+ );
65
+
66
+ expect(screen.getByText('(optional)')).toHaveClass('custom-optional-class');
67
+ });
68
+
54
69
  test('snapshot: testId prop', () => {
55
70
  const renderResult = render(
56
71
  <ThemeContextProvider>