Merge pull request #1272 from paypal/feature/DTCRCMERC-4152

feat: improve CLS with single-line text placeholder (v5)

Author: Braluna-pp

src/library/zoid/message/containerTemplate.jsx

@@ -5,14 +5,49 @@ import { EVENT } from '@krakenjs/zoid/src';
 import { getOverflowObserver, createTitleGenerator } from '../../../utils';
 
 const getTitle = createTitleGenerator();
+const DEFAULT_TEXT_SIZE_PX = 14;
+const MIN_TEXT_SIZE_PX = 10;
+const MAX_TEXT_SIZE_PX = 16;
+const TEXT_LINE_HEIGHT = 1.3;
+const TEXT_LINE_COUNT = 1;
+
+const getPlaceholderHeightPx = style => {
+    if (style?.layout !== 'text') {
+        return null;
+    }
+
+    const rawSize = style?.text?.size;
+    const parsedSize = typeof rawSize === 'number' ? rawSize : Number(rawSize);
+    const size =
+        Number.isFinite(parsedSize) && parsedSize >= MIN_TEXT_SIZE_PX && parsedSize <= MAX_TEXT_SIZE_PX
+            ? parsedSize
+            : DEFAULT_TEXT_SIZE_PX;
+
+    return Math.round(size * TEXT_LINE_HEIGHT * TEXT_LINE_COUNT * 10) / 10;
+};
 
 export default ({ uid, frame, prerenderFrame, doc, event, props, container }) => {
+    const host = container;
+    const placeholderHeightPx = getPlaceholderHeightPx(props.style);
+
+    if (placeholderHeightPx && host?.style && !host.dataset?.ppPlaceholderApplied) {
+        host.dataset.ppPlaceholderMinHeight = host.style.minHeight || '';
+        host.dataset.ppPlaceholderApplied = 'true';
+        host.style.minHeight = `${placeholderHeightPx}px`;
+    }
+
     event.on(EVENT.RENDERED, () => {
         prerenderFrame.parentNode.removeChild(prerenderFrame);
     });
 
     const setupAutoResize = el => {
         event.on(EVENT.RESIZE, ({ width, height }) => {
+            if (host?.dataset?.ppPlaceholderApplied) {
+                host.style.minHeight = host.dataset.ppPlaceholderMinHeight || '';
+                delete host.dataset.ppPlaceholderMinHeight;
+                delete host.dataset.ppPlaceholderApplied;
+            }
+
             if (width !== 0 || height !== 0) {
                 if (props.style.layout === 'flex') {
                     // Ensure height property does not exist for flex especially when swapping from text to flex

tests/unit/spec/src/zoid/message/containerTemplate.test.js

@@ -0,0 +1,87 @@
+import { EVENT } from '@krakenjs/zoid/src';
+
+jest.mock('src/utils', () => ({
+    getOverflowObserver: jest.fn(() => Promise.resolve({ observe: jest.fn() })),
+    createTitleGenerator: jest.fn(() => title => title)
+}));
+
+const containerTemplate = require('src/library/zoid/message/containerTemplate').default;
+
+const createEventEmitter = () => {
+    const listeners = {};
+    const onceListeners = {};
+    return {
+        on: (name, cb) => {
+            listeners[name] = listeners[name] || [];
+            listeners[name].push(cb);
+        },
+        once: (name, cb) => {
+            onceListeners[name] = onceListeners[name] || [];
+            onceListeners[name].push(cb);
+        },
+        trigger: (name, payload) => {
+            (listeners[name] || []).forEach(cb => cb(payload));
+            (onceListeners[name] || []).forEach(cb => cb(payload));
+            delete onceListeners[name];
+        }
+    };
+};
+
+const renderTemplate = style => {
+    const event = createEventEmitter();
+    const container = document.createElement('div');
+    const frame = document.createElement('iframe');
+    const prerenderFrame = document.createElement('iframe');
+
+    const rendered = containerTemplate({
+        uid: 'uid',
+        frame,
+        prerenderFrame,
+        doc: document,
+        event,
+        props: { style },
+        container
+    });
+
+    container.appendChild(rendered);
+    document.body.appendChild(container);
+
+    return { event, container };
+};
+
+describe('zoid/message/containerTemplate', () => {
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    test('Sets placeholder min-height for text layout', () => {
+        const { container } = renderTemplate({ layout: 'text', text: { size: 12 } });
+        expect(container.style.minHeight).toBe('15.6px');
+    });
+
+    test('Uses default text size when style text size is invalid', () => {
+        const { container } = renderTemplate({ layout: 'text', text: { size: 99 } });
+        expect(container.style.minHeight).toBe('18.2px');
+    });
+
+    test('Clears placeholder min-height on first resize with rendered content dimensions', () => {
+        const { event, container } = renderTemplate({ layout: 'text', text: { size: 12 } });
+        expect(container.style.minHeight).toBe('15.6px');
+
+        event.trigger(EVENT.RESIZE, { width: 100, height: 0 });
+        expect(container.style.minHeight).toBe('');
+    });
+
+    test('Clears placeholder min-height on first resize with no-message dimensions (0x0)', () => {
+        const { event, container } = renderTemplate({ layout: 'text', text: { size: 12 } });
+        expect(container.style.minHeight).toBe('15.6px');
+
+        event.trigger(EVENT.RESIZE, { width: 0, height: 0 });
+        expect(container.style.minHeight).toBe('');
+    });
+
+    test('Does not set placeholder min-height for flex layout', () => {
+        const { container } = renderTemplate({ layout: 'flex' });
+        expect(container.style.minHeight).toBe('');
+    });
+});