@innovaccer/design-system 4.16.0 → 4.17.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 +72 -0
- package/css/dist/index.css +131 -16
- package/css/dist/index.css.map +1 -1
- package/css/src/components/avatar.module.css +52 -12
- package/css/src/components/avatarGroup.module.css +4 -0
- package/css/src/components/avatarSelection.module.css +65 -4
- package/css/src/variables/index.css +10 -0
- package/dist/brotli/index.js +1 -1
- package/dist/brotli/index.js.br +0 -0
- package/dist/cjs/index.js +1 -1
- package/dist/core/common.type.d.ts +2 -1
- package/dist/core/components/atoms/avatar/constants.d.ts +1 -0
- package/dist/core/components/atoms/avatarGroup/AvatarGroup.d.ts +2 -1
- package/dist/core/components/atoms/avatarSelection/AvatarSelection.d.ts +2 -1
- package/dist/core/components/atoms/avatarSelection/avatarPopover/AvatarSelectionPopover.d.ts +2 -0
- package/dist/core/components/atoms/avatarSelection/avatarsSelection/SelectionAvatar.d.ts +2 -1
- package/dist/core/components/organisms/menu/MenuList.d.ts +1 -1
- package/dist/esm/index.js +365 -322
- package/dist/gzip/index.js +1 -1
- package/dist/gzip/index.js.gz +0 -0
- package/dist/index.js +261 -224
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +131 -16
- package/dist/index.umd.js +1 -1
- package/dist/types/tsconfig.type.tsbuildinfo +856 -840
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,75 @@
|
|
|
1
|
+
## 4.17.0 (2025-12-10)
|
|
2
|
+
|
|
3
|
+
### Highlights
|
|
4
|
+
|
|
5
|
+
- feat(Avatar): update new color and update shape for avatarGroups and avatarSelection (3a6c626f)
|
|
6
|
+
|
|
7
|
+
### Breaking changes
|
|
8
|
+
|
|
9
|
+
NA
|
|
10
|
+
|
|
11
|
+
### Migration guide
|
|
12
|
+
|
|
13
|
+
NA
|
|
14
|
+
|
|
15
|
+
### Deprecations
|
|
16
|
+
|
|
17
|
+
NA
|
|
18
|
+
|
|
19
|
+
### Features
|
|
20
|
+
|
|
21
|
+
- feat(Avatar): update new color and update shape for avatarGroups and avatarSelection (3a6c626f)
|
|
22
|
+
|
|
23
|
+
### Fixes
|
|
24
|
+
|
|
25
|
+
NA
|
|
26
|
+
|
|
27
|
+
### Improvements
|
|
28
|
+
|
|
29
|
+
NA
|
|
30
|
+
|
|
31
|
+
### Documentation
|
|
32
|
+
|
|
33
|
+
NA
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## 4.16.1 (2025-11-23)
|
|
38
|
+
|
|
39
|
+
### Highlights
|
|
40
|
+
|
|
41
|
+
- fix(select): fix duplicate selection of options with same label (ffb5654b)
|
|
42
|
+
|
|
43
|
+
### Breaking changes
|
|
44
|
+
|
|
45
|
+
NA
|
|
46
|
+
|
|
47
|
+
### Migration guide
|
|
48
|
+
|
|
49
|
+
NA
|
|
50
|
+
|
|
51
|
+
### Deprecations
|
|
52
|
+
|
|
53
|
+
NA
|
|
54
|
+
|
|
55
|
+
### Features
|
|
56
|
+
|
|
57
|
+
NA
|
|
58
|
+
|
|
59
|
+
### Fixes
|
|
60
|
+
|
|
61
|
+
- fix(select): fix duplicate selection of options with same label (ffb5654b)
|
|
62
|
+
|
|
63
|
+
### Improvements
|
|
64
|
+
|
|
65
|
+
NA
|
|
66
|
+
|
|
67
|
+
### Documentation
|
|
68
|
+
|
|
69
|
+
NA
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
1
73
|
## 4.16.0 (2025-11-03)
|
|
2
74
|
|
|
3
75
|
### Highlights
|
package/css/dist/index.css
CHANGED
|
@@ -148,6 +148,16 @@
|
|
|
148
148
|
--accent3-ultra-light: #f1f3fc;
|
|
149
149
|
--accent4-ultra-light: #f2f9e7;
|
|
150
150
|
|
|
151
|
+
/* Avatar specific color for the time being */
|
|
152
|
+
--primary-300: #c9e1f5;
|
|
153
|
+
--success-300: #caeacd;
|
|
154
|
+
--alert-300: #fad1cd;
|
|
155
|
+
--warning-300: #ffebad;
|
|
156
|
+
--accent1-300: #fcd9b6;
|
|
157
|
+
--accent2-300: #d7cae8;
|
|
158
|
+
--accent3-300: #cbd1f5;
|
|
159
|
+
--accent4-300: #d3ebb2;
|
|
160
|
+
|
|
151
161
|
/* shadow */
|
|
152
162
|
--primary-shadow: rgba(0, 112, 221, 0.16);
|
|
153
163
|
--secondary-shadow: rgba(213, 213, 213, 0.16);
|
|
@@ -889,6 +899,11 @@ body {
|
|
|
889
899
|
width: var(--spacing-60);
|
|
890
900
|
}
|
|
891
901
|
|
|
902
|
+
.Avatar--micro {
|
|
903
|
+
height: 20px;
|
|
904
|
+
width: 20px;
|
|
905
|
+
}
|
|
906
|
+
|
|
892
907
|
.Avatar--noInitials {
|
|
893
908
|
cursor: default;
|
|
894
909
|
}
|
|
@@ -898,7 +913,7 @@ body {
|
|
|
898
913
|
}
|
|
899
914
|
|
|
900
915
|
.Avatar--disabled::after {
|
|
901
|
-
opacity: var(--opacity-
|
|
916
|
+
opacity: var(--opacity-16);
|
|
902
917
|
top: 0;
|
|
903
918
|
right: 0;
|
|
904
919
|
bottom: 0;
|
|
@@ -910,7 +925,7 @@ body {
|
|
|
910
925
|
}
|
|
911
926
|
|
|
912
927
|
.Avatar--primary {
|
|
913
|
-
background: var(--primary);
|
|
928
|
+
background: var(--primary-300);
|
|
914
929
|
}
|
|
915
930
|
|
|
916
931
|
.Avatar--secondary {
|
|
@@ -918,31 +933,31 @@ body {
|
|
|
918
933
|
}
|
|
919
934
|
|
|
920
935
|
.Avatar--success {
|
|
921
|
-
background: var(--success);
|
|
936
|
+
background: var(--success-300);
|
|
922
937
|
}
|
|
923
938
|
|
|
924
939
|
.Avatar--alert {
|
|
925
|
-
background: var(--alert);
|
|
940
|
+
background: var(--alert-300);
|
|
926
941
|
}
|
|
927
942
|
|
|
928
943
|
.Avatar--warning {
|
|
929
|
-
background: var(--warning);
|
|
944
|
+
background: var(--warning-300);
|
|
930
945
|
}
|
|
931
946
|
|
|
932
947
|
.Avatar--accent1 {
|
|
933
|
-
background: var(--accent1);
|
|
948
|
+
background: var(--accent1-300);
|
|
934
949
|
}
|
|
935
950
|
|
|
936
951
|
.Avatar--accent2 {
|
|
937
|
-
background: var(--accent2);
|
|
952
|
+
background: var(--accent2-300);
|
|
938
953
|
}
|
|
939
954
|
|
|
940
955
|
.Avatar--accent3 {
|
|
941
|
-
background: var(--accent3);
|
|
956
|
+
background: var(--accent3-300);
|
|
942
957
|
}
|
|
943
958
|
|
|
944
959
|
.Avatar--accent4 {
|
|
945
|
-
background: var(--accent4);
|
|
960
|
+
background: var(--accent4-300);
|
|
946
961
|
}
|
|
947
962
|
|
|
948
963
|
.Avatar-content--tiny {
|
|
@@ -950,10 +965,45 @@ body {
|
|
|
950
965
|
font-size: 10px !important;
|
|
951
966
|
}
|
|
952
967
|
|
|
953
|
-
.Avatar-content {
|
|
968
|
+
.Avatar-content--micro {
|
|
969
|
+
line-height: var(--font-height-s) !important;
|
|
970
|
+
font-size: 10px !important;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
.Avatar-content--primary {
|
|
974
|
+
color: var(--primary-darker) !important;
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
.Avatar-content--secondary {
|
|
954
978
|
color: var(--inverse) !important;
|
|
955
|
-
|
|
956
|
-
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
.Avatar-content--success {
|
|
982
|
+
color: var(--success-darker) !important;
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
.Avatar-content--alert {
|
|
986
|
+
color: var(--alert-darker) !important;
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
.Avatar-content--warning {
|
|
990
|
+
color: var(--warning-darker) !important;
|
|
991
|
+
}
|
|
992
|
+
|
|
993
|
+
.Avatar-content--accent1 {
|
|
994
|
+
color: var(--accent1-darker) !important;
|
|
995
|
+
}
|
|
996
|
+
|
|
997
|
+
.Avatar-content--accent2 {
|
|
998
|
+
color: var(--accent2-darker) !important;
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
.Avatar-content--accent3 {
|
|
1002
|
+
color: var(--accent3-darker) !important;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
.Avatar-content--accent4 {
|
|
1006
|
+
color: var(--accent4-darker) !important;
|
|
957
1007
|
}
|
|
958
1008
|
|
|
959
1009
|
.Avatar-presence {
|
|
@@ -993,6 +1043,10 @@ body {
|
|
|
993
1043
|
margin-right: calc(var(--spacing-05) * -1);
|
|
994
1044
|
}
|
|
995
1045
|
|
|
1046
|
+
.AvatarGroup-item--square {
|
|
1047
|
+
border-radius: var(--border-radius-10);
|
|
1048
|
+
}
|
|
1049
|
+
|
|
996
1050
|
.AvatarGroup-item--regular {
|
|
997
1051
|
height: var(--spacing-80);
|
|
998
1052
|
}
|
|
@@ -1072,6 +1126,10 @@ body {
|
|
|
1072
1126
|
position: relative;
|
|
1073
1127
|
}
|
|
1074
1128
|
|
|
1129
|
+
.SelectionAvatarGroup-item--square {
|
|
1130
|
+
border-radius: var(--border-radius-10);
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1075
1133
|
.SelectionAvatarGroup-item--active:focus,
|
|
1076
1134
|
.SelectionAvatarGroup-item--active:focus-visible {
|
|
1077
1135
|
outline: 3px solid var(--primary-shadow);
|
|
@@ -1079,7 +1137,17 @@ body {
|
|
|
1079
1137
|
}
|
|
1080
1138
|
|
|
1081
1139
|
.SelectionAvatarGroup-item--active:active {
|
|
1082
|
-
outline: var(--
|
|
1140
|
+
outline: var(--border-width-2-5) solid var(--primary-dark);
|
|
1141
|
+
outline-offset: var(--spacing-2-5);
|
|
1142
|
+
}
|
|
1143
|
+
|
|
1144
|
+
.SelectionAvatarGroup-item--active-tiny:active,
|
|
1145
|
+
.SelectionAvatarGroup-item--active-micro:active {
|
|
1146
|
+
outline-offset: var(--spacing-05);
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
.SelectionAvatarGroup-item--active-regular:active {
|
|
1150
|
+
outline: var(--border-width-05) solid var(--primary-dark);
|
|
1083
1151
|
outline-offset: var(--spacing-2-5);
|
|
1084
1152
|
}
|
|
1085
1153
|
|
|
@@ -1091,12 +1159,31 @@ body {
|
|
|
1091
1159
|
|
|
1092
1160
|
.SelectionAvatarGroup-item--selected {
|
|
1093
1161
|
outline-offset: var(--spacing-2-5);
|
|
1094
|
-
outline: var(--
|
|
1162
|
+
outline: var(--border-width-2-5) solid var(--primary-dark);
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1165
|
+
.SelectionAvatarGroup-item--selected-tiny,
|
|
1166
|
+
.SelectionAvatarGroup-item--selected-micro {
|
|
1167
|
+
outline-offset: var(--spacing-05);
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
.SelectionAvatarGroup-item--selected-regular {
|
|
1171
|
+
outline: var(--border-width-05) solid var(--primary-dark);
|
|
1095
1172
|
}
|
|
1096
1173
|
|
|
1097
1174
|
.SelectionAvatarGroup-item--selected:active {
|
|
1098
1175
|
outline-offset: var(--spacing-2-5);
|
|
1099
|
-
outline: var(--
|
|
1176
|
+
outline: var(--border-width-2-5) solid var(--primary-darker);
|
|
1177
|
+
}
|
|
1178
|
+
|
|
1179
|
+
.SelectionAvatarGroup-item--selected-tiny:active,
|
|
1180
|
+
.SelectionAvatarGroup-item--selected-micro:active {
|
|
1181
|
+
outline-offset: var(--spacing-05);
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1184
|
+
.SelectionAvatarGroup-item--selected-regular:active {
|
|
1185
|
+
outline-offset: var(--spacing-2-5);
|
|
1186
|
+
outline: var(--border-width-05) solid var(--primary-darker);
|
|
1100
1187
|
}
|
|
1101
1188
|
|
|
1102
1189
|
.SelectionAvatarGroup-item--selected:focus,
|
|
@@ -1151,6 +1238,10 @@ body {
|
|
|
1151
1238
|
background: var(--secondary-dark);
|
|
1152
1239
|
}
|
|
1153
1240
|
|
|
1241
|
+
.SelectionAvatarCount--open {
|
|
1242
|
+
background: var(--secondary-dark) !important;
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1154
1245
|
.SelectionAvatarCount-wrapper:focus,
|
|
1155
1246
|
.SelectionAvatarCount-wrapper:focus-visible {
|
|
1156
1247
|
outline: 3px solid var(--primary-shadow);
|
|
@@ -1159,7 +1250,31 @@ body {
|
|
|
1159
1250
|
|
|
1160
1251
|
.SelectionAvatarCount--selected {
|
|
1161
1252
|
outline-offset: var(--spacing-2-5);
|
|
1162
|
-
outline: var(--
|
|
1253
|
+
outline: var(--border-width-2-5) solid var(--primary-dark);
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1256
|
+
.SelectionAvatarCount--selected-tiny,
|
|
1257
|
+
.SelectionAvatarCount--selected-micro {
|
|
1258
|
+
outline-offset: var(--spacing-05);
|
|
1259
|
+
}
|
|
1260
|
+
|
|
1261
|
+
.SelectionAvatarCount--selected-regular {
|
|
1262
|
+
outline: var(--border-width-05) solid var(--primary-dark);
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1265
|
+
.SelectionAvatarCount--selected:active {
|
|
1266
|
+
outline-offset: var(--spacing-2-5);
|
|
1267
|
+
outline: var(--border-width-2-5) solid var(--primary-darker);
|
|
1268
|
+
}
|
|
1269
|
+
|
|
1270
|
+
.SelectionAvatarCount--selected-tiny:active,
|
|
1271
|
+
.SelectionAvatarCount--selected-micro:active {
|
|
1272
|
+
outline-offset: var(--spacing-05);
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
.SelectionAvatarCount--selected-regular:active {
|
|
1276
|
+
outline-offset: var(--spacing-2-5);
|
|
1277
|
+
outline: var(--border-width-05) solid var(--primary-darker);
|
|
1163
1278
|
}
|
|
1164
1279
|
|
|
1165
1280
|
.SelectionAvatarCount--selected:focus,
|