HTML tags in ListItem labels strip surrounding spaces

[angrytongan]

Placing HTML tags in ListItem labels strips the surrounding spaces. Latest Chrome on Mac OS X on 1.0.0 branch.

const {
    List,
    ListItem

} = CUI;

const FormattingListItems = () => {
    const items = [
        '<strong>one</strong> two three <strong>four</strong> five',
        '<u>one</u> two three <u>four</u> five',
        '<i>one</i> two three <i>four</i> five',
    ];

    return {
        view: () => {
            return m(List, items.map((l) => m(ListItem, { label: m.trust(l) })));
        },
    };
};

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

[vrimar]

Looks like an issue with display: flex on the .cui-list-item div. You could wrap each label in a div to mitigate this.

m(List, items.map((l) => m(ListItem, { label: m('', m.trust(l)) })));