@innovaccer/design-system 2.36.2 → 2.37.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.
- package/CHANGELOG.md +61 -0
- package/css/dist/index.css +89 -33
- package/css/dist/index.css.map +1 -1
- package/css/src/components/actionCard.css +13 -10
- package/css/src/components/avatar.css +25 -2
- package/css/src/components/avatarGroup.css +8 -0
- package/css/src/components/avatarSelection.css +1 -1
- package/css/src/components/chip.css +12 -7
- package/css/src/components/message.css +1 -1
- package/css/src/components/select.css +8 -1
- package/css/src/components/selectionCard.css +17 -11
- package/css/src/utils/cursor.css +4 -0
- package/dist/.lib/tsconfig.type.tsbuildinfo +31 -29
- package/dist/core/components/atoms/avatar/Avatar.d.ts +3 -0
- package/dist/core/components/atoms/avatarGroup/AvatarGroup.d.ts +2 -0
- package/dist/core/components/atoms/avatarSelection/AvatarSelection.d.ts +2 -0
- package/dist/core/components/atoms/avatarSelection/avatarPopover/AvatarSelectionOption.d.ts +1 -0
- package/dist/core/components/atoms/avatarSelection/avatarsSelection/SelectionAvatar.d.ts +2 -0
- package/dist/core/components/organisms/select/Select.d.ts +2 -0
- package/dist/index.esm.js +136 -53
- package/dist/index.js +142 -55
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.br +0 -0
- package/dist/index.umd.js.gz +0 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,64 @@
|
|
|
1
|
+
## 2.37.0 (2024-07-02)
|
|
2
|
+
|
|
3
|
+
### Highlights
|
|
4
|
+
|
|
5
|
+
- feat(select): add support for custom trigger in select (4e85e268)
|
|
6
|
+
- feat(avatar): add disabled state in avatar component (008691a9)
|
|
7
|
+
- feat(avatargroup): add disabled state in avatar group component (773ba954)
|
|
8
|
+
- feat(avatarselection): add disabled state in avatar selection component (402946cc)
|
|
9
|
+
- feat(chip): update chip states (b9a46789)
|
|
10
|
+
- feat(ActionCard): update states and spacing in action card (e42e0eb8)
|
|
11
|
+
- feat(selectionCard): update states and spacing in selection card (8ea2982c)
|
|
12
|
+
- feat(message): update warning appearance background color (b7716cd7)
|
|
13
|
+
|
|
14
|
+
### Breaking changes
|
|
15
|
+
|
|
16
|
+
NA
|
|
17
|
+
|
|
18
|
+
### Migration guide
|
|
19
|
+
|
|
20
|
+
NA
|
|
21
|
+
|
|
22
|
+
### Deprecations
|
|
23
|
+
|
|
24
|
+
NA
|
|
25
|
+
|
|
26
|
+
### Features
|
|
27
|
+
|
|
28
|
+
- feat(avatar): add disabled state in avatar component (008691a9)
|
|
29
|
+
- feat(avatargroup): add disabled state in avatar group component (773ba954)
|
|
30
|
+
- feat(avatarselection): add disabled state in avatar selection component (402946cc)
|
|
31
|
+
- feat(select): add support for custom trigger in select (4e85e268)
|
|
32
|
+
- feat(chip): update chip states (b9a46789)
|
|
33
|
+
- feat(ActionCard): update states and spacing in action card (e42e0eb8)
|
|
34
|
+
- feat(selectionCard): update states and spacing in selection card (8ea2982c)
|
|
35
|
+
- feat(message): update warning appearance background color (b7716cd7)
|
|
36
|
+
|
|
37
|
+
### Fixes
|
|
38
|
+
|
|
39
|
+
- fix(docs): remove interaction tab from avatar documentation (4a80dede)
|
|
40
|
+
- fix(cypress): update link visit function for breadcrumb (9a3da237)
|
|
41
|
+
|
|
42
|
+
### Improvements
|
|
43
|
+
|
|
44
|
+
- feat(stepper): update the stories for steppers (3e95e3a4)
|
|
45
|
+
- feat(table): update table filter story (c9c64c31)
|
|
46
|
+
|
|
47
|
+
### Documentation
|
|
48
|
+
|
|
49
|
+
- docs(interactive-cards): update states and spacing documentation (826b0c6a)
|
|
50
|
+
- docs(states): update documentation of states in foundations (f5d53f2d)
|
|
51
|
+
- docs(inlineEditable): update documentation of inline editable field (0ce2dfbf)
|
|
52
|
+
- docs(chip): update chip state images (b1a9db6b)
|
|
53
|
+
- docs(page-header): update stepper section in page header (69599cb2)
|
|
54
|
+
- docs(stepper): update stepper page documentation (5b17adae)
|
|
55
|
+
- docs(avatar): update documentation of avatar component (b9749949)
|
|
56
|
+
- docs(avatarGroup): add documentation of avatar group and selection (b5e78996)
|
|
57
|
+
- docs(AIResponse): update images in AI Response examples (f2b7c50c)
|
|
58
|
+
- docs(select): add custom trigger documentation (8a8e5964)
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
1
62
|
## 2.36.2 (2024-06-13)
|
|
2
63
|
|
|
3
64
|
### Highlights
|
package/css/dist/index.css
CHANGED
|
@@ -864,31 +864,34 @@ body {
|
|
|
864
864
|
}
|
|
865
865
|
|
|
866
866
|
.ActionCard {
|
|
867
|
-
cursor: pointer;
|
|
868
867
|
border-radius: var(--spacing-m);
|
|
869
868
|
width: 100%;
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
.ActionCard--default {
|
|
872
|
+
cursor: pointer;
|
|
870
873
|
border: var(--spacing-xs) solid var(--secondary-dark);
|
|
871
874
|
}
|
|
872
875
|
|
|
873
|
-
.ActionCard:hover {
|
|
874
|
-
box-shadow: var(--shadow-
|
|
876
|
+
.ActionCard--default:hover {
|
|
877
|
+
box-shadow: var(--shadow-l);
|
|
875
878
|
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
876
879
|
}
|
|
877
880
|
|
|
878
|
-
.ActionCard:focus,
|
|
879
|
-
.ActionCard:focus-visible {
|
|
881
|
+
.ActionCard--default:focus,
|
|
882
|
+
.ActionCard--default:focus-visible {
|
|
880
883
|
outline: none;
|
|
881
|
-
border: var(--spacing-xs) solid var(--secondary-
|
|
884
|
+
border: var(--spacing-xs) solid var(--secondary-dark);
|
|
882
885
|
box-shadow: var(--shadow-spread) var(--secondary-shadow);
|
|
883
886
|
}
|
|
884
887
|
|
|
885
|
-
.ActionCard:active {
|
|
886
|
-
box-shadow: var(--shadow-
|
|
888
|
+
.ActionCard--default:active {
|
|
889
|
+
box-shadow: var(--shadow-m);
|
|
887
890
|
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
888
891
|
}
|
|
889
892
|
|
|
890
893
|
.ActionCard--disabled {
|
|
891
|
-
|
|
894
|
+
cursor: not-allowed;
|
|
892
895
|
position: relative;
|
|
893
896
|
border: var(--spacing-xs) solid var(--secondary-lighter);
|
|
894
897
|
}
|
|
@@ -901,7 +904,7 @@ body {
|
|
|
901
904
|
left: 0;
|
|
902
905
|
z-index: 2;
|
|
903
906
|
opacity: var(--opacity-10);
|
|
904
|
-
background: var(--secondary-
|
|
907
|
+
background: var(--secondary-lightest);
|
|
905
908
|
}
|
|
906
909
|
|
|
907
910
|
/* Avatar */
|
|
@@ -916,9 +919,16 @@ body {
|
|
|
916
919
|
text-transform: uppercase;
|
|
917
920
|
border-radius: 50%;
|
|
918
921
|
cursor: default;
|
|
922
|
+
position: relative;
|
|
919
923
|
}
|
|
920
924
|
|
|
921
|
-
.Avatar--
|
|
925
|
+
.Avatar--default:focus,
|
|
926
|
+
.Avatar--default:focus-visible {
|
|
927
|
+
outline: 3px solid var(--primary-shadow);
|
|
928
|
+
outline-offset: 3px;
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
.Avatar-wrapper--square {
|
|
922
932
|
padding: var(--spacing-xs);
|
|
923
933
|
box-sizing: border-box;
|
|
924
934
|
}
|
|
@@ -939,10 +949,26 @@ body {
|
|
|
939
949
|
width: var(--spacing-xl);
|
|
940
950
|
}
|
|
941
951
|
|
|
942
|
-
.Avatar--
|
|
952
|
+
.Avatar--noInitials {
|
|
943
953
|
cursor: default;
|
|
944
954
|
}
|
|
945
955
|
|
|
956
|
+
.Avatar--disabled {
|
|
957
|
+
cursor: not-allowed;
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
.Avatar--disabled::after {
|
|
961
|
+
opacity: var(--opacity-20);
|
|
962
|
+
top: 0;
|
|
963
|
+
right: 0;
|
|
964
|
+
bottom: 0;
|
|
965
|
+
left: 0;
|
|
966
|
+
position: absolute;
|
|
967
|
+
pointer-events: none;
|
|
968
|
+
content: '';
|
|
969
|
+
background-color: var(--white);
|
|
970
|
+
}
|
|
971
|
+
|
|
946
972
|
.Avatar--primary {
|
|
947
973
|
background: var(--primary);
|
|
948
974
|
}
|
|
@@ -1006,6 +1032,7 @@ body {
|
|
|
1006
1032
|
|
|
1007
1033
|
.AvatarGroup-item {
|
|
1008
1034
|
border-radius: 50%;
|
|
1035
|
+
position: relative;
|
|
1009
1036
|
}
|
|
1010
1037
|
|
|
1011
1038
|
.AvatarGroup-item--regular {
|
|
@@ -1037,6 +1064,13 @@ body {
|
|
|
1037
1064
|
|
|
1038
1065
|
.AvatarCount-wrapper {
|
|
1039
1066
|
border-radius: 50%;
|
|
1067
|
+
position: relative;
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
.AvatarCount-wrapper:focus,
|
|
1071
|
+
.AvatarCount-wrapper:focus-visible {
|
|
1072
|
+
outline: 3px solid var(--primary-shadow);
|
|
1073
|
+
outline-offset: 3px;
|
|
1040
1074
|
}
|
|
1041
1075
|
|
|
1042
1076
|
/* Selection avatar group */
|
|
@@ -1067,7 +1101,7 @@ body {
|
|
|
1067
1101
|
outline-offset: var(--spacing-xs);
|
|
1068
1102
|
}
|
|
1069
1103
|
|
|
1070
|
-
.SelectionAvatarGroup-wrapper:hover .SelectionAvatarGroup-item {
|
|
1104
|
+
.SelectionAvatarGroup-wrapper:hover .SelectionAvatarGroup-item--active {
|
|
1071
1105
|
transform: translateY(-8px);
|
|
1072
1106
|
}
|
|
1073
1107
|
|
|
@@ -2338,10 +2372,11 @@ body {
|
|
|
2338
2372
|
}
|
|
2339
2373
|
|
|
2340
2374
|
.Chip-action--disabled {
|
|
2341
|
-
background: var(--secondary-
|
|
2375
|
+
background: var(--secondary-light);
|
|
2376
|
+
opacity: var(--opacity-12);
|
|
2342
2377
|
border: 0px;
|
|
2343
2378
|
outline: none;
|
|
2344
|
-
cursor:
|
|
2379
|
+
cursor: not-allowed;
|
|
2345
2380
|
}
|
|
2346
2381
|
|
|
2347
2382
|
.Chip--selection {
|
|
@@ -2366,17 +2401,19 @@ body {
|
|
|
2366
2401
|
}
|
|
2367
2402
|
|
|
2368
2403
|
.Chip-selection--disabled {
|
|
2369
|
-
background: var(--
|
|
2370
|
-
border-color: var(--secondary
|
|
2404
|
+
background: var(--white);
|
|
2405
|
+
border-color: var(--secondary);
|
|
2406
|
+
opacity: var(--opacity-12);
|
|
2407
|
+
cursor: not-allowed;
|
|
2371
2408
|
}
|
|
2372
2409
|
|
|
2373
2410
|
.Chip-selection--selected {
|
|
2374
|
-
background:
|
|
2411
|
+
background: rgba(220, 236, 249, 0.48);
|
|
2375
2412
|
border-color: var(--primary-lighter);
|
|
2376
2413
|
}
|
|
2377
2414
|
|
|
2378
2415
|
.Chip-selection--selected:hover {
|
|
2379
|
-
background:
|
|
2416
|
+
background: rgba(151, 197, 240, 0.48);
|
|
2380
2417
|
border-color: var(--primary-light);
|
|
2381
2418
|
}
|
|
2382
2419
|
|
|
@@ -2404,7 +2441,7 @@ body {
|
|
|
2404
2441
|
}
|
|
2405
2442
|
|
|
2406
2443
|
.Chip-selection--selectedDisabled {
|
|
2407
|
-
background:
|
|
2444
|
+
background: rgba(220, 236, 249, 0.48);
|
|
2408
2445
|
border-color: var(--primary-lighter);
|
|
2409
2446
|
}
|
|
2410
2447
|
|
|
@@ -2430,6 +2467,8 @@ body {
|
|
|
2430
2467
|
|
|
2431
2468
|
.Chip-input--disabled {
|
|
2432
2469
|
background: var(--secondary-lighter);
|
|
2470
|
+
opacity: var(--opacity-12);
|
|
2471
|
+
cursor: not-allowed;
|
|
2433
2472
|
border: 0px;
|
|
2434
2473
|
}
|
|
2435
2474
|
|
|
@@ -5057,7 +5096,7 @@ body {
|
|
|
5057
5096
|
|
|
5058
5097
|
.Message--warning {
|
|
5059
5098
|
border-color: var(--accent1);
|
|
5060
|
-
background-color: rgba(
|
|
5099
|
+
background-color: rgba(253, 230, 206, 0.4);
|
|
5061
5100
|
}
|
|
5062
5101
|
|
|
5063
5102
|
.Message-icon {
|
|
@@ -6267,7 +6306,8 @@ body {
|
|
|
6267
6306
|
padding-left: var(--spacing);
|
|
6268
6307
|
}
|
|
6269
6308
|
|
|
6270
|
-
.Select-trigger
|
|
6309
|
+
.Select-trigger--text,
|
|
6310
|
+
.Select-option--text {
|
|
6271
6311
|
text-align: left;
|
|
6272
6312
|
white-space: nowrap;
|
|
6273
6313
|
overflow: hidden;
|
|
@@ -6328,32 +6368,45 @@ body {
|
|
|
6328
6368
|
background-color: var(--secondary-dark);
|
|
6329
6369
|
}
|
|
6330
6370
|
|
|
6371
|
+
.Select-option {
|
|
6372
|
+
display: flex;
|
|
6373
|
+
align-items: flex-start;
|
|
6374
|
+
width: 100%;
|
|
6375
|
+
}
|
|
6376
|
+
|
|
6331
6377
|
.Selection-card {
|
|
6332
|
-
cursor: pointer;
|
|
6333
6378
|
border-radius: var(--spacing-m);
|
|
6334
6379
|
position: relative;
|
|
6335
|
-
box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
|
|
6336
6380
|
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
6337
6381
|
}
|
|
6338
6382
|
|
|
6339
|
-
.Selection-card
|
|
6383
|
+
.Selection-card--default {
|
|
6384
|
+
cursor: pointer;
|
|
6385
|
+
box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
|
|
6386
|
+
}
|
|
6387
|
+
|
|
6388
|
+
.Selection-card--default:hover {
|
|
6340
6389
|
box-shadow: inset 0 0 0 var(--spacing-s) var(--inverse-lightest);
|
|
6341
6390
|
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
6342
6391
|
}
|
|
6343
6392
|
|
|
6344
|
-
.Selection-card:focus,
|
|
6345
|
-
.Selection-card:focus-visible {
|
|
6393
|
+
.Selection-card--default:focus,
|
|
6394
|
+
.Selection-card--default:focus-visible {
|
|
6346
6395
|
outline: none;
|
|
6347
|
-
box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-
|
|
6396
|
+
box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
|
|
6348
6397
|
}
|
|
6349
6398
|
|
|
6350
|
-
.Selection-card:active {
|
|
6399
|
+
.Selection-card--default:active {
|
|
6351
6400
|
box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);
|
|
6352
6401
|
transition: var(--duration--fast-01) var(--standard-productive-curve);
|
|
6353
6402
|
}
|
|
6354
6403
|
|
|
6355
6404
|
.Selection-card--disabled {
|
|
6356
|
-
|
|
6405
|
+
cursor: not-allowed;
|
|
6406
|
+
outline: none;
|
|
6407
|
+
}
|
|
6408
|
+
|
|
6409
|
+
.Selection-card--default-disabled {
|
|
6357
6410
|
box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-lighter);
|
|
6358
6411
|
}
|
|
6359
6412
|
|
|
@@ -6378,7 +6431,6 @@ body {
|
|
|
6378
6431
|
}
|
|
6379
6432
|
|
|
6380
6433
|
.Selection-card--selected-disabled {
|
|
6381
|
-
pointer-events: none;
|
|
6382
6434
|
box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary-lighter);
|
|
6383
6435
|
}
|
|
6384
6436
|
|
|
@@ -6395,12 +6447,12 @@ body {
|
|
|
6395
6447
|
border-radius: var(--spacing-m);
|
|
6396
6448
|
}
|
|
6397
6449
|
|
|
6398
|
-
.Selection-card:active .Selection-card-overlay {
|
|
6450
|
+
.Selection-card--default:active .Selection-card-overlay {
|
|
6399
6451
|
background-color: var(--primary);
|
|
6400
6452
|
opacity: var(--opacity-3);
|
|
6401
6453
|
}
|
|
6402
6454
|
|
|
6403
|
-
.Selection-card--disabled .Selection-card-overlay {
|
|
6455
|
+
.Selection-card--default-disabled .Selection-card-overlay {
|
|
6404
6456
|
background-color: var(--secondary-lightest);
|
|
6405
6457
|
opacity: var(--opacity-10);
|
|
6406
6458
|
}
|
|
@@ -8237,6 +8289,10 @@ body {
|
|
|
8237
8289
|
cursor: pointer;
|
|
8238
8290
|
}
|
|
8239
8291
|
|
|
8292
|
+
.cursor-default {
|
|
8293
|
+
cursor: default;
|
|
8294
|
+
}
|
|
8295
|
+
|
|
8240
8296
|
.d-none {
|
|
8241
8297
|
display: none !important;
|
|
8242
8298
|
}
|