[NavGroup] Fix disabled state for top-level FluentNavGroup

[MarvinKlein1508]

Pull Request

📖 Description

This PR fixes the disabled state for top-level FluentNavGroup elements. When you had a FluentNavGroup with Disabled="true" on the top level of FluentNavMenu then it was still possible to open it.

Before:

After:

🎫 Issues

Fixes #4645

👩‍💻 Reviewer Notes

📑 Test Plan

✅ 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

⏭ Next Steps

[dvoituron]

Why the design is not the same between the two "disabled"?

[MarvinKlein1508]

@dvoituron this is either another bug or on purpose. it's using different colors for FluentNavGroup and FluentNavItem. Was like this before my PR as well:

[MarvinKlein1508]

@dvoituron @vnbaaij By default disabled items do not change color. Instead there is an opacity applied.

We can change this behaviour for the NavGroup with this CSS as well

::deep .fluent-nav-group.disabled {
    pointer-events: none;
}

    ::deep .fluent-nav-group.disabled .fluent-nav-icon {
        fill: var(--neutral-stroke-rest) !important;
    }

    ::deep .fluent-nav-group.disabled .fluent-nav-text {
        opacity: var(--disabled-opacity);
    }

Result:

Let me know what you think and I'll create a second PR for this change :)

[dvoituron]

I find that better, to have the same color.

[vnbaaij]

Yup, much better. Bring on the PR!