Skip to content

Commit 6877f8b

Browse files
tftf
committed
Apply width restriction per item in TwoColumn
Avoid unnecessary box and group splits for inline items with width below md. Elements narrower than md now stay in the same box and retain their restricted width when side or sticky elements are inlined at narrow viewports.
1 parent d2f6ee5 commit 6877f8b

2 files changed

Lines changed: 82 additions & 31 deletions

File tree

‎entry_types/scrolled/package/spec/frontend/Layout-spec.js‎

Lines changed: 59 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -537,11 +537,9 @@ describe('Layout', () => {
537537

538538
it('decreases size when inlining wide side elements', () => {
539539
const items = [
540-
{id: 1, type: 'probe', position: 'side', width: -2},
541-
{id: 2, type: 'probe', position: 'side', width: -1},
542-
{id: 3, type: 'probe', position: 'side'},
543-
{id: 4, type: 'probe', position: 'side', width: 1},
544-
{id: 5, type: 'probe', position: 'side', width: 2}
540+
{id: 1, type: 'probe', position: 'side'},
541+
{id: 2, type: 'probe', position: 'side', width: 1},
542+
{id: 3, type: 'probe', position: 'side', width: 2}
545543
];
546544
window.matchMedia.mockViewportWidth(500);
547545
const {container} = renderInEntry(
@@ -564,17 +562,15 @@ describe('Layout', () => {
564562
);
565563

566564
expect(container.textContent).toEqual(
567-
'[inline xs 1 ][inline sm 2 ][inline md 3 4 ][inline lg 5 ]'
565+
'[inline md 1 2 ][inline lg 3 ]'
568566
);
569567
});
570568

571569
it('decreases size when inlining wide sticky elements', () => {
572570
const items = [
573-
{id: 1, type: 'probe', position: 'sticky', width: -2},
574-
{id: 2, type: 'probe', position: 'sticky', width: -1},
575-
{id: 3, type: 'probe', position: 'sticky'},
576-
{id: 4, type: 'probe', position: 'sticky', width: 1},
577-
{id: 5, type: 'probe', position: 'sticky', width: 2}
571+
{id: 1, type: 'probe', position: 'sticky'},
572+
{id: 2, type: 'probe', position: 'sticky', width: 1},
573+
{id: 3, type: 'probe', position: 'sticky', width: 2}
578574
];
579575
window.matchMedia.mockViewportWidth(500);
580576
const {container} = renderInEntry(
@@ -597,9 +593,10 @@ describe('Layout', () => {
597593
);
598594

599595
expect(container.textContent).toEqual(
600-
'[inline xs 1 ][inline sm 2 ][inline md 3 4 ][inline lg 5 ]'
596+
'[inline md 1 2 ][inline lg 3 ]'
601597
);
602598
});
599+
603600
});
604601

605602
describe('in center variant', () => {
@@ -1384,6 +1381,56 @@ describe('Layout', () => {
13841381

13851382
expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['restrict-xs'])).not.toBeNull();
13861383
});
1384+
1385+
it('does not decrease size of inlined side element with width below md', () => {
1386+
const items = [
1387+
{id: 2, type: 'probe', position: 'side', width: -2}
1388+
];
1389+
window.matchMedia.mockViewportWidth(500);
1390+
const {getByTestId} = renderInEntry(
1391+
<Layout sectionProps={{layout: 'left'}} items={items}>
1392+
{children => children}
1393+
</Layout>,
1394+
{
1395+
seed: {
1396+
themeOptions: {
1397+
properties: {
1398+
root: {
1399+
twoColumnStickyBreakpoint: '950px'
1400+
}
1401+
}
1402+
}
1403+
}
1404+
}
1405+
);
1406+
1407+
expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['restrict-xs'])).not.toBeNull();
1408+
});
1409+
1410+
it('does not decrease size of inlined sticky element with width below md', () => {
1411+
const items = [
1412+
{id: 2, type: 'probe', position: 'sticky', width: -2}
1413+
];
1414+
window.matchMedia.mockViewportWidth(500);
1415+
const {getByTestId} = renderInEntry(
1416+
<Layout sectionProps={{layout: 'left'}} items={items}>
1417+
{children => children}
1418+
</Layout>,
1419+
{
1420+
seed: {
1421+
themeOptions: {
1422+
properties: {
1423+
root: {
1424+
twoColumnStickyBreakpoint: '950px'
1425+
}
1426+
}
1427+
}
1428+
}
1429+
}
1430+
);
1431+
1432+
expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['restrict-xs'])).not.toBeNull();
1433+
});
13871434
});
13881435

