[dev-v5] FluentTimePicker (#4216)

* Add first version of FluentTimePicker

* Add Clock icon

* Add a ClearValue method and call it when the user press Delete

* Add type of time object

* Refactoring and update doc

* Add native mode (to finish)

* Update TryParse

* Add Attribute in shadow

* fix combo example

* Update doc

* Rename parameter to OptionSelectedComparer

* Fix global Unit Tests

* Add Unit Tests

* Add Unit Tests

* Add Unit Tests

* Add Unit Tests

* Update PR comments

* Add important note

Author: dvoituron

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/DatePicker/Examples/DatePickerCulture.razor

@@ -10,7 +10,7 @@
     </div>
 
     <FluentDatePicker Label="@($"Culture {SelectedCulture.DisplayName}")"
-                      Culture="SelectedCulture"
+                      Culture="@SelectedCulture"
                       @bind-Value="@SelectedValue" />
 
     <FluentDatePicker Label="Current culture"

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/DatePicker/FluentDatePicker.md

@@ -15,10 +15,10 @@ and to set the date format displayed in the input field.
 
 ## Views
 
-The DatePicker can be displayed in different views: day, month, and year.  
+The DatePicker can be displayed in different views: day, month, and year.
 The user can switch between these views using the title item: the month name or the year number.
 
-{{ DatePickerDefault }} 
+{{ DatePickerDefault }}
 
 ## DoubleClickToDate
 
@@ -50,18 +50,16 @@ The `native` rendering style uses the default browser styles.
 This mode is useful when you want to use a very simple DatePicker with a **mobile device**.
 In this case, the mobile picker will be used. This could be useful to use the native Android or iOS date picker.
 
-> [!WARNING]
-> 
-> This mode is very limited in features and does not support the UI customization (`DisabledDateFunc`, `DaysTemplate`, ...).
+> [!WARNING] This mode is very limited in features and does not support the UI customization (`DisabledDateFunc`, `DaysTemplate`, ...).
 > The following parameters are ignored: `Culture`, `DayFormat`, `DisabledDateFunc`, `DisabledCheckAllDaysOfMonthYear`,
 > `DisabledSelectable`, `DaysTemplate`, `PickerMonthChanged`.
 
 {{ DatePickerRendering }}
 
 ## Value type
 
-The **FluentCalendar** and **FluentDatePicker** components are a generic components, so you can use it with date types such as `DateTime?`, `DateTime`, `DateOnly?` or `DateOnly`.  
-Blazor will automatically infer the type based on the value you provide to the `Value` or `SelectedDates` parameters.  
+The **FluentCalendar** and **FluentDatePicker** components are a generic components, so you can use it with date types such as `DateTime?`, `DateTime`, `DateOnly?` or `DateOnly`.
+Blazor will automatically infer the type based on the value you provide to the `Value` or `SelectedDates` parameters.
 You can also explicitly set the type using the generic type parameter: `TValue` (i.e. `TValue="DateOnly?"`).
 
 {{ CalendarTypes }}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/TimePicker/Examples/TimePickerCulture.razor

@@ -0,0 +1,29 @@
+@using System.Globalization
+
+<FluentStack Wrap="true" HorizontalGap="64px">
+
+    <div style="width: 100%;">
+        <FluentSelect Label="Select Culture"
+                      Items="@AllCultures"
+                      OptionText="@(item => $"{item.DisplayName} [{item.Name}]")"
+                      @bind-Value="@SelectedCulture" />
+    </div>
+
+    <FluentTimePicker Label="@($"Culture {SelectedCulture.DisplayName}")"
+                      Culture="@SelectedCulture"
+                      @bind-Value="@SelectedValue" />
+
+	<FluentTimePicker Label="Current culture"
+                      @bind-Value="@SelectedValue" />  
+</FluentStack>
+
+@code
+{
+    private DateTime? SelectedValue = null;
+    private CultureInfo[] AllCultures = CultureInfo.GetCultures(CultureTypes.AllCultures)
+                                                   .Where(i => i.IsNeutralCulture)
+                                                   .OrderBy(i => i.DisplayName)
+                                                   .ToArray();
+    private CultureInfo SelectedCulture = new CultureInfo("fa");
+}
+

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/TimePicker/Examples/TimePickerDefault.razor

@@ -0,0 +1,12 @@
+<div>
+	<b>Selected time:</b> @(SelectedValue?.ToString("yyyy-MM-dd HH:mm"))
+</div>
+
+<FluentTimePicker Label="Meeting time"
+                  DisabledTimeFunc="@(date => date?.Hour == 12)"
+                  @bind-Value="@SelectedValue" />
+
+@code
+{
+	DateTime? SelectedValue;
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/TimePicker/Examples/TimePickerRendering.razor

@@ -0,0 +1,12 @@
+<div>
+    <b>Selected Time:</b> @(SelectedValue?.ToString("yyyy-MM-dd HH:mm"))
+</div>
+
+<FluentTimePicker Label="Meeting time"
+                  RenderStyle="DatePickerRenderStyle.Native"
+                  @bind-Value="@SelectedValue" />
+
+@code
+{
+    DateTime? SelectedValue; // = DateTime.Today.AddHours(14);
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/TimePicker/Examples/TimePickerTypes.razor

@@ -0,0 +1,34 @@
+<FluentStack Wrap="true" HorizontalGap="24px">
+    <FluentTimePicker Label="DateTime?"
+                      @bind-Value="@NullableDateTime"
+                      Message="@NullableDateTime?.ToString("yyyy-MM-dd HH:mm")"
+                      MessageCondition="@FluentFieldCondition.Always" />
+
+    <FluentTimePicker Label="DateTime"
+                      @bind-Value="@DateTime"
+                      Message="@DateTime.ToString("yyyy-MM-dd HH:mm")"
+                      MessageCondition="@FluentFieldCondition.Always" />
+
+    <FluentTimePicker Label="TimeOnly?"
+                      @bind-Value="@NullableTimeOnly"
+                      Message="@NullableTimeOnly?.ToString("HH:mm")"
+                      MessageCondition="@FluentFieldCondition.Always" />
+
+    <FluentTimePicker Label="TimeOnly"
+                      @bind-Value="@TimeOnly"
+                      Message="@TimeOnly.ToString("HH:mm")"
+                      MessageCondition="@FluentFieldCondition.Always" />
+
+</FluentStack>
+
+@code
+{
+    private DateTime? NullableDateTime;
+    private DateTime DateTime = Now;
+    private TimeOnly? NullableTimeOnly;
+    private TimeOnly TimeOnly = TimeOnly.FromDateTime(Now);
+
+    // Return the time "4pm" with no minutes/seconds component
+    // To ensure that the TimePicker can select the current time
+    private static DateTime Now => DateTime.Today.AddHours(16);
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/TimePicker/FluentTimePicker.md

@@ -0,0 +1,75 @@
+---
+title: TimePicker
+order: 0003
+route: /DateTime/TimePicker
+---
+
+# TimePicker
+
+**FluentTimePicker** offers a control that's optimized for selecting a time from a
+drop-down list or using free-form input to select a predefined time.
+If the user inputs an invalid time, the field's content will be deleted when it losses focus.
+
+You can use the `Culture` parameter to display the time in different format patterns;
+and to set the time format displayed in the input field.
+
+**Important**
+
+By default, **FluentTimePicker** displays a list of **predefined** times, ranging from `StartHour` 8:00 a.m. to `EndHour` 6:00 p.m. in 15-minute `Increment`.
+You can customize these parameters to fit your requirements.  
+If you want the user to be able **to enter any time** (any hour or any minute), you must enable the mode `RenderStyle="Native"`.
+
+## Default
+
+The TimePicker allows users to select a time value: `<FluentTimePicker @bind-Value="@SelectedValue" />`
+
+{{ TimePickerDefault }}
+
+When you bind a DateTime value to the TimePicker, the date part is ignored in the input field.
+But the date part is preserved in the bound value.
+For nullable DateTime (`DateTime?`), the value will be deleted when the user clears the input field
+by using `Delete` key.
+
+## Culture
+
+You can set the culture of the TimePicker to display the hours and minutes in different
+formats. Use the `Culture` parameter to set the desired time format.
+We are using the `Culture.DateTimeFormat.ShortTimePattern` property to display the time with the correct pattern (e.g. `HH:mm`).
+
+Example: `Culture="@(new CultureInfo("fr"))"` will display the time in French (`HH:mm`).
+
+{{ TimePickerCulture }}
+
+## RenderStyle
+
+The TimePicker can be rendered in different modes: `FluentUI`, `Native`.
+
+The `FluentUI` rendering style uses the Fluent UI styles and components.
+This mode provides a consistent look and feel with other Fluent UI components.
+This mode provides all the features of the component.
+
+The `Native` rendering style uses the default browser styles.
+This mode is useful when you want to use a very simple TimePicker with a **mobile device**.
+In this case, the mobile picker will be used. This could be useful to use the native Android or iOS date picker.
+
+> [!WARNING] This mode is very limited in features and does not support the UI customization.
+> The following parameters are ignored: `Culture`, `StartHour`, `EndHour`, `Increment`,`DisabledTimeFunc`.
+
+{{ TimePickerRendering }}
+
+[!NOTE] Active HTML form controls like `<input type="time">` have limited styling capabilities.
+The **clock icon** is part of the browser's internal implementation and is generally not affected by CSS styling, including **dark mode** styles.
+
+## Value type
+
+The **FluentTimePicker** component is a generic component, so you can use it with date types such as `DateTime?`, `DateTime`, `TimeOnly?` or `TimeOnly`.
+Blazor will automatically infer the type based on the value you provide to the `Value` parameters.
+You can also explicitly set the type using the generic type parameter: `TValue` (i.e. `TValue="TimeOnly?"`).
+
+{{ TimePickerTypes }}
+
+## API FluentTimePicker
+
+{{ API Type=FluentTimePicker<DateTime> }}
+
+> [!NOTE] The `Width` parameter is not yet developed.

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Combobox/Examples/ComboboxDefault.razor

@@ -2,8 +2,8 @@
                 TOption="@SampleData.Olympics2024.Country"
                 Placeholder="Select your countries"
                 Multiple="true"
-                OptionText="@(i => i.Name)"
-                OptionValue="@(i => i.Code)"
+                OptionText="@(i => i?.Name)"
+                OptionValue="@(i => i?.Code)"
                 Items="@Countries"
                 @bind-SelectedItems="@SelectedCountries">
                 <FreeOption>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Combobox/FluentCombobox.md

@@ -58,6 +58,8 @@ See a similar example on the [FluentSelect](/List/Select#customize-the-items) pa
 
 {{ API Type=FluentCombobox }}
 
+> [!NOTE] The `Width` parameter is not yet implemented.
+
 ## API FluentOption
 
 {{ API Type=FluentOption }}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Select/FluentSelect.md

@@ -91,6 +91,8 @@ If you have a very large number of items, you should use the **FluentAutocomplet
 
 {{ API Type=FluentSelect }}
 
+> [!NOTE] The `Width` parameter is not yet implemented.
+
 ## API FluentOption
 
 {{ API Type=FluentOption }}