@gitlab/ui 113.2.1 → 113.2.3
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 +14 -0
- package/dist/components/base/alert/alert.js +10 -7
- package/dist/components/utilities/truncate/truncate.js +1 -1
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/components/base/alert/alert.scss +1 -1
- package/src/components/base/alert/alert.vue +10 -8
- package/src/components/base/avatar/avatar.scss +1 -1
- package/src/components/base/avatar_labeled/avatar_labeled.scss +3 -3
- package/src/components/base/breadcrumb/breadcrumb.scss +2 -2
- package/src/components/base/broadcast_message/broadcast_message.scss +2 -2
- package/src/components/base/button/button.scss +1 -1
- package/src/components/base/daterange_picker/daterange_picker.scss +2 -2
- package/src/components/base/form/form_checkbox/form_checkbox.scss +3 -3
- package/src/components/base/form/form_group/form_group.scss +2 -2
- package/src/components/base/form/form_input/form_input.scss +3 -3
- package/src/components/base/form/form_select/form_select.scss +2 -2
- package/src/components/base/form/input_group_text/input_group_text.scss +1 -1
- package/src/components/base/label/label.scss +1 -1
- package/src/components/base/modal/modal.scss +3 -3
- package/src/components/base/path/path.scss +1 -1
- package/src/components/base/popover/popover.scss +2 -2
- package/src/components/base/table/table.scss +4 -4
- package/src/components/base/tabs/tabs/tabs.scss +1 -1
- package/src/components/utilities/truncate/truncate.vue +1 -0
- package/src/scss/body.scss +2 -2
package/package.json
CHANGED
|
@@ -90,15 +90,17 @@ export default {
|
|
|
90
90
|
required: false,
|
|
91
91
|
default: false,
|
|
92
92
|
},
|
|
93
|
+
// only set to 'assertive' if alert requires immediate user action, otherwise use a default value
|
|
94
|
+
politeness: {
|
|
95
|
+
type: String,
|
|
96
|
+
required: false,
|
|
97
|
+
default: 'polite',
|
|
98
|
+
validator(value) {
|
|
99
|
+
return ['off', 'polite', 'assertive'].includes(value);
|
|
100
|
+
},
|
|
101
|
+
},
|
|
93
102
|
},
|
|
94
103
|
computed: {
|
|
95
|
-
ariaLive() {
|
|
96
|
-
if ([alertVariantOptions.danger, alertVariantOptions.warning].includes(this.variant)) {
|
|
97
|
-
return 'assertive';
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
return 'polite';
|
|
101
|
-
},
|
|
102
104
|
role() {
|
|
103
105
|
if (
|
|
104
106
|
[
|
|
@@ -206,7 +208,7 @@ export default {
|
|
|
206
208
|
<div v-if="showIcon" class="gl-alert-icon-container">
|
|
207
209
|
<gl-icon :name="iconName" class="gl-alert-icon" />
|
|
208
210
|
</div>
|
|
209
|
-
<div class="gl-alert-content" :role="role" :aria-live="
|
|
211
|
+
<div class="gl-alert-content" :role="role" :aria-live="politeness">
|
|
210
212
|
<h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
|
|
211
213
|
|
|
212
214
|
<div class="gl-alert-body">
|
|
@@ -216,7 +216,7 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
|
|
|
216
216
|
@apply gl-align-top;
|
|
217
217
|
@apply gl-justify-center;
|
|
218
218
|
@apply gl-items-center;
|
|
219
|
-
|
|
219
|
+
@apply gl-text-strong;
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
// Background colors
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
@apply gl-justify-center;
|
|
9
9
|
@apply gl-text-base;
|
|
10
10
|
@apply gl-leading-normal;
|
|
11
|
-
|
|
11
|
+
@apply gl-text-strong;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
&-labels.inline-labels {
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
&-label {
|
|
21
21
|
@apply gl-font-bold;
|
|
22
22
|
@apply gl-p-1;
|
|
23
|
-
|
|
23
|
+
@apply gl-text-strong;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
&-sublabel {
|
|
27
|
-
|
|
27
|
+
@apply gl-text-subtle;
|
|
28
28
|
overflow-wrap: anywhere;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
@@ -29,7 +29,7 @@ $breadcrumb-max-width: $grid-size * 16;
|
|
|
29
29
|
> a {
|
|
30
30
|
@apply gl-inline-block;
|
|
31
31
|
border-radius: $gl-border-radius-base;
|
|
32
|
-
|
|
32
|
+
@apply gl-text-subtle;
|
|
33
33
|
text-decoration-thickness: auto;
|
|
34
34
|
text-decoration-style: solid;
|
|
35
35
|
text-decoration-color: transparent;
|
|
@@ -56,7 +56,7 @@ $breadcrumb-max-width: $grid-size * 16;
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.gl-breadcrumb-item:last-child > a {
|
|
59
|
-
|
|
59
|
+
@apply gl-text-default;
|
|
60
60
|
@apply gl-font-bold;
|
|
61
61
|
}
|
|
62
62
|
|
|
@@ -102,8 +102,8 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
|
|
|
102
102
|
@apply gl-rounded-base;
|
|
103
103
|
@apply gl-border;
|
|
104
104
|
@apply gl-shadow-md;
|
|
105
|
-
|
|
106
|
-
|
|
105
|
+
@apply gl-bg-overlap;
|
|
106
|
+
@apply gl-text-default;
|
|
107
107
|
max-width: $gl-broadcast-message-notification-max-width;
|
|
108
108
|
}
|
|
109
109
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
label {
|
|
7
7
|
@apply gl-font-bold;
|
|
8
|
-
|
|
8
|
+
@apply gl-text-strong;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.gl-daterange-picker-indicator {
|
|
@@ -15,6 +15,6 @@
|
|
|
15
15
|
@apply gl-self-end;
|
|
16
16
|
@apply gl-gap-3;
|
|
17
17
|
@apply gl-h-7;
|
|
18
|
-
|
|
18
|
+
@apply gl-text-subtle;
|
|
19
19
|
}
|
|
20
20
|
}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
.gl-form-radio {
|
|
16
16
|
@apply gl-text-base;
|
|
17
17
|
@apply gl-leading-normal;
|
|
18
|
-
|
|
18
|
+
@apply gl-text-default;
|
|
19
19
|
|
|
20
20
|
&.form-check {
|
|
21
21
|
@apply gl-flex;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
.custom-control-input:disabled ~ .custom-control-label,
|
|
49
49
|
.custom-control-input:disabled ~ .custom-control-label > .help-text {
|
|
50
50
|
@apply gl-cursor-not-allowed;
|
|
51
|
-
|
|
51
|
+
@apply gl-text-disabled;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
&.custom-control {
|
|
@@ -216,6 +216,6 @@
|
|
|
216
216
|
@apply gl-mb-0;
|
|
217
217
|
@apply gl-text-base;
|
|
218
218
|
@apply gl-leading-normal;
|
|
219
|
-
|
|
219
|
+
@apply gl-text-subtle;
|
|
220
220
|
}
|
|
221
221
|
}
|
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
@apply gl-leading-normal;
|
|
8
8
|
@apply gl-pt-0;
|
|
9
9
|
@apply gl-pb-3;
|
|
10
|
-
|
|
10
|
+
@apply gl-text-strong;
|
|
11
11
|
|
|
12
12
|
> .label-description {
|
|
13
13
|
@apply gl-mt-3;
|
|
14
|
-
|
|
14
|
+
@apply gl-text-subtle;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
@include form-control-focus($ignore-warning: true);
|
|
11
11
|
appearance: none;
|
|
12
12
|
background: var(--gl-control-background-color-default);
|
|
13
|
-
|
|
13
|
+
@apply gl-text-default;
|
|
14
14
|
box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
|
|
15
15
|
|
|
16
16
|
@media (forced-colors: active) {
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
@apply gl-cursor-not-allowed;
|
|
31
31
|
background: var(--gl-control-background-color-disabled);
|
|
32
32
|
box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-disabled);
|
|
33
|
-
|
|
33
|
+
@apply gl-text-disabled;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
&:not(.form-control-plaintext):focus {
|
|
37
37
|
@include gl-focus($color: var(--gl-control-border-color-focus));
|
|
38
38
|
background: var(--gl-control-background-color-default);
|
|
39
|
-
|
|
39
|
+
@apply gl-text-default;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&.is-invalid {
|
|
@@ -23,7 +23,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
|
|
|
23
23
|
background-color: var(--gl-control-background-color-default);
|
|
24
24
|
background-image: none;
|
|
25
25
|
box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
|
|
26
|
-
|
|
26
|
+
@apply gl-text-default;
|
|
27
27
|
padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
|
|
28
28
|
position: relative;
|
|
29
29
|
|
|
@@ -43,7 +43,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
|
|
|
43
43
|
|
|
44
44
|
&:disabled {
|
|
45
45
|
@apply gl-cursor-not-allowed;
|
|
46
|
-
|
|
46
|
+
@apply gl-text-disabled;
|
|
47
47
|
background-color: var(--gl-control-background-color-disabled);
|
|
48
48
|
box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-disabled);
|
|
49
49
|
}
|
|
@@ -38,8 +38,8 @@ body.modal-open {
|
|
|
38
38
|
@apply gl-rounded-base;
|
|
39
39
|
@apply gl-border-0;
|
|
40
40
|
@apply gl-shadow-lg;
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
@apply gl-text-default;
|
|
42
|
+
@apply gl-bg-overlap;
|
|
43
43
|
|
|
44
44
|
> :first-child {
|
|
45
45
|
@apply gl-rounded-tl-base;
|
|
@@ -112,7 +112,7 @@ body.modal-open {
|
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
~ .modal-backdrop {
|
|
115
|
-
|
|
115
|
+
@apply gl-bg-overlay;
|
|
116
116
|
opacity: 1;
|
|
117
117
|
}
|
|
118
118
|
|
|
@@ -10,11 +10,11 @@ $gl-popover-max-width: $grid-size * 35;
|
|
|
10
10
|
|
|
11
11
|
&,
|
|
12
12
|
.popover-header {
|
|
13
|
-
|
|
13
|
+
@apply gl-bg-overlap;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.popover-body {
|
|
17
|
-
|
|
17
|
+
@apply gl-text-default;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
&.bs-popover-top {
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
table.gl-table {
|
|
2
2
|
background-color: var(--gl-color-alpha-0);
|
|
3
|
-
|
|
3
|
+
@apply gl-text-default;
|
|
4
4
|
|
|
5
5
|
tr {
|
|
6
6
|
th,
|
|
7
7
|
td {
|
|
8
8
|
@apply gl-border-b-1 gl-bg-transparent gl-p-5 gl-border-b-solid;
|
|
9
|
-
|
|
9
|
+
@apply gl-border-default;
|
|
10
10
|
@apply gl-leading-normal;
|
|
11
11
|
@apply gl-text-base;
|
|
12
12
|
@apply gl-align-top;
|
|
@@ -34,7 +34,7 @@ table.gl-table {
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
td {
|
|
37
|
-
|
|
37
|
+
@apply gl-text-default;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&:focus-visible {
|
|
@@ -48,7 +48,7 @@ table.gl-table {
|
|
|
48
48
|
&--sticky-header thead tr {
|
|
49
49
|
position: sticky;
|
|
50
50
|
top: -1px;
|
|
51
|
-
|
|
51
|
+
@apply gl-bg-default;
|
|
52
52
|
box-shadow: inset 0 -1px 0 var(--gl-border-color-default);
|
|
53
53
|
}
|
|
54
54
|
|
|
@@ -139,6 +139,7 @@ export default {
|
|
|
139
139
|
v-gl-resize-observer:[withTooltip]="checkTruncationState"
|
|
140
140
|
class="gl-truncate-component"
|
|
141
141
|
:title="title"
|
|
142
|
+
:aria-label="text"
|
|
142
143
|
>
|
|
143
144
|
<span ref="text" class="gl-truncate-end">{{ first }}</span
|
|
144
145
|
><span class="gl-truncate-start">‎{{ last }}‎</span>
|
package/src/scss/body.scss
CHANGED