@gitlab/ui 40.6.4 → 40.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.
- package/CHANGELOG.md +21 -0
- package/dist/components/base/toggle/toggle.js +5 -1
- package/dist/components/charts/single_stat/single_stat.js +2 -2
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +2 -2
- package/src/components/base/filtered_search/filtered_search.stories.js +2 -0
- package/src/components/base/search_box_by_click/search_box_by_click.scss +5 -6
- package/src/components/base/toggle/toggle.scss +0 -1
- package/src/components/base/toggle/toggle.spec.js +11 -6
- package/src/components/base/toggle/toggle.vue +7 -2
- package/src/components/charts/single_stat/single_stat.vue +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "40.
|
|
3
|
+
"version": "40.7.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"bootstrap": "4.5.3",
|
|
107
107
|
"cypress": "^6.6.0",
|
|
108
108
|
"emoji-regex": "^10.0.0",
|
|
109
|
-
"eslint": "
|
|
109
|
+
"eslint": "8.16.0",
|
|
110
110
|
"eslint-import-resolver-jest": "3.0.2",
|
|
111
111
|
"eslint-plugin-cypress": "2.12.1",
|
|
112
112
|
"eslint-plugin-storybook": "0.5.12",
|
|
@@ -202,8 +202,10 @@ const LabelToken = {
|
|
|
202
202
|
},
|
|
203
203
|
containerStyle() {
|
|
204
204
|
if (this.activeLabel) {
|
|
205
|
+
// eslint-disable-next-line camelcase
|
|
205
206
|
const { color, text_color } = this.activeLabel;
|
|
206
207
|
|
|
208
|
+
// eslint-disable-next-line camelcase
|
|
207
209
|
return { backgroundColor: color, color: text_color };
|
|
208
210
|
}
|
|
209
211
|
return {};
|
|
@@ -41,17 +41,16 @@
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
&.input-group {
|
|
45
45
|
> .input-group-prepend,
|
|
46
46
|
> .input-group-append {
|
|
47
47
|
@include gl-bg-white;
|
|
48
48
|
}
|
|
49
|
+
}
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
@include gl-inset-border-1-gray-400;
|
|
54
|
-
}
|
|
51
|
+
.gl-search-box-by-click-search-button {
|
|
52
|
+
@include gl-text-gray-500;
|
|
53
|
+
@include gl-inset-border-1-gray-400;
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
.gl-search-box-by-click-input {
|
|
@@ -109,18 +109,23 @@ describe('toggle', () => {
|
|
|
109
109
|
|
|
110
110
|
describe('label position', () => {
|
|
111
111
|
describe.each`
|
|
112
|
-
state | labelPosition | hasGlSrOnlyClass
|
|
113
|
-
${'top'} | ${toggleLabelPosition.top} | ${false}
|
|
114
|
-
${'left'} | ${toggleLabelPosition.left} | ${false}
|
|
115
|
-
${'hidden'} | ${toggleLabelPosition.hidden} | ${true}
|
|
116
|
-
`('when $state', ({ labelPosition, hasGlSrOnlyClass }) => {
|
|
112
|
+
state | labelPosition | hasGlSrOnlyClass | flexDirection
|
|
113
|
+
${'top'} | ${toggleLabelPosition.top} | ${false} | ${'gl-flex-direction-column'}
|
|
114
|
+
${'left'} | ${toggleLabelPosition.left} | ${false} | ${'gl-toggle-label-inline'}
|
|
115
|
+
${'hidden'} | ${toggleLabelPosition.hidden} | ${true} | ${'gl-flex-direction-column'}
|
|
116
|
+
`('when $state', ({ labelPosition, hasGlSrOnlyClass, flexDirection }) => {
|
|
117
117
|
beforeEach(() => {
|
|
118
118
|
createWrapper({ labelPosition });
|
|
119
119
|
});
|
|
120
120
|
|
|
121
|
+
it(`${flexDirection} class is added to the label`, () => {
|
|
122
|
+
const cssClasses = wrapper.find('[data-testid="toggle-wrapper"]').classes();
|
|
123
|
+
|
|
124
|
+
return expect(cssClasses).toContain(flexDirection);
|
|
125
|
+
});
|
|
126
|
+
|
|
121
127
|
it(`${hasGlSrOnlyClass ? 'adds' : 'does not add'} 'gl-sr-only' class to the label`, () => {
|
|
122
128
|
const cssClasses = wrapper.find('[data-testid="toggle-label"]').classes();
|
|
123
|
-
|
|
124
129
|
return hasGlSrOnlyClass
|
|
125
130
|
? expect(cssClasses).toContain('gl-sr-only')
|
|
126
131
|
: expect(cssClasses).not.toContain('gl-sr-only');
|
|
@@ -118,8 +118,13 @@ export default {
|
|
|
118
118
|
|
|
119
119
|
<template>
|
|
120
120
|
<div
|
|
121
|
-
class="gl-toggle-wrapper gl-display-flex gl-
|
|
122
|
-
:class="{
|
|
121
|
+
class="gl-toggle-wrapper gl-display-flex gl-mb-0 gl-w-max-content"
|
|
122
|
+
:class="{
|
|
123
|
+
'gl-flex-direction-column': labelPosition === 'top' || labelPosition === 'hidden',
|
|
124
|
+
'gl-toggle-label-inline': labelPosition === 'left',
|
|
125
|
+
'is-disabled': disabled,
|
|
126
|
+
}"
|
|
127
|
+
data-testid="toggle-wrapper"
|
|
123
128
|
>
|
|
124
129
|
<span
|
|
125
130
|
:id="labelId"
|