[CssBuilder and StyleBuilder] Fixing the built format and position of…

… the custom styles (#745) * Refactor StyleBuilder and add Unit Tests * Update CssBuilder and StyleBuilder * Update the CSS and Style Builder to include custom user styles at the end * Update all existing classes * Fix Unit Tests
microsoft · Sep 19, 2023 · ab939ff · ab939ff
1 parent f6ef9cd
commit ab939ff
Show file tree

Hide file tree

Showing 59 changed files with 515 additions and 545 deletions.
diff --git a/.gitignore b/.gitignore
@@ -398,6 +398,9 @@ FodyWeavers.xsd
 # JetBrains Rider
 *.sln.iml
 
+# Verify Test generated Files
+*.received.html
+
 # Specific files, typically generated by tools
 *.cobertura.xml
 Microsoft.Fast.Components.FluentUI.xml

diff --git a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
@@ -4621,9 +4621,7 @@
         </member>
         <member name="M:Microsoft.Fast.Components.FluentUI.FluentOverlay.CheckRGBString">
             <remarks>
-            Pattern:<br/>
-            <code>^(?:#(?:[a-fA-F0-9]{6}|[a-fA-F0-9]{3}))</code><br/>
-            Explanation:<br/>
+            Pattern explanation:<br/>
             <code>
             ○ Match if at the beginning of the string.<br/>
             ○ Match '#'.<br/>
@@ -5233,7 +5231,7 @@
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentTab.Overflow">
             <summary>
-            Gets if this component is out of panel.
+            If this tab is outside of vistible tab panel area.
             </summary>
         </member>
         <member name="M:Microsoft.Fast.Components.FluentUI.FluentTab.OnAfterRenderAsync(System.Boolean)">
@@ -10758,44 +10756,17 @@
             <param name="untilNextBoundary">If true, splits until the next regex boundary</param>
             <returns></returns>
         </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.Default(System.String,System.String)">
+        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.#ctor">
             <summary>
-            Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
-            </summary>
-            <param name="prop"></param>
-            <param name="value"></param>
-        </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.Default(System.String)">
-            <summary>
-            Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
-            </summary>
-            <param name="style"></param>
-        </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.Empty">
-            <summary>
-            Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
+            Initializes a new instance of the <see cref="T:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder"/> class.
             </summary>
         </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.#ctor(System.String,System.String)">
-            <summary>
-            Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
-            </summary>
-            <param name="prop"></param>
-            <param name="value"></param>
-        </member>
         <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyle(System.String)">
             <summary>
             Adds a conditional in-line style to the builder with space separator and closing semicolon.
             </summary>
             <param name="style"></param>
         </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddRaw(System.String)">
-            <summary>
-            Adds a raw string to the builder that will be concatenated with the next style or value added to the builder.
-            </summary>
-            <param name="style"></param>
-            <returns>StyleBuilder</returns>
-        </member>
         <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyle(System.String,System.String)">
             <summary>
             Adds a conditional in-line style to the builder with space separator and closing semicolon..
@@ -10813,15 +10784,6 @@
             <param name="when">Condition in which the style is added.</param>
             <returns>StyleBuilder</returns>
         </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyle(System.String,System.Func{System.String},System.Boolean)">
-            <summary>
-            Adds a conditional in-line style to the builder with space separator and closing semicolon..
-            </summary>
-            <param name="prop"></param>
-            <param name="value">Style to conditionally add.</param>
-            <param name="when">Condition in which the style is added.</param>
-            <returns></returns>
-        </member>
         <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyle(System.String,System.String,System.Func{System.Boolean})">
             <summary>
             Adds a conditional in-line style to the builder with space separator and closing semicolon..
@@ -10831,61 +10793,25 @@
             <param name="when">Condition in which the style is added.</param>
             <returns>StyleBuilder</returns>
         </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyle(System.String,System.Func{System.String},System.Func{System.Boolean})">
-            <summary>
-            Adds a conditional in-line style to the builder with space separator and closing semicolon..
-            </summary>
-            <param name="prop"></param>
-            <param name="value">Style to conditionally add.</param>
-            <param name="when">Condition in which the style is added.</param>
-            <returns>StyleBuilder</returns>
-        </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyle(Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder)">
-            <summary>
-            Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon.
-            </summary>
-            <param name="builder">Style Builder to conditionally add.</param>
-            <returns>StyleBuilder</returns>
-        </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyle(Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder,System.Boolean)">
+        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.Build">
             <summary>
-            Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon.
+            Finalize the completed Style as a string.
             </summary>
-            <param name="builder">Style Builder to conditionally add.</param>
-            <param name="when">Condition in which the style is added.</param>
-            <returns>StyleBuilder</returns>
+            <returns>string</returns>
         </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyle(Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder,System.Func{System.Boolean})">
+        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.ToString">
             <summary>
-            Adds a conditional in-line style to the builder with space separator and closing semicolon..
+            ToString should only and always call Build to finalize the rendered string.
             </summary>
-            <param name="builder">Style Builder to conditionally add.</param>
-            <param name="when">Condition in which the styles are added.</param>
-            <returns>StyleBuilder</returns>
-        </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyle(System.String,System.Action{Microsoft.Fast.Components.FluentUI.Utilities.ValueBuilder},System.Boolean)">
-            <summary>
-            Adds a conditional in-line style to the builder with space separator and closing semicolon..
-            A ValueBuilder action defines a complex set of values for the property.
-            </summary>
-            <param name="prop"></param>
-            <param name="builder"></param>
-            <param name="when"></param>
+            <returns></returns>
         </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddStyleFromAttributes(System.Collections.Generic.IReadOnlyDictionary{System.String,System.Object})">
+        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.AddRaw(System.String)">
             <summary>
-            Adds a conditional in-line style when it exists in a dictionary to the builder with separator.
-            Null safe operation.
+            Adds a raw string to the builder that will be concatenated with the next style or value added to the builder.
             </summary>
-            <param name="additionalAttributes">Additional Attribute splat parameters</param>
+            <param name="style"></param>
             <returns>StyleBuilder</returns>
         </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.StyleBuilder.Build">
-            <summary>
-            Finalize the completed Style as a string.
-            </summary>
-            <returns>string</returns>
-        </member>
         <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.ValueBuilder.AddValue(System.String,System.Boolean)">
             <summary>
             Adds a space separated conditional value to a property.

diff --git a/src/Core/Components/AnchoredRegion/FluentAnchoredRegion.razor.cs b/src/Core/Components/AnchoredRegion/FluentAnchoredRegion.razor.cs
@@ -7,8 +7,7 @@ public partial class FluentAnchoredRegion : FluentComponentBase
     protected string? ClassValue => new CssBuilder(Class)
         .Build();
 
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle($"z-index: {ZIndex.AnchoredRegion}")
         .AddStyle("background-color: var(--neutral-layer-floating)")
         .AddStyle("box-shadow", "var(--elevation-shadow-tooltip)", () => Shadow == ElevationShadow.Tooltip)

diff --git a/src/Core/Components/Badge/FluentBadge.razor.cs b/src/Core/Components/Badge/FluentBadge.razor.cs
@@ -13,8 +13,7 @@ public FluentBadge()
     protected string? ClassValue => new CssBuilder(Class)
          .Build();
 
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("width", Width, () => !string.IsNullOrEmpty(Width))
         .AddStyle("cursor", "pointer", () => OnClick.HasDelegate)
         .AddStyle($"--badge-fill-{Fill}", BackgroundColor, () => !string.IsNullOrEmpty(BackgroundColor))

diff --git a/src/Core/Components/Base/FluentInputBase.cs b/src/Core/Components/Base/FluentInputBase.cs
@@ -264,9 +264,7 @@ protected virtual string? ClassValue
     }
 
     /// <summary />
-    protected virtual string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
-        .Build();
+    protected virtual string? StyleValue => new StyleBuilder(Style).Build();
 
     /// <inheritdoc />
     public override Task SetParametersAsync(ParameterView parameters)

diff --git a/src/Core/Components/BodyContent/FluentBodyContent.razor.cs b/src/Core/Components/BodyContent/FluentBodyContent.razor.cs
@@ -10,9 +10,7 @@ public partial class FluentBodyContent : FluentComponentBase
         .AddClass("body-content")
         .Build();
 
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
-        .Build();
+    protected string? StyleValue => new StyleBuilder(Style).Build();
 
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.

diff --git a/src/Core/Components/CodeEditor/FluentCodeEditor.razor.cs b/src/Core/Components/CodeEditor/FluentCodeEditor.razor.cs
@@ -24,11 +24,10 @@ void Main()
     protected string? ClassValue => new CssBuilder(Class)
          .Build();
 
-    protected string? StyleValue => new StyleBuilder()
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("height", Height, () => !string.IsNullOrEmpty(Height))
         .AddStyle("width", Width, () => !string.IsNullOrEmpty(Width))
         .AddStyle("border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest)")
-        .AddStyle(Style)
         .Build();
 
     /// <summary />

diff --git a/src/Core/Components/CounterBadge/FluentCounterBadge.razor.cs b/src/Core/Components/CounterBadge/FluentCounterBadge.razor.cs
@@ -16,11 +16,10 @@ public partial class FluentCounterBadge : FluentComponentBase, IDisposable
         .Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder()
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("left", $"{HorizontalPosition!.Value.ToString(CultureInfo.InvariantCulture)}%", () => HorizontalPosition.HasValue && GlobalState.Dir == LocalizationDirection.ltr)
         .AddStyle("right", $"{HorizontalPosition!.Value.ToString(CultureInfo.InvariantCulture)}%", () => HorizontalPosition.HasValue && GlobalState.Dir == LocalizationDirection.rtl)
         .AddStyle("bottom", $"{BottomPosition!.Value.ToString(CultureInfo.InvariantCulture)}%", () => BottomPosition.HasValue)
-        .AddStyle(Style)
         .AddStyle("background-color", GetBackgroundColor().ToAttributeValue())
         .AddStyle("color", GetFontColor().ToAttributeValue())
         .AddStyle("border", $"1px solid {GetBorderColor().ToAttributeValue()}")

diff --git a/src/Core/Components/DateTime/FluentCalendar.razor.cs b/src/Core/Components/DateTime/FluentCalendar.razor.cs
@@ -19,9 +19,7 @@ public partial class FluentCalendar : FluentCalendarBase
     protected string? ClassValue => new CssBuilder(Class).AddClass("fluent-calendar").Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
-        .Build();
+    protected string? StyleValue => new StyleBuilder(Style).Build();
 
     /// <summary>
     /// The current month of the date picker (two-way bindable).

diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor.cs b/src/Core/Components/DateTime/FluentDatePicker.razor.cs
@@ -19,7 +19,7 @@ public FluentDatePicker()
     protected string? ClassValue => new CssBuilder(Class).AddClass("fluent-datepicker").Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder().AddStyle(Style).Build();
+    protected string? StyleValue => new StyleBuilder(Style).Build();
 
     /// <summary>
     /// Gets or sets the design of this input.

diff --git a/src/Core/Components/DateTime/FluentTimePicker.razor.cs b/src/Core/Components/DateTime/FluentTimePicker.razor.cs
@@ -7,9 +7,7 @@ namespace Microsoft.Fast.Components.FluentUI;
 public partial class FluentTimePicker : FluentInputBase<DateTime?>
 {
     /// <summary />
-    protected override string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
-        .Build();
+    protected override string? StyleValue => new StyleBuilder(Style).Build();
 
     /// <summary>
     /// Gets or sets the design of this input.

diff --git a/src/Core/Components/Dialog/FluentDialog.razor.cs b/src/Core/Components/Dialog/FluentDialog.razor.cs
@@ -104,8 +104,7 @@ public bool Hidden
         .AddClass("left", () => _parameters.Alignment == HorizontalAlignment.Left)
         .Build();
 
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("position", "absolute")
         .AddStyle("top", "50%", () => _parameters.Alignment == HorizontalAlignment.Center)
         .AddStyle("left", "50%", () => _parameters.Alignment == HorizontalAlignment.Center)

diff --git a/src/Core/Components/Drag/FluentDragContainer.razor.cs b/src/Core/Components/Drag/FluentDragContainer.razor.cs
@@ -14,7 +14,7 @@ public partial class FluentDragContainer<TItem> : FluentComponentBase
     protected virtual string? ClassValue => new CssBuilder(Class).Build();
 
     /// <summary />
-    protected virtual string? StyleValue => new StyleBuilder().AddStyle(Style).Build();
+    protected virtual string? StyleValue => new StyleBuilder(Style).Build();
 
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.

diff --git a/src/Core/Components/Drag/FluentDropZone.razor.cs b/src/Core/Components/Drag/FluentDropZone.razor.cs
@@ -16,7 +16,7 @@ public partial class FluentDropZone<TItem> : FluentComponentBase
     protected virtual string? ClassValue => new CssBuilder(Class).Build();
 
     /// <summary />
-    protected virtual string? StyleValue => new StyleBuilder().AddStyle(Style).Build();
+    protected virtual string? StyleValue => new StyleBuilder(Style).Build();
 
     /// <summary />
     [CascadingParameter]

diff --git a/src/Core/Components/Emojis/FluentEmoji.razor.cs b/src/Core/Components/Emojis/FluentEmoji.razor.cs
@@ -17,11 +17,10 @@ public partial class FluentEmoji<Emoji> : FluentComponentBase
         .Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder()
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("width", Width ?? $"{_emoji.Width}px")
         .AddStyle("cursor", "pointer", OnClick.HasDelegate)
         .AddStyle("display", "inline-block", !ContainsSVG())
-        .AddStyle(Style)
         .Build();
 
     /// <summary>

diff --git a/src/Core/Components/Footer/FluentFooter.razor.cs b/src/Core/Components/Footer/FluentFooter.razor.cs
@@ -10,8 +10,7 @@ public partial class FluentFooter : FluentComponentBase
         .AddClass("footer")
         .Build();
 
-    protected string? StyleValue => new StyleBuilder()
-       .Build();
+    protected string? StyleValue => new StyleBuilder(Style).Build();
 
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.

diff --git a/src/Core/Components/Grid/FluentGrid.razor.cs b/src/Core/Components/Grid/FluentGrid.razor.cs
@@ -39,8 +39,7 @@ public partial class FluentGrid : FluentComponentBase
         .Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("justify-content", Justify.ToAttributeValue())
         .Build();
 }
diff --git a/src/Core/Components/Grid/FluentGridItem.razor.cs b/src/Core/Components/Grid/FluentGridItem.razor.cs
@@ -37,11 +37,8 @@ public partial class FluentGridItem : FluentComponentBase
     public RenderFragment? ChildContent { get; set; }
 
     /// <summary />
-    protected string? ClassValue => new CssBuilder(Class)
-        .Build();
+    protected string? ClassValue => new CssBuilder(Class).Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
-        .Build();
+    protected string? StyleValue => new StyleBuilder(Style).Build();
 }
