[Stack] Add Reversed parameter

[EvandroMoSou]

Pull Request

📖 Description

FluentStack Reversed and Positioning of items

Sometimes to follow certain UX/UI rules you need to position the buttons in a specific way, so I developed a way to change the positioning of the buttons in the MessageBox.

It adds a new option in FluentStack called Reversed (To reverse the position of objects with pure css).

🎫 Issues

I didn't find it

👩‍💻 Reviewer Notes

Things have been added so that old codes will continue to work without needing to be changed.

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

⏭ Next Steps

I didn't think of anything

[dvoituron]

As much as I find the possibility of having a way to define flex-direction: row-reverse; interesting,
I don't think it's a good idea to allow the position of Actions buttons for a dialog box to be modified.
This is part of the FluentUI design and it creates a visual result that is no longer “standard”.

If the developer really wants to offer a rendering that is different from the FluentUI style, they can always do so via a style

fluent-dialog-footer {
  flex-direction: row-reverse;
}

[vnbaaij]

I agree with Denis. We definitely want this for the Stack but not for the Dialog.

With regards to the implementation, we propose to use an attribute reverse="true/false" on the Stack div and then do the CSS change based on the attribute instead of adding another class. Something like:

.stack-horizontal[reverse='true'] {
...
}

And make the Reverse parameter nullable (and default ==null) so the attribute doe not get rendered when not set.

Would be great if you can adjust your PR to that.

[EvandroMoSou]

Done

[dvoituron]

Can you update the PR description?