Toolbar - Overflow Menu Unification

[InnaAtanasova]

Summary

Update the Toolbar component to use menu-based overflow instead of popover-based overflow. This requires new HTML markup structure, CSS classes for sticky/floating behaviors, overflow priority modifiers, and examples showing how each component type transforms into menu items.

Background

The current toolbar implementation uses a popover for overflow. The new design uses the existing menu component, with toolbar items transforming into menu items when they overflow. The menu component with its features (menu items, submenus, checkmarks, etc.) already exists and should be leveraged.

Required Changes

1. Toolbar HTML Structure

Update toolbar markup to support three distinct content areas:

• Define new CSS classes: .fd-toolbar__start, .fd-toolbar__middle, .fd-toolbar__end
• Add layout styles (flexbox/grid) to position the three content areas
• Ensure overflow button placement styles

2. Sticky Behavior

Add CSS modifier for sticky toolbar that sticks to its container:

• Toolbar sticks to the related container (not viewport)
• Cannot be scrolled away unless the whole container scrolls away
• Remains visible until all content is displayed

3. Floating Behavior

Add CSS modifier for floating toolbar (most common use case: floating footer):

• Floats at a defined place (e.g., bottom of viewport for footer)
• Content under/behind the floating toolbar is not focusable until scrolled
• Follows CSS float/position property patterns

4. Overflow Priority System

Add CSS classes to mark toolbar items with overflow priority

5. Overflow Groups

Add markup structure for grouping toolbar items that overflow together

6. Component Overflow Transformations - HTML Examples

7. Components That Never Overflow

8. Accessibility (ARIA Labels & Structure)

Update examples with proper ARIA attributes for toolbar overflow state

9. Mobile Design

Add modifier or examples for mobile-optimized overflow menu:

Documentation Requirements

Examples to Create

1. Basic toolbar with overflow - Simple toolbar with multiple buttons, showing overflow menu
2. Sticky toolbar - Toolbar that sticks to container during scroll
3. Floating footer toolbar - Toolbar floating at bottom of viewport
4. Overflow priorities - Toolbar demonstrating Default, AlwaysOverflow, NeverOverflow
5. Overflow groups - Toolbar with grouped items that overflow together
6. Component transformations - One example per component type showing in-toolbar and in-menu markup
7. Mobile toolbar - Mobile-optimized toolbar with overflow
8. Complete example - Toolbar combining multiple features (sticky, groups, priorities, various components)

Documentation Updates

• Update toolbar component documentation page
• Add migration guide from old popover-based overflow
• Document all new CSS classes and modifiers
• Document ARIA requirements
• Add visual design specifications (spacing, sizing, colors)
• Document RTL behavior

Related Resources

• Link to Fiori Design Guidelines for Toolbar
• Link to existing menu component documentation
• Link to accessibility requirements (WCAG 2.1 AA)