@boostdev/design-system-components 2.2.1 → 2.3.0

package/src/web-components/layout/bds-grid-item.spec.ts

@@ -99,4 +99,18 @@ describe('bds-grid-item', () => {
     expect(item.style.gridColumn).toBe('span var(--bds-grid_columns-33)');
     cleanup(grid);
   });
+
+  it('marks data-column-span-auto when column-span is not set', async () => {
+    const el = (await fixture('<bds-grid-item></bds-grid-item>')) as BdsGridItem;
+    expect(el.hasAttribute('data-column-span-auto')).toBe(true);
+    cleanup(el);
+  });
+
+  it('clears data-column-span-auto when column-span is set', async () => {
+    const el = (await fixture(
+      '<bds-grid-item column-span="half"></bds-grid-item>',
+    )) as BdsGridItem;
+    expect(el.hasAttribute('data-column-span-auto')).toBe(false);
+    cleanup(el);
+  });
 });

package/src/web-components/layout/bds-grid-item.ts

@@ -161,6 +161,13 @@ export class BdsGridItem extends LitElement {
 
     this.style.gridColumn = gridColumn;
     this.style.gridRow = this.rowSpan !== undefined ? `span ${this.rowSpan}` : '';
+
+    // Marker the masonry polyfill reads to know this item's span wasn't set by
+    // the consumer — it may override with the parent `masonry-preferred-column-span`.
+    const isColumnSpanAuto =
+      (this.columnSpan === undefined || this.columnSpan === null) && !hasExplicitRange;
+    if (isColumnSpanAuto) this.setAttribute('data-column-span-auto', '');
+    else this.removeAttribute('data-column-span-auto');
   }
 
   render() {

package/src/web-components/layout/bds-grid.spec.ts

@@ -59,4 +59,12 @@ describe('bds-grid', () => {
     expect(el.shadowRoot!.querySelector('.grid')!.classList.contains('--masonry')).toBe(true);
     cleanup(el);
   });
+
+  it('reflects masonry-preferred-column-span as a number property', async () => {
+    const el = await fixture(
+      '<bds-grid is-masonry masonry-preferred-column-span="2"></bds-grid>',
+    ) as BdsGrid;
+    expect(el.masonryPreferredColumnSpan).toBe(2);
+    cleanup(el);
+  });
 });

package/src/web-components/layout/bds-grid.ts

@@ -16,6 +16,9 @@ export type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
  *   auto-span-media — boolean; child `<bds-grid-item>`s without a `column-span`
  *                     attribute resolve their span from the intrinsic aspect
  *                     ratio of their first `<img>`/`<video>` child.
+ *   masonry-preferred-column-span — number; masonry only. Child items without a
+ *                     `column-span` attribute try to span this many columns; an
+ *                     item at row-end is demoted to the remaining column count.
  *
  * Slots:
  *   (default) — grid content; typically `<bds-grid-item>` children
@@ -76,6 +79,11 @@ export class BdsGrid extends LitElement {
     isCentered: { type: Boolean, attribute: 'is-centered', reflect: true },
     isMasonry: { type: Boolean, attribute: 'is-masonry', reflect: true },
     autoSpanMedia: { type: Boolean, attribute: 'auto-span-media', reflect: true },
+    masonryPreferredColumnSpan: {
+      type: Number,
+      attribute: 'masonry-preferred-column-span',
+      reflect: true,
+    },
   };
 
   declare variant: GridVariant;
@@ -83,6 +91,7 @@ export class BdsGrid extends LitElement {
   declare isCentered: boolean;
   declare isMasonry: boolean;
   declare autoSpanMedia: boolean;
+  declare masonryPreferredColumnSpan: number | undefined;
 
   private _ro?: ResizeObserver;
   private _mo?: MutationObserver;
@@ -95,6 +104,7 @@ export class BdsGrid extends LitElement {
     this.isCentered = false;
     this.isMasonry = false;
     this.autoSpanMedia = false;
+    this.masonryPreferredColumnSpan = undefined;
   }
 
   disconnectedCallback() {
@@ -144,7 +154,11 @@ export class BdsGrid extends LitElement {
     cancelAnimationFrame(this._frame);
     this._frame = requestAnimationFrame(() => {
       const container = this._gridEl();
-      if (container) applyMasonryLayout(container, this._items());
+      if (container) {
+        applyMasonryLayout(container, this._items(), {
+          preferredColumnSpan: this.masonryPreferredColumnSpan,
+        });
+      }
     });
   }