JSFiddle - React, Tailwind, and code Playground

by ericf

HTML

<div id="test" class="yui3-skin-sam">
    <p>I'm curious what people expect to happen when you set the `footerContent` of a Panel that contains buttons. Here are some options:</p>
    
    <ol>
        <li>
            Setting the `footerContent` should remove the buttons from the DOM.
            <ol>
                <li>It should also clear the `buttons` attribute of all footer buttons.</li>
                <li>The `buttons` should be preserved and calling `syncUI()` should re-render them in the DOM.</li>
            </ol>
        </li>
        <li>Setting the `footerContent` should preserve the buttons in the DOM.</li>
    </ol>
    
    <p>In 3.4.1 it behaves like option 1.2.</p>
    
    <p>To complicate things more :) what if the new `footerContent` contains buttons!?</p>
    
    <button id="set-footer">Change `footerContent`</button>
    <button id="set-footer-sync">Change `footerContent` and `syncUI()`</button>
</div>

JavaScript

YUI().use('panel', function (Y) {

    // Sets up a Panel with a button in the footer
    var panel = new Y.Panel({
        headerContent: 'Test Panel',
        bodyContent  : 'Bla bla.',
        width        : 300,
        xy           : [10, 400],
        render       : '#test',
        
        buttons: [
            {
                value  : 'foo',
                section: 'footer'
            }
        ]
    });
    
    // Sets the panel's `footerContent` which kills the button.
    Y.one('#set-footer').on('click', function (e) {
        panel.set('footerContent', 'Footer!');
    });
    
    // Sets the panel's `footerContent` then calls `syncUI()` to preserve the buttons.
    Y.one('#set-footer-sync').on('click', function (e) {
        panel.set('footerContent', 'Footer!').syncUI();
    });

});