diff --git a/src/Core/Components/Header/FluentHeader.razor.cs b/src/Core/Components/Header/FluentHeader.razor.cs
@@ -10,7 +10,7 @@ public partial class FluentHeader : FluentComponentBase
         .AddClass("header")
         .Build();
 
-    protected string? StyleValue => new StyleBuilder()
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("height", $"{Height}px", () => Height.HasValue)
         .Build();
 

diff --git a/src/Core/Components/Icons/FluentIcon.razor.cs b/src/Core/Components/Icons/FluentIcon.razor.cs
@@ -17,12 +17,11 @@ public partial class FluentIcon<Icon> : FluentComponentBase
         .Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder()
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("width", Width ?? $"{_icon.Width}px")
         .AddStyle("fill", Color == FluentUI.Color.Custom ? CustomColor : Color.ToAttributeValue())
         .AddStyle("cursor", "pointer", OnClick.HasDelegate)
         .AddStyle("display", "inline-block", !ContainsSVG())
-        .AddStyle(Style)
         .Build();
 
     /// <summary>

diff --git a/src/Core/Components/InputFile/FluentInputFile.razor.cs b/src/Core/Components/InputFile/FluentInputFile.razor.cs
@@ -28,8 +28,7 @@ public partial class FluentInputFile : FluentComponentBase
         .Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("display", "none", () => !DragDropZoneVisible)
         .Build();
 

diff --git a/src/Core/Components/Label/FluentLabel.razor.cs b/src/Core/Components/Label/FluentLabel.razor.cs
@@ -13,8 +13,7 @@ public partial class FluentLabel : FluentComponentBase
         .AddClass("fluent-typo-right", () => Alignment == HorizontalAlignment.Right || Alignment == HorizontalAlignment.End)
         .Build();
 
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
+    protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("color", Color.ToAttributeValue(), () => (Color != null))
         .AddStyle("margin-block", MarginBlock, () => !string.IsNullOrEmpty(MarginBlock) && !DefaultMarginBlock)
         .Build();

diff --git a/src/Core/Components/Layout/FluentLayout.razor.cs b/src/Core/Components/Layout/FluentLayout.razor.cs
@@ -11,9 +11,7 @@ public partial class FluentLayout : FluentComponentBase
         .AddClass("layout")
         .Build();
 
-    protected string? StyleValue => new StyleBuilder()
-        .AddStyle(Style)
-        .Build();
+    protected string? StyleValue => new StyleBuilder(Style).Build();
 
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.