13891436
describe('width classes in centered variant', () => {

‎entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,13 @@ function renderItemGroup(props, box, key) {
7373
styles[`width-${widthName(box.width)}`],
7474
{[styles.customMargin]: box.customMargin})}>
7575
{props.children(
76-
<RestrictWidth width={box.width} alignment={box.alignment}>
77-
<ContentElements sectionProps={props.sectionProps}
78-
customMargin={box.customMargin}
79-
items={box.items} />
80-
</RestrictWidth>,
76+
<ContentElements sectionProps={props.sectionProps}
77+
customMargin={box.customMargin}
78+
items={box.items}>
79+
{(item, child) =>
80+
restrictWidth(item.effectiveWidth, item.effectiveAlignment, child)
81+
}
82+
</ContentElements>,
8183
{
8284
position: box.position,
8385
width: box.width,
@@ -94,18 +96,17 @@ function renderItemGroup(props, box, key) {
9496
}
9597
}
9698

97-
function RestrictWidth({width, alignment, children}) {
99+
function restrictWidth(width, alignment, children) {
98100
if (width >= 0) {
99101
return children;
100102
}
101-
else {
102-
return (
103-
<div className={classNames(styles[`restrict-${widthName(width)}`],
104-
styles[`align-${alignment}`])}>
105-
{children}
106-
</div>
107-
);
108-
}
103+
104+
return (
105+
<div className={classNames(styles[`restrict-${widthName(width)}`],
106+
styles[`align-${alignment}`])}>
107+
{children}
108+
</div>
109+
);
109110
}
110111

111112
function groupItemsByPosition(items, shouldInline, isContentPadded) {
@@ -134,27 +135,28 @@ function groupItemsByPosition(items, shouldInline, isContentPadded) {
134135
width -= 1;
135136
}
136137

138+
const boxWidth = position === 'inline' ? Math.max(width, widths.md) : width;
139+
137140
if (!currentGroup || previousPosition !== position ||
138141
(onTheSide(position) && currentBox.customMargin !== customMargin) ||
139-
currentBox.width !== width) {
142+
currentBox.width !== boxWidth) {
140143
currentBox = null;
141144

142145
if (!(onTheSide(previousPosition) && position === 'inline' && width <= widths.md)) {
143146
currentGroup = {
144-
width: onTheSide(position) ? widths.md : width,
147+
width: onTheSide(position) ? widths.md : boxWidth,
145148
boxes: []
146149
};
147150

148151
groups.push(currentGroup);
149152
}
150153
}
151154

152-
if (!currentBox || currentBox.customMargin !== customMargin || currentBox.alignment !== alignment) {
155+
if (!currentBox || currentBox.customMargin !== customMargin) {
153156
currentBox = {
154157
customMargin,
155158
position,
156-
width,
157-
alignment,
159+
width: boxWidth,
158160
items: []
159161
};
160162

@@ -171,6 +173,8 @@ function groupItemsByPosition(items, shouldInline, isContentPadded) {
171173

172174
item = {
173175
...item,
176+
effectiveWidth: width,
177+
effectiveAlignment: alignment,
174178
marginBottom: item.props?.marginBottom
175179
};
176180

0 commit comments

Comments
 (0)