Implement FAB Menu component with Material Design 3 specifications

[Copilot]

This PR implements a complete FAB Menu component that follows Material Design 3 specifications exactly as outlined in the issue requirements.

Overview

The FAB Menu is a floating action button menu that opens from a FAB to display multiple related actions. This implementation provides all the required features including proper Material Design 3 styling, color variants, animations, and responsive positioning for different FAB sizes.

Key Features

🎨 Material Design 3 Compliance

• Close button: 56dp × 56dp with 20dp icon size and elevation level 3
• Menu items: 56dp height with 24dp icons and proper typography
• Spacing: 8dp between close button and items, 4dp between menu items
• Elevation: Uses md.sys.elevation.level3 for close button, level 0 for menu items
• Shape: Full corner radius using md.sys.shape.corner.full

🌈 Color Configurations

Three complete color variants as specified:

• Primary: Uses primary container colors with proper contrast
• Secondary: Secondary color scheme with appropriate theming
• Tertiary: Tertiary color palette integration

📏 FAB Size Support

Responsive positioning that adapts to different FAB sizes:

• Default FAB (56dp): Standard menu positioning
• Small FAB (40dp): Adjusted positioning with proper alignment
• Large FAB (96dp): Higher positioning to align with top of large FAB

✨ Complete Functionality

• Smooth animations using floating-ui with scale and opacity transitions
• Proper ARIA roles (menu, menuitem) and keyboard navigation
• Click outside to dismiss with focus management
• Support for up to 6 menu items (as per Material Design specs)
• Disabled item states with proper visual feedback
• Integration with existing Ripple system

Technical Implementation

Components Added

• FabMenu: Main container component with floating-ui positioning
• FabMenuItem: Individual menu item with icon and label support
• SCSS styling: Complete Material Design 3 token integration
• Storybook stories: Comprehensive examples for all variants

Architecture Decisions

• Uses @floating-ui/react for positioning and animations (consistent with existing NestedMenu)
• Follows established component patterns (forwardRef, ExtendProps, Ripple integration)
• Proper TypeScript interfaces with full type safety
• Seamless integration with existing FAB component
• Maintains library's minimal footprint philosophy

Usage Example

import { FabMenu, FabMenuItem, Fab } from 'soda-material'
import { mdiPencil, mdiCopy, mdiShare } from '@mdi/js'
import Icon from '@mdi/react'

<FabMenu
    variant="primary"
    items={[
        <FabMenuItem icon={<Icon path={mdiPencil} size={1} />}>
            Edit
        </FabMenuItem>,
        <FabMenuItem icon={<Icon path={mdiCopy} size={1} />}>
            Copy
        </FabMenuItem>,
        <FabMenuItem icon={<Icon path={mdiShare} size={1} />}>
            Share
        </FabMenuItem>
    ]}
>
    <Fab variant="surface">
        <Icon path={mdiPencil} size={1} />
    </Fab>
</FabMenu>

Screenshots

FAB Menu Closed (Primary Variant):

FAB Menu Open (Primary Variant):

Secondary Color Variant:

Large FAB with Adjusted Positioning:

Testing

The implementation has been thoroughly tested with:

• ✅ All color variants (Primary, Secondary, Tertiary)
• ✅ All FAB sizes (Small, Default, Large) with proper positioning
• ✅ Keyboard navigation and accessibility
• ✅ Animations and state management
• ✅ Integration with existing component system
• ✅ Build process and TypeScript compilation

The component is production-ready and fully compliant with Material Design 3 specifications.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.