@gitlab/ui 65.1.2 → 65.2.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 +17 -0
- package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js +1 -1
- package/dist/components/base/progress_bar/progress_bar.js +2 -1
- package/dist/components/charts/chart/chart.js +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +5 -5
- package/scss_to_js/scss_variables.json +2 -2
- package/src/components/base/form/form_checkbox/form_checkbox.scss +18 -1
- package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js +1 -1
- package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue +1 -1
- package/src/components/base/progress_bar/progress_bar.vue +1 -0
- package/src/components/charts/chart/chart.md +1 -2
- package/src/components/charts/chart/chart.spec.js +2 -2
- package/src/components/charts/chart/chart.vue +1 -1
- package/src/scss/variables.scss +2 -2
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "65.
|
|
3
|
+
"version": "65.2.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
},
|
|
86
86
|
"devDependencies": {
|
|
87
87
|
"@arkweid/lefthook": "0.7.7",
|
|
88
|
-
"@babel/core": "^7.22.
|
|
89
|
-
"@babel/preset-env": "^7.22.
|
|
88
|
+
"@babel/core": "^7.22.10",
|
|
89
|
+
"@babel/preset-env": "^7.22.10",
|
|
90
90
|
"@babel/preset-react": "^7.22.5",
|
|
91
91
|
"@gitlab/eslint-plugin": "19.0.0",
|
|
92
92
|
"@gitlab/fonts": "^1.2.0",
|
|
@@ -121,9 +121,9 @@
|
|
|
121
121
|
"cypress": "12.17.3",
|
|
122
122
|
"dompurify": "^2.4.7",
|
|
123
123
|
"emoji-regex": "^10.0.0",
|
|
124
|
-
"eslint": "8.
|
|
124
|
+
"eslint": "8.47.0",
|
|
125
125
|
"eslint-import-resolver-jest": "3.0.2",
|
|
126
|
-
"eslint-plugin-cypress": "2.
|
|
126
|
+
"eslint-plugin-cypress": "2.14.0",
|
|
127
127
|
"eslint-plugin-storybook": "0.6.12",
|
|
128
128
|
"glob": "^7.2.0",
|
|
129
129
|
"identity-obj-proxy": "^3.0.0",
|
|
@@ -1786,7 +1786,7 @@
|
|
|
1786
1786
|
},
|
|
1787
1787
|
{
|
|
1788
1788
|
"name": "$gl-icon-check",
|
|
1789
|
-
"value": "data:image/svg+xml,%3Csvg width=\"
|
|
1789
|
+
"value": "data:image/svg+xml,%3Csvg width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M0.75 4.76289L3.15312 7.24678L9.25 1.1499\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/%3E%3C/svg%3E%0A",
|
|
1790
1790
|
"mapValue": [
|
|
1791
1791
|
{
|
|
1792
1792
|
"name": "data",
|
|
@@ -1798,7 +1798,7 @@
|
|
|
1798
1798
|
},
|
|
1799
1799
|
{
|
|
1800
1800
|
"name": "$gl-icon-indeterminate",
|
|
1801
|
-
"value": "data:image/svg+xml,%3Csvg width=\"
|
|
1801
|
+
"value": "data:image/svg+xml,%3Csvg width=\"10\" height=\"2\" viewBox=\"0 0 10 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1.75 1H8.25\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/%3E%3C/svg%3E%0A",
|
|
1802
1802
|
"mapValue": [
|
|
1803
1803
|
{
|
|
1804
1804
|
"name": "data",
|
|
@@ -88,22 +88,25 @@
|
|
|
88
88
|
.custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
|
|
89
89
|
.custom-control-input[type='radio']:checked ~ .custom-control-label {
|
|
90
90
|
&::after {
|
|
91
|
-
@include gl-bg-none;
|
|
92
91
|
@include gl-bg-white;
|
|
92
|
+
background: 50% 50% no-repeat;
|
|
93
93
|
mask-repeat: no-repeat;
|
|
94
94
|
mask-position: center center;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
.custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
|
|
99
|
+
background-image: url('#{$gl-icon-check}');
|
|
99
100
|
mask-image: url('#{$gl-icon-check}');
|
|
100
101
|
}
|
|
101
102
|
|
|
102
103
|
.custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
|
|
104
|
+
background-image: url('#{$gl-icon-indeterminate}');
|
|
103
105
|
mask-image: url('#{$gl-icon-indeterminate}');
|
|
104
106
|
}
|
|
105
107
|
|
|
106
108
|
.custom-control-input[type='radio']:checked ~ .custom-control-label::after {
|
|
109
|
+
background-image: url('#{$gl-icon-radio}');
|
|
107
110
|
mask-image: url('#{$gl-icon-radio}');
|
|
108
111
|
}
|
|
109
112
|
|
|
@@ -146,7 +149,21 @@
|
|
|
146
149
|
}
|
|
147
150
|
|
|
148
151
|
&::after {
|
|
152
|
+
background-image: none;
|
|
149
153
|
@include gl-bg-gray-500;
|
|
154
|
+
|
|
155
|
+
/* Ensure state indicators (like the checkmark for checked or
|
|
156
|
+
the dash for indeterminate) are visible in Windows High
|
|
157
|
+
Contrast Mode.
|
|
158
|
+
*/
|
|
159
|
+
@media screen and (forced-colors: active) {
|
|
160
|
+
forced-color-adjust: none;
|
|
161
|
+
/* system color reference for disabled text applied to
|
|
162
|
+
background here.
|
|
163
|
+
*/
|
|
164
|
+
// stylelint-disable-next-line
|
|
165
|
+
background-color: GrayText;
|
|
166
|
+
}
|
|
150
167
|
}
|
|
151
168
|
}
|
|
152
169
|
}
|
|
@@ -20,7 +20,7 @@ describe('GlDisclosureDropdownGroup', () => {
|
|
|
20
20
|
});
|
|
21
21
|
};
|
|
22
22
|
|
|
23
|
-
const findGroup = () => wrapper.find('ul
|
|
23
|
+
const findGroup = () => wrapper.find('ul');
|
|
24
24
|
const findItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
|
|
25
25
|
const findByTestId = (testid, root = wrapper) => root.find(`[data-testid="${testid}"]`);
|
|
26
26
|
const findLabelElement = () => {
|
|
@@ -85,7 +85,7 @@ export default {
|
|
|
85
85
|
>
|
|
86
86
|
<slot name="group-label">{{ group.name }}</slot>
|
|
87
87
|
</div>
|
|
88
|
-
<ul
|
|
88
|
+
<ul :aria-labelledby="groupLabeledBy" class="gl-mb-0 gl-pl-0 gl-list-style-none">
|
|
89
89
|
<slot>
|
|
90
90
|
<!-- eslint-disable vue/valid-v-for -->
|
|
91
91
|
<gl-disclosure-dropdown-item
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
### ECharts Wrapper
|
|
2
2
|
|
|
3
3
|
The chart component is a Vue component wrapper around [Apache ECharts](https://echarts.apache.org/en/api.html#echarts).
|
|
4
|
-
The chart component accepts width and height props in order to allow the user to make it responsive
|
|
5
|
-
but it is not responsive by default.
|
|
4
|
+
The chart component accepts width and height props in order to allow the user to make it responsive.
|
|
6
5
|
|
|
7
6
|
> Note: When implementing a chart type that does not already have a GitLab UI component, you can use
|
|
8
7
|
> this component alonside the [ECharts options](https://echarts.apache.org/en/api.html#echarts) to
|
|
@@ -42,7 +42,7 @@ describe('chart component', () => {
|
|
|
42
42
|
});
|
|
43
43
|
|
|
44
44
|
it('does not resize the chart when responsive = false', async () => {
|
|
45
|
-
wrapper = shallowMount(
|
|
45
|
+
wrapper = shallowMount(Chart, { propsData: { options: {}, responsive: false } });
|
|
46
46
|
await wrapper.vm.$nextTick();
|
|
47
47
|
// initial call when chart gets created
|
|
48
48
|
expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
|
|
@@ -54,7 +54,7 @@ describe('chart component', () => {
|
|
|
54
54
|
});
|
|
55
55
|
|
|
56
56
|
it('resizes the chart only once per animation frame when responsive = true', async () => {
|
|
57
|
-
wrapper = shallowMount(
|
|
57
|
+
wrapper = shallowMount(...mountArgs);
|
|
58
58
|
await wrapper.vm.$nextTick();
|
|
59
59
|
expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
|
|
60
60
|
|
package/src/scss/variables.scss
CHANGED
|
@@ -477,8 +477,8 @@ $gl-icon-chevron-left: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="
|
|
|
477
477
|
$gl-icon-chevron-right: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M10.707 7.293a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L8.586 8 6.293 5.707a1 1 0 0 1 1.414-1.414l3 3z"/></svg>';
|
|
478
478
|
$gl-icon-chevron-down: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M7.293 10.707a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L8 8.586 5.707 6.293a1 1 0 0 0-1.414 1.414l3 3z"/></svg>';
|
|
479
479
|
$gl-icon-select-chevron-down: 'data:image/svg+xml,%3Csvg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0.21967 0.21967C0.512563 -0.0732232 0.987437 -0.0732232 1.28033 0.21967L4 2.93934L6.71967 0.21967C7.01256 -0.073223 7.48744 -0.0732229 7.78033 0.21967C8.07322 0.512563 8.07322 0.987437 7.78033 1.28033L4.53033 4.53033C4.23744 4.82322 3.76256 4.82322 3.46967 4.53033L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z" fill="%23666666"/%3E%3C/svg%3E%0A';
|
|
480
|
-
$gl-icon-check: 'data:image/svg+xml,%3Csvg width="
|
|
481
|
-
$gl-icon-indeterminate: 'data:image/svg+xml,%3Csvg width="
|
|
480
|
+
$gl-icon-check: 'data:image/svg+xml,%3Csvg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0.75 4.76289L3.15312 7.24678L9.25 1.1499" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E%0A';
|
|
481
|
+
$gl-icon-indeterminate: 'data:image/svg+xml,%3Csvg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.75 1H8.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E%0A';
|
|
482
482
|
$gl-icon-radio: 'data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="3" cy="3" r="3" fill="white"/%3E%3C/svg%3E%0A';
|
|
483
483
|
|
|
484
484
|
// Icons
|