Skip to content

[Demo] Date and Autocomplete components to Forms section #2330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dvoituron merged 4 commits into from
Jul 5, 2024
Merged

[Demo] Date and Autocomplete components to Forms section #2330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
053711d
Move Date and Autocomplete components for Forms section
dvoituron Jul 5, 2024
188eece
Move Autocomplete under List section
dvoituron Jul 5, 2024
f40f6cc
Merge branch 'dev' into users/dvoituron/not-fully-editform
vnbaaij Jul 5, 2024
e96c5dd
Merge branch 'dev' into users/dvoituron/not-fully-editform
dvoituron Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions examples/Demo/Shared/Pages/DateTimes/DateTimesPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@

<h1>Date & Time</h1>

<blockquote>
@(new MarkupString(DemoNavProvider.EditFormOffIcon))
The <b>FluentCalendar</b> and <b>FluentDatePicker</b> components are not yet fully compatible with the <code>EditForm</code> and <code>FluentEditForm</code> elements.
Some functionalities, such as error messages, the requirement message or the validation messages are missing.
</blockquote>

<p>
The <code>&lt;FluentCalendar&gt;</code> is an implementation of a month calendar display leveraging the Fluent UI design system.
It allows for setting selected and/or disabled dates and can handle a click on a day event (if not <code>ReadOnly</code>)
Expand Down
6 changes: 6 additions & 0 deletions examples/Demo/Shared/Pages/List/Autocomplete/AutocompletePage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@

<h1>Autocomplete</h1>

<blockquote>
@(new MarkupString(DemoNavProvider.EditFormOffIcon))
The <b>FluentAutocomplete</b> component is not yet fully compatible with the <code>EditForm</code> and <code>FluentEditForm</code> elements.
Some functionalities, such as error messages, the requirement message or the validation messages are missing.
</blockquote>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(AutocompleteDefault)" />
Expand Down
4 changes: 2 additions & 2 deletions examples/Demo/Shared/Shared/DemoNavMenuItem.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
<FluentNavLink Icon="@Value.Icon" Href="@Value.Href" Match="@Value.Match">
@if (Value.Match is NavLinkMatch.All)
{
<h3>@Value.Title</h3>
<h3>@(new MarkupString(Value.Title))</h3>
}
else
{
@Value.Title
@(new MarkupString(Value.Title))
}
</FluentNavLink>
break;
Expand Down
22 changes: 12 additions & 10 deletions examples/Demo/Shared/Shared/DemoNavProvider.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ namespace FluentUI.Demo.Shared;

public class DemoNavProvider
{
internal const string EditFormOffIcon = "<svg style=\"width: 12px; fill: var(--neutral-foreground-rest);\" focusable=\"false\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><title>This component is not yet compatible with the EditForm.</title><!--!--><path d=\"M5.8 6.5 1.14 1.85a.5.5 0 1 1 .7-.7l13 13a.5.5 0 0 1-.7.7L9.5 10.21l-3.14 3.13c-.37.38-.84.64-1.35.78l-3.39.86a.5.5 0 0 1-.6-.6l.86-3.39c.14-.51.4-.98.78-1.35L5.79 6.5Zm3 3L6.5 7.2l-3.14 3.14c-.24.25-.42.56-.5.9l-.67 2.57 2.57-.66c.34-.1.65-.27.9-.51L8.79 9.5Zm3.24-3.25-1.83 1.84.7.7 3.33-3.32a2.62 2.62 0 0 0-3.71-3.7L7.2 5.08l.7.7 1.84-1.83 2.3 2.29Zm-.8-3.78a1.62 1.62 0 1 1 2.29 2.3l-.78.77-2.3-2.29.79-.78Z\"></path></svg>";

public IReadOnlyList<NavItem> NavMenuItems { get; init; }

public IReadOnlyList<NavItem> FlattenedMenuItems { get; init; }
Expand Down Expand Up @@ -194,6 +196,11 @@ public DemoNavProvider()
icon: new Icons.Regular.Size20.CheckboxChecked(),
title: "Checkbox"
),
new NavLink(
href: "/DateTime",
icon: new Icons.Regular.Size20.CalendarLtr(),
title: $"Date & Time <sup>{EditFormOffIcon}</sup>"
),
new NavLink(
href: "/InputFile",
icon: new Icons.Regular.Size20.ArrowUpload(),
Expand All @@ -206,6 +213,11 @@ public DemoNavProvider()
icon: new Icons.Regular.Size20.List(),
children:
[
new NavLink(
href: "/Autocomplete",
icon: new Icons.Regular.Size20.ArrowAutofitContent(),
title: $"Autocomplete <sup>{EditFormOffIcon}</sup>"
),
new NavLink(
href: "/Combobox",
icon: new Icons.Regular.Size20.BoxEdit(),
Expand Down Expand Up @@ -313,11 +325,6 @@ public DemoNavProvider()
icon: new Icons.Regular.Size20.AppsList(),
title: "AppBar"
),
new NavLink(
href: "/Autocomplete",
icon: new Icons.Regular.Size20.ArrowAutofitContent(),
title: "Autocomplete"
),
new NavGroup(
title: "Badge",
expanded: true,
Expand Down Expand Up @@ -376,11 +383,6 @@ public DemoNavProvider()
icon: new Icons.Regular.Size20.Grid(),
title: "Data grid"
),
new NavLink(
href: "/DateTime",
icon: new Icons.Regular.Size20.CalendarLtr(),
title: "Date & Time"
),
new NavLink(
href: "/Dialog",
icon: new Icons.Regular.Size20.AppGeneric(),
Expand Down