Replace fluent-label with HTML label (#3335)

microsoft · Feb 11, 2025 · 48f5434 · 48f5434
1 parent ef3f00d
commit 48f5434
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 32 deletions.
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldExtra.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldExtra.razor
@@ -1,4 +1,8 @@
-<FluentStack Orientation="Orientation.Vertical">
+@* ******************************************** *@
+@* This sample is not used in the documentation *@
+@* ******************************************** *@
+
+<FluentStack Orientation="Orientation.Vertical">
     <FluentField Label="Label above"
                  ForId="field-21"
                  Message="This is a success message"
@@ -83,11 +87,6 @@
 
     bool DisplayMessage(IFluentField input)
     {
-        // if (input.FocusLost == false)
-        // {
-        //     return false;
-        // }
-
         if (Value2.Length == 0)
         {
             input.Message = "My custom required message";

diff --git a/...Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldLabelExample.razor b/...Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldLabelExample.razor
@@ -5,23 +5,31 @@
 <FluentStack Orientation="Orientation.Vertical">
 
     <FluentField Label="My first label:" LabelWidth="150px" LabelPosition="@SelectedPosition">
-        <FluentTextInput />
+        <InputText @bind-Value="@Value" placeholder="Default InputText" />
     </FluentField>
 
     <FluentField LabelWidth="150px" LabelPosition="@SelectedPosition" Required="true">
         <LabelTemplate>
             My&nbsp;<b>second</b>&nbsp;<i>label</i>:
         </LabelTemplate>
         <ChildContent>
-            <FluentTextInput />
+            <InputText @bind-Value="@Value" placeholder="Default InputText" />
         </ChildContent>
     </FluentField>
 
 </FluentStack>
 
+<style>
+    .box {
+        background: var(--colorNeutralBackground6);
+        padding: 2px 4px;
+    }
+</style>
+
 @code
 {
     private LabelPosition SelectedPosition;
+    private string Value = "";
 
     public static IEnumerable<LabelPosition> GetLabelPositions()
     {

diff --git a/src/Core/Components/Field/FluentField.razor b/src/Core/Components/Field/FluentField.razor
@@ -10,15 +10,19 @@
 
     @if (HasLabel)
     {
-        <FluentLabel Id="@GetId("label")"
-                     slot="label"
-                     for="@GetId("input")"
-                     Required="@(Parameters.Required ?? false)"
-                     Disabled="@(Parameters.Disabled ?? false)"
-                     Style="@LabelStyle">
+        <label id="@GetId("label")"
+               slot="label"
+               for="@GetId("input")"
+               required="@(Parameters.Required ?? false)"
+               disabled="@(Parameters.Disabled ?? false)"
+               style="@LabelStyle">
             @Parameters.Label
             @Parameters.LabelTemplate
-        </FluentLabel>
+            @if (Parameters.Required == true)
+            {
+                <span class="asterisk" aria-hidden="true" />
+            }
+        </label>
     }
 
     @if (ChildContent is not null)

diff --git a/src/Core/Components/Field/FluentField.razor.css b/src/Core/Components/Field/FluentField.razor.css
@@ -2,3 +2,16 @@ fluent-field[label-position='before'] > fluent-label[slot='label'] {
   margin-top: 8px;
   align-self: flex-start;
 }
+
+fluent-field .asterisk {
+  color: var(--colorPaletteRedForeground1);
+  margin-inline-start: var(--spacingHorizontalXS)
+}
+
+  fluent-field .asterisk::before {
+    content: '*';
+  }
+
+fluent-field label[disabled] {
+  color: var(--colorNeutralForegroundDisabled);
+}
diff --git a/src/Core/Components/Field/Readme.md b/src/Core/Components/Field/Readme.md
@@ -0,0 +1,23 @@
+# FluentField
+
+The `FluentField` component is a wrapper around a input component that add a label and a message to the input.
+
+## Usage
+
+You can use it by enclosing your component in a FluentField like this.
+You need to specify the `ForId`, `Class` and `Style` properties for the component to work correctly.
+
+The `@Id` property does not have to be defined when you create your component,
+it is automatically generated by the `FluentField` component.
+
+```razor
+<FluentField InputComponent="@this" ForId="@Id" Class="@ClassValue" Style="@StyleValue">
+    <!-- Your input component here -->
+</FluentField>
+```
+
+As the `ClassValue` and `StyleValue` attributes are added to the FluentField, you don't need to add them to your input component.
+
+## Example
+
+See FluentTextField for an example.
diff --git a/tests/Core/Components/Field/FluentFieldTests.FluentField_Default.verified.razor.html b/tests/Core/Components/Field/FluentFieldTests.FluentField_Default.verified.razor.html
@@ -1,7 +1,7 @@
 
 <fluent-field label-position="above" class="my-3">
-  <fluent-label slot="label" for="xxx">My label
-  </fluent-label>
+  <label slot="label" for="xxx">My label
+  </label>
   <div slot="input" id="xxx">Field content</div>
   <fluent-text as="span" size="200" slot="message">My message</fluent-text>
-</fluent-field>
+</fluent-field>
diff --git a/tests/Core/Components/Field/FluentFieldTests.FluentField_DefaultTemplate.verified.razor.html b/tests/Core/Components/Field/FluentFieldTests.FluentField_DefaultTemplate.verified.razor.html
@@ -1,14 +1,14 @@
 
 <fluent-field label-position="above" class="my-3">
-  <fluent-label slot="label" for="xxx">
+  <label slot="label" for="xxx">
     My
     <b>label</b>
-  </fluent-label>
+  </label>
   <div slot="input" id="xxx">
     Field content
   </div>
   <fluent-text as="span" size="200" slot="message">
     My
     <i>message</i>
   </fluent-text>
-</fluent-field>
+</fluent-field>
diff --git a/tests/Core/Components/Field/FluentFieldTests.razor b/tests/Core/Components/Field/FluentFieldTests.razor
@@ -93,7 +93,7 @@
         var cut = Render(@<FluentField Label="My label" LabelWidth="@width" LabelPosition="@position">Field content</FluentField>);
 
         // Assert
-        var attribute = cut.Find("fluent-label").ComputeCurrentStyle().GetPropertyValue("width");
+        var attribute = cut.Find("label").ComputeCurrentStyle().GetPropertyValue("width");
 
         Assert.Equal(expectedWidthAttribute, attribute);
     }
@@ -107,7 +107,7 @@
         var cut = Render(@<FluentField Label="My label" Message="My message" Required="@required">Field content</FluentField>);
 
         // Assert
-        var hasAttribute = cut.Find("fluent-label").HasAttribute("required");
+        var hasAttribute = cut.Find("label").HasAttribute("required");
 
         Assert.Equal(required, hasAttribute);
     }
@@ -121,7 +121,7 @@
         var cut = Render(@<FluentField Label="My label" Message="My message" Disabled="@disabled">Field content</FluentField>);
 
         // Assert
-        var hasAttribute = cut.Find("fluent-label").HasAttribute("disabled");
+        var hasAttribute = cut.Find("label").HasAttribute("disabled");
 
         Assert.Equal(disabled, hasAttribute);
     }
@@ -144,8 +144,8 @@
 
         // Arrange & Act
         var cut = Render(@<FluentField Id="@fieldId" Label="My label" ForId="@forId">Field content</FluentField>);
-        var labelIdAttr = cut.Find("fluent-label").GetAttribute("id");
-        var labelForAttr = cut.Find("fluent-label").GetAttribute("for");
+        var labelIdAttr = cut.Find("label").GetAttribute("id");
+        var labelForAttr = cut.Find("label").GetAttribute("for");
         var inputIdAttr = cut.Find("div").GetAttribute("id");
 
         // Id

diff --git a/tests/Core/Components/List/FluentSelectTests.FluentSelect_Label.verified.razor.html b/tests/Core/Components/List/FluentSelectTests.FluentSelect_Label.verified.razor.html
@@ -1,8 +1,9 @@
 
 <fluent-field id="xxx" label-position="above" class="my-3">
-  <fluent-label id="xxx" required="" slot="label" for="xxx">
+  <label id="xxx" required="" slot="label" for="xxx">
     List of digits
-  </fluent-label>
+    <span class="asterisk" aria-hidden="true"></span>
+  </label>
   <select id="xxx" required="" slot="input" blazor:onchange="1">
     <option selected="" blazor:onclick="x" aria-selected="true"></option>
     <option value="One" blazor:onclick="x">One</option>

diff --git a/...ore/Components/TextInput/FluentTextInputTests.FluentInputText_Default.verified.razor.html b/...ore/Components/TextInput/FluentTextInputTests.FluentInputText_Default.verified.razor.html
@@ -1,7 +1,7 @@
 
 <fluent-field id="xxx" label-position="above" class="my-3">
-  <fluent-label id="xxx" slot="label" for="xxx">
+  <label id="xxx" slot="label" for="xxx">
     My Label
-  </fluent-label>
+  </label>
   <fluent-text-input appearance="outline" autofocus="" aria-label="My aria label" id="xxx" name="xxx" placeholder="My help" slot="input" value="My Value" blazor:onfocusout="1" blazor:onchange="2" blazor:oninput="3" blazor:elementreference="xxx"></fluent-text-input>
 </fluent-field>
diff --git a/...mponents/TextInput/FluentTextInputTests.FluentInputText_LabelTemplate.verified.razor.html b/...mponents/TextInput/FluentTextInputTests.FluentInputText_LabelTemplate.verified.razor.html
@@ -1,7 +1,7 @@
 
 <fluent-field id="xxx" label-position="above" class="my-3">
-  <fluent-label id="xxx" slot="label" for="xxx">
+  <label id="xxx" slot="label" for="xxx">
     <div style="font-weight: bold;">My label</div>
-  </fluent-label>
+  </label>
   <fluent-text-input appearance="outline" id="xxx" slot="input" blazor:onfocusout="1" blazor:onchange="2" blazor:oninput="3" blazor:elementreference="xxx"></fluent-text-input>
 </fluent-field>