Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Stack] Add 'SpaceBetween' horizontal alignment option (#3142) #3143

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from

Conversation

f4n0
Copy link
Contributor

@f4n0 f4n0 commented Jan 9, 2025

Pull Request

πŸ“– Description

This PR add the feature (space between in Horizontal Alignment) from #3142

🎫 Issues

Fix #3142

πŸ‘©β€πŸ’» Reviewer Notes

πŸ“‘ Test Plan

βœ… 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

@f4n0 f4n0 requested review from vnbaaij and dvoituron as code owners January 9, 2025 11:54
@@ -87,6 +87,7 @@ private string GetHorizontalAlignment()
HorizontalAlignment.Right => "end",
HorizontalAlignment.End => "end",
HorizontalAlignment.Stretch => "stretch",
HorizontalAlignment.SpaceBetween => "space-between",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand why you update only this HorizontalAlignment enumeration, because the GetVerticalAlignment() and GetVerticalAlignment() methods are used for the 2 orientations.
And only justify-content style can use the space-between value.

protected string? StyleValue => new StyleBuilder(Style)
    .AddStyle("align-items", GetHorizontalAlignment(), () => Orientation == Orientation.Vertical)
    .AddStyle("justify-content", GetVerticalAlignment(), () => Orientation == Orientation.Vertical)

    .AddStyle("justify-content", GetHorizontalAlignment(), () => Orientation == Orientation.Horizontal)
    .AddStyle("align-items", GetVerticalAlignment(), () => Orientation == Orientation.Horizontal)

So what will be the result for the two orientations when the user will select SpaceBetween ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AH!
I've missed that!
Something like that?

 private string GetHorizontalAlignment()
 {
     return HorizontalAlignment switch
     {
         HorizontalAlignment.Left => "start",
         HorizontalAlignment.Start => "start",
         HorizontalAlignment.Center => "center",
         HorizontalAlignment.Right => "end",
         HorizontalAlignment.End => "end",
         HorizontalAlignment.Stretch => "stretch",
         HorizontalAlignment.SpaceBetween => Orientation == Orientation.Vertical ? "start" : "space-between",
         _ => "start",
     };
 }

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes... But it's not finished. If you add this value for HorizontalAlignment, you can also add it for VerticalAlignment.

image

@vnbaaij vnbaaij changed the title [Stack] Added 'SpaceBetween' horizontal alignment option (#3142) [Stack] Add 'SpaceBetween' horizontal alignment option (#3142) Jan 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: add SpaceBetween to FluentStack Horizontal Alignment
3 participants