diff --git a/examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor b/examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor index 9da96f3251..14143b2e66 100644 --- a/examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor +++ b/examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor @@ -3,7 +3,8 @@ TOption="JustifyContent" Position="SelectPosition.Below" @bind-SelectedOption="@Justification" /> -

+
+
diff --git a/examples/Demo/Shared/Pages/Grid/Examples/GridMessage.razor b/examples/Demo/Shared/Pages/Grid/Examples/GridMessage.razor new file mode 100644 index 0000000000..04bcdeda99 --- /dev/null +++ b/examples/Demo/Shared/Pages/Grid/Examples/GridMessage.razor @@ -0,0 +1,12 @@ + + + + Views must be setup in the Admin Portal to use this client application hosted by my company. + + + + Setup + Documentation + + \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Grid/GridPage.razor b/examples/Demo/Shared/Pages/Grid/GridPage.razor index aa41d63a72..cb5795754a 100644 --- a/examples/Demo/Shared/Pages/Grid/GridPage.razor +++ b/examples/Demo/Shared/Pages/Grid/GridPage.razor @@ -29,6 +29,17 @@ + + +

You can resize the panel using the slider in the bottom right-hand corner.

+

+ If no Breakpoints or if xs="0" is defined for a FluentGridItem component, + this style will be applied: flex: 1; max-width: fit-content;.
+ In this example, the first item (the message) cannot be lower than 200px min-width: 200px;. + To avoid that, the second item (the buttons) will be moved to the next line. +

