Skip to content

v4: issues or breaking changes with ion-buttons container #14727

@mburger81

Description

@mburger81

Describe the Bug
We try to use your ion-buttons using alpha.7 with latest beta documentation.
We also created a demo repo https://github.com/mburger81/ionic4-tests where you can navigate to List Buttons menu to see bugs and simulate them.

In our app we often use a form containing a list of items where at the end we used a ion-buttons element to have SAVE and CANCEL button. Something simple like that

v3

<ion-list>
    <ion-buttons end>
        <button ion-button color="primary" >Cancel</button>
        <button ion-button type="submit" color="primary" >Save</button>
    </ion-buttons>
</ion-list>

v4

<ion-list>
    <ion-buttons slot="end">
        <ion-button color="primary" >Cancel</ion-button>
        <ion-button type="submit" color="primary" >Save</ion-button>
    </ion-buttons>
</ion-list>
<ion-list>
    <ion-buttons slot="end">
        <ion-button fill="solid" color="primary" >Cancel</ion-button>
        <ion-button fill="solid" type="submit" color="primary" >Save</ion-button>
    </ion-buttons>
</ion-list>

As you can see on the screenshot at the bottom there are some difference between v3 and 4.

This is what we have figured out, or we think we have figured out :)

  1. in v3 we can not use anymore ion-buttons as a standalone component, having a look from documentation we should use it inside ion-toolbar, but on v3 we was able to use it everywhere with the same result, so this is a braking change. If so which would be the best approach to do ACTIONS container outside from ion-toolbar, like in cards or somewhere else? We are able to use it well on this behavior v4: Some bugs on ion-card #14723
  2. The default style of the ion-button element in an ion-buttons does change. in v3 it was a solid button in the default seems to be a clear button. See screenshot.
  3. If we use fill="solid" there is no padding between the two buttons. See buttons on bottom of v4 screenshot.

v3
image

v4
image

Some of this problems could be not documented breaking changes, some could be already resolved in core-css-variables branch some could be also new MD style guides?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions