- Add CustomColor to Label (#2828)

- Make Style be applied last
- Add Label tests

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.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentLabel.CustomColor">
+            <summary>
+            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.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentLabel.Weight">
             <summary>
             Gets or sets the font weight of the component:
@@ -5500,6 +5507,9 @@
             Gets or sets the child content of component.
             </summary>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentLabel.OnParametersSet">
+            <summary />
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentLayout.Orientation">
             <summary>
             Gets or sets the orientation of the stacked components.

examples/Demo/Shared/Pages/Label/Examples/LabelColor.razor

@@ -0,0 +1,5 @@
+<FluentLabel Typo="Typography.Header" Color="@Color.Warning"> A 'Header' using Color.Warning</FluentLabel>
+<FluentLabel Typo="Typography.Body" Color="@Color.Disabled"> A 'Body' label using Color.Disabled</FluentLabel>
+<FluentLabel Typo="Typography.Body" Color="@Color.Custom" CustomColor="deepskyblue"> A 'Body' label using a custom color through the CustomColor parameter. Just specify a valid color string value.</FluentLabel>
+<FluentLabel Typo="Typography.Body" Style="color: chocolate;"> A 'Body' label using a custom color through the Style parameter. In this case a valid CSS color specification needs to be provided.</FluentLabel>
+<FluentLabel Typo="Typography.Body" Style="color: burlywood;" Color="@Color.Custom" CustomColor="burlywood"> When specifying both <code>CustomColor</code> and <code>Style</code>, the latter wins.</FluentLabel>

examples/Demo/Shared/Pages/Label/LabelPage.razor

@@ -7,9 +7,10 @@
 <h1>Label</h1>
 
 <p>
-    <code>FluentLabel</code> 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 <code>Typography</code> enum and the necessary styling will be applied automatically 
+    <code>FluentLabel</code> 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 <code>Typography</code> enum and the necessary styling will be applied automatically
 </p>
+<p></p>
 <p>
     The component exposes the following parameters:
 </p>
@@ -18,6 +19,12 @@
 
 <DemoSection Title="Label types" Component="typeof(LabelDefault)" />
 
+<DemoSection Title="Colors" Component="typeof(LabelColor)">
+    <Description>
+        The <code>FluentLabel</code> component can be styled with different colors. You can use one of the predefinded colors from the <code>Color</code> enumeration, or provide your own color through the <code>CustomColor</code> parameter or <code>Style</code> parameter.
+    </Description>
+</DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(FluentLabel)" />

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();
 
     /// <summary>
@@ -43,6 +45,14 @@ public partial class FluentLabel : FluentComponentBase
     [Parameter]
     public Color? Color { get; set; }
 
+    /// <summary>
+    /// 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.
+    /// </summary>
+    [Parameter]
+    public string? CustomColor { get; set; }
+
     /// <summary>
     /// 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;
+
+    /// <summary />
+    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.");
+        }
+    }
 }

tests/Core/Label/FluentLabelTests.FluentInputLabel_Default.verified.razor.html

@@ -0,0 +1,2 @@
+
+<p typo="body" class="fluent-typography" b-1nnnfjehkp="">Test label</p>

tests/Core/Label/FluentLabelTests.FluentLabel_Alignment.verified.razor.html

@@ -0,0 +1,2 @@
+
+<p typo="body" class="fluent-typography fluent-typo-center" b-1nnnfjehkp="">Test label</p>

tests/Core/Label/FluentLabelTests.FluentLabel_Color.verified.razor.html

@@ -0,0 +1,2 @@
+
+<p typo="body" class="fluent-typography" style="color: var(--warning);" b-1nnnfjehkp="">Test label</p>

tests/Core/Label/FluentLabelTests.FluentLabel_CustomColor.verified.razor.html

@@ -0,0 +1,2 @@
+
+<p typo="body" class="fluent-typography" style="color: deepskyblue;" b-1nnnfjehkp="">Test label</p>

tests/Core/Label/FluentLabelTests.FluentLabel_Disabled.verified.razor.html

@@ -0,0 +1,2 @@
+
+<p typo="body" class="fluent-typography" disabled="" b-1nnnfjehkp="">Test label</p>

tests/Core/Label/FluentLabelTests.FluentLabel_Style.verified.razor.html

@@ -0,0 +1,2 @@
+
+<p typo="body" class="fluent-typography" style="color: chocolate;" b-1nnnfjehkp="">Test label</p>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyBody.verified.razor.html

@@ -0,0 +1,2 @@
+
+<p typo="body" class="fluent-typography" b-1nnnfjehkp="">Test label</p>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyEmaiHeader.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h3 typo="email-header" class="fluent-typography" b-1nnnfjehkp="">Test label</h3>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH1.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h1 typo="h1" class="fluent-typography" b-1nnnfjehkp="">Test label</h1>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH2.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h2 typo="h2" class="fluent-typography" b-1nnnfjehkp="">Test label</h2>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH3.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h3 typo="h3" class="fluent-typography" b-1nnnfjehkp="">Test label</h3>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH4.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h4 typo="h4" class="fluent-typography" b-1nnnfjehkp="">Test label</h4>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH5.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h5 typo="h5" class="fluent-typography" b-1nnnfjehkp="">Test label</h5>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyH6.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h6 typo="h6" class="fluent-typography" b-1nnnfjehkp="">Test label</h6>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeader.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h5 typo="header" class="fluent-typography" b-1nnnfjehkp="">Test label</h5>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyHeroTitle.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h1 typo="hero-title" class="fluent-typography" b-1nnnfjehkp="">Test label</h1>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPageTitle.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h2 typo="page-title" class="fluent-typography" b-1nnnfjehkp="">Test label</h2>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographyPaneHeader.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Test label</h4>

tests/Core/Label/FluentLabelTests.FluentLabel_TypographySubject.verified.razor.html

@@ -0,0 +1,2 @@
+
+<h6 typo="subject" class="fluent-typography" b-1nnnfjehkp="">Test label</h6>

tests/Core/Label/FluentLabelTests.FluentLabel_Weight.verified.razor.html

@@ -0,0 +1,2 @@
+
+<p typo="body" bold="" class="fluent-typography" b-1nnnfjehkp="">Test label</p>

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(@<FluentLabel>Test label</FluentLabel>);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_Color()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Color="Color.Warning">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+
+    [Fact]
+    public void FluentLabel_CustomColor()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Color="Color.Custom" CustomColor="deepskyblue">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+
+    [Fact]
+    public void FluentLabel_Style()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Style="color: chocolate;">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    // Generate a test for Typography enum
+    [Fact]
+    public void FluentLabel_TypographyHeader()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.Header">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyBody()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.Body">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyHeroTitle()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.HeroTitle">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyPageTitle()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.PageTitle">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographySubject()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.Subject">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyPaneHeader()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.PaneHeader">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyEmaiHeader()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.EmailHeader">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+
+    [Fact]
+    public void FluentLabel_TypographyH1()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.H1">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyH2()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.H2">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyH3()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.H3">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyH4()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.H4">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyH5()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.H5">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentLabel_TypographyH6()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Typo="Typography.H6">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    // Disabled
+    [Fact]
+    public void FluentLabel_Disabled()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Disabled="true">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    //Weight
+    [Fact]
+    public void FluentLabel_Weight()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Weight="FontWeight.Bold">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+    //Alignment
+    [Fact]
+    public void FluentLabel_Alignment()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentLabel Alignment="AspNetCore.Components.HorizontalAlignment.Center">Test label</FluentLabel>);
+        // Assert
+        cut.Verify();
+    }
+
+
+}

tests/Core/Microsoft.FluentUI.AspNetCore.Components.Tests.csproj

@@ -59,4 +59,8 @@
       <DependentUpon>%(ParentFile).razor</DependentUpon>
     </None>
   </ItemGroup>
+
+  <ItemGroup>
+    <Folder Include="_ToDo\Label\" />
+  </ItemGroup>
 </Project>