Skip to content

Commit

Permalink
Merge branch 'dev' into Migration-Guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anu6is
Anu6is authored Jan 10, 2025
2 parents bf3e7c1 + ab88246 commit 1668637
Show file tree
Hide file tree
Showing 21 changed files with 396 additions and 40 deletions.
15 changes: 14 additions & 1 deletion src/MudBlazor.Docs/Pages/Components/Autocomplete/AutocompletePage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,19 @@
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="DropdownSettings">
<Description>
This component uses <MudLink Href="/components/popover">MudPopover</MudLink>
to place its list of items in combination with <MudLink Href="/components/overlay">MudOverlay</MudLink>.
Some of these settings can be controlled with <CodeInline>DropdownSettings</CodeInline>,
which contain defaults for the <CodeInline>MudPopover</CodeInline> appearance and behavior.
<MudLink Color="Color.Secondary" Href="/components/popover#dropdownsettings">
Read more on popover's page.
</MudLink>
</Description>
</SectionHeader>
</DocsPageSection>

</DocsPageContent>
</DocsPage>

15 changes: 14 additions & 1 deletion src/MudBlazor.Docs/Pages/Components/Menu/MenuPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,8 +190,21 @@
<MenuAdvancedPopoverExample />
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="DropdownSettings">
<Description>
This component uses <MudLink Href="/components/popover">MudPopover</MudLink>
to place its list of items in combination with <MudLink Href="/components/overlay">MudOverlay</MudLink>.
Some of these settings can be controlled with <CodeInline>DropdownSettings</CodeInline>,
which contain defaults for the <CodeInline>MudPopover</CodeInline> appearance and behavior.
<MudLink Color="Color.Secondary" Href="/components/popover#dropdownsettings">
Read more on popover's page.
</MudLink>
</Description>
</SectionHeader>
</DocsPageSection>
</SectionSubGroups>
</DocsPageSection>
</DocsPageContent>
</DocsPage>

146 changes: 146 additions & 0 deletions src/MudBlazor.Docs/Pages/Components/Popover/Examples/PopoverDropdownSettingsExample.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
@namespace MudBlazor.Docs.Examples

<MudGrid>
<MudItem md="4">
<MudSelect T="string"
Label="MudSelect"
DropdownSettings="@_dropdownSettings"
AnchorOrigin="@_anchor"
TransformOrigin="@_transform"
RelativeWidth="_dropdownWidth"
Variant="Variant.Outlined"
AdornmentIcon="@Icons.Material.Filled.Search"
AdornmentColor="Color.Primary">
<MudSelectItem Value="@("foo")">Foo</MudSelectItem>
<MudSelectItem Value="@("bar")">Bar</MudSelectItem>
<MudSelectItem Value="@("bar")">Lorem ipsum dolor sit amet, consectetur adipiscing elit</MudSelectItem>
</MudSelect>
</MudItem>

<MudItem md="4"
Class="d-flex justify-center align-center">
<MudMenu Label="MudMenu"
Variant="Variant.Filled"
Color="Color.Primary"
DropdownSettings="@_dropdownSettings"
AnchorOrigin="@_anchor"
TransformOrigin="@_transform"
RelativeWidth="_dropdownWidth">
<MudMenuItem Label="Enlist" />
<MudMenuItem Label="Barracks" />
<MudMenuItem Label="Armory" />
<MudMenuItem Label="The quick brown fox jumps over the lazy dog" />
</MudMenu>
</MudItem>

<MudItem md="4">
<MudAutocomplete SearchFunc="Search"
Variant="Variant.Outlined"
Label="MudAutocomplete"
DropdownSettings="@_dropdownSettings"
AnchorOrigin="@_anchor"
TransformOrigin="@_transform"
RelativeWidth="_dropdownWidth" />
</MudItem>

<MudItem md="1" />

<MudItem md="2"
Class="d-flex align-center justify-center">
<MudSwitch @bind-Value="@_fixed"
Label="Fixed"
LabelPlacement="Placement.Right" />
</MudItem>

<MudItem md="2">
<MudSelect T="Origin"
Label="Anchor Origin"
@bind-Value="@_anchor"
DropdownSettings="@_dropdownSettings">
<MudSelectItem Value="@Origin.TopLeft">Top Left</MudSelectItem>
<MudSelectItem Value="@Origin.TopCenter">Top Center</MudSelectItem>
<MudSelectItem Value="@Origin.TopRight">Top Right</MudSelectItem>
<MudSelectItem Value="@Origin.BottomLeft">Bottom Left</MudSelectItem>
<MudSelectItem Value="@Origin.BottomCenter">Bottom Center</MudSelectItem>
<MudSelectItem Value="@Origin.BottomRight">Bottom Right</MudSelectItem>
<MudSelectItem Value="@Origin.CenterLeft">Center Left</MudSelectItem>
<MudSelectItem Value="@Origin.CenterCenter">Center Center</MudSelectItem>
<MudSelectItem Value="@Origin.CenterRight">Center Right</MudSelectItem>
</MudSelect>
</MudItem>

<MudItem md="2">
<MudSelect T="Origin"
Label="Transform Origin"
@bind-Value="@_transform">
<MudSelectItem Value="@Origin.TopLeft">Top Left</MudSelectItem>
<MudSelectItem Value="@Origin.TopCenter">Top Center</MudSelectItem>
<MudSelectItem Value="@Origin.TopRight">Top Right</MudSelectItem>
<MudSelectItem Value="@Origin.BottomLeft">Bottom Left</MudSelectItem>
<MudSelectItem Value="@Origin.BottomCenter">Bottom Center</MudSelectItem>
<MudSelectItem Value="@Origin.BottomRight">Bottom Right</MudSelectItem>
<MudSelectItem Value="@Origin.CenterLeft">Center Left</MudSelectItem>
<MudSelectItem Value="@Origin.CenterCenter">Center Center</MudSelectItem>
<MudSelectItem Value="@Origin.CenterRight">Center Right</MudSelectItem>
</MudSelect>
</MudItem>

<MudItem md="2">
<MudSelect T="OverflowBehavior"
Label="Overflow Behavior"
@bind-Value="@_overflowBehavior">
<MudSelectItem Value="@OverflowBehavior.FlipNever">Flip Never</MudSelectItem>
<MudSelectItem Value="@OverflowBehavior.FlipOnOpen">Flip On Open</MudSelectItem>
<MudSelectItem Value="@OverflowBehavior.FlipAlways">Flip Always</MudSelectItem>
</MudSelect>
</MudItem>

<MudItem md="2">
<MudSelect T="DropdownWidth"
Label="Dropdown Width"
@bind-Value="@_dropdownWidth">
<MudSelectItem Value="@DropdownWidth.Relative">Relative (equal to activator width)</MudSelectItem>
<MudSelectItem Value="@DropdownWidth.Adaptive">Adaptive (min = activator width)</MudSelectItem>
<MudSelectItem Value="@DropdownWidth.Ignore">Ignore (independent width)</MudSelectItem>
</MudSelect>
</MudItem>

</MudGrid>


@code {

private Origin _anchor = Origin.BottomLeft;
private Origin _transform = Origin.TopLeft;
private bool _fixed = false;
private OverflowBehavior _overflowBehavior = OverflowBehavior.FlipOnOpen;
private DropdownWidth _dropdownWidth = DropdownWidth.Relative;

private DropdownSettings _dropdownSettings => new DropdownSettings() { Fixed = _fixed, OverflowBehavior = _overflowBehavior, };

private string[] _states =
{
"Alabama", "Alaska", "Arizona", "Arkansas", "California",
"Colorado", "Connecticut", "Delaware", "Florida", "Georgia",
"Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas",
"Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts",
"Michigan", "Minnesota", "Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico",
"New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma",
"Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota",
"Tennessee", "Texas", "Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin", "Wyoming"
};

private async Task<IEnumerable<string>> Search(string value, CancellationToken token)
{
// In real life use an asynchronous function for fetching data from an api.
await Task.Delay(5, token);

// if text is null or empty, show complete list
if (string.IsNullOrEmpty(value))
return _states;

return _states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase));
}
}
26 changes: 26 additions & 0 deletions src/MudBlazor.Docs/Pages/Components/Popover/Examples/PopoverRelativeWidthExample.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
@namespace MudBlazor.Docs.Examples


<div style="width: 250px;">
<MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth OnClick="@ToggleOpen">Open</MudButton>
<MudPopover Open="@_open" Class="pa-4" Fixed="true" RelativeWidth="@_dropdownWidth" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
<MudText>Content of the popover can be anything.</MudText>
<MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Close</MudButton>
</MudPopover>
</div>

<div style="width: 250px; margin-left: 150px;">
<MudSelect T="DropdownWidth" Label="Dropdown Width" @bind-Value="@_dropdownWidth">
<MudSelectItem Value="@DropdownWidth.Relative">Relative</MudSelectItem>
<MudSelectItem Value="@DropdownWidth.Adaptive">Adaptive</MudSelectItem>
<MudSelectItem Value="@DropdownWidth.Ignore">Ignore</MudSelectItem>
</MudSelect>
</div>

