merge main

Directory.Build.props

@@ -10,7 +10,7 @@
 	 <RepositoryType>git</RepositoryType>
 	 <PublishRepositoryUrl>true</PublishRepositoryUrl>
 	 <SolutionDir>$(MSBuildThisFileDirectory)</SolutionDir>
-	 <VersionPrefix>2.4.1</VersionPrefix>
+	 <VersionPrefix>2.4.2</VersionPrefix>
 	 <VersionSuffix></VersionSuffix> 
 	 <AccelerateBuildsInVisualStudio>true</AccelerateBuildsInVisualStudio>
  </PropertyGroup>

WHATSNEW.md

@@ -1,4 +1,8 @@
-## V2.4.1
+## V2.4.2
+- Fix [#72](https://github.com/microsoft/fluentui-blazor/pull/72): rows attribute in TextArea.
+- Fix [#466](https://github.com/microsoft/fluentui-blazor/pull/466): Divider vertical orientation.
+
+## V2.4.1
 - Fix [#537](https://github.com/microsoft/fluentui-blazor/issues/537): Make SetTotalItemCountAsync in PaginationState public
 - Fix [#539](https://github.com/microsoft/fluentui-blazor/issues/539): Slider bugs
 - Fix [#528](https://github.com/microsoft/fluentui-blazor/issues/537): FluentDesignSystemProvider fixes

examples/FluentUI.Demo.Shared/Pages/Divider/DividerPage.razor

@@ -11,4 +11,6 @@
 
 <h2>Examples</h2>
 
-<DemoSection Title="Usage examples" Component="@typeof(DividerDefault)"></DemoSection>
+<DemoSection Title="Usage examples" Component="@typeof(DividerDefault)"></DemoSection>
+
+<DemoSection Title="Vertical divider" Component="@typeof(DividerVertical)"></DemoSection>

examples/FluentUI.Demo.Shared/Pages/Divider/Examples/DividerDefault.razor

@@ -1,8 +1,20 @@
-<h4>Default</h4>
+<h4>Default</h4>
 <FluentDivider></FluentDivider>
-
+<br />
 <h4>Role="Presentation""</h4>
-<FluentDivider Role="DividerRole.Presentation"></FluentDivider>
+<p>
+    <Stack Orientation="Orientation.Vertical">
+        <span>before divider</span>
+        <FluentDivider Style="width: 100%;" Role="DividerRole.Presentation"></FluentDivider>
+        <span>after divider</span>
+    </Stack>
+</p>
 
 <h4>Role="Separator""</h4>
-<FluentDivider Role="DividerRole.Separator"></FluentDivider>
+<p>
+    <Stack Orientation="Orientation.Vertical">
+        <span>before divider</span>
+        <FluentDivider Style="width: 100%;" Orientation=Orientation.Horizontal Role="DividerRole.Separator"></FluentDivider>
+        <span>after divider</span>
+    </Stack>
+</p>

examples/FluentUI.Demo.Shared/Pages/Divider/Examples/DividerVertical.razor

@@ -0,0 +1,16 @@
+
+<h4>Role="Presentation""</h4>
+
+<Stack Orientation="Orientation.Horizontal" VerticalAlignment="StackVerticalAlignment.Center">
+    <span>before divider</span>
+    <FluentDivider Style="height: 50px;" Role="DividerRole.Presentation" Orientation="Orientation.Vertical"></FluentDivider>
+    <span>after divider</span>
+</Stack>
+
+<h4>Role="Separator""</h4>
+
+<Stack Orientation="Orientation.Horizontal" VerticalAlignment="StackVerticalAlignment.Center">
+    <span>before divider</span>
+    <FluentDivider Style="height: 50px;" Role="DividerRole.Separator" Orientation="Orientation.Vertical"></FluentDivider>
+    <span>after divider</span>
+</Stack>

examples/FluentUI.Demo.Shared/Pages/Index/Index.razor

@@ -6,16 +6,16 @@
 
 <h1>Welcome to the Fluent UI Blazor components library</h1>
 
-<div class="demopanel" style="text-align:center; padding: 2.5rem; margin: 1rem 0;">
+<div class="demopanel" style="text-align:center; padding: 2.5rem; margin: 1rem 0;">	
 	<p>
-		This is the demo and documentation site for version <strong>2.4.1</strong> of the library
+		The next version of the library is almost here!
+		<br />
+		Check out the <a href="https://preview.fluentui-blazor.net/">demo and documentation</a> site for version <strong>3.0.0</strong>.
+		and let us know what you think!
 	</p>
 	<br />
 	<p>
-		The next version of the library is almost here! 
-		<br />
-		Check out the <a href="https://calm-sea-053fa6a03-365.westeurope.3.azurestaticapps.net/">demo and documentation</a> site for the version <strong>3.0.0-RC.1</strong>
-		and let us know what you think!
+		This is the demo and documentation site for version <strong>2.4.2</strong> of the library
 	</p>
 </div>
 

examples/FluentUI.Demo.Shared/Pages/Listbox/Examples/ListboxMultiple.razor

@@ -10,16 +10,16 @@
 
 </p>
 
-<div style="display: block; height: 300px;">
-<label for="people-listbox2">Select persons</label>
-<FluentListbox TOption="Person"
-               Items="@Data.People"
-               Id="people-listbox2"
-               Multiple="true"
-               OptionValue="@(p => p.PersonId.ToString())"
-               OptionText="@(p => p.LastName + ", " + p.FirstName)"
-               @bind-Value="@SelectedValue"
-               @bind-SelectedOptions="@SelectedOptions" />
+<div style="display: block; height: 320px;">
+    <label for="people-listbox2">Select persons</label>
+    <FluentListbox TOption="Person"
+                   Items="@Data.People"
+                   Id="people-listbox2"
+                   Multiple="true"
+                   OptionValue="@(p => p.PersonId.ToString())"
+                   OptionText="@(p => p.LastName + ", " + p.FirstName)"
+    @bind-Value="@SelectedValue"
+    @bind-SelectedOptions="@SelectedOptions" />
 
 </div>
 

examples/FluentUI.Demo.Shared/Pages/Listbox/Examples/ListboxSize.razor

@@ -1,9 +1,9 @@
 <p>
-    <em>Size parameter not working correctly yet!</em> However, the component supports both Height and Width parameters 
+    <em>Size parameter not working correctly yet!</em> However, the component supports Style parameters
     which can be used to determine the size of the displayed listbox
 </p>
 
-<FluentListbox ValueChanged="@(e => listboxValue = e)" Size=7 TOption="string" Height="200px">
+<FluentListbox ValueChanged="@(e => listboxValue = e)" Size=7 TOption="string" Style="width:15rem;">
     <FluentOption Value="AL">Alabama</FluentOption>
     <FluentOption Value="AK">Alaska</FluentOption>
     <FluentOption Value="AZ">Arizona</FluentOption>

examples/FluentUI.Demo.Shared/Pages/TextArea/Examples/TextAreaRowsAndCols.razor

@@ -0,0 +1,12 @@
+<p>
+    12 rows: <br />
+    <FluentTextArea @bind-Value=value1 Rows="12"></FluentTextArea>
+</p>
+<p>
+    60 cols: <br />
+    <FluentTextArea @bind-Value=value2 Cols="60"></FluentTextArea>
+</p>
+@code {
+    string? value1 = "1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12";
+    string? value2;
+}

examples/FluentUI.Demo.Shared/Pages/TextArea/TextAreaPage.razor

@@ -17,6 +17,8 @@
 
 <DemoSection Title="Default" Component="@typeof(TextAreaDefault)"></DemoSection>
 
+<DemoSection Title="Rows and Cols" Component="@typeof(TextAreaRowsAndCols)"></DemoSection>
+
 <DemoSection Title="Displays" Component="@typeof(TextAreaDisplays)"></DemoSection>
 
 <DemoSection Title="States" Component="@typeof(TextAreaStates)"></DemoSection>

examples/FluentUI.Demo.Shared/wwwroot/docs/WhatsNew.md

@@ -1,4 +1,8 @@
-## V2.4.1
+## V2.4.2
+- Fix [#72](https://github.com/microsoft/fluentui-blazor/pull/72): rows attribute in TextArea.
+- Fix [#466](https://github.com/microsoft/fluentui-blazor/pull/466): Divider vertical orientation.
+
+## V2.4.1
 - Fix [#537](https://github.com/microsoft/fluentui-blazor/issues/537): Make SetTotalItemCountAsync in PaginationState public
 - Fix [#539](https://github.com/microsoft/fluentui-blazor/issues/539): Slider bugs
 - Fix [#528](https://github.com/microsoft/fluentui-blazor/issues/537): FluentDesignSystemProvider fixes

examples/FluentUI.Demo.Shared/wwwroot/sources/DividerDefault.razor.txt

@@ -1,8 +1,20 @@
-<h4>Default</h4>
+<h4>Default</h4>
 <FluentDivider></FluentDivider>
-
+<br />
 <h4>Role="Presentation""</h4>
-<FluentDivider Role="DividerRole.Presentation"></FluentDivider>
+<p>
+    <Stack Orientation="Orientation.Vertical">
+        <span>before divider</span>
+        <FluentDivider Style="width: 100%;" Role="DividerRole.Presentation"></FluentDivider>
+        <span>after divider</span>
+    </Stack>
+</p>
 
 <h4>Role="Separator""</h4>
-<FluentDivider Role="DividerRole.Separator"></FluentDivider>
+<p>
+    <Stack Orientation="Orientation.Vertical">
+        <span>before divider</span>
+        <FluentDivider Style="width: 100%;" Orientation=Orientation.Horizontal Role="DividerRole.Separator"></FluentDivider>
+        <span>after divider</span>
+    </Stack>
+</p>

examples/FluentUI.Demo.Shared/wwwroot/sources/DividerVertical.razor.txt

@@ -0,0 +1,16 @@
+
+<h4>Role="Presentation""</h4>
+
+<Stack Orientation="Orientation.Horizontal" VerticalAlignment="StackVerticalAlignment.Center">
+    <span>before divider</span>
+    <FluentDivider Style="height: 50px;" Role="DividerRole.Presentation" Orientation="Orientation.Vertical"></FluentDivider>
+    <span>after divider</span>
+</Stack>
+
+<h4>Role="Separator""</h4>
+
+<Stack Orientation="Orientation.Horizontal" VerticalAlignment="StackVerticalAlignment.Center">
+    <span>before divider</span>
+    <FluentDivider Style="height: 50px;" Role="DividerRole.Separator" Orientation="Orientation.Vertical"></FluentDivider>
+    <span>after divider</span>
+</Stack>

examples/FluentUI.Demo.Shared/wwwroot/sources/ListboxMultiple.razor.txt

@@ -10,16 +10,16 @@
 
 </p>
 
-<div style="display: block; height: 300px;">
-<label for="people-listbox2">Select persons</label>
-<FluentListbox TOption="Person"
-               Items="@Data.People"
-               Id="people-listbox2"
-               Multiple="true"
-               OptionValue="@(p => p.PersonId.ToString())"
-               OptionText="@(p => p.LastName + ", " + p.FirstName)"
-               @bind-Value="@SelectedValue"
-               @bind-SelectedOptions="@SelectedOptions" />
+<div style="display: block; height: 320px;">
+    <label for="people-listbox2">Select persons</label>
+    <FluentListbox TOption="Person"
+                   Items="@Data.People"
+                   Id="people-listbox2"
+                   Multiple="true"
+                   OptionValue="@(p => p.PersonId.ToString())"
+                   OptionText="@(p => p.LastName + ", " + p.FirstName)"
+    @bind-Value="@SelectedValue"
+    @bind-SelectedOptions="@SelectedOptions" />
 
 </div>
 

examples/FluentUI.Demo.Shared/wwwroot/sources/ListboxSize.razor.txt

@@ -1,9 +1,9 @@
 <p>
-    <em>Size parameter not working correctly yet!</em> However, the component supports both Height and Width parameters 
+    <em>Size parameter not working correctly yet!</em> However, the component supports Style parameters
     which can be used to determine the size of the displayed listbox
 </p>
 
-<FluentListbox ValueChanged="@(e => listboxValue = e)" Size=7 TOption="string" Height="200px">
+<FluentListbox ValueChanged="@(e => listboxValue = e)" Size=7 TOption="string" Style="width:15rem;">
     <FluentOption Value="AL">Alabama</FluentOption>
     <FluentOption Value="AK">Alaska</FluentOption>
     <FluentOption Value="AZ">Arizona</FluentOption>

examples/FluentUI.Demo.Shared/wwwroot/sources/TextAreaRowsAndCols.razor.txt

@@ -0,0 +1,12 @@
+<p>
+    12 rows: <br />
+    <FluentTextArea @bind-Value=value1 Rows="12"></FluentTextArea>
+</p>
+<p>
+    60 cols: <br />
+    <FluentTextArea @bind-Value=value2 Cols="60"></FluentTextArea>
+</p>
+@code {
+    string? value1 = "1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12";
+    string? value2;
+}

src/Microsoft.Fast.Components.FluentUI/Components/List/FluentListbox.razor

@@ -2,19 +2,17 @@
 @inherits ListComponentBase<TOption>
 @typeparam TOption
 <CascadingValue Value="@_internalListContext" Name="ListContext" TValue="InternalListContext<TOption>" IsFixed="true">
-    <div style="overflow-y: auto; max-height: @Height; max-width: @Width;">
-        <fluent-listbox @ref=Element
-                        id="@Id"
-                        class="@ClassValue"
-                        style="@StyleValue; width: calc(100% - 8px);"
-                        disabled=@Disabled
-                        size="@Size"
-                        multiple="@Multiple"
-                        selectedOptions="@(SelectedOptions != null && SelectedOptions.Any() ? string.Join(',', SelectedOptions.Select(i => GetOptionValue(i))) : null)"
-                        aria-label="@(!string.IsNullOrWhiteSpace(Title) ? Title : "")"
-                        @onchange="@OnChangedHandlerAsync"
-                        @attributes="AdditionalAttributes">
-                @GetListOptions(Items)
-        </fluent-listbox>
-    </div>
+    <fluent-listbox @ref="Element"
+                    id="@Id"
+                    class="@ClassValue"
+                    style="@StyleValue"
+                    disabled="@Disabled"
+                    size="@Size"
+                    multiple="@Multiple"
+                    selectedOptions="@(SelectedOptions != null && SelectedOptions.Any() ? string.Join(',', SelectedOptions.Select(i => GetOptionValue(i))) : null)"
+                    aria-label="@(!string.IsNullOrWhiteSpace(Title) ? Title : "")"
+                    @onchange="@OnChangedHandlerAsync"
+                    @attributes="AdditionalAttributes">
+        @GetListOptions(Items)
+    </fluent-listbox>
 </CascadingValue>

src/Microsoft.Fast.Components.FluentUI/Components/List/FluentListbox.razor.cs

@@ -5,19 +5,6 @@ namespace Microsoft.Fast.Components.FluentUI;
 [CascadingTypeParameter(nameof(TOption))]
 public partial class FluentListbox<TOption> : ListComponentBase<TOption>
 {
-    /// <summary>
-    /// Width style
-    /// </summary>
-
-    [Parameter]
-    public string Width { get; set; } = "250px";
-
-    /// <summary>
-    /// Height style
-    /// </summary>
-    [Parameter]
-    public string Height { get; set; } = "350px";
-
     /// <summary>
     /// The maximum number of options that should be visible in the listbox scroll area.
     /// </summary>

src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs

@@ -1,6 +1,5 @@
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.AspNetCore.Components;
-using Microsoft.Extensions.Configuration;
 using Microsoft.JSInterop;
 
 namespace Microsoft.Fast.Components.FluentUI.DesignTokens;
@@ -68,7 +67,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
     private async Task InitJSReference()
     {
-        _jsModule ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Microsoft.Fast.Components.FluentUI/js/web-components.min.js");
+        _jsModule ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Microsoft.Fast.Components.FluentUI/js/web-components-v2.5.16.min.js");
     }
 
     /// <summary>

src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js

@@ -144,7 +144,7 @@
 export function beforeStart(options, extensions) {
     var wcScript = document.createElement('script');
     wcScript.type = 'module';
-    wcScript.src = './_content/Microsoft.Fast.Components.FluentUI/js/web-components.min.js';
+    wcScript.src = '/_content/Microsoft.Fast.Components.FluentUI/js/web-components-v2.5.16.min.js';
     wcScript.async = true;
     document.head.appendChild(wcScript);
 }