Regression from earlier version, inline Buttons are misplaced

[pascal-pfeiffer]

Wave SDK Version, OS

Wave v1.3.4

Actual behavior

From wave v1.0.0 to wave v1.3.4 the placement of buttons has regressed.

ui.inline(
        ui.button(
            name="b1",
            label="Button1",
            primary=False,
            width="150px",
        ),
        ui.button(
            name="b2",
            label="Button2",
            primary=False,
            width="150px",
        ),
        ui.button(
            name="b3",
            label="Button3",
            primary=True,
            width="200px",
        ),
        ui.button(
            name="b4",
            label="Button4",
            primary=False,
            width="200px",
        ),
        justify="start",
)

v1.3.4

Expected behavior

v1.0.0

[marek-mihok]

This behavior was introduced by #2273. As a temporary solution you can wrap buttons with ui.buttons() group :

from h2o_wave import main, app, Q, ui


@app('/demo')
async def serve(q: Q):
    q.page['example'] =  ui.form_card(
        box='1 1 -1 4', 
        items=[
            ui.inline(
                [ui.buttons([
                    ui.button(
                        name="b1",
                        label="Button1",
                        primary=False,
                        width="150px",
                    ),
                    ui.button(
                        name="b2",
                        label="Button2",
                        primary=False,
                        width="150px",
                    ),
                    ui.button(
                        name="b3",
                        label="Button3",
                        primary=True,
                        width="200px",
                    ),
                    ui.button(
                        name="b4",
                        label="Button4",
                        primary=False,
                        width="200px",
                    )
                ])],
                justify="start",
            ),     
        ]
    )
    await q.page.save()

[marek-mihok]

The issue is caused by standalone button having buttons group styles applied which conflicts with styles applied by #2273.

  XStandAloneButton = ({ model: m }: { model: Button }) => (
    <div className={css.buttons}>
      <XButton key={m.name} model={m} />
    </div>
  ),

Other components should not be affected.

[pascal-pfeiffer]

Thank you @marek-mihok! The quick fix with wrapping the single buttons in a ui.buttons() group did the trick.