[VISUAL] Menu Links - Missing sizing options

[imasyuko]

Visual Issue Description

In current implementation the sizing class for menu items is applied to to k-menu-group element that changes their size. This approach works in the case where they are used within a context menu, but does not work at all when menu items are used within Menu component where menu links remain unchanged.
It is especially noticeable in the Default theme where the font size varies according to sizing options.

Expected Visual Appearance

Menu links should also support sizing options and changing their size should propagate to the menu items within their popups.

Actual Visual Appearance

In the context of Menu component with nesting, only menu items support sizing.

Screenshots/Videos

Expected Appearance

As sizing options for Menu Links haven't been provided by now, here are links to design references as follows:

• Default theme
• Bootstrap theme
• Material theme
• Fluent theme

Theme Information

Affected Theme(s)

• All themes
• Default theme
• Bootstrap theme
• Material theme
• Fluent theme
• Classic theme

Component(s) Affected

This inconsistency occurs in Menu Links only, but the effort for adding sizing class could be combined with the Menu Items Redesign issue.

Steps to Reproduce

1. Go to demo
2. Select 'Default theme'
3. Change the size of the component to 'Large'

Severity

• Critical - Component is unusable/broken
• High - Significant visual deviation from design
• Medium - Noticeable but doesn't break functionality
• Low - Minor visual inconsistency

[imasyuko]

Along with the Menu item redesign and adding the sizing class, the chevrons of the Menu items in Fluent should use on-app-surface color similar to text, not primary color (only icons before should use primary-on-surface).