Commit 9d882321 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Natalia Tepluhina

Update gl-table to use stacked on sm breakpoint

- updated snapshots
parent cff37dd7
...@@ -176,6 +176,7 @@ export default { ...@@ -176,6 +176,7 @@ export default {
:items="list" :items="list"
:fields="headerFields" :fields="headerFields"
:no-local-sorting="true" :no-local-sorting="true"
stacked="md"
> >
<template #name="{value}"> <template #name="{value}">
<div ref="col-name" class="flex-truncate-parent"> <div ref="col-name" class="flex-truncate-parent">
......
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
</script> </script>
<template> <template>
<gl-loading-icon v-if="isLoading" /> <gl-loading-icon v-if="isLoading" class="mt-2" />
<package-list v-else @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest"> <package-list v-else @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
<template #empty-state> <template #empty-state>
<gl-empty-state <gl-empty-state
......
...@@ -35,8 +35,10 @@ exports[`packages_list renders 1`] = ` ...@@ -35,8 +35,10 @@ exports[`packages_list renders 1`] = `
<table <table
aria-busy="false" aria-busy="false"
aria-colcount="5" aria-colcount="5"
class="table b-table gl-table" aria-describedby="__BVID__9__caption_"
class="table b-table gl-table b-table-stacked-md"
id="__BVID__9" id="__BVID__9"
role="table"
> >
<!----> <!---->
<!----> <!---->
...@@ -104,8 +106,10 @@ exports[`packages_list renders 1`] = ` ...@@ -104,8 +106,10 @@ exports[`packages_list renders 1`] = `
<td <td
aria-colindex="1" aria-colindex="1"
class="text-left" class="text-left"
data-label="Name"
role="cell" role="cell"
> >
<div>
<div <div
class="flex-truncate-parent" class="flex-truncate-parent"
> >
...@@ -119,41 +123,53 @@ exports[`packages_list renders 1`] = ` ...@@ -119,41 +123,53 @@ exports[`packages_list renders 1`] = `
</a> </a>
</div> </div>
</div>
</td> </td>
<td <td
aria-colindex="2" aria-colindex="2"
class="text-center" class="text-center"
data-label="Version"
role="cell" role="cell"
> >
<div>
1.0.0 1.0.0
</div>
</td> </td>
<td <td
aria-colindex="3" aria-colindex="3"
class="text-center" class="text-center"
data-label="Type"
role="cell" role="cell"
> >
<div>
maven maven
</div>
</td> </td>
<td <td
aria-colindex="4" aria-colindex="4"
class="text-center" class="text-center"
data-label="Created"
role="cell" role="cell"
> >
<div>
<timeagotooltip-stub <timeagotooltip-stub
cssclass="" cssclass=""
time="" time=""
tooltipplacement="top" tooltipplacement="top"
/> />
</div>
</td> </td>
<td <td
aria-colindex="5" aria-colindex="5"
class="text-right" class="text-right"
data-label=""
role="cell" role="cell"
> >
<div>
<glbutton-stub <glbutton-stub
aria-label="Remove package" aria-label="Remove package"
title="Remove package" title="Remove package"
...@@ -164,6 +180,7 @@ exports[`packages_list renders 1`] = ` ...@@ -164,6 +180,7 @@ exports[`packages_list renders 1`] = `
size="16" size="16"
/> />
</glbutton-stub> </glbutton-stub>
</div>
</td> </td>
</tr> </tr>
<tr <tr
...@@ -173,8 +190,10 @@ exports[`packages_list renders 1`] = ` ...@@ -173,8 +190,10 @@ exports[`packages_list renders 1`] = `
<td <td
aria-colindex="1" aria-colindex="1"
class="text-left" class="text-left"
data-label="Name"
role="cell" role="cell"
> >
<div>
<div <div
class="flex-truncate-parent" class="flex-truncate-parent"
> >
...@@ -188,41 +207,53 @@ exports[`packages_list renders 1`] = ` ...@@ -188,41 +207,53 @@ exports[`packages_list renders 1`] = `
</a> </a>
</div> </div>
</div>
</td> </td>
<td <td
aria-colindex="2" aria-colindex="2"
class="text-center" class="text-center"
data-label="Version"
role="cell" role="cell"
> >
<div>
</div>
</td> </td>
<td <td
aria-colindex="3" aria-colindex="3"
class="text-center" class="text-center"
data-label="Type"
role="cell" role="cell"
> >
<div>
npm npm
</div>
</td> </td>
<td <td
aria-colindex="4" aria-colindex="4"
class="text-center" class="text-center"
data-label="Created"
role="cell" role="cell"
> >
<div>
<timeagotooltip-stub <timeagotooltip-stub
cssclass="" cssclass=""
time="" time=""
tooltipplacement="top" tooltipplacement="top"
/> />
</div>
</td> </td>
<td <td
aria-colindex="5" aria-colindex="5"
class="text-right" class="text-right"
data-label=""
role="cell" role="cell"
> >
<div>
<glbutton-stub <glbutton-stub
aria-label="Remove package" aria-label="Remove package"
title="Remove package" title="Remove package"
...@@ -233,6 +264,7 @@ exports[`packages_list renders 1`] = ` ...@@ -233,6 +264,7 @@ exports[`packages_list renders 1`] = `
size="16" size="16"
/> />
</glbutton-stub> </glbutton-stub>
</div>
</td> </td>
</tr> </tr>
<!----> <!---->
......
...@@ -173,4 +173,11 @@ describe('packages_list', () => { ...@@ -173,4 +173,11 @@ describe('packages_list', () => {
expect(wrapper.emitted('page:changed')).toEqual([[2]]); expect(wrapper.emitted('page:changed')).toEqual([[2]]);
}); });
}); });
describe('table component', () => {
it('has stacked-md class', () => {
const table = findPackageListTable();
expect(table.classes()).toContain('b-table-stacked-md');
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment