Refactor Menu to match Fiori 3 specs and the sap-theming

[InnaAtanasova]

Refactor Menu component to match Fiori 3 specs and the sap-theming

• For the colors, remove all occurrences of hard-coded values and replace them with the corresponding values from @sap-theming
• Where possible, use css variables from @sap-theming for the borders, border-radius, font-size, font-family, etc.
• Update the paddings, margins, font-sizes, line-heights, etc to match 100% the Fiori 3 specs
• If necessary, rename the component and its classes accordingly
• Update the project Playground tests if necessary and test the component. See here more information about how to run the development Playground
• Update the visual regression tests
• Test the component in all browsers (cross-browser support)
• a11y
• Document the Breaking Changes
• Provide a detailed description of the changes that are made in the Pull Request and attach screenshots with Before and After
• In the Pull Request link to the related issue see the PR Guidelines

Please refer to the following links for more information about the project:

• Development Guidelines
• Visual Testing

[kavya-b]

Fiori3 link: https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2061501144
Few things I see that are missing and might be needed from Fundamentals' side:

1. Removal of group header(and associated title class) from styles, playground and documentation
2. Addition of add-on icon as a secondary icon to the right-side for affordance arrow to show a sub-menu. It appears that this secondary icon is to be used only with a sub-menu but it is not known whether only the affordance-arrow-icon is to be used or any icon can be used.

This will need addition of new class, and new example in the documentation and playground pages.

3. Using separators to visually represent groups instead of applying them on every item. This probably needs only documentation and playground changes.
4. Classes for sub-menu styles. Essentially, sub-menu looks the same as menu but the overlapping styles need to be handled. This cannot be shown in documentation or playground because the trigger to open the submenu needs some typescript functionality added which cannot be done in Fund-styles. Is there any other way of approaching this? Also, there was an issue for unifying Menu and Mega Menu; is that still being considered? Unify Menu and Mega Menu components #322
5. Support for Tablet and Phone mode. For Tablet, it looks similar to Desktop but has compact mode styling. But for Phone, the Menu opens as a Dialog/Modal and the styles are quite different. Has this been handled already for any existing component? Any directions to refer to how to go about doing this?
6. The new List Bottom Border style has active state color specified in terms of a function: fade(@sapUiListBorderColor, 0%); We need the proper variable for this.

Few things I see that are missing and might be needed from Fiori3 side:

1. min-width for Menu and submenu. Currently, only max-width is specified, but ideally one would expect min-width as well, otherwise we might end up seeing ultra-small menus in some cases. Our design team (Kit and Keny) recommend 4rem as min-width. What would be fundamentals' team's thoughts on this?
2. Some Phone Mode styles are missing. For example, For Cancel at the footer of the dialog, the styles are not specified in Fiori3. Also, the right padding is not specified.