@atlassian/aui 9.4.6-0c8cd15d6 → 9.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/dist/aui/aui-prototyping-browserfocus.css +2 -0
  2. package/dist/aui/aui-prototyping-darkmode.css +2 -0
  3. package/dist/aui/aui-prototyping.css +7 -7
  4. package/dist/aui/aui-prototyping.css.map +1 -1
  5. package/dist/aui/aui-prototyping.js +17 -34
  6. package/dist/aui/aui-prototyping.js.map +1 -1
  7. package/dist/aui/aui-prototyping.nodeps.css +7 -7
  8. package/dist/aui/aui-prototyping.nodeps.css.map +1 -1
  9. package/dist/aui/aui-prototyping.nodeps.js +20 -37
  10. package/dist/aui/aui-prototyping.nodeps.js.map +1 -1
  11. package/entry/aui.batch.components.js +2 -0
  12. package/entry/aui.component.avatar-group.js +4 -0
  13. package/entry/aui.component.avatar.js +5 -0
  14. package/package.json +10 -10
  15. package/src/js/aui/avatar-badged.js +38 -0
  16. package/src/js/aui/avatar-group.js +165 -0
  17. package/src/js/aui/avatar.js +76 -0
  18. package/src/js/aui/blanket.js +1 -1
  19. package/src/js/aui/internal/header/create-header.js +2 -0
  20. package/src/js/aui/messages.js +18 -2
  21. package/src/js/aui/tooltip.js +2 -4
  22. package/src/js/aui/when-i-type.js +14 -3
  23. package/src/js-vendor/jquery/jquery.tablesorter.js +2663 -1645
  24. package/src/less/aui-avatars.less +101 -0
  25. package/src/less/imports/aui-theme/core/colors.less +8 -0
package/src/less/aui-avatars.less CHANGED
@@ -1,4 +1,5 @@
1
1
  @import (reference) './imports/global';
2
+ @import (reference) './imports/aui-theme/core/colors.less';
2
3
 
3
4
  .aui-avatar-size(@type, @size) {
4
5
  &.aui-avatar-@{type} {
@@ -12,6 +13,12 @@
12
13
  }
13
14
  }
14
15
 
16
+ .aui-avatar-group-size(@type, @size) {
17
+ &.aui-avatar-group-@{type} {
18
+ --aui-avatar-size: calc(@size + 3px);
19
+ }
20
+ }
21
+
15
22
  // AUI avatar component
16
23
  .aui-avatar {
17
24
  --aui-avatar-size: @aui-avatar-size-medium;
@@ -21,6 +28,7 @@
21
28
  position: relative;
22
29
  vertical-align: text-bottom;
23
30
 
31
+
24
32
  &-inner {
25
33
  display: flex;
26
34
  justify-content: center;
@@ -67,4 +75,97 @@
67
75
  .aui-avatar-border-size(small, @aui-avatar-size-small, 2px);
68
76
  .aui-avatar-border-size(xsmall, @aui-avatar-size-xsmall, 2px);
69
77
  }
78
+
79
+ &-badged {
80
+ --aui-avatar-badged-size: calc(var(--aui-avatar-size) / 4);
81
+
82
+ position: absolute;
83
+ font-size: 0;
84
+ line-height: 0;
85
+ width: var(--aui-avatar-badged-size);
86
+ height: var(--aui-avatar-badged-size);
87
+ overflow: hidden;
88
+ border: 3px solid var(--aui-avatar-outline);
89
+ border-radius: 100%;
90
+
91
+ &-top-start {
92
+ top: 0;
93
+ left: 0;
94
+ }
95
+
96
+ &-top-end {
97
+ top: 0;
98
+ right: 0;
99
+ }
100
+ &-bottom-start {
101
+ bottom: 0;
102
+ left: 0;
103
+ }
104
+ &-bottom-end {
105
+ bottom: 0;
106
+ right: 0;
107
+ }
108
+ }
109
+ }
110
+
111
+ // AUI avatars group component
112
+ .aui-avatar-group {
113
+ --aui-avatar-size: @aui-avatar-size-medium;
114
+
115
+ position: relative;
116
+ margin-top: calc(var(--aui-avatar-size) / 4);
117
+ display: block;
118
+ height: var(--aui-avatar-size);
119
+
120
+ &-item {
121
+ position: absolute;
122
+ bottom: 0;
123
+
124
+ &-hidden {
125
+ display: none !important;
126
+ }
127
+ }
128
+
129
+ &-badged {
130
+ position: absolute;
131
+ bottom: 0;
132
+ background-color: var(--aui-body-background);
133
+ z-index: 1;
134
+ font-size: calc(var(--aui-avatar-size) / 3);
135
+ align-items: center;
136
+ border: 0;
137
+ cursor: pointer;
138
+ color: var(--aui-avatar-text);
139
+ }
140
+ &-dropdown {
141
+ box-sizing: border-box;
142
+ min-width: 160px;
143
+ max-width: 300px;
144
+ padding: @aui-dropdown-group-spacing 0;
145
+ display: none;
146
+
147
+ box-shadow: 0 4px 8px var(--aui-shadow2), 0 0 1px var(--aui-shadow2);
148
+ background: var(--aui-dropdown-bg-color);
149
+ border: 0 solid var(--aui-dropdown-border-color);
150
+ border-radius: 3px;
151
+ position: absolute;
152
+ top: var(--aui-avatar-size);
153
+ z-index: 3000;
154
+
155
+ &-show {
156
+ display: block;
157
+ }
158
+ }
159
+
160
+ & > .aui-avatar > .aui-avatar > .aui-avatar-inner {
161
+ box-shadow: 0 0 0 3px var(--aui-avatar-outline);
162
+ }
163
+
164
+ .aui-avatar-group-size(xsmall, @aui-avatar-size-xsmall);
165
+ .aui-avatar-group-size(small, @aui-avatar-size-small);
166
+ .aui-avatar-group-size(medium, @aui-avatar-size-medium);
167
+ .aui-avatar-group-size(large, @aui-avatar-size-large);
168
+ .aui-avatar-group-size(xlarge, @aui-avatar-size-xlarge);
169
+ .aui-avatar-group-size(xxlarge, @aui-avatar-size-xxlarge);
170
+ .aui-avatar-group-size(xxxlarge, @aui-avatar-size-xxxlarge);
70
171
  }
package/src/less/imports/aui-theme/core/colors.less CHANGED
@@ -61,6 +61,10 @@
61
61
  --aui-badge-on-blue-text-color: @ak-color-N0;
62
62
  --aui-badge-on-blue-bg-color: rgba(@ak-color-N0, 0.25);
63
63
 
64
+ // Avatars
65
+ --aui-avatar-outline: @ak-color-N0;
66
+ --aui-avatar-text: @ak-color-N100;
67
+
64
68
  // Lozenges
65
69
  --aui-lozenge-bg-color: @ak-color-N500;
66
70
  --aui-lozenge-text-color: @ak-color-N0;
@@ -382,6 +386,10 @@
382
386
  --aui-badge-important-bg-color: @ak-color-R300;
383
387
  --aui-badge-important-text-color: @ak-color-N0;
384
388
 
389
+ // Avatars
390
+ --aui-avatar-outline: @ak-color-N0;
391
+ --aui-avatar-text: @ak-color-N100;
392
+
385
393
  // Lozenges
386
394
  --aui-lozenge-subtle-bg-color: @ak-color-N50;
387
395
  --aui-lozenge-subtle-text-color: @ak-color-N600;