Prepare for release 3.1.1 (#794)

* Add UnitTests markdown page (#658) * ProgressToast related changes (#657) * FluentProgress: Add ValueChanged FluentProgressRing: Add ValueChanged Fix #655 and update example * Do not use @Bind for FluentProgress Value Update example * Add colocated files to demos * Undo add ValueChanged EventCallBack * Add Width and Height property and associated styles (#663) Co-authored-by: Vincent Baaij <vnbaaij@outlook.com> * Point to unit test documentation * re-add fixed to DemoSection tabs * #624 Change NavMneu to use Icon Value Update version in banner * Update version in props * Fix Icons and Emojis trimmed during the WASM publishing process (#666) * FluentMessageBox: enable not supplying an icon to the body * Add doc about Icons / Emojis (#673) * Fix click not working on FluentTreeItem text (#667) Co-authored-by: Vincent Baaij <vnbaaij@outlook.com> * Fix the Tooltip used by the FluentOverflow (#678) * Revert change in including web-components script. fix #668 Update Icon example * Fix TextField AutoComplete property to a string property (#682) * Fix #674 (#676) * Fix DemoSection label sometimes wrong * Fix #621 - Add aria-hidden to clear-button (#683) Fix some search sample a11y issues * Make FLuentToastContainer work better on mobile devices (was #684) * Replace the Icons.AllIcons property with a GetAllIcons method using reflection (#685) * Users/vnbaaij/update templates (#688) * Update templates t0 use v3 package * More template updates Temp add global.json to pin 8.0.0-preview.7 * Set icon for EF Adapter package * Fix EF Adapter Icon path * Apply the oninput attribute to "text" components (#696) * Add missing usings Project template (#702) Fixes #701 * Fix templates missing using (beacause of Code CLeanup runningon save...) * Remove PackageVersion from csproj to let it be set y pipeline * Add item reference to FluentDataGridRow and FluentDataGridCell (#695) (#700) Co-authored-by: Alessio Dell’Aquila <aquila@hks-systeme.de> * [fix] multiline-text word-break (#711) * [fix] multiline-text word-break * test * Add FluentDialogHeader, FluentDialogFooter and related updates (#717) * Update build-core-lib.yml * Add MessageBar component (#718) * Add MessageBar * Demo site optimizations * Add generic ActionLink and ActionButton classes * Tune display of ApiDocumentation on smaller screens * Users/dvoituron/autocomplete (#720) * Draft version of Autocomplete component * Autocomplete with basic features * Update some UI details * Add ArrowUp/ArrowDown to select items * Add TemplateOption * Add Demo styles * Add Header and Footer content * Add FluentOptionPeople component * Finalize unsing People Component * Add some aria attributes (not completed) * Add face picture samples * Revert ToC panel * Add first tests * Fix Unit Test * Fix Unit Test * Add Unit Tests * Fix the complexity * Add Unit Tests for FluentOptionPeople component * FluentDataGridRow: sticky header z-index. Fix #721 * Use latest .NET SDKs Fix null dereference warning Remove global.json * Fix issue with combined normal/timed MessageBars * Put notification/settings icons in a button * Update the DatePicker popup position (#724) * [FluentAutocomplete] Update some usabilities (#725) * Add MaximumSelectedOptionsMessage, a Search icon and a Dismiss icon * Update Unit Tests * Fix FluentDatePicker and FluentTimePicker to keep existing date/time values (#726) * FluentMenuButton: Add ButtonStyle and MenuStyle parameters * Couple of enhancements (#727) * Fix issue with combined normal/timed MessageBars * Put notification/settings icons in a button * FluentMenuButton: Add ButtonStyle and MenuStyle parameters * Add ChildContent (#728) * Fix MessageOption Timeout xml documentation * Update CodeSetup.md (#730) Fix a typo * [FluentMenu/FluentPopover/FluentOverlay] Close menu/popover automatically when user clicks outside of it (by using overlay) (#729) * Fix FluentMenu / FluentOverlay to dismiss menu when clicked outside * Fix FluentPopover/FluentOverlay * Apply naming conventions * Add `EmptyContent` parameter to the DataGrid (#731) * Fix MessageOption Timeout xml documentation * Add a EmptyContent parameter to FluentDataGrid * [FluentPresenceBadge & FluentOptionPeople] - Update the Status badge to be compliant FluentUI 2 (#732) * Fix people ChildContent * Update the FluentPresenceBadge * Update the FluentOptionPeople * Fix Unit Tests * Fix Unit Tests --------- Co-authored-by: Vincent Baaij <vnbaaij@outlook.com> * Add more colors to OfficeColor enum * Add a comment on FluentTabPage on styling indicator * [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 * Add comment to ComboboxPage Update some xml doc comments * Update FluentDataGridRow and example (#747) * Add a column with buttons to virtualized grid example with sticky header Update FluentDataGridRow to align center when row height is set Update FluentDataGrid to remove code that was already done in row rendering * Process review remark * fix typos (#751) Co-authored-by: Vincent Baaij <vnbaaij@outlook.com> * Update the Button.Loading when using with a Icon (#752) Co-authored-by: Vincent Baaij <vnbaaij@outlook.com> * Dialog enhancements (add dialog type, fix panel width setable), add MaxHeight to DemoSection (#740) * Add Dialog custom header/footer example Address #739 Change ShowDialog to allow horizontal alignment setting * Add DialogType enum and set this in dialog parameters Use width parameter in panel example * Fix review comments Add MaxHeight to DemoSection * REmove files no longer needed * Cleanup for new alternative * Make DialogType internal * Revert "Make DialogType internal" This reverts commit e80e451. * Remove more HeaderTemplate/FooterTemplate references * Fix NavMenu route/subroute not selecting correct item (#755) * Fix NavMenu route/subroute not selecting correct item * Fix compilation error * Add extra "/" (if needed) to do a clean comparisson on segments * [FluentDialog] Include components to customize the Dialog-box (#764) * Update Fluent UI System Icons to 1.1.217 (#765) Move AllIcons property Comment out Icons.cs creation in generator * Add PreventScroll to Dialog and Overlay (#758) * Add PreventScroll to Dialog and Overlay * Move scroll restauration to DisposeAsync * Change it to use a CSS only approach * Fix manual dialog with PreventScroll * Rename FluentOptionPeople to FluentPersona (#766) * Rename FluentOptionPeople to FluentPersona * Update tests * Update version Test for #771 Fix #772 * Fix #772 (for real this time...) * Typo 'the the' (#773) Co-authored-by: Vincent Baaij <vnbaaij@outlook.com> * Add InlineStyleBuilder and fix the FluentSelect.Height property (#774) * [FluentIcon] Use of Value attribute (not Icon) (#784) * [WIP] Inert modal overlay (#783) * Fix #772 * add InertModalOverlay to DialogParameters --------- Co-authored-by: Vincent Baaij <vnbaaij@outlook.com> * Rename InertModalOverlay to PreventDismissOnOverlayClick Fix code comment Clean up demo description Extend sample with custom dialog to usee new parameter * Fix NavMenu redirecting tosmae page when route parameters present (#755) Fix obsolete warning for Notification Center * Fix obsolete warnings Update Whatsew, add What's New Archive * Re-work padding/height for dialog variants (#786) * Re-work padding/heigt for dialog variants * Resolve review comments * Fix more Obsolete warnings Fix one more issue related to #755 * Add a Tooltip parameter to DataGrid columns (#791) * Add Tooltip parameter to DataGrid columns Clean-up WhatsNew * More tooltip work Add Style parameter to ColumnBase ApiDocumentation: InstanceType renamed to InstanceTypes and is array now * Fix #789 * Button and Icon colors (#793) * Add Icon.WithColor and update the Demo page * Update Button Icon Color depending of Button Appearance * Update the way to apply the Icon.Color in a Button --------- Co-authored-by: Vincent Baaij <vnbaaij@outlook.com> * Update whatsnew * fix: enhanced DialogService doc with asp.net core 8 with ssr (#795) --------- Co-authored-by: Denis Voituron <dvoituron@outlook.com> Co-authored-by: Emanuele Curati <ema@outlook.com> Co-authored-by: Antoine Griffard <agriffard@hotmail.com> Co-authored-by: hksalessio <143792830+hksalessio@users.noreply.github.com> Co-authored-by: Alessio Dell’Aquila <aquila@hks-systeme.de> Co-authored-by: ssccinng <whs11998@163.com> Co-authored-by: Yue Cui <37979368+LuohuaRain@users.noreply.github.com> Co-authored-by: Gary Chan <gary.chan@c0g1t8.com>
microsoft · Sep 27, 2023 · 115d212 · 115d212
1 parent 3cfd4cf
commit 115d212
Show file tree

Hide file tree

Showing 83 changed files with 1,364 additions and 1,418 deletions.
diff --git a/Directory.Build.props b/Directory.Build.props
@@ -12,8 +12,8 @@
 
 	 <SolutionDir>$(MSBuildThisFileDirectory)</SolutionDir>	 
 
-	 <VersionFile>3.1.0</VersionFile>
-	 <VersionPrefix>3.1.0</VersionPrefix>
+	 <VersionFile>3.1.1</VersionFile>
+	 <VersionPrefix>3.1.1</VersionPrefix>
 	 <VersionSuffix></VersionSuffix> 
 
 	 <AssemblyVersion>$(VersionFile)</AssemblyVersion>

diff --git a/SECURITY.md b/SECURITY.md
@@ -12,7 +12,7 @@ If you believe you have found a security vulnerability in any Microsoft-owned re
 
 Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
 
-If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
+If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
 
 You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
 

diff --git a/WHATSNEW.md b/WHATSNEW.md
diff --git a/examples/Demo/Shared/Components/ApiDocumentation.razor b/examples/Demo/Shared/Components/ApiDocumentation.razor
@@ -9,7 +9,7 @@
     @if (Component.BaseType != null && Component.BaseType != typeof(FluentComponentBase) && Component.BaseType.Name.StartsWith("Fluent"))
     {
         <p>
-            Inherits from <a href="/@Component.BaseType.Name">@Component.BaseType.Name.Replace("`1", $"<{GenericLabel}>")</a>. <br />
+            Inherits from <a href="/@Component.BaseType.Name">@Component.BaseType.Name.Replace("`1", $"<{GenericLabel}>").Replace("`2", $"<{GenericLabel}>")</a>. <br />
             <em>There might be parameters and/or methods shown here that are inherited from the component's base type but are not applicable to this component.</em>
         </p>
     }

diff --git a/examples/Demo/Shared/Components/ApiDocumentation.razor.cs b/examples/Demo/Shared/Components/ApiDocumentation.razor.cs
@@ -37,7 +37,7 @@ private class MemberDescription
     /// Default for this parameter is 'typeof(string)'
     /// </summary>
     [Parameter]
-    public Type InstanceType { get; set; } = typeof(string);
+    public Type[] InstanceTypes { get; set; } = new[] { typeof(string) };
 
     /// <summary>
     /// The label used for displaying the type parameter
@@ -50,7 +50,7 @@ private class MemberDescription
 
     protected override void OnParametersSet()
     {
-        _displayName = Component.Name.Replace("`1", $"<{GenericLabel}>") + " Class";
+        _displayName = Component.Name.Replace("`1", $"<{GenericLabel}>").Replace("`2", $"<{GenericLabel}>") + " Class";
         _id = _displayName.Replace(' ', '-').ToLowerInvariant();
     }
     private IEnumerable<MemberDescription> Properties => GetMembers(MemberTypes.Property);
@@ -71,11 +71,11 @@ private IEnumerable<MemberDescription> GetMembers(MemberTypes type)
             object? obj;
             if (Component.IsGenericType)
             {
-                if (InstanceType is null)
-                    throw new ArgumentNullException(nameof(InstanceType), "InstanceType must be specified when Component is a generic type");
+                if (InstanceTypes is null)
+                    throw new ArgumentNullException(nameof(InstanceTypes), "InstanceTypes must be specified when Component is a generic type");
 
                 // Supply the type to create the generic instance with (needs to be an array)
-                Type[] typeArgs = { InstanceType };
+                Type[] typeArgs = InstanceTypes;
                 Type constructed = Component.MakeGenericType(typeArgs);
 
                 obj = Activator.CreateInstance(constructed);

diff --git a/examples/Demo/Shared/Components/ApiDocumentation.razor.css b/examples/Demo/Shared/Components/ApiDocumentation.razor.css
@@ -4,12 +4,10 @@
 }
 
 @media screen and (max-width: 1280px) {
-
     ::deep fluent-data-grid {
         min-width: 1200px;
     }
     ::deep .docgrid {
         overflow-x: scroll;
-
     }
 }
diff --git a/examples/Demo/Shared/Components/NotificationCenter.razor b/examples/Demo/Shared/Components/NotificationCenter.razor
@@ -43,7 +43,7 @@ else
     {
         DemoLogger.WriteLine($"Open notification center");
 
-        _dialog = await DialogService.ShowPanelAsync<NotificationCenterPanel, GlobalState>(new DialogParameters<GlobalState>()
+        _dialog = await DialogService.ShowPanelAsync<NotificationCenterPanel>(new DialogParameters<GlobalState>()
             {
                 Alignment = HorizontalAlignment.Right,
                 Title = $"Notifications",

diff --git a/examples/Demo/Shared/Components/SiteSettings.razor.cs b/examples/Demo/Shared/Components/SiteSettings.razor.cs
@@ -14,7 +14,7 @@ public partial class SiteSettings
     private async Task OpenSiteSettingsAsync()
     {
         DemoLogger.WriteLine($"Open site settings");
-        _dialog = await DialogService.ShowPanelAsync<SiteSettingsPanel, GlobalState>(new DialogParameters<GlobalState>()
+        _dialog = await DialogService.ShowPanelAsync<SiteSettingsPanel>(GlobalState, new DialogParameters<GlobalState>()
         {
             ShowTitle = true,
             Title = "Site settings",

diff --git a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
@@ -848,11 +848,22 @@
             for this column.
             </summary>
         </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.ColumnBase`1.Style">
+            <summary>
+            An optional CSS style specification. If specified, this is included in the style attribute of header and grid cells
+            for this column.
+            </summary>
+        </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.ColumnBase`1.Align">
             <summary>
             If specified, controls the justification of header and grid cells for this column.
             </summary>
         </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.ColumnBase`1.Tooltip">
+            <summary>
+            If true, generate a title attribute for the cell contents
+            </summary>
+        </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.ColumnBase`1.HeaderCellItemTemplate">
             <summary>
             An optional template for this column's header cell. If not specified, the default header template
@@ -909,6 +920,12 @@
             <param name="builder">The current <see cref="T:Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder" />.</param>
             <param name="item">The data for the row being rendered.</param>
         </member>
+        <member name="M:Microsoft.Fast.Components.FluentUI.ColumnBase`1.RawCellContent(`0)">
+            <summary>
+            Overridden by derived components to provide the raw content for the column's cells.
+            </summary>
+            <param name="item">The data for the row being rendered.</param>
+        </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.ColumnBase`1.HeaderContent">
             <summary>
             Gets or sets a <see cref="T:Microsoft.AspNetCore.Components.RenderFragment" /> that will be rendered for this column's header cell.
@@ -1155,6 +1172,11 @@
             Optionally defines a class to be applied to a rendered row. 
             </summary>
         </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentDataGrid`1.RowStyle">
+            <summary>
+            Optionally defines a style to be applied to a rendered row. 
+            </summary>
+        </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentDataGrid`1.EmptyContent">
             <summary>
             If specified, grids render this fragment when there is no content.
@@ -1233,7 +1255,7 @@
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentDataGridRow`1.GridTemplateColumns">
             <summary>
-            String that gets applied to the the css gridTemplateColumns attribute for the row
+            String that gets applied to the css gridTemplateColumns attribute for the row
             </summary>
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentDataGridRow`1.RowType">
@@ -2014,7 +2036,13 @@
         <member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.Modal">
             <summary>
             Determines if the dialog is modal. Defaults to true.
-            When true, clicking outside the dialog will dismiss the dialog.
+            Obscures the area around the dialog.
+            </summary>
+        </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.PreventDismissOnOverlayClick">
+            <summary>
+            Determines if a modal dialog is dismissible by clicking
+            outside the dialog. Defaults to false.
             </summary>
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.PreventScroll">
@@ -3577,6 +3605,9 @@
         <member name="M:Microsoft.Fast.Components.FluentUI.FluentPersona.GetDefaultInitials">
             <summary />
         </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentSelect`1.InlineStyleValue">
+            <summary />
+        </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentSelect`1.Open">
             <summary>
             The open attribute.
@@ -10821,6 +10852,61 @@
             <param name="value"></param>
             <returns>StyleBuilder</returns>
         </member>
+        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.InlineStyleBuilder.#ctor">
+            <summary>
+            Initializes a new instance of the <see cref="T:Microsoft.Fast.Components.FluentUI.Utilities.InlineStyleBuilder"/> class.
+            </summary>
+        </member>
+        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.InlineStyleBuilder.AddStyle(System.String,System.String,System.String)">
+            <summary>
+            Adds a conditional in-line style to the builder with space separator and closing semicolon..
+            </summary>
+            <param name="name"></param>
+            <param name="prop"></param>
+            <param name="value">Style to add</param>
+            <returns>StyleBuilder</returns>
+        </member>
+        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.InlineStyleBuilder.AddStyle(System.String,System.String,System.String,System.Boolean)">
+            <summary>
+            Adds a conditional in-line style to the builder with space separator and closing semicolon..
+            </summary>
+            <param name="name"></param>
+            <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.InlineStyleBuilder.AddStyle(System.String,System.String,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="name"></param>
+            <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.InlineStyleBuilder.Build(System.Boolean)">
+            <summary>
+            Finalize the completed Style as a string.
+            </summary>
+            <returns>string</returns>
+        </member>
+        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.InlineStyleBuilder.BuildMarkupString">
+            <summary>
+            Finalize the completed Style as a string.
+            </summary>
+            <returns>string</returns>
+        </member>
+        <member name="M:Microsoft.Fast.Components.FluentUI.Utilities.InlineStyleBuilder.AddRaw(System.String,System.String,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="name"></param>
+            <param name="prop"></param>
+            <param name="value"></param>
+            <returns>StyleBuilder</returns>
+        </member>
         <member name="F:Microsoft.Fast.Components.FluentUI.Utilities.LinkerFlags.JsonSerialized">
             <summary>
             Flags for a member that is JSON (de)serialized.

diff --git a/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteCustomized.razor b/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteCustomized.razor
@@ -37,15 +37,15 @@
         The maximum number of selected items has been reached.
     </MaximumSelectedOptionsMessage>
 
-    @* Content display at the top of the the Popup area *@
+    @* Content display at the top of the Popup area *@
     <HeaderContent>
         <FluentLabel Color="Color.Accent"
                      Style="padding: 8px; font-size: 11px; border-bottom: 1px solid var(--neutral-fill-stealth-hover);">
             Suggested contacts
         </FluentLabel>
     </HeaderContent>
 
-    @* Content display at the bottom of the the Popup area *@
+    @* Content display at the bottom of the Popup area *@
     <FooterContent>
         @if (!context.Any())
         {

diff --git a/examples/Demo/Shared/Pages/Button/ButtonPage.razor b/examples/Demo/Shared/Pages/Button/ButtonPage.razor
@@ -17,7 +17,12 @@
 
 
 <h2>Examples</h2>
-<DemoSection Title="Simple button examples" Component="@typeof(ButtonDefault)"></DemoSection>
+<DemoSection Title="Simple button examples" Component="@typeof(ButtonDefault)">
+    <Description>
+        Although it is possible to use Appearance.Hypertext on a button, this still renders a button due to a change in the underlying web component. 
+        We will remove this specific appearance value in a future version.
+    </Description>
+</DemoSection>
 
 <DemoSection Title="With content and icon" Component="@typeof(ButtonIcon)"></DemoSection>
 

diff --git a/examples/Demo/Shared/Pages/Button/Examples/ButtonIcon.razor b/examples/Demo/Shared/Pages/Button/Examples/ButtonIcon.razor
@@ -1,12 +1,20 @@
-<p>With icon at start</p>
-<FluentButton IconStart="@(new Icons.Regular.Size16.Globe())">
-    Button
-</FluentButton>
-
-<p>With icon at end</p>
-<FluentButton IconEnd="@(new Icons.Regular.Size16.Globe())">
-    Button
-</FluentButton>
+<p>With icon at Start or End</p>
+<FluentStack>
+    <FluentButton IconStart="@(new Icons.Regular.Size16.Globe())">
+        Button
+    </FluentButton>
+    <FluentButton IconStart="@(new Icons.Regular.Size16.Globe())"
+                  Appearance="Appearance.Accent">
+        Button
+    </FluentButton>
+    <FluentButton IconEnd="@(new Icons.Regular.Size16.Globe())">
+        Button
+    </FluentButton>
+    <FluentButton IconEnd="@(new Icons.Regular.Size16.Globe())"
+                  Appearance="Appearance.Accent">
+        Button
+    </FluentButton>
+</FluentStack>
 
 <p>With icon in default slot</p>
 <FluentButton IconEnd="@(new Icons.Regular.Size16.Globe())"
@@ -20,9 +28,19 @@
 </FluentButton>
 
 <p>With icon and loading</p>
-<FluentButton IconStart="@(new Icons.Regular.Size16.ArrowClockwise())" Loading="@loading" OnClick="@StartLoadingAsync">
-    Refresh
-</FluentButton>
+<FluentStack>
+    <FluentButton IconStart="@(new Icons.Regular.Size16.ArrowClockwise())"
+                  Loading="@loading"
+                  OnClick="@StartLoadingAsync">
+        Refresh
+    </FluentButton>
+    <FluentButton IconStart="@(new Icons.Regular.Size16.ArrowClockwise())"
+                  Appearance="Appearance.Accent"
+                  Loading="@loading"
+                  OnClick="@StartLoadingAsync">
+        Refresh
+    </FluentButton>
+</FluentStack>
 
 @code {
 

diff --git a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor
@@ -83,6 +83,11 @@
             This grid is using a 'sticky' header (i.e. the header is always visible when scrolling). The buttons in the last column disappear under the header when scrolling. 
             In this example they don't relly do anything more than writting a message in the console log'
         </p>
+        <p>
+            The second column has a custom <code>Style</code> parameter set and applied to it. The 4th column has it's <code>Tooltip</code> 
+            parameter set to true. This will show the full content of the cell when hovering over it. See the 'Razor' tab for how these 
+            parameters have been applied.
+        </p>
     </Description>
 </DemoSection>
 
@@ -174,8 +179,17 @@
 </DemoSection>
 
 <h2>API Documentation</h2>
-<ApiDocumentation Component="typeof(FluentDataGridCell<>)" GenericLabel="TGridItem" />
+<ApiDocumentation Component="typeof(FluentDataGrid<>)" GenericLabel="TGridItem" />
 
-<ApiDocumentation Component="typeof(FluentDataGridRow<>)" GenericLabel="TGridItem" />
 
-<ApiDocumentation Component="typeof(FluentDataGrid<>)" GenericLabel="TGridItem" />
+<ApiDocumentation Component="typeof(PropertyColumn<,>)" GenericLabel="TGridItem, TProp" InstanceTypes="@(new[] { typeof(string), typeof(string)  })" />
+
+<ApiDocumentation Component="typeof(TemplateColumn<>)" GenericLabel="TGridItem"  />
+
+<div class="demopanel">
+    <p>
+        <strong>The <code>FluentDataGridRow</code> and <code>FluentDataGridCell</code> API's are usually not used directely </strong>
+    </p>
+</div>
+<ApiDocumentation Component="typeof(FluentDataGridRow<>)" GenericLabel="TGridItem" />
+<ApiDocumentation Component="typeof(FluentDataGridCell<>)" GenericLabel="TGridItem" />
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridRemoteData.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridRemoteData.razor
@@ -6,9 +6,9 @@
 <div style="height: 434px; overflow:auto;" tabindex="-1">
     <FluentDataGrid ItemsProvider="foodRecallProvider" Virtualize="true" ItemSize="46" GenerateHeader="GenerateHeaderOption.Sticky" TGridItem="FoodRecall" >
         <PropertyColumn Title="ID" Property="@(c => c!.Event_Id)" />
-        <PropertyColumn Property="@(c => c!.State)" />
+        <PropertyColumn Property="@(c => c!.State)" Style="color:burlywood" />
         <PropertyColumn Property="@(c => c!.City)" />
-        <PropertyColumn Title="Company" Property="@(c => c!.Recalling_Firm)" />
+        <PropertyColumn Title="Company" Property="@(c => c!.Recalling_Firm)" Tooltip="true"/>
         <PropertyColumn Property="@(c => c!.Status)" />
         <TemplateColumn Title="Actions" Align="@Align.End">
             <FluentButton IconEnd="@(new Icons.Regular.Size16.Edit())" OnClick="@(() => DemoLogger.WriteLine("Edit clicked"))" />

diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
@@ -1,11 +1,11 @@
 @inject DataSource Data
 
 
-<FluentDataGrid Items="@FilteredItems" ResizableColumns=true Pagination="@pagination" GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr" RowClass="@rowClass" Style="height: 405px; overflow:auto;">
-    <TemplateColumn Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
+<FluentDataGrid Items="@FilteredItems" ResizableColumns=true Pagination="@pagination" GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr" RowClass="@rowClass" RowStyle="@rowStyle" Style="height: 405px; overflow:auto;">
+    <TemplateColumn Tooltip="true" Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
         <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)" />
     </TemplateColumn>
-    <PropertyColumn Property="@(c => c.Name)" Sortable="true">
+    <PropertyColumn Property="@(c => c.Name)" Sortable="true" Tooltip="true" Title="Name of the country">
         <ColumnOptions>
             <div class="search-box">
                 <FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" AfterBindValue="HandleClear" Placeholder="Country name..." />
@@ -37,7 +37,9 @@
         .ByDescending(x => x.Medals.Gold)
         .ThenDescending(x => x.Medals.Silver)
         .ThenDescending(x => x.Medals.Bronze);
-    Func<Country, string> rowClass = x => x.Name.StartsWith("A") ? "highlighted-row" : string.Empty;
+
+    Func<Country, string?> rowClass = x => x.Name.StartsWith("A") ? "highlighted-row" : null;
+    Func<Country, string?> rowStyle = x => x.Name.StartsWith("Au") ? "background-color: var(--highlight-bg);" : null;
 
     IQueryable<Country>? FilteredItems => items?.Where(x => x.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));