Vertical alignment inconsistencies inside and outside ControlGroup

[angrytongan]

There appears to be some slight vertical alignment inconsistencies between elements, both inside and outside of a ControlGroup, with and without icons.

• A Button, Input and Select will be aligned with the bottom of the Select. The Select takes one pixel more than the Button and Input.
• A Button, Input and Select in a ControlGroup will all align on a single bottom, with one pixel row free above all elements.
• An Input, Button and Select in a ControlGroup will all align on a single bottom, with one pixel row free above all elements.
• A Button with an iconLeft but no label, Input and Select will have the input pushed two pixels down from the top of the Button. The Select will be pushed down one pixel from the top of the Button.
• A Button with an iconLeft but no label, Input and Select in a ControlGroup will align all elements at the top, leaving two pixels below the input and one below the Button and Select.
• An Input, Button with an iconLeft but no label and Select will align all elements at the bottom, leaving two pixels above the elements.

It looks like a Button with / without an iconLeft / label changes the vertical size of the button and it's vertical position. Additionally, the first element in a ControlGroup looks like it "aligns" following elements.

const {
    Button,
    ControlGroup,
    FocusManager,
    Icon,
    Input,
    Select,

} = CUI;

const ControlGroupAlignment = () => {
    return {
        view: () => {
            return [
                /*
                 * Buttons: labels only.
                 */
                m('', {
                    style: 'margin: 1em; background: #000;',
                }, [
                    m(Button, { label: 'a' }),
                    m(Input, { placeholder: 'no controlgroup' }),
                    m(Select, { options: [ 'b', 'c' ] }),

                    m(ControlGroup, [
                        m(Button, { label: 'a' }),
                        m(Input, { placeholder: 'in controlgroup' }),
                        m(Select, { options: [ 'b', 'c' ] }),
                    ]),

                    m(ControlGroup, [
                        m(Input, { placeholder: 'first in controlgroup' }),
                        m(Button, { label: 'a' }),
                        m(Select, { options: [ 'b', 'c' ] }),
                    ]),
                ]),

                /*
                 * Buttons: icons only.
                 */
                m('', {
                    style: 'margin: 1em; background: #000;',
                }, [
                    m(Button, { iconLeft: 'settings' }),
                    m(Input, { placeholder: 'no controlgroup' }),
                    m(Select, { options: [ 'b', 'c' ] }),

                    m(ControlGroup, [
                        m(Button, { iconLeft: 'settings' }),
                        m(Input, { placeholder: 'in controlgroup' }),
                        m(Select, { options: [ 'b', 'c' ] }),
                    ]),

                    m(ControlGroup, [
                        m(Input, { placeholder: 'first in controlgroup' }),
                        m(Button, { iconLeft: 'settings' }),
                        m(Select, { options: [ 'b', 'c' ] }),
                    ]),
                ]),

                /*
                 * Buttons: icons and labels only.
                 */
                m('', {
                    style: 'margin: 1em; background: #000;',
                }, [
                    m(Button, { label: 'a', iconLeft: 'settings' }),
                    m(Input, { placeholder: 'no controlgroup' }),
                    m(Select, { options: [ 'b', 'c' ] }),

                    m(ControlGroup, [
                        m(Button, { label: 'a', iconLeft: 'settings' }),
                        m(Input, { placeholder: 'in controlgroup' }),
                        m(Select, { options: [ 'b', 'c' ] }),
                    ]),

                    m(ControlGroup, [
                        m(Input, { placeholder: 'first in controlgroup' }),
                        m(Button, { label: 'a', iconLeft: 'settings' }),
                        m(Select, { options: [ 'b', 'c' ] }),
                    ]),
                ]),

                /*
                 * Buttons with / without labels and icons.
                 */
                m('', {
                    style: 'margin: 1em; background: #000;',
                }, [
                    m(Button, { label: 'a' }),
                    m(Button, { iconLeft: 'settings' }),

                    m(ControlGroup, [
                        m(Button, { label: 'a' }),
                        m(Button, { iconLeft: 'settings' }),
                    ]),

                    m(ControlGroup, [
                        m(Button, { iconLeft: 'settings' }),
                        m(Button, { label: 'a' }),
                    ]),
                ]),
            ];
        },
    };
};

document.addEventListener('DOMContentLoaded', () => {
    m.route(document.body, '/', {
        '/': ControlGroupAlignment
    });
});

[vrimar]

Thanks for the detailed report, I really appreciate it.

I've committed a fix but I'll have to test other browsers before I can publish a new version.

Here's an updated flems.

[angrytongan]

Thanks for the fast fix. Looking forward to 1.0.0!

[vrimar]

Added to v0.2.3.