diff --git a/libs/blocks/table/table.css b/libs/blocks/table/table.css index 3f9b8abc37d..2ea69698be9 100644 --- a/libs/blocks/table/table.css +++ b/libs/blocks/table/table.css @@ -692,6 +692,10 @@ margin: 0; } + .table.preserve-columns .row .section-row-title { + grid-column: auto; + } + .table:not(.merch) .row .section-head-title, .table:not(.merch) .row .section-row-title { border-right: 1px solid var(--border-color); @@ -701,12 +705,25 @@ display: block; } + .table.preserve-columns .row-heading .col-heading.col-1, + .table.preserve-columns .row.row-highlight .col-highlight.col-1 { + display: flex; + } + .table .section-head .col:not(.section-head-title), .table:not(.merch) .col-heading.col-1, .table:not(.merch) .row-highlight .col-highlight.col-1:not(:only-child) { display: none; } + .table.preserve-columns .row-heading .col-heading:first-child { + border-top-left-radius: var(--border-radius); + } + + .table.preserve-columns .row-heading .col-heading:last-child { + border-top-left-radius: 0; + } + .table:not(.merch) .row-highlight:has(> :only-child) { grid-template-columns: repeat(auto-fit, 100%); } diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index a5805c406bb..7d5006cc3bf 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -477,6 +477,7 @@ function applyStylesBasedOnScreenSize(table, originTable) { const deviceBySize = defineDeviceByScreenSize(); const setRowStyle = () => { + if (table.classList.contains('preserve-columns')) return; if (isMerch) return; const sectionRow = Array.from(table.getElementsByClassName('section-row')); if (sectionRow.length) { @@ -614,7 +615,10 @@ function applyStylesBasedOnScreenSize(table, originTable) { } removeClones(); - if (deviceBySize === 'MOBILE' || (isMerch && deviceBySize === 'TABLET')) { + if ( + !table.classList.contains('preserve-columns') + && (deviceBySize === 'MOBILE' || (isMerch && deviceBySize === 'TABLET')) + ) { mobileRenderer(); } else { table.querySelectorAll('.hide-mobile, .left-round, .right-round').forEach((col) => { col.classList.remove('hide-mobile', 'left-round', 'right-round'); }); @@ -670,6 +674,10 @@ export default function init(el) { expandSection = handleSection(sectionParams); }); + const columnCount = el.querySelector('.row-1')?.children.length || 0; + + if (columnCount <= 2) el.classList.add('preserve-columns'); + handleHighlight(el); handleStickyHeader(el); if (isMerch) formatMerchTable(el); diff --git a/test/blocks/table/mocks/two-column-table.html b/test/blocks/table/mocks/two-column-table.html new file mode 100644 index 00000000000..f0cafe13b45 --- /dev/null +++ b/test/blocks/table/mocks/two-column-table.html @@ -0,0 +1,10 @@ +
+
+

Feature

+

Details

+
+
+

Row 2 label

+

Row 2 value

+
+
\ No newline at end of file diff --git a/test/blocks/table/table.test.js b/test/blocks/table/table.test.js index 1f0c13c1312..cc45f0abd54 100644 --- a/test/blocks/table/table.test.js +++ b/test/blocks/table/table.test.js @@ -29,6 +29,22 @@ describe('table and tablemetadata', () => { expect(table.querySelector('.row-heading')).to.exist; }); + it('does not add preserve-columns class to tables with more than two columns', () => { + expect(table.classList.contains('preserve-columns')).to.be.false; + }); + + it('adds preserve-columns class to a table with two or fewer columns', async () => { + const html = await readFile({ path: './mocks/two-column-table.html' }); + const container = document.createElement('div'); + container.innerHTML = html; + document.body.appendChild(container); + + const twoColTable = container.querySelector('.table'); + init(twoColTable); + expect(twoColTable.classList.contains('preserve-columns')).to.be.true; + container.remove(); + }); + it('expand icon event by mouse click', () => { const expandIcon = table.querySelector('.icon.expand'); expect(expandIcon.ariaExpanded).to.be.equal('true');