+ + @code { diff --git a/src/Core/Components/Grid/FluentGrid.razor.css b/src/Core/Components/Grid/FluentGrid.razor.css index c568fc3e65..c88f34b599 100644 --- a/src/Core/Components/Grid/FluentGrid.razor.css +++ b/src/Core/Components/Grid/FluentGrid.razor.css @@ -118,6 +118,11 @@ flex-basis: 0; } + .fluent-grid ::deep > div[xs="0"] { + flex: 1; + max-width: fit-content; + } + .fluent-grid ::deep > div[xs="1"] { flex-grow: 0; max-width: 8.33333333333333%; @@ -207,6 +212,11 @@ flex-basis: 0; } + .fluent-grid ::deep > div[sm="0"] { + flex: 1; + max-width: fit-content; + } + .fluent-grid ::deep > div[sm="1"] { flex-grow: 0; max-width: 8.33333333333333%; @@ -296,6 +306,11 @@ flex-basis: 0; } + .fluent-grid ::deep > div[md="0"] { + flex: 1; + max-width: fit-content; + } + .fluent-grid ::deep > div[md="1"] { flex-grow: 0; max-width: 8.33333333333333%; @@ -385,6 +400,11 @@ flex-basis: 0; } + .fluent-grid ::deep > div[lg="0"] { + flex: 1; + max-width: fit-content; + } + .fluent-grid ::deep > div[lg="1"] { flex-grow: 0; max-width: 8.33333333333333%; @@ -474,6 +494,11 @@ flex-basis: 0; } + .fluent-grid ::deep > div[xl="0"] { + flex: 1; + max-width: fit-content; + } + .fluent-grid ::deep > div[xl="1"] { flex-grow: 0; max-width: 8.33333333333333%; @@ -563,6 +588,11 @@ flex-basis: 0; } + .fluent-grid ::deep > div[xxl="0"] { + flex: 1; + max-width: fit-content; + } + .fluent-grid ::deep > div[xxl="1"] { flex-grow: 0; max-width: 8.33333333333333%; diff --git a/src/Core/Components/Grid/FluentGridItem.razor b/src/Core/Components/Grid/FluentGridItem.razor index 27ce277c2d..fc332eac1e 100644 --- a/src/Core/Components/Grid/FluentGridItem.razor +++ b/src/Core/Components/Grid/FluentGridItem.razor @@ -1,6 +1,6 @@ @namespace Microsoft.Fast.Components.FluentUI @inherits FluentComponentBase -
+
@ChildContent
\ No newline at end of file diff --git a/src/Core/Components/Grid/FluentGridItem.razor.cs b/src/Core/Components/Grid/FluentGridItem.razor.cs index ef78838f55..81a630dd0f 100644 --- a/src/Core/Components/Grid/FluentGridItem.razor.cs +++ b/src/Core/Components/Grid/FluentGridItem.razor.cs @@ -33,6 +33,19 @@ public partial class FluentGridItem : FluentComponentBase #pragma warning restore SA1300 #pragma warning restore IDE1006 + /// + /// Defines how the browser distributes space between and around content items. + /// + [Parameter] + public JustifyContent? Justify { get; set; } + + /// + /// Defines the gaps (gutters) between rows and columns. + /// See https://developer.mozilla.org/en-US/docs/Web/CSS/gap + /// + [Parameter] + public string? Gap { get; set; } + [Parameter] public RenderFragment? ChildContent { get; set; } @@ -40,5 +53,20 @@ public partial class FluentGridItem : FluentComponentBase protected string? ClassValue => new CssBuilder(Class).Build(); /// - protected string? StyleValue => new StyleBuilder(Style).Build(); + protected string? StyleValue => new StyleBuilder(Style) + .AddStyle("justify-content", Justify.ToAttributeValue(), when: Justify is not null) + .AddStyle("display", "flex", when: Justify is not null) + .AddStyle("gap", Gap, when: !string.IsNullOrEmpty(Gap)) + .Build(); + + /// + private bool NoBreakpointsDefined() + { + return xs is null + && sm is null + && md is null + && lg is null + && xl is null + && xxl is null; + } } diff --git a/tests/Core/_ToDo/Grid/FluentGridTests.FluentGrid_Default.verified.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Default.verified.razor.html similarity index 55% rename from tests/Core/_ToDo/Grid/FluentGridTests.FluentGrid_Default.verified.html rename to tests/Core/Grid/FluentGridTests.FluentGrid_Default.verified.razor.html index 65e0424609..3ac587bfe8 100644 --- a/tests/Core/_ToDo/Grid/FluentGridTests.FluentGrid_Default.verified.html +++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Default.verified.razor.html @@ -1,4 +1,2 @@ -
- render me -
\ No newline at end of file +
My content
\ No newline at end of file diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_AllBreakpoints.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_AllBreakpoints.verified.razor.html new file mode 100644 index 0000000000..8aabfa0198 --- /dev/null +++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_AllBreakpoints.verified.razor.html @@ -0,0 +1,4 @@ + +
+
My cell
+
\ No newline at end of file diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_Default.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_Default.verified.razor.html new file mode 100644 index 0000000000..657c8e1c80 --- /dev/null +++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_Default.verified.razor.html @@ -0,0 +1,5 @@ + +
+
Cell 1
+
Cell 2
+
\ No newline at end of file diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_JustifyGap.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_JustifyGap.verified.razor.html new file mode 100644 index 0000000000..9a59bf7bd7 --- /dev/null +++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_JustifyGap.verified.razor.html @@ -0,0 +1,4 @@ + +
+
My cell
+
\ No newline at end of file diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_NoBreapoint.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_NoBreapoint.verified.razor.html new file mode 100644 index 0000000000..73a2d343c8 --- /dev/null +++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_NoBreapoint.verified.razor.html @@ -0,0 +1,4 @@ + +
+
My cell
+
\ No newline at end of file diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_SpacingJustify.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_SpacingJustify.verified.razor.html new file mode 100644 index 0000000000..40b8abf70c --- /dev/null +++ b/tests/Core/Grid/FluentGridTests.FluentGrid_SpacingJustify.verified.razor.html @@ -0,0 +1,2 @@ + +
My content
\ No newline at end of file diff --git a/tests/Core/Grid/FluentGridTests.razor b/tests/Core/Grid/FluentGridTests.razor new file mode 100644 index 0000000000..39c0c0659f --- /dev/null +++ b/tests/Core/Grid/FluentGridTests.razor @@ -0,0 +1,77 @@ +@using Xunit; +@inherits TestContext +@code +{ + [Fact] + public void FluentGrid_Default() + { + // Arrange && Act + var cut = Render(@My content); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentGrid_SpacingJustify() + { + // Arrange && Act + var cut = Render(@My content); + + //Assert + cut.Verify(); + } + + [Fact] + public void FluentGrid_Items_Default() + { + // Arrange && Act + var cut = Render( + @ + Cell 1 + Cell 2 + ); + + //Assert + cut.Verify(); + } + + [Fact] + public void FluentGrid_Items_AllBreakpoints() + { + // Arrange && Act + var cut = Render( + @ + My cell + ); + + //Assert + cut.Verify(); + } + + [Fact] + public void FluentGrid_Items_JustifyGap() + { + // Arrange && Act + var cut = Render( + @ + My cell + ); + + //Assert + cut.Verify(); + } + + [Fact] + public void FluentGrid_Items_NoBreapoint() + { + // Arrange && Act + var cut = Render( + @ + My cell + ); + + //Assert + cut.Verify(); + } +} \ No newline at end of file diff --git a/tests/Core/_ToDo/Grid/FluentGridItemTests.FluentGridItem_Default.verified.html b/tests/Core/_ToDo/Grid/FluentGridItemTests.FluentGridItem_Default.verified.html deleted file mode 100644 index b9523603c1..0000000000 --- a/tests/Core/_ToDo/Grid/FluentGridItemTests.FluentGridItem_Default.verified.html +++ /dev/null @@ -1,4 +0,0 @@ - -
- render me -
\ No newline at end of file diff --git a/tests/Core/_ToDo/Grid/FluentGridItemTests.cs b/tests/Core/_ToDo/Grid/FluentGridItemTests.cs deleted file mode 100644 index 8bcf32b559..0000000000 --- a/tests/Core/_ToDo/Grid/FluentGridItemTests.cs +++ /dev/null @@ -1,38 +0,0 @@ -using Bunit; -using Xunit; - -namespace Microsoft.Fast.Components.FluentUI.Tests.Grid; -public class FluentGridItemTests : TestBase -{ - [Fact] - public void FluentGridItem_Default() - { - //Arrange - string childContent = "render me"; - int? xs = default!; - int? sm = default!; - int? md = default!; - int? lg = default!; - int? xl = default!; - int? xxl = default!; - var cut = TestContext.RenderComponent(parameters => parameters - .Add(p => p.xs, xs) - .Add(p => p.sm, sm) - .Add(p => p.md, md) - .Add(p => p.lg, lg) - .Add(p => p.xl, xl) - .Add(p => p.xxl, xxl) - .AddChildContent(childContent) - ); - //Act - - //Assert - cut.Verify(); - } -} - - - - - - diff --git a/tests/Core/_ToDo/Grid/FluentGridTests.cs b/tests/Core/_ToDo/Grid/FluentGridTests.cs deleted file mode 100644 index 54c3d8b107..0000000000 --- a/tests/Core/_ToDo/Grid/FluentGridTests.cs +++ /dev/null @@ -1,30 +0,0 @@ -using Bunit; -using Xunit; - -namespace Microsoft.Fast.Components.FluentUI.Tests.Grid; -public class FluentGridTests : TestBase -{ - [Fact] - public void FluentGrid_Default() - { - //Arrange - string childContent = "render me"; - int spacing = default!; - Microsoft.Fast.Components.FluentUI.JustifyContent justify = default!; - var cut = TestContext.RenderComponent(parameters => parameters - .Add(p => p.Spacing, spacing) - .Add(p => p.Justify, justify) - .AddChildContent(childContent) - ); - //Act - - //Assert - cut.Verify(); - } -} - - - - - -