From 09e4e86d8e585590da6387e993d11d336e71a9a0 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Tue, 22 Oct 2024 12:13:50 +0200 Subject: [PATCH] - Add CustomColor to Label (#2828) - Make Style be applied last - Add Label tests --- ...crosoft.FluentUI.AspNetCore.Components.xml | 10 + .../Pages/Label/Examples/LabelColor.razor | 5 + .../Demo/Shared/Pages/Label/LabelPage.razor | 11 +- .../Components/Label/FluentLabel.razor.cs | 24 ++- ...uentInputLabel_Default.verified.razor.html | 2 + ....FluentLabel_Alignment.verified.razor.html | 2 + ...ests.FluentLabel_Color.verified.razor.html | 2 + ...luentLabel_CustomColor.verified.razor.html | 2 + ...s.FluentLabel_Disabled.verified.razor.html | 2 + ...ests.FluentLabel_Style.verified.razor.html | 2 + ...ntLabel_TypographyBody.verified.razor.html | 2 + ...l_TypographyEmaiHeader.verified.razor.html | 2 + ...uentLabel_TypographyH1.verified.razor.html | 2 + ...uentLabel_TypographyH2.verified.razor.html | 2 + ...uentLabel_TypographyH3.verified.razor.html | 2 + ...uentLabel_TypographyH4.verified.razor.html | 2 + ...uentLabel_TypographyH5.verified.razor.html | 2 + ...uentLabel_TypographyH6.verified.razor.html | 2 + ...Label_TypographyHeader.verified.razor.html | 2 + ...el_TypographyHeroTitle.verified.razor.html | 2 + ...el_TypographyPageTitle.verified.razor.html | 2 + ...l_TypographyPaneHeader.verified.razor.html | 2 + ...abel_TypographySubject.verified.razor.html | 2 + ...sts.FluentLabel_Weight.verified.razor.html | 2 + tests/Core/Label/FluentLabelTests.razor | 197 ++++++++++++++++++ ...luentUI.AspNetCore.Components.Tests.csproj | 4 + ...belTests.FluentLabel_Default.verified.html | 4 - tests/Core/_ToDo/Label/FluentLabelTests.cs | 33 --- 28 files changed, 287 insertions(+), 41 deletions(-) create mode 100644 examples/Demo/Shared/Pages/Label/Examples/LabelColor.razor create mode 100644 tests/Core/Label/FluentLabelTests.FluentInputLabel_Default.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_Alignment.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_Color.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_CustomColor.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_Disabled.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_Style.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyBody.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyEmaiHeader.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH1.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH2.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH3.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH4.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH5.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH6.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeader.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeroTitle.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPageTitle.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPaneHeader.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_TypographySubject.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.FluentLabel_Weight.verified.razor.html create mode 100644 tests/Core/Label/FluentLabelTests.razor delete mode 100644 tests/Core/_ToDo/Label/FluentLabelTests.FluentLabel_Default.verified.html delete mode 100644 tests/Core/_ToDo/Label/FluentLabelTests.cs diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 8583f4421f..0617ef7c5d 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -5482,6 +5482,13 @@ Gets or sets the color of the component. It supports the theme colors. + + + Gets or sets the color of the label to a custom value. + Needs to be formatted as a valid CSS color value (HTML hex color string (#rrggbb or #rgb), CSS variable or named color). + ⚠️ Only available when Color is set to Color.Custom. + + Gets or sets the font weight of the component: @@ -5500,6 +5507,9 @@ Gets or sets the child content of component. + + + Gets or sets the orientation of the stacked components. diff --git a/examples/Demo/Shared/Pages/Label/Examples/LabelColor.razor b/examples/Demo/Shared/Pages/Label/Examples/LabelColor.razor new file mode 100644 index 0000000000..fa6ce66de6 --- /dev/null +++ b/examples/Demo/Shared/Pages/Label/Examples/LabelColor.razor @@ -0,0 +1,5 @@ + A 'Header' using Color.Warning + A 'Body' label using Color.Disabled + A 'Body' label using a custom color through the CustomColor parameter. Just specify a valid color string value. + A 'Body' label using a custom color through the Style parameter. In this case a valid CSS color specification needs to be provided. + When specifying both CustomColor and Style, the latter wins. diff --git a/examples/Demo/Shared/Pages/Label/LabelPage.razor b/examples/Demo/Shared/Pages/Label/LabelPage.razor index 4cb571ac94..e72098a242 100644 --- a/examples/Demo/Shared/Pages/Label/LabelPage.razor +++ b/examples/Demo/Shared/Pages/Label/LabelPage.razor @@ -7,9 +7,10 @@

Label

- FluentLabel is a component that can be used to easily insert a small formatted piece of text into your application. You choose a type of element - from the Typography enum and the necessary styling will be applied automatically + FluentLabel is a component that can be used to easily insert a small formatted piece of text into your application. You choose a type of element + from the Typography enum and the necessary styling will be applied automatically

+

The component exposes the following parameters:

@@ -18,6 +19,12 @@ + + + The FluentLabel component can be styled with different colors. You can use one of the predefinded colors from the Color enumeration, or provide your own color through the CustomColor parameter or Style parameter. + + +

Documentation

diff --git a/src/Core/Components/Label/FluentLabel.razor.cs b/src/Core/Components/Label/FluentLabel.razor.cs index 27a19e1065..cb47f10dfa 100644 --- a/src/Core/Components/Label/FluentLabel.razor.cs +++ b/src/Core/Components/Label/FluentLabel.razor.cs @@ -14,9 +14,11 @@ public partial class FluentLabel : FluentComponentBase .AddClass("fluent-typo-right", () => Alignment == HorizontalAlignment.Right || Alignment == HorizontalAlignment.End) .Build(); - protected string? StyleValue => new StyleBuilder(Style) - .AddStyle("color", Color.ToAttributeValue(), () => Color != null) + protected string? StyleValue => new StyleBuilder() + .AddStyle("color", Color.ToAttributeValue(), () => Color != null && Color != AspNetCore.Components.Color.Custom) + .AddStyle("color", CustomColor, () => Color == AspNetCore.Components.Color.Custom) .AddStyle("margin-block", MarginBlock, () => !string.IsNullOrEmpty(MarginBlock) && !DefaultMarginBlock) + .AddStyle(Style) .Build(); /// @@ -43,6 +45,14 @@ public partial class FluentLabel : FluentComponentBase [Parameter] public Color? Color { get; set; } + /// + /// Gets or sets the color of the label to a custom value. + /// Needs to be formatted as a valid CSS color value (HTML hex color string (#rrggbb or #rgb), CSS variable or named color). + /// ⚠️ Only available when Color is set to Color.Custom. + /// + [Parameter] + public string? CustomColor { get; set; } + /// /// Gets or sets the font weight of the component: /// Normal (400), Bold (600) or Bolder (800). @@ -69,4 +79,14 @@ public partial class FluentLabel : FluentComponentBase private bool? Bolder => Weight == FontWeight.Bolder; private bool DefaultMarginBlock => string.Compare(MarginBlock, "default", StringComparison.OrdinalIgnoreCase) == 0; + + /// + protected override void OnParametersSet() + { + + if (!string.IsNullOrEmpty(CustomColor) && Color != AspNetCore.Components.Color.Custom) + { + throw new ArgumentException("CustomColor can only be used when Color is set to Color.Custom."); + } + } } diff --git a/tests/Core/Label/FluentLabelTests.FluentInputLabel_Default.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentInputLabel_Default.verified.razor.html new file mode 100644 index 0000000000..04dde5b7e8 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentInputLabel_Default.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_Alignment.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_Alignment.verified.razor.html new file mode 100644 index 0000000000..e0947c1f40 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_Alignment.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_Color.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_Color.verified.razor.html new file mode 100644 index 0000000000..6fc3a12f02 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_Color.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_CustomColor.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_CustomColor.verified.razor.html new file mode 100644 index 0000000000..974c66a527 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_CustomColor.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_Disabled.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_Disabled.verified.razor.html new file mode 100644 index 0000000000..7b3a6f3f0d --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_Disabled.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_Style.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_Style.verified.razor.html new file mode 100644 index 0000000000..6921acbf3e --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_Style.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyBody.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyBody.verified.razor.html new file mode 100644 index 0000000000..04dde5b7e8 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyBody.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyEmaiHeader.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyEmaiHeader.verified.razor.html new file mode 100644 index 0000000000..a7a4e635e0 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyEmaiHeader.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH1.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH1.verified.razor.html new file mode 100644 index 0000000000..df1f110b01 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH1.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH2.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH2.verified.razor.html new file mode 100644 index 0000000000..47e557fc68 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH2.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH3.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH3.verified.razor.html new file mode 100644 index 0000000000..b2459625c7 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH3.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH4.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH4.verified.razor.html new file mode 100644 index 0000000000..1b6b6902c4 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH4.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH5.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH5.verified.razor.html new file mode 100644 index 0000000000..40d9d3a21d --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH5.verified.razor.html @@ -0,0 +1,2 @@ + +
Test label
\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH6.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH6.verified.razor.html new file mode 100644 index 0000000000..3ae9189d0d --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH6.verified.razor.html @@ -0,0 +1,2 @@ + +
Test label
\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeader.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeader.verified.razor.html new file mode 100644 index 0000000000..096c1e5c41 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeader.verified.razor.html @@ -0,0 +1,2 @@ + +
Test label
\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeroTitle.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeroTitle.verified.razor.html new file mode 100644 index 0000000000..cd469267d3 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeroTitle.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPageTitle.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPageTitle.verified.razor.html new file mode 100644 index 0000000000..d68915c667 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPageTitle.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPaneHeader.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPaneHeader.verified.razor.html new file mode 100644 index 0000000000..8004feb558 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPaneHeader.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_TypographySubject.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographySubject.verified.razor.html new file mode 100644 index 0000000000..ef2f28f0cd --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_TypographySubject.verified.razor.html @@ -0,0 +1,2 @@ + +
Test label
\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.FluentLabel_Weight.verified.razor.html b/tests/Core/Label/FluentLabelTests.FluentLabel_Weight.verified.razor.html new file mode 100644 index 0000000000..c7c5dbe920 --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.FluentLabel_Weight.verified.razor.html @@ -0,0 +1,2 @@ + +

Test label

\ No newline at end of file diff --git a/tests/Core/Label/FluentLabelTests.razor b/tests/Core/Label/FluentLabelTests.razor new file mode 100644 index 0000000000..bf50bfbe5c --- /dev/null +++ b/tests/Core/Label/FluentLabelTests.razor @@ -0,0 +1,197 @@ +@using Xunit; +@inherits TestContext +@code +{ + [Inject] + private LibraryConfiguration LibraryConfiguration { get; set; } = new LibraryConfiguration(); + + [Fact] + public void FluentInputLabel_Default() + { + // Arrange && Act + var cut = Render(@Test label); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_Color() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + + [Fact] + public void FluentLabel_CustomColor() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + + [Fact] + public void FluentLabel_Style() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + // Generate a test for Typography enum + [Fact] + public void FluentLabel_TypographyHeader() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyBody() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyHeroTitle() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyPageTitle() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographySubject() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyPaneHeader() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyEmaiHeader() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + + [Fact] + public void FluentLabel_TypographyH1() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyH2() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyH3() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyH4() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyH5() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + [Fact] + public void FluentLabel_TypographyH6() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + // Disabled + [Fact] + public void FluentLabel_Disabled() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + //Weight + [Fact] + public void FluentLabel_Weight() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + //Alignment + [Fact] + public void FluentLabel_Alignment() + { + // Arrange && Act + var cut = Render(@Test label); + // Assert + cut.Verify(); + } + + +} diff --git a/tests/Core/Microsoft.FluentUI.AspNetCore.Components.Tests.csproj b/tests/Core/Microsoft.FluentUI.AspNetCore.Components.Tests.csproj index 063f24d855..87a6e867db 100644 --- a/tests/Core/Microsoft.FluentUI.AspNetCore.Components.Tests.csproj +++ b/tests/Core/Microsoft.FluentUI.AspNetCore.Components.Tests.csproj @@ -59,4 +59,8 @@ %(ParentFile).razor + + + + diff --git a/tests/Core/_ToDo/Label/FluentLabelTests.FluentLabel_Default.verified.html b/tests/Core/_ToDo/Label/FluentLabelTests.FluentLabel_Default.verified.html deleted file mode 100644 index 6b817559a6..0000000000 --- a/tests/Core/_ToDo/Label/FluentLabelTests.FluentLabel_Default.verified.html +++ /dev/null @@ -1,4 +0,0 @@ - -

- render me -

\ No newline at end of file diff --git a/tests/Core/_ToDo/Label/FluentLabelTests.cs b/tests/Core/_ToDo/Label/FluentLabelTests.cs deleted file mode 100644 index d64fc73fbf..0000000000 --- a/tests/Core/_ToDo/Label/FluentLabelTests.cs +++ /dev/null @@ -1,33 +0,0 @@ -using Bunit; -using Xunit; - -namespace Microsoft.FluentUI.AspNetCore.Components.Tests.Label; -public class FluentLabelTests : TestBase -{ - [Fact] - public void FluentLabel_Default() - { - //Arrange - var childContent = "render me"; - Typography typo = default!; - bool disabled = default!; - HorizontalAlignment? alignment = default!; - Color? color = default!; - FontWeight weight = default!; - string marginBlock = default!; - var cut = TestContext.RenderComponent(parameters => parameters - .Add(p => p.Typo, typo) - .Add(p => p.Disabled, disabled) - .Add(p => p.Alignment, alignment) - .Add(p => p.Color, color) - .Add(p => p.Weight, weight) - .Add(p => p.MarginBlock, marginBlock) - .AddChildContent(childContent) - ); - //Act - - //Assert - cut.Verify(); - } -} -