@stackoverflow/stacks 2.6.0 → 2.7.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 (14) hide show
  1. package/dist/css/stacks.css +45 -10
  2. package/dist/css/stacks.min.css +1 -1
  3. package/dist/js/stacks.js +2 -5
  4. package/lib/components/button/button.less +30 -2
  5. package/lib/components/expandable/expandable.ts +238 -238
  6. package/lib/components/pagination/pagination.less +77 -65
  7. package/lib/components/table/table.less +309 -307
  8. package/lib/components/uploader/uploader.ts +207 -207
  9. package/lib/exports/color-sets.less +711 -711
  10. package/lib/exports/color.less +65 -65
  11. package/lib/stacks.ts +113 -113
  12. package/lib/test/a11y-test-utils.ts +94 -94
  13. package/lib/test/test-utils.ts +364 -364
  14. package/package.json +11 -11
package/lib/components/table/table.less CHANGED
@@ -1,307 +1,309 @@
1
- .s-table {
2
- @ta-cell-border: var(--su-static1) solid var(--bc-medium);
3
- @ta-columns: (100% / 12);
4
-
5
- --_ta-tbody-tbody-bc: var(--bc-medium);
6
- --_ta-tbody-tbody-bw: var(--su-static2);
7
- --_ta-tbody-tr-even-bg: unset;
8
- --_ta-td-bbw: 0;
9
- --_ta-td-bc: var(--bc-medium);
10
- --_ta-td-fs: unset;
11
- --_ta-td-fw: unset;
12
- --_ta-td-p: var(--su8);
13
- --_ta-td-ta: left;
14
- --_ta-td-va: middle;
15
- --_ta-td-w: unset;
16
- --_ta-thead-th-bg: var(--black-100);
17
- --_ta-th-bbw: 0;
18
- --_ta-th-bc: var(--bc-medium);
19
- --_ta-th-fs: unset;
20
- --_ta-th-p: var(--su8);
21
- --_ta-th-ta: left;
22
- --_ta-th-va: middle;
23
- --_ta-th-w: unset;
24
-
25
- // VARIANTS
26
- &&__stripes {
27
- --_ta-tbody-tr-even-bg: var(--black-100);
28
- --_ta-thead-th-bg: var(--black-150);
29
- }
30
-
31
- // MODIFIERS
32
- &.ta-center {
33
- --_ta-td-ta: center;
34
- --_ta-th-ta: center;
35
- }
36
-
37
- &.ta-left {
38
- --_ta-td-ta: left;
39
- --_ta-th-ta: left;
40
- }
41
-
42
- &.ta-justify {
43
- --_ta-td-ta: justify;
44
- --_ta-th-ta: justify;
45
- }
46
-
47
- &.ta-right {
48
- --_ta-td-ta: right;
49
- --_ta-th-ta: right;
50
- }
51
-
52
- &.va-bottom {
53
- --_ta-td-va: bottom;
54
- --_ta-th-va: bottom;
55
- }
56
-
57
- &.va-middle {
58
- --_ta-td-va: middle;
59
- --_ta-th-va: middle;
60
- }
61
-
62
- &.va-top {
63
- --_ta-td-va: top;
64
- --_ta-th-va: top;
65
- }
66
-
67
- &&__b0 {
68
- --_ta-td-bc: transparent;
69
- --_ta-th-bc: transparent;
70
- --_ta-tbody-tbody-bc: transparent; // [1]
71
- --_ta-tbody-tbody-bw: var(--su-static12); // [1]
72
- --_ta-thead-th-bg: transparent;
73
-
74
- thead th {
75
- font-size: inherit;
76
- text-transform: initial;
77
- letter-spacing: initial;
78
- }
79
- }
80
-
81
- &&__bx {
82
- tr {
83
- > *:not(:first-child) {
84
- border-left-color: transparent;
85
- }
86
- > *:not(:last-child) {
87
- border-right-color: transparent;
88
- }
89
- }
90
- }
91
-
92
- &&__bx-simple {
93
- --_ta-thead-th-bg: transparent;
94
- --_ta-foot-td-bc: transparent;
95
- --_ta-foot-th-bc: transparent;
96
-
97
- td,
98
- th {
99
- border-left-color: transparent;
100
- border-right-color: transparent;
101
- }
102
-
103
- tbody tr {
104
- &:first-of-type th,
105
- &:first-of-type td {
106
- border-top-color: transparent;
107
- }
108
- &:last-of-type th,
109
- &:last-of-type td {
110
- border-bottom-color: transparent;
111
- }
112
- }
113
-
114
- thead th {
115
- border-top-color: transparent;
116
- border-bottom-color: var(--bc-dark);
117
- font-size: inherit;
118
- text-transform: initial;
119
- letter-spacing: initial;
120
- }
121
- }
122
-
123
- &&__sortable {
124
- thead th {
125
- a,
126
- button { // If an anchor is used, it should appear like a normal header
127
- color: inherit;
128
- }
129
-
130
- button {
131
- appearance: none;
132
- background-color: transparent;
133
- border: 0;
134
- cursor: pointer;
135
- display: flex;
136
- gap: var(--su-static4);
137
- font-weight: inherit;
138
- margin: calc(var(--_ta-th-p) * -1);
139
- padding: var(--_ta-th-p);
140
- text-align: left;
141
- width: calc(100% + calc(var(--_ta-th-p) * 2));
142
- }
143
-
144
- &.is-sorted { // Selected state
145
- color: var(--black-600);
146
- }
147
-
148
- color: var(--fc-light);
149
- cursor: pointer;
150
- }
151
- }
152
-
153
- // Sizes
154
- &&__sm {
155
- --_ta-td-p: var(--su4);
156
- --_ta-th-p: var(--su4);
157
- }
158
-
159
- &&__lg {
160
- --_ta-td-p: var(--su12);
161
- --_ta-th-p: var(--su12);
162
- }
163
-
164
- // CHILD ELEMENTS
165
- & &--cell {
166
- .generate-cell-widths-classes(@n, @i: 1) when (@i =< @n) {
167
- &@{i} { // generates iterated cell classes
168
- @ta-cell-w: @ta-columns * @i;
169
- --_ta-td-w: @ta-cell-w;
170
- --_ta-th-w: @ta-cell-w;
171
- }
172
- .generate-cell-widths-classes(@n, (@i + 1));
173
- }
174
-
175
- .generate-cell-widths-classes(12);
176
- }
177
-
178
- & &--totals {
179
- --_ta-td-fs: var(--fs-subheading);
180
- --_ta-td-pt: var(--su12);
181
- --_ta-td-fw: bold;
182
- --_ta-th-fs: var(--fs-subheading);
183
- --_ta-th-pt: var(--su12);
184
- }
185
-
186
- tbody {
187
- + tbody { // If two table bodies are next to each other, visually separate them
188
- border-top: var(--_ta-tbody-tbody-bw) solid var(--_ta-tbody-tbody-bc);
189
- }
190
-
191
- th {
192
- font-weight: normal;
193
- }
194
-
195
- tr {
196
- &:nth-child(2n) {
197
- background-color: var(--_ta-tbody-tr-even-bg);
198
- }
199
- }
200
- }
201
-
202
- td {
203
- .s-checkbox {
204
- display: block;
205
- }
206
-
207
- &.s-table--bulk {
208
- --_ta-td-w: calc(var(--su32) - var(--su2)); // 30px
209
- }
210
-
211
- &.s-table--progress {
212
- --_ta-td-ta: right;
213
- --_ta-td-brw: 0;
214
- }
215
-
216
- &.s-table--progress-bar {
217
- --_ta-td-blw: 0;
218
- --_ta-td-pl: 0;
219
- --_ta-td-w: calc(var(--su-static12) * 10); // 120px
220
- }
221
-
222
- border: var(--su-static1) solid var(--_ta-td-bc);
223
- border-bottom-width: var(--_ta-td-bbw, var(--su-static1));
224
- border-left-width: var(--_ta-td-blw, var(--su-static1));
225
- border-right-width: var(--_ta-td-brw, var(--su-static1));
226
- border-top-width: var(--_ta-td-btw, var(--su-static1));
227
- font-size: var(--_ta-td-fs);
228
- font-weight: var(--_ta-td-fw);
229
- padding: var(--_ta-td-p);
230
- padding-left: var(--_ta-td-pl, var(--_ta-td-p));
231
- padding-top: var(--_ta-td-pt, var(--_ta-td-p));
232
- text-align: var(--_ta-td-ta);
233
- vertical-align: var(--_ta-td-va);
234
- width: var(--_ta-td-w);
235
-
236
- color: var(--fc-medium);
237
- }
238
-
239
- tfoot {
240
- td {
241
- border-bottom-color: var(--_ta-foot-td-bc, var(--_ta-td-bc));
242
- }
243
-
244
- th {
245
- border-bottom-color: var(--_ta-foot-th-bc, var(--_ta-td-bc));
246
- }
247
- }
248
-
249
- th {
250
- .s-checkbox {
251
- display: block;
252
- }
253
-
254
- &.s-table--bulk {
255
- --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px
256
- }
257
-
258
- border: var(--su-static1) solid var(--_ta-th-bc);
259
- border-width: var(--su-static1) var(--su-static1) var(--_ta-th-bbw);
260
- font-size: var(--_ta-th-fs);
261
- padding: var(--_ta-th-p);
262
- padding-top: var(--_ta-th-pt, var(--_ta-th-p));
263
- text-align: var(--_ta-th-ta);
264
- vertical-align: var(--_ta-th-va);
265
- width: var(--_ta-th-w);
266
-
267
- color: var(--fc-dark);
268
- font-weight: bold;
269
- }
270
-
271
- thead {
272
- th {
273
- background-color: var(--_ta-thead-th-bg);
274
-
275
- line-height: var(--lh-sm);
276
- vertical-align: bottom;
277
- white-space: nowrap;
278
- }
279
- }
280
-
281
- tr {
282
- &:last-of-type {
283
- --_ta-td-bbw: var(--su-static1);
284
- --_ta-th-bbw: var(--su-static1);
285
- }
286
-
287
- &.is-disabled {
288
- background-color: var(--black-100);
289
- --_ta-tbody-tr-even-bg: var(--black-100);
290
-
291
- th:not(.is-enabled),
292
- td:not(.is-enabled) {
293
- opacity: calc(var(--_o-disabled) * 0.6); // 0.5 * 0.6 = 0.3
294
- }
295
- }
296
- }
297
-
298
- border-collapse: collapse;
299
- border-spacing: 0;
300
- display: table;
301
- font-size: var(--fs-body1);
302
- max-width: 100%;
303
- width: 100%;
304
- }
305
-
306
- // [1] This makes the border transparent, so we need to use whitespace
307
- // to achieve the same effect a 2px gray border achieves.
1
+ .s-table {
2
+ @ta-cell-border: var(--su-static1) solid var(--bc-medium);
3
+ @ta-columns: (100% / 12);
4
+
5
+ --_ta-tbody-tbody-bc: var(--bc-medium);
6
+ --_ta-tbody-tbody-bw: var(--su-static2);
7
+ --_ta-tbody-tr-even-bg: unset;
8
+ --_ta-td-bbw: 0;
9
+ --_ta-td-bc: var(--bc-medium);
10
+ --_ta-td-fs: unset;
11
+ --_ta-td-fw: unset;
12
+ --_ta-td-p: var(--su8);
13
+ --_ta-td-ta: left;
14
+ --_ta-td-va: middle;
15
+ --_ta-td-w: unset;
16
+ --_ta-thead-th-bg: var(--black-100);
17
+ --_ta-th-bbw: 0;
18
+ --_ta-th-bc: var(--bc-medium);
19
+ --_ta-th-fs: unset;
20
+ --_ta-th-p: var(--su8);
21
+ --_ta-th-ta: left;
22
+ --_ta-th-va: middle;
23
+ --_ta-th-w: unset;
24
+
25
+ // VARIANTS
26
+ &&__stripes {
27
+ --_ta-tbody-tr-even-bg: var(--black-100);
28
+ --_ta-thead-th-bg: var(--black-150);
29
+ }
30
+
31
+ // MODIFIERS
32
+ &.ta-center {
33
+ --_ta-td-ta: center;
34
+ --_ta-th-ta: center;
35
+ }
36
+
37
+ &.ta-left {
38
+ --_ta-td-ta: left;
39
+ --_ta-th-ta: left;
40
+ }
41
+
42
+ &.ta-justify {
43
+ --_ta-td-ta: justify;
44
+ --_ta-th-ta: justify;
45
+ }
46
+
47
+ &.ta-right {
48
+ --_ta-td-ta: right;
49
+ --_ta-th-ta: right;
50
+ }
51
+
52
+ &.va-bottom {
53
+ --_ta-td-va: bottom;
54
+ --_ta-th-va: bottom;
55
+ }
56
+
57
+ &.va-middle {
58
+ --_ta-td-va: middle;
59
+ --_ta-th-va: middle;
60
+ }
61
+
62
+ &.va-top {
63
+ --_ta-td-va: top;
64
+ --_ta-th-va: top;
65
+ }
66
+
67
+ &&__b0 {
68
+ --_ta-td-bc: transparent;
69
+ --_ta-th-bc: transparent;
70
+ --_ta-tbody-tbody-bc: transparent; // [1]
71
+ --_ta-tbody-tbody-bw: var(--su-static12); // [1]
72
+ --_ta-thead-th-bg: transparent;
73
+
74
+ thead th {
75
+ font-size: inherit;
76
+ text-transform: initial;
77
+ letter-spacing: initial;
78
+ }
79
+ }
80
+
81
+ &&__bx {
82
+ tr {
83
+ > *:not(:first-child) {
84
+ border-left-color: transparent;
85
+ }
86
+ > *:not(:last-child) {
87
+ border-right-color: transparent;
88
+ }
89
+ }
90
+ }
91
+
92
+ &&__bx-simple {
93
+ --_ta-thead-th-bg: transparent;
94
+ --_ta-foot-td-bc: transparent;
95
+ --_ta-foot-th-bc: transparent;
96
+
97
+ td,
98
+ th {
99
+ border-left-color: transparent;
100
+ border-right-color: transparent;
101
+ }
102
+
103
+ tbody tr {
104
+ &:first-of-type th,
105
+ &:first-of-type td {
106
+ border-top-color: transparent;
107
+ }
108
+ &:last-of-type th,
109
+ &:last-of-type td {
110
+ border-bottom-color: transparent;
111
+ }
112
+ }
113
+
114
+ thead th {
115
+ border-top-color: transparent;
116
+ border-bottom-color: var(--bc-dark);
117
+ font-size: inherit;
118
+ text-transform: initial;
119
+ letter-spacing: initial;
120
+ }
121
+ }
122
+
123
+ &&__sortable {
124
+ thead th {
125
+ a,
126
+ button { // If an anchor is used, it should appear like a normal header
127
+ // `!important` is used to ensure the appropriate color is on visited links. See STACKS-658.
128
+ // https://stackoverflow.atlassian.net/browse/STACKS-658
129
+ color: inherit !important;
130
+ }
131
+
132
+ button {
133
+ appearance: none;
134
+ background-color: transparent;
135
+ border: 0;
136
+ cursor: pointer;
137
+ display: flex;
138
+ gap: var(--su-static4);
139
+ font-weight: inherit;
140
+ margin: calc(var(--_ta-th-p) * -1);
141
+ padding: var(--_ta-th-p);
142
+ text-align: left;
143
+ width: calc(100% + calc(var(--_ta-th-p) * 2));
144
+ }
145
+
146
+ &.is-sorted { // Selected state
147
+ color: var(--black-600);
148
+ }
149
+
150
+ color: var(--fc-light);
151
+ cursor: pointer;
152
+ }
153
+ }
154
+
155
+ // Sizes
156
+ &&__sm {
157
+ --_ta-td-p: var(--su4);
158
+ --_ta-th-p: var(--su4);
159
+ }
160
+
161
+ &&__lg {
162
+ --_ta-td-p: var(--su12);
163
+ --_ta-th-p: var(--su12);
164
+ }
165
+
166
+ // CHILD ELEMENTS
167
+ & &--cell {
168
+ .generate-cell-widths-classes(@n, @i: 1) when (@i =< @n) {
169
+ &@{i} { // generates iterated cell classes
170
+ @ta-cell-w: @ta-columns * @i;
171
+ --_ta-td-w: @ta-cell-w;
172
+ --_ta-th-w: @ta-cell-w;
173
+ }
174
+ .generate-cell-widths-classes(@n, (@i + 1));
175
+ }
176
+
177
+ .generate-cell-widths-classes(12);
178
+ }
179
+
180
+ & &--totals {
181
+ --_ta-td-fs: var(--fs-subheading);
182
+ --_ta-td-pt: var(--su12);
183
+ --_ta-td-fw: bold;
184
+ --_ta-th-fs: var(--fs-subheading);
185
+ --_ta-th-pt: var(--su12);
186
+ }
187
+
188
+ tbody {
189
+ + tbody { // If two table bodies are next to each other, visually separate them
190
+ border-top: var(--_ta-tbody-tbody-bw) solid var(--_ta-tbody-tbody-bc);
191
+ }
192
+
193
+ th {
194
+ font-weight: normal;
195
+ }
196
+
197
+ tr {
198
+ &:nth-child(2n) {
199
+ background-color: var(--_ta-tbody-tr-even-bg);
200
+ }
201
+ }
202
+ }
203
+
204
+ td {
205
+ .s-checkbox {
206
+ display: block;
207
+ }
208
+
209
+ &.s-table--bulk {
210
+ --_ta-td-w: calc(var(--su32) - var(--su2)); // 30px
211
+ }
212
+
213
+ &.s-table--progress {
214
+ --_ta-td-ta: right;
215
+ --_ta-td-brw: 0;
216
+ }
217
+
218
+ &.s-table--progress-bar {
219
+ --_ta-td-blw: 0;
220
+ --_ta-td-pl: 0;
221
+ --_ta-td-w: calc(var(--su-static12) * 10); // 120px
222
+ }
223
+
224
+ border: var(--su-static1) solid var(--_ta-td-bc);
225
+ border-bottom-width: var(--_ta-td-bbw, var(--su-static1));
226
+ border-left-width: var(--_ta-td-blw, var(--su-static1));
227
+ border-right-width: var(--_ta-td-brw, var(--su-static1));
228
+ border-top-width: var(--_ta-td-btw, var(--su-static1));
229
+ font-size: var(--_ta-td-fs);
230
+ font-weight: var(--_ta-td-fw);
231
+ padding: var(--_ta-td-p);
232
+ padding-left: var(--_ta-td-pl, var(--_ta-td-p));
233
+ padding-top: var(--_ta-td-pt, var(--_ta-td-p));
234
+ text-align: var(--_ta-td-ta);
235
+ vertical-align: var(--_ta-td-va);
236
+ width: var(--_ta-td-w);
237
+
238
+ color: var(--fc-medium);
239
+ }
240
+
241
+ tfoot {
242
+ td {
243
+ border-bottom-color: var(--_ta-foot-td-bc, var(--_ta-td-bc));
244
+ }
245
+
246
+ th {
247
+ border-bottom-color: var(--_ta-foot-th-bc, var(--_ta-td-bc));
248
+ }
249
+ }
250
+
251
+ th {
252
+ .s-checkbox {
253
+ display: block;
254
+ }
255
+
256
+ &.s-table--bulk {
257
+ --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px
258
+ }
259
+
260
+ border: var(--su-static1) solid var(--_ta-th-bc);
261
+ border-width: var(--su-static1) var(--su-static1) var(--_ta-th-bbw);
262
+ font-size: var(--_ta-th-fs);
263
+ padding: var(--_ta-th-p);
264
+ padding-top: var(--_ta-th-pt, var(--_ta-th-p));
265
+ text-align: var(--_ta-th-ta);
266
+ vertical-align: var(--_ta-th-va);
267
+ width: var(--_ta-th-w);
268
+
269
+ color: var(--fc-dark);
270
+ font-weight: bold;
271
+ }
272
+
273
+ thead {
274
+ th {
275
+ background-color: var(--_ta-thead-th-bg);
276
+
277
+ line-height: var(--lh-sm);
278
+ vertical-align: bottom;
279
+ white-space: nowrap;
280
+ }
281
+ }
282
+
283
+ tr {
284
+ &:last-of-type {
285
+ --_ta-td-bbw: var(--su-static1);
286
+ --_ta-th-bbw: var(--su-static1);
287
+ }
288
+
289
+ &.is-disabled {
290
+ background-color: var(--black-100);
291
+ --_ta-tbody-tr-even-bg: var(--black-100);
292
+
293
+ th:not(.is-enabled),
294
+ td:not(.is-enabled) {
295
+ opacity: calc(var(--_o-disabled) * 0.6); // 0.5 * 0.6 = 0.3
296
+ }
297
+ }
298
+ }
299
+
300
+ border-collapse: collapse;
301
+ border-spacing: 0;
302
+ display: table;
303
+ font-size: var(--fs-body1);
304
+ max-width: 100%;
305
+ width: 100%;
306
+ }
307
+
308
+ // [1] This makes the border transparent, so we need to use whitespace
309
+ // to achieve the same effect a 2px gray border achieves.