[OutSystems UI] Fix Utilities.Loading Button margin css
Forge component by OutSystems R&D
Application Type
Reactive

If you place more than 1 Loading Button consecutively they stick together without margin:

This could be fixed with the following css:

.btn + [data-block="Utilities.ButtonLoading"],
[data-block="Utilities.ButtonLoading"] + [data-block="Utilities.ButtonLoading"],
[data-block="Utilities.ButtonLoading"] + .btn {
    margin-left: var(--space-m);
}

Which could be placed at session

  • $2.5 - HTML Elements - Buttons

Or

  • $4.6.2   - Patterns - Utilities - ButtonLoading

Regards,

Leandro

Solution

Hi Leandro.

I finally understood the issue with your last post. At first I though you were talking about another thing.
You're totally right! We already add this to our backlog but since this can bring potential breaking changes we are not able to address it until we can have a major version.
Thanks for reporting and when we're able to release this we'll mention on the release notes (but only on a major, sorry). Have a great day and keep your feedback coming :)

Best Regards,
GM

Hello Leandro.
So, that is the expected behavior.

All components should be independent and to provide spacing between several components you can use our useful classes since using an approach like the one suggested you would force a certain spacing that might be not wanted by the customers.

In that particular case, you can add to the extended class of the Button Loading the class "margin-left-m", and if I prefer to have --space-base I can also do that using "margin-left-base" without needing to override any CSS class.

Any further questions just let us know.

Best Regards,
GM

In this case it doesn't seem to be the expected behaviour because Outsystems UI does provide this css by default for buttons, which is defined in session "$2.5 - HTML Elements - Buttons":

Having to add extended class for every loading button placed beside another loading button doesn't keet up with DRY principles, you are repeating yourself.

EDIT:
Another downside of using the ExtendedClass for this particular case is that with loading buttons you don't preview the margin inside of Service Center:

Regards,

Leandro

Hi Leandro.
By default that is used for the most common case that is to have 1 or 2 buttons and, as a good practice of implementing a component it should have less logic or style as possible to allow covering most scenarios so that they can be put together on a larger components system where we can style them at that level.
About the design time that is something that Service Studio doesn't handle properly in some scenarios but I'll try to see if we can improve this design-time experience on a future version of OutSystems UI.

Best Regards,
GM

Thats exactly the case, two Loading Buttons in a row doesn't behave the same as two ordinary buttons (i.e Mark as Read and Delete). I expected the behavior to be the same as normal buttons in terms of margins and responsiveness, but the opposite is true.

Look at the behaviour if the application is opened on mobile, the responsiveness is not the same: 


You can achieve the "expected" result with the following css:

/* $2.5 - HTML Elements - Buttons */
.btn + .btn,
.btn + [data-block="Utilities.ButtonLoading"],
[data-block="Utilities.ButtonLoading"] + [data-block="Utilities.ButtonLoading"],
[data-block="Utilities.ButtonLoading"] + .btn {
    margin-left: var(--space-m);
}

/* Default Responsive */
.phone .layout:not(.layout-native) .btn,
.phone .layout:not(.layout-native) [data-block="Utilities.ButtonLoading"],
.phone .layout:not(.layout-native) [data-block="Utilities.ButtonLoading"] > div {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-left: 0;
    width: 100%;
}

.phone .layout:not(.layout-native) .btn + .btn,
.phone .layout:not(.layout-native) .btn + [data-block="Utilities.ButtonLoading"],
.phone .layout:not(.layout-native) [data-block="Utilities.ButtonLoading"] + .btn,
.phone .layout:not(.layout-native) [data-block="Utilities.ButtonLoading"] + [data-block="Utilities.ButtonLoading"] {
    margin-top: var(--space-base);
}

.phone .layout:not(.layout-native) .flex-direction-column-reverse .btn + .btn,
.phone .layout:not(.layout-native) .flex-direction-column-reverse .btn + [data-block="Utilities.ButtonLoading"],
.phone .layout:not(.layout-native) .flex-direction-column-reverse [data-block="Utilities.ButtonLoading"] + .btn,
.phone .layout:not(.layout-native) .flex-direction-column-reverse [data-block="Utilities.ButtonLoading"] + [data-block="Utilities.ButtonLoading"] {
    margin-top: var(--space-none);
    margin-bottom: var(--space-base);
}

/* ================================================================ */
/*  $3.3 - Page Layout - Content                                    */
/* ================================================================ */

/* For loading buttons inside Actions placeholder */
.content-top-actions > div[data-block="Utilities.ButtonLoading"] { 
    width: auto;
}


Note that I didn't create this css out of my head, I just added some selectors to existing Outsystems UI css. This covers the preview inside Service Studio (doesn't break WYSIWYG), loading buttons inside Actions placeholder, loading buttons in mobile and mix usage of loading buttons and normal buttons.

Regards,

Leandro

Solution

Hi Leandro.

I finally understood the issue with your last post. At first I though you were talking about another thing.
You're totally right! We already add this to our backlog but since this can bring potential breaking changes we are not able to address it until we can have a major version.
Thanks for reporting and when we're able to release this we'll mention on the release notes (but only on a major, sorry). Have a great day and keep your feedback coming :)

Best Regards,
GM

Thanks for the reply. Glad to know that it will be introduced in a major, totally understandable!

Have a great day you to.

Best regards,

Leandro

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.