@gitlab/ui 66.11.0 → 66.12.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 +7 -0
- package/dist/components/base/table/table.js +9 -1
- package/dist/components/base/table_lite/table_lite.js +9 -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 +1 -1
- package/src/components/base/table/table.scss +13 -0
- package/src/components/base/table/table.spec.js +11 -1
- package/src/components/base/table/table.stories.js +47 -0
- package/src/components/base/table/table.vue +9 -1
- package/src/components/base/table_lite/table_lite.spec.js +11 -1
- package/src/components/base/table_lite/table_lite.stories.js +14 -3
- package/src/components/base/table_lite/table_lite.vue +9 -1
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -27,9 +27,22 @@ table.gl-table {
|
|
|
27
27
|
@include gl-focus;
|
|
28
28
|
position: relative;
|
|
29
29
|
z-index: 1;
|
|
30
|
+
background: $white;
|
|
31
|
+
|
|
32
|
+
&:hover {
|
|
33
|
+
background: $gray-50;
|
|
34
|
+
}
|
|
30
35
|
}
|
|
31
36
|
}
|
|
32
37
|
|
|
38
|
+
// Sticky header
|
|
39
|
+
&--sticky-header thead tr {
|
|
40
|
+
position: sticky;
|
|
41
|
+
top: -1px;
|
|
42
|
+
background: $white;
|
|
43
|
+
box-shadow: inset 0 -1px 0 $gray-100;
|
|
44
|
+
}
|
|
45
|
+
|
|
33
46
|
.table-primary,
|
|
34
47
|
.table-primary:hover {
|
|
35
48
|
> td {
|
|
@@ -55,7 +55,17 @@ describe('GlTable', () => {
|
|
|
55
55
|
it('adds gl-table class to tableClass prop', () => {
|
|
56
56
|
factory({ props: { tableClass: 'test-class' } });
|
|
57
57
|
|
|
58
|
-
expect(findBTable().props().tableClass).toEqual(['gl-table', 'test-class']);
|
|
58
|
+
expect(findBTable().props().tableClass).toEqual(['gl-table', 'test-class', null]);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
it('adds sticky header class to tableClass prop', () => {
|
|
62
|
+
factory({ props: { stickyHeader: true } });
|
|
63
|
+
|
|
64
|
+
expect(findBTable().props().tableClass).toEqual([
|
|
65
|
+
'gl-table',
|
|
66
|
+
undefined,
|
|
67
|
+
'gl-table--sticky-header',
|
|
68
|
+
]);
|
|
59
69
|
});
|
|
60
70
|
|
|
61
71
|
it('adds gl-table fields to table prop', () => {
|
|
@@ -20,11 +20,13 @@ const tableItems = [
|
|
|
20
20
|
];
|
|
21
21
|
|
|
22
22
|
const generateProps = ({
|
|
23
|
+
stickyHeader = false,
|
|
23
24
|
fixed = false,
|
|
24
25
|
footClone = false,
|
|
25
26
|
stacked = false,
|
|
26
27
|
caption = '',
|
|
27
28
|
} = {}) => ({
|
|
29
|
+
stickyHeader,
|
|
28
30
|
fixed,
|
|
29
31
|
footClone,
|
|
30
32
|
stacked,
|
|
@@ -36,6 +38,7 @@ export const Default = (args, { argTypes }) => ({
|
|
|
36
38
|
props: Object.keys(argTypes),
|
|
37
39
|
template: `
|
|
38
40
|
<gl-table
|
|
41
|
+
:sticky-header="stickyHeader"
|
|
39
42
|
:items="$options.items"
|
|
40
43
|
:fields="$options.fields"
|
|
41
44
|
:fixed="fixed"
|
|
@@ -84,6 +87,7 @@ export const WithFilter = (args, { argTypes }) => ({
|
|
|
84
87
|
<gl-form-input v-model="filter" placeholder="Type to search" />
|
|
85
88
|
<br />
|
|
86
89
|
<gl-table
|
|
90
|
+
:sticky-header="stickyHeader"
|
|
87
91
|
:items="$options.items"
|
|
88
92
|
:fields="$options.fields"
|
|
89
93
|
:filter=filter
|
|
@@ -104,6 +108,45 @@ export const WithFilter = (args, { argTypes }) => ({
|
|
|
104
108
|
});
|
|
105
109
|
WithFilter.args = generateProps();
|
|
106
110
|
|
|
111
|
+
export const WithStickyHeader = (args, { argTypes }) => ({
|
|
112
|
+
components: { ...components, GlFormInput },
|
|
113
|
+
props: Object.keys(argTypes),
|
|
114
|
+
template: `<div class="gl-line-height-normal">
|
|
115
|
+
<gl-form-input v-model="filter" placeholder="Type to search" />
|
|
116
|
+
<br />
|
|
117
|
+
<gl-table
|
|
118
|
+
:sticky-header="stickyHeader"
|
|
119
|
+
:items="$options.items"
|
|
120
|
+
:fields="$options.fields"
|
|
121
|
+
:filter=filter
|
|
122
|
+
:fixed="fixed"
|
|
123
|
+
:stacked="stacked"
|
|
124
|
+
:foot-clone="footClone"
|
|
125
|
+
hover
|
|
126
|
+
selectable
|
|
127
|
+
selected-variant="primary"
|
|
128
|
+
/>
|
|
129
|
+
</div>`,
|
|
130
|
+
items: [
|
|
131
|
+
...tableItems,
|
|
132
|
+
...tableItems,
|
|
133
|
+
...tableItems,
|
|
134
|
+
...tableItems,
|
|
135
|
+
...tableItems,
|
|
136
|
+
...tableItems,
|
|
137
|
+
...tableItems,
|
|
138
|
+
...tableItems,
|
|
139
|
+
...tableItems,
|
|
140
|
+
...tableItems,
|
|
141
|
+
],
|
|
142
|
+
data() {
|
|
143
|
+
return {
|
|
144
|
+
filter: null,
|
|
145
|
+
};
|
|
146
|
+
},
|
|
147
|
+
});
|
|
148
|
+
WithStickyHeader.args = generateProps({ stickyHeader: true });
|
|
149
|
+
|
|
107
150
|
export default {
|
|
108
151
|
title: 'base/table/table',
|
|
109
152
|
component: GlTable,
|
|
@@ -120,5 +163,9 @@ export default {
|
|
|
120
163
|
options: ['sm', 'md', 'lg', 'xl', true, false],
|
|
121
164
|
control: 'select',
|
|
122
165
|
},
|
|
166
|
+
stickyHeader: {
|
|
167
|
+
options: [false, true],
|
|
168
|
+
control: 'boolean',
|
|
169
|
+
},
|
|
123
170
|
},
|
|
124
171
|
};
|
|
@@ -26,10 +26,18 @@ export default {
|
|
|
26
26
|
required: false,
|
|
27
27
|
default: null,
|
|
28
28
|
},
|
|
29
|
+
stickyHeader: {
|
|
30
|
+
type: Boolean,
|
|
31
|
+
default: false,
|
|
32
|
+
required: false,
|
|
33
|
+
},
|
|
29
34
|
},
|
|
30
35
|
computed: {
|
|
36
|
+
stickyHeaderClass() {
|
|
37
|
+
return this.stickyHeader ? 'gl-table--sticky-header' : null;
|
|
38
|
+
},
|
|
31
39
|
localTableClass() {
|
|
32
|
-
return ['gl-table', this.tableClass];
|
|
40
|
+
return ['gl-table', this.tableClass, this.stickyHeaderClass];
|
|
33
41
|
},
|
|
34
42
|
},
|
|
35
43
|
mounted() {
|
|
@@ -16,7 +16,17 @@ describe('GlTableLite', () => {
|
|
|
16
16
|
it('adds gl-table class to tableClass prop', () => {
|
|
17
17
|
factory({ tableClass: 'test-class' });
|
|
18
18
|
|
|
19
|
-
expect(findBTableLite().props().tableClass).toEqual(['gl-table', 'test-class']);
|
|
19
|
+
expect(findBTableLite().props().tableClass).toEqual(['gl-table', 'test-class', null]);
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
it('adds sticky header class to tableClass prop', () => {
|
|
23
|
+
factory({ stickyHeader: true });
|
|
24
|
+
|
|
25
|
+
expect(findBTableLite().props().tableClass).toEqual([
|
|
26
|
+
'gl-table',
|
|
27
|
+
undefined,
|
|
28
|
+
'gl-table--sticky-header',
|
|
29
|
+
]);
|
|
20
30
|
});
|
|
21
31
|
|
|
22
32
|
it('adds gl-table fields to table prop', () => {
|
|
@@ -31,7 +31,12 @@ const tableItemsMock = [
|
|
|
31
31
|
},
|
|
32
32
|
];
|
|
33
33
|
|
|
34
|
-
const generateProps = ({
|
|
34
|
+
const generateProps = ({
|
|
35
|
+
stickyHeader = false,
|
|
36
|
+
items = tableItemsMock,
|
|
37
|
+
fields = fieldsMock,
|
|
38
|
+
} = {}) => ({
|
|
39
|
+
stickyHeader,
|
|
35
40
|
items,
|
|
36
41
|
fields,
|
|
37
42
|
});
|
|
@@ -40,7 +45,8 @@ const Template = (args, { argTypes }) => ({
|
|
|
40
45
|
components: { GlTableLite },
|
|
41
46
|
props: Object.keys(argTypes),
|
|
42
47
|
template: `
|
|
43
|
-
<gl-table-lite
|
|
48
|
+
<gl-table-lite
|
|
49
|
+
:sticky-header="stickyHeader"
|
|
44
50
|
:items="items"
|
|
45
51
|
:fields="fields" />
|
|
46
52
|
`,
|
|
@@ -59,5 +65,10 @@ export default {
|
|
|
59
65
|
},
|
|
60
66
|
},
|
|
61
67
|
},
|
|
62
|
-
argTypes: {
|
|
68
|
+
argTypes: {
|
|
69
|
+
stickyHeader: {
|
|
70
|
+
options: [false, true],
|
|
71
|
+
control: 'boolean',
|
|
72
|
+
},
|
|
73
|
+
},
|
|
63
74
|
};
|
|
@@ -16,10 +16,18 @@ export default {
|
|
|
16
16
|
required: false,
|
|
17
17
|
default: null,
|
|
18
18
|
},
|
|
19
|
+
stickyHeader: {
|
|
20
|
+
type: Boolean,
|
|
21
|
+
default: false,
|
|
22
|
+
required: false,
|
|
23
|
+
},
|
|
19
24
|
},
|
|
20
25
|
computed: {
|
|
26
|
+
stickyHeaderClass() {
|
|
27
|
+
return this.stickyHeader ? 'gl-table--sticky-header' : null;
|
|
28
|
+
},
|
|
21
29
|
localTableClass() {
|
|
22
|
-
return ['gl-table', this.tableClass];
|
|
30
|
+
return ['gl-table', this.tableClass, this.stickyHeaderClass];
|
|
23
31
|
},
|
|
24
32
|
},
|
|
25
33
|
};
|