Management toolbar mobile viewports Clear action must be right aligned

[victorvalle]

The aligntment of the clear action should be right.
This action is now aligned next to the text

Please see: https://liferay.invisionapp.com/share/PVN3QSTHK65#/312223170_0604m

Do not modify other styling things, please.

[matuzalemsteles]

hey @pat270, this seems to look like this when it's a smaller screen. Can you check this?

[pat270]

@victorvalle which one is true?
https://liferay.invisionapp.com/share/U6GSO4YW3M5#/screens/312260580
https://docs.google.com/document/d/1R2l3wfdPQsoVSX2QDpmPooz52D6ei61PiHVMnI5wI90/edit

[pat270]

@matuzalemsteles @victorvalle You can use the class tbar-inline-sm-down to make it align right on screen sizes >= 768px. tbar-inline-md-down align right screen size >= 992px.

[victorvalle]

@pat270 @matuzalemsteles I see that the documentation says

In viewports under 576px, the "Clear All" button is no longer anchored to the right of the component and is placed inline just after the last element of the information.

And then there is a comment from Patrick asking

Can we just have this component behave this way in all screens? I'm running into css/html limitations where I can get it to behave like desktop, but cant get it to work in mobile without moving the button markup.

Do you still have this limitation?
It is a bit strange for us to have it so close in Desktop. But is this happens we can study a solution.
Maybe @atjuan has thought about it further.

[pat270]

@victorvalle technically there is. I wasn't able to get it to break/align exactly like the mockups, but I got pretty close. All the classes that are available are:

tbar-inline-xs-down (inline at max-width 575px)
tbar-inline-sm-down (inline at max-width 767px)
tbar-inline-md-down (inline at max-width 991px)
tbar-inline-lg-down (inline at max-width 1199px)
tbar-inline-xl-down (inline at all screens probably should have named this something else)

[victorvalle]

Hi @pat270,
I see this right now:
350px

575px

767px

991px

1199px

I guess we could live with the solution as we see it right now. It is a really good approach to what we want.

[pat270]

@victorvalle if you manually change the class on the blue bar from tbar-inline-md-down to tbar-inline-xs-down you can see it becomes inline at 575px, maybe we can add an option to specify the breakpoint in the plugin?

[matuzalemsteles]

hey @pat270, @victorvalle how do we proceed with this?

[pat270]

@matuzalemsteles @victorvalle The rules between the invision link and google documentation is conflicting. The only thing is to allow devs to set the tbar-inline-*-down class so they can take it case by case.

[matuzalemsteles]

thanks @pat270, so we should leave the tbar-inline-md-down as the default, correct? I'll follow through with this and send a PR adding an API that reflects this setting.

[pat270]

@matuzalemsteles maybe tbar-inline-xs-down is better by default. The Clear All button will at least be aligned right in most screens when there is little content.