Adapt style of a button after hide another one

[jersiovic]

I have following page when a form is shown.

But when the user edits it I hide Button Edit and show Update and Cancel.
Problem is Update is using a margin-left cause is is using a style for the second element of a list intead of using the style of the first element (cause first one has disappeared).


This behavior is caused by nYAAE class.
Is it possible to replace nYAAE per lcVREt class for second button when it is enabled? I haven't been able. I've also tried to use css attrib without success, for changing it depending on

const cssForFirstButton = editable => {
            if (editable)
                return "margin - left: 0px;";
            return "";
        };

<Panel horizontal>
    <Button label="Edit" show={!edit && this.state.Editable} onClick={this.toggleEdit}  />
    <Button label="Update" submit show={edit} onClick={this.toggleEdit} css={cssForFirstButton} />
    <Button label="Cancel" cancel secondary show={edit} onClick={this.toggleEdit} />
</Panel>

[dsuryd]

This is something I will fix in the next version, so that Panel won't add margin to hidden elements. But for now, you can fix this by manipulating the css at the Panel element. Basically, removing the left margin of the second div if it's in edit mode.

[dsuryd]

Here's the fix:

const editCss = `
   div:nth-child(2) { margin-left: 0 }
`;

<Panel horizontal css={edit && editCss}>
    <Button label="Edit" show={!edit && this.state.Editable} onClick={this.toggleEdit}  />

[jersiovic]

Thank you!