@code{
private bool _open;

private DropdownWidth _dropdownWidth = DropdownWidth.Ignore;

private void ToggleOpen() => _open = !_open;
}
48 changes: 45 additions & 3 deletions src/MudBlazor.Docs/Pages/Components/Popover/PopoverPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +47,63 @@
You can have any content within a popover like with any other Blazor component. The position of the popover is updated automatically
</Description>
</SectionHeader>
<SectionContent Codes="@(new[] {new CodeFile("Page.razor", "PopoverComplexContentExample"), new CodeFile("Component.razor", "PopoverDynamicContentExample")})">
<SectionContent Codes="@(new[] {new CodeFile("Page.razor", "PopoverComplexContentExample"), new CodeFile("Component.razor", "PopoverDynamicContentExample")})" ShowCode="false">
<PopoverComplexContentExample />
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Popover RelativeWidth">
<Description>
Popovers can be placed relative to their Activator or Parent. The <CodeInline>RelativeWidth</CodeInline> is an enum <CodeInline>DropdownWidth</CodeInline>,
with a default value of <CodeInline>DropdownWidth.Ignore</CodeInline> which means the width is not associated to the Activator Width and can grow or shrink as needed.
Additional options are <CodeInline>DropdownWidth.Relative</CodeInline> which constrains the width of the popover to be the same size as the Activator Width and cannot grow.
<CodeInline>DropdownWidth.Adaptive</CodeInline> which constrains the minimum width of the popover to be the same size as the Activator / Parent but can grow wider as needed.
</Description>
</SectionHeader>
<SectionContent Code="@nameof(PopoverRelativeWidthExample)" ShowCode="false">
<PopoverRelativeWidthExample />
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Popover Inception">
<Description>
Popovers can be placed within elements that are using popover for itself. Like tooltips that are placed inside a menu.
</Description>
</SectionHeader>
<SectionContent Code="@nameof(PopoverInceptionExampleExample)">
<SectionContent Code="@nameof(PopoverInceptionExampleExample)" ShowCode="false">
<PopoverInceptionExampleExample />
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="DropdownSettings">
<Description>
Some components use <MudLink Href="/components/popover">MudPopover</MudLink> to place their list of items in combination with <MudLink Href="/components/overlay">MudOverlay</MudLink>. Some of these
settings can be controlled with <CodeInline>DropdownSettings</CodeInline> which contain defaults for the <CodeInline>MudPopover</CodeInline>
appearance and behavior. Default settings for <CodeInline>DropdownSettings</CodeInline> are:
<ul class="ml-2">
<li><CodeInline>Fixed</CodeInline> = <CodeInline>false</CodeInline> - Displays the dropdown popover in a fixed position, even while scrolling.</li>
<li><CodeInline>OverflowBehavior</CodeInline> = <CodeInline>OverflowBehavior.FlipOnOpen</CodeInline> - The behavior applied when there is not enough space for the dropdown popover to be visible.</li>
</ul>
<br/>Some settings reside on the <CodeInline>MudMenu</CodeInline> component itself due to differences between different types of dropdowns. <br />These settings and their defaults are:
<ul class="ml-2">
<li><CodeInline>RelativeWidth</CodeInline> = <CodeInline>DropdownWidth.Ignore</CodeInline> - The width of the dropdown popover is not dependent upon the Activator or Parent.</li>
<li><CodeInline>AnchorOrigin</CodeInline> = <CodeInline>Origin.BottomLeft</CodeInline> - The location where the popover will open from.</li>
<ul class="ml-4">
<li><MudText Typo="Typo.caption">
* AnchorOrigin and TransformOrigin do not have to be set, and if not set will have a default Nested behavior that can be overridden.
</MudText></li>
</ul>
<li><CodeInline>TransformOrigin</CodeInline> = <CodeInline>Origin.TopLeft</CodeInline> - The transform origin point for the popover.</li>
</ul>
</Description>
</SectionHeader>
<SectionContent Code="@nameof(PopoverDropdownSettingsExample)" ShowCode="false">
<PopoverDropdownSettingsExample />
</SectionContent>
</DocsPageSection>

</DocsPageContent>
</DocsPage>
</DocsPage>
15 changes: 14 additions & 1 deletion src/MudBlazor.Docs/Pages/Components/Select/SelectPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,19 @@
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="DropdownSettings">
<Description>
This component uses <MudLink Href="/components/popover">MudPopover</MudLink>
to place its list of items in combination with <MudLink Href="/components/overlay">MudOverlay</MudLink>.
Some of these settings can be controlled with <CodeInline>DropdownSettings</CodeInline>,
which contain defaults for the <CodeInline>MudPopover</CodeInline> appearance and behavior.
<MudLink Color="Color.Secondary" Href="/components/popover#dropdownsettings">
Read more on popover's page.
</MudLink>
</Description>
</SectionHeader>
</DocsPageSection>

</DocsPageContent>
</DocsPage>

2 changes: 1 addition & 1 deletion src/MudBlazor.UnitTests.Viewer/TestComponents/Popover/PopoverPropertyTest.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
Fixed="Fixed"
Class="my-custom-class"
AnchorOrigin="AnchorOrigin"
RelativeWidth="RelativeWidth"
RelativeWidth="DropdownWidth.Relative"
TransformOrigin="TransformOrigin"
OverflowBehavior="OverflowBehavior"
Duration="Duration">
Expand Down
19 changes: 14 additions & 5 deletions src/MudBlazor.UnitTests.Viewer/TestComponents/Select/SelectPopoverRelativeWidthTest.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<MudStack Row>
<div class="pa-4 d-inline-block" style="width:125px;">
<MudSelect @bind-Value="@_selected" Variant="Variant.Outlined" FullWidth Dense id="restricted-select" PopoverClass="restricted">
<MudSelect @bind-Value="@_selected" Variant="Variant.Outlined" Dense id="restricted-select" PopoverClass="restricted">
@foreach (var value in _values)
{
<MudSelectItem T="string" Value="@value">@value</MudSelectItem>
Expand All @@ -11,7 +11,7 @@
</div>

<div class="pa-4 d-inline-block" style="width:125px;">
<MudSelect @bind-Value=_selected Variant="Variant.Outlined" Dense id="expanded-select" PopoverClass="expanded">
<MudSelect @bind-Value=_selected Variant="Variant.Outlined" RelativeWidth="DropdownWidth.Adaptive" Dense id="expanded-select" PopoverClass="expanded">
@foreach (var value in _values)
{
<MudSelectItem T="string" Value="@value">@value</MudSelectItem>
Expand All @@ -22,7 +22,7 @@

<MudStack>
<div class="pa-4 d-inline-block" style="width:400px;">
<MudSelect @bind-Value="@_selected" Variant="Variant.Outlined" FullWidth Dense id="select-fit-1" PopoverClass="fit1">
<MudSelect @bind-Value="@_selected" Variant="Variant.Outlined" Dense id="select-fit-1" PopoverClass="fit1">
@foreach (var value in _values)
{
<MudSelectItem T="string" Value="@value">@value</MudSelectItem>
Expand All @@ -31,7 +31,16 @@
</div>

<div class="pa-4 d-inline-block" style="width:400px;">
<MudSelect @bind-Value="@_selected" Variant="Variant.Outlined" Dense id="select-fit-2" PopoverClass="fit2">
<MudSelect @bind-Value="@_selected" Variant="Variant.Outlined" RelativeWidth="DropdownWidth.Adaptive" Dense id="select-fit-2" PopoverClass="fit2">
@foreach (var value in _values)
{
<MudSelectItem T="string" Value="@value">@value</MudSelectItem>
}
</MudSelect>
</div>

<div class="pa-4 d-inline-block" style="width:400px;">
<MudSelect @bind-Value="@_selected" Variant="Variant.Outlined" RelativeWidth="DropdownWidth.Ignore" Dense id="select-fit-2" PopoverClass="fit2">
@foreach (var value in _values)
{
<MudSelectItem T="string" Value="@value">@value</MudSelectItem>
Expand All @@ -42,7 +51,7 @@

@code {
public static string __description__ = @"Row 1 - limited size field - (1) Match parent & (2) Expanded |
Row 2 & 3 - Oversized field - (1) Match parent & (2) Match parent";
Row 2 & 3 & 4 - Oversized field - (1) Match parent & (2) Match parent & (3) Ignore parent";

private string? _selected;
private readonly string[] _values =
Expand Down
2 changes: 1 addition & 1 deletion src/MudBlazor.UnitTests/Components/PopoverTests.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ public void MudPopover_DefaultValues()
popover.Fixed.Should().BeFalse();
popover.AnchorOrigin.Should().Be(Origin.TopLeft);
popover.TransformOrigin.Should().Be(Origin.TopLeft);
popover.RelativeWidth.Should().BeNull();
popover.RelativeWidth.Should().Be(DropdownWidth.Ignore);
popover.OverflowBehavior.Should().Be(OverflowBehavior.FlipOnOpen);
popover.Duration.Should().Be(251);
}
Expand Down
Loading

0 comments on commit 1668637

Please sign in to comment.