Skip to content
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.

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

[MenuItem] Add KeepOpen parameter #2852

Merged
merged 2 commits into from
Oct 24, 2024
Merged

[MenuItem] Add KeepOpen parameter #2852

merged 2 commits into from
Oct 24, 2024

Conversation

RikVanHaaren
Copy link
Contributor

@RikVanHaaren RikVanHaaren commented Oct 23, 2024

Pull Request

📖 Description

A feature that adds the option to keep the menu item open after it has been selected. This allows render fragments, such as FluentSwitch or simply the MenuItemRadio, to be changed without needing to re-click. By default, this option will be set to false to avoid any breaking changes.

Below you can see the effect of the feature:
MenuItem

👩‍💻 Reviewer Notes

I want to note that currently the test for the FluentMenuItem component are being skipped with the comment: "Need to figure out how to do this test".

Below is the code I used for testing the feature that you can see in the video:

<FluentSwitch @bind-Value="@_open">Show Default</FluentSwitch>

<FluentMenu @bind-Open="@_open" Anchored="false">
    <FluentMenuItem>Menu item 1</FluentMenuItem>
    <FluentMenuItem>Menu item 2</FluentMenuItem>
    <FluentMenuItem>Menu item 3</FluentMenuItem>
    <FluentDivider></FluentDivider>
    <FluentMenuItem Disabled="true">Default</FluentMenuItem>
    <FluentMenuItem KeepOpen="false" Onclick="@(() => _radioValue = "1.1")" Checked="@(_radioValue == "1.1")" Role="MenuItemRole.MenuItemRadio">Radio 1.1</FluentMenuItem>
    <FluentMenuItem KeepOpen="false" Onclick="@(() => _radioValue = "1.2")" Checked="@(_radioValue == "1.2")" Role="MenuItemRole.MenuItemRadio">Radio 1.2</FluentMenuItem>
    <FluentDivider></FluentDivider>
    <FluentMenuItem Disabled="true">Keep Open</FluentMenuItem>
    <FluentMenuItem KeepOpen="true" Onclick="@(() => _radioValue = "2.1")" Checked="@(_radioValue == "1.3")" Role="MenuItemRole.MenuItemRadio">Radio 2.1</FluentMenuItem>
    <FluentMenuItem KeepOpen="true" Onclick="@(() => _radioValue = "2.2")" Checked="@(_radioValue == "1.4")" Role="MenuItemRole.MenuItemRadio">Radio 2.2</FluentMenuItem>
</FluentMenu>

<FluentLabel>Value: @_radioValue</FluentLabel>

@code {
    private bool _open;
    private string? _radioValue;
}

✅ Checklist

General

  • I have added tests for my changes.
  • I have tested my changes.
  • I have updated the project documentation to reflect my changes.
  • I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

  • I have added a new component
  • I have added Unit Tests for my new component
  • I have modified an existing component
  • I have validated the Unit Tests for an existing component

@vnbaaij vnbaaij changed the title [MenuItem] Add keep open option [MenuItem] Add KeepOpen parameter Oct 24, 2024
@vnbaaij vnbaaij added this to the v4.10.3 milestone Oct 24, 2024
@vnbaaij vnbaaij merged commit e29413e into microsoft:dev Oct 24, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants