@gitlab/ui 32.30.0 → 32.31.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
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [32.31.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.30.0...v32.31.0) (2021-11-02)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **GlToggle:** Use uniqueId for toggle labels ([2ba11fb](https://gitlab.com/gitlab-org/gitlab-ui/commit/2ba11fbd5023233e4581507f24660a9ffa874f86))
|
|
7
|
+
|
|
1
8
|
# [32.30.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.29.2...v32.30.0) (2021-11-01)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _uniqueId from 'lodash/uniqueId';
|
|
1
2
|
import { toggleLabelPosition } from '../../../utils/constants';
|
|
2
3
|
import GlIcon from '../icon/icon';
|
|
3
4
|
import GlLoadingIcon from '../loading_icon/loading_icon';
|
|
@@ -65,14 +66,6 @@ var script = {
|
|
|
65
66
|
default: undefined
|
|
66
67
|
},
|
|
67
68
|
|
|
68
|
-
/**
|
|
69
|
-
* The id for the label. This id is used by the aria-labelledby attribute on the toggle button.
|
|
70
|
-
*/
|
|
71
|
-
labelId: {
|
|
72
|
-
type: String,
|
|
73
|
-
required: true
|
|
74
|
-
},
|
|
75
|
-
|
|
76
69
|
/**
|
|
77
70
|
* The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
|
|
78
71
|
*/
|
|
@@ -87,6 +80,13 @@ var script = {
|
|
|
87
80
|
|
|
88
81
|
}
|
|
89
82
|
},
|
|
83
|
+
|
|
84
|
+
data() {
|
|
85
|
+
return {
|
|
86
|
+
labelId: _uniqueId('toggle-label-')
|
|
87
|
+
};
|
|
88
|
+
},
|
|
89
|
+
|
|
90
90
|
computed: {
|
|
91
91
|
icon() {
|
|
92
92
|
return this.value ? 'mobile-issue-close' : 'close';
|
package/package.json
CHANGED
|
@@ -8,14 +8,12 @@ describe('toggle', () => {
|
|
|
8
8
|
let wrapper;
|
|
9
9
|
|
|
10
10
|
const label = 'toggle label';
|
|
11
|
-
const labelId = 'toggle-label-id';
|
|
12
11
|
const helpText = 'help text';
|
|
13
12
|
|
|
14
13
|
const createWrapper = (props = {}) => {
|
|
15
14
|
wrapper = shallowMount(Toggle, {
|
|
16
15
|
propsData: {
|
|
17
16
|
label,
|
|
18
|
-
labelId,
|
|
19
17
|
...props,
|
|
20
18
|
},
|
|
21
19
|
});
|
|
@@ -131,7 +129,7 @@ describe('toggle', () => {
|
|
|
131
129
|
});
|
|
132
130
|
|
|
133
131
|
it('has accessible name for the button', () => {
|
|
134
|
-
expect(findButton().attributes('aria-labelledby')).
|
|
132
|
+
expect(findButton().attributes('aria-labelledby')).toBeDefined();
|
|
135
133
|
});
|
|
136
134
|
});
|
|
137
135
|
});
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import { uniqueId } from 'lodash';
|
|
3
|
+
|
|
2
4
|
import { toggleLabelPosition } from '../../../utils/constants';
|
|
3
5
|
import GlIcon from '../icon/icon.vue';
|
|
4
6
|
import GlLoadingIcon from '../loading_icon/loading_icon.vue';
|
|
@@ -60,13 +62,6 @@ export default {
|
|
|
60
62
|
required: false,
|
|
61
63
|
default: undefined,
|
|
62
64
|
},
|
|
63
|
-
/**
|
|
64
|
-
* The id for the label. This id is used by the aria-labelledby attribute on the toggle button.
|
|
65
|
-
*/
|
|
66
|
-
labelId: {
|
|
67
|
-
type: String,
|
|
68
|
-
required: true,
|
|
69
|
-
},
|
|
70
65
|
/**
|
|
71
66
|
* The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
|
|
72
67
|
*/
|
|
@@ -79,7 +74,11 @@ export default {
|
|
|
79
74
|
},
|
|
80
75
|
},
|
|
81
76
|
},
|
|
82
|
-
|
|
77
|
+
data() {
|
|
78
|
+
return {
|
|
79
|
+
labelId: uniqueId('toggle-label-'),
|
|
80
|
+
};
|
|
81
|
+
},
|
|
83
82
|
computed: {
|
|
84
83
|
icon() {
|
|
85
84
|
return this.value ? 'mobile-issue-close' : 'close';
|