feat: menubar #273
feat: menubar #273
Conversation
Deploying shadcn-ui-docs with
|
| Latest commit: |
7bc6795
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7cff7542.flutter-shadcn-ui.pages.dev |
| Branch Preview URL: | https://feat-menubar.flutter-shadcn-ui.pages.dev |
WalkthroughThe pull request updates the library to version 0.22.0. A new component, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MenubarPage
participant ShadMenubar
participant ShadMenubarController
User->>MenubarPage: Request menubar screen
MenubarPage->>ShadMenubar: Build menubar widget
ShadMenubar->>ShadMenubarController: Initialize controller
ShadMenubarController->>ShadMenubar: Manage focus & selection
ShadMenubar->>User: Render interactive menubar items
sequenceDiagram
participant User
participant ShadContextMenu
participant TapRegion
User->>ShadContextMenu: Tap interaction (inside/outside)
ShadContextMenu->>TapRegion: Detect tap location
TapRegion-->>ShadContextMenu: Return tap event details
ShadContextMenu->>User: Trigger corresponding onTap callback
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🔇 Additional comments (15)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying shadcn-ui-playground with
|
| Latest commit: |
f5404a7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://51a35158.shadcn-ui-playground.pages.dev |
| Branch Preview URL: | https://feat-menubar.shadcn-ui-playground.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
example/lib/pages/divider.dart (1)
22-24: 💡 Verification agent🧩 Analysis chain
Filename needs to be updated to match component name
While the component has been properly updated from
ShadDividertoShadSeparator, the file is still nameddivider.dart. According to the AI summary, the class name has also been updated fromDividerPagetoSeparatorPage, but this change isn't visible in the provided code.Consider renaming this file to
separator.dartand updating all relevant class names and references for consistency.
🏁 Script executed:
#!/bin/bash # Check if the class name was updated elsewhere rg -A 5 "class SeparatorPage" --glob "*.dart" # Check for any remaining references to DividerPage rg -A 5 "DividerPage" --glob "*.dart"Length of output: 1516
Rename file and update class references for consistency
- The file
example/lib/pages/divider.dartstill containsclass DividerPageand associated state classes instead of the updatedSeparatorPageshown in the playground file.- Additionally, references (e.g., in
example/lib/main.dartwhere'/divider': (_) => const DividerPage(),) need to be updated to reflect the renamed component.- Please rename the file to
separator.dart, update the class names fromDividerPagetoSeparatorPage, and adjust any references accordingly.
🧹 Nitpick comments (9)
docs/src/content/docs/Components/menubar.mdx (1)
1-124: Well-structured menubar documentation with clear examplesThe documentation for the Menubar component is comprehensive and well-structured, with a clear description and an illustrative example that demonstrates how to implement a menubar with various menu items, hierarchical submenus, and visual separators.
Consider enhancing the documentation with:
- A section on keyboard accessibility for desktop applications
- Information about menu item customization options
- An interactive example showing state management with the menubar
playground/lib/pages/menubar.dart (1)
22-127: Comprehensive Menubar example with good organizationThe
MenubarExampleclass demonstrates a complete implementation of the menubar component with:
- Well-organized menu structure with logical item grouping
- Proper usage of theme for consistent styling
- Appropriate use of enabled/disabled states
- Visual separators between menu sections
- Nested menu items with chevron indicators
The code follows best practices for Flutter widget composition and demonstrates all the capabilities of the menubar component.
Consider adding example handlers for menu item selection to demonstrate how to respond to user interactions.
lib/src/components/separator.dart (2)
5-6: Consider removing or elaborating the deprecation timeline.The typedef
ShadDivideris clearly marked as deprecated. If it's only intended as a short-term alias, consider fully removing it at a future version or adding a removal timeline for clarity.
92-116: Plan ahead for potential new variants or fallback.Using a
switchexpression for handling separator variants is excellent for type safety. If you anticipate adding more variants in the future, ensure each variant is handled or consider a fallback to avoid future runtime errors.lib/src/theme/components/menubar.dart (1)
165-251: Refine the interpolation logic for smoother transitions.In the
lerpmethod, properties likeeffectsswap abruptly at mid-values (t < 0.5 ? a.effects : b.effects). This can produce visible snapping or jumps. Consider a more granular interpolation if smoother transitions are desired.lib/src/theme/themes/default_theme_variant.dart (1)
937-948: Menubar theme looks consistent but can be expanded.Providing a minimal menubar setup is a good start. In the future, consider allowing custom shadows, icons, or text styles to further extend styling flexibility.
test/src/components/divider_test.dart (2)
10-23: Rename variable for consistency with Separator theme.Currently, the variable name is still
shadDividerThemewhile the assigned type isShadSeparatorTheme. Consider renaming it to avoid confusion and better convey its purpose:- const shadDividerTheme = ShadSeparatorTheme( + const shadSeparatorTheme = ShadSeparatorTheme( thickness: 12, horizontalMargin: EdgeInsets.symmetric(vertical: 100), color: Color(0xFFF44336), ); - separatorTheme: shadDividerTheme, + separatorTheme: shadSeparatorTheme,
123-133: Rename variable for consistency with Separator theme.Similar to the previous block, rename
shadDividerThemeto matchShadSeparatorTheme:- const shadDividerTheme = ShadSeparatorTheme( + const shadSeparatorTheme = ShadSeparatorTheme( thickness: 12, verticalMargin: EdgeInsets.symmetric(horizontal: 100), color: Color(0xFFF44336), ); - separatorTheme: shadDividerTheme, + separatorTheme: shadSeparatorTheme,lib/src/components/menubar.dart (1)
166-586: Consider refactoring the extensive menubar item constructor.The constructor includes a large number of parameters, potentially overwhelming to maintain. A specialized builder or data class can improve readability and maintainability:
- Group related parameters or move them to a dedicated data/model object.
- Consider a builder pattern to reduce parameter overload.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (43)
CHANGELOG.md(1 hunks)README.md(2 hunks)docs/src/content/docs/Components/alert.mdx(2 hunks)docs/src/content/docs/Components/avatar.mdx(1 hunks)docs/src/content/docs/Components/badge.mdx(1 hunks)docs/src/content/docs/Components/menubar.mdx(1 hunks)docs/src/content/docs/Components/radio-group.mdx(3 hunks)docs/src/content/docs/Components/separator.mdx(2 hunks)docs/src/content/docs/Components/sheet.mdx(3 hunks)docs/src/content/docs/Components/slider.mdx(1 hunks)docs/src/content/docs/Components/switch.mdx(2 hunks)docs/src/content/docs/Components/tooltip.mdx(2 hunks)example/lib/main.dart(2 hunks)example/lib/pages/calendar.dart(2 hunks)example/lib/pages/context_menu.dart(1 hunks)example/lib/pages/date_picker.dart(2 hunks)example/lib/pages/date_picker_form_field.dart(1 hunks)example/lib/pages/divider.dart(2 hunks)example/lib/pages/menubar.dart(1 hunks)example/lib/pages/typography.dart(1 hunks)lib/shadcn_ui.dart(4 hunks)lib/src/app.dart(1 hunks)lib/src/components/accordion.dart(2 hunks)lib/src/components/context_menu.dart(3 hunks)lib/src/components/divider.dart(0 hunks)lib/src/components/menubar.dart(1 hunks)lib/src/components/resizable.dart(3 hunks)lib/src/components/select.dart(2 hunks)lib/src/components/separator.dart(1 hunks)lib/src/theme/components/menubar.dart(1 hunks)lib/src/theme/components/separator.dart(5 hunks)lib/src/theme/data.dart(9 hunks)lib/src/theme/theme.dart(1 hunks)lib/src/theme/themes/base.dart(4 hunks)lib/src/theme/themes/default_theme_no_secondary_border_variant.dart(2 hunks)lib/src/theme/themes/default_theme_variant.dart(2 hunks)lib/src/utils/provider_index.dart(1 hunks)playground/lib/pages/context_menu.dart(1 hunks)playground/lib/pages/divider.dart(2 hunks)playground/lib/pages/menubar.dart(1 hunks)playground/lib/router.dart(2 hunks)pubspec.yaml(1 hunks)test/src/components/divider_test.dart(9 hunks)
💤 Files with no reviewable changes (1)
- lib/src/components/divider.dart
✅ Files skipped from review due to trivial changes (15)
- docs/src/content/docs/Components/switch.mdx
- docs/src/content/docs/Components/avatar.mdx
- docs/src/content/docs/Components/radio-group.mdx
- docs/src/content/docs/Components/alert.mdx
- pubspec.yaml
- docs/src/content/docs/Components/tooltip.mdx
- example/lib/pages/date_picker_form_field.dart
- docs/src/content/docs/Components/separator.mdx
- example/lib/pages/calendar.dart
- lib/src/components/select.dart
- example/lib/pages/date_picker.dart
- docs/src/content/docs/Components/badge.mdx
- docs/src/content/docs/Components/slider.mdx
- lib/src/components/resizable.dart
- docs/src/content/docs/Components/sheet.mdx
🔇 Additional comments (63)
example/lib/pages/typography.dart (1)
106-106: Component renamed from ShadDivider to ShadSeparatorThe change from
ShadDivider.horizontal()toShadSeparator.horizontal()aligns with the refactoring mentioned in the CHANGELOG whereShadDivideris deprecated in favor ofShadSeparator.example/lib/pages/divider.dart (2)
55-59: Component renamed from ShadDivider to ShadSeparatorThe horizontal divider has been properly updated to use the new
ShadSeparatorcomponent.
66-70: Component renamed from ShadDivider to ShadSeparatorThe vertical divider has been properly updated to use the new
ShadSeparatorcomponent.lib/src/theme/theme.dart (1)
14-27: Improved error handling for ShadTheme.ofThe addition of proper error handling for the case when no ShadTheme is found is a valuable improvement. The error message is detailed and helpful, explaining possible causes and solutions to the developer.
Before this change, a null reference exception would occur without a clear explanation of what went wrong.
CHANGELOG.md (1)
1-4: Clear CHANGELOG entries for version 0.22.0The CHANGELOG entries clearly describe the two main changes in this version:
- Adding the new
ShadMenubarcomponent- Deprecating
ShadDividerandShadDividerThemein favor ofShadSeparatorandShadSeparatorThemeThis aligns well with the changes observed in the code.
example/lib/main.dart (2)
21-21: Added import for new MenubarPage component.The import for the MenubarPage component has been properly added to support the new menubar feature.
69-70: Route mappings correctly implemented.Two important route changes:
- The
/input-form-fieldroute has been properly restored- The new
/menubarroute has been correctly mapped to MenubarPageBoth changes follow the established routing pattern in the application.
playground/lib/pages/context_menu.dart (1)
10-10: Component update: ShadDivider → ShadSeparatorThe horizontal divider has been updated from
ShadDivider.horizontaltoShadSeparator.horizontal, which aligns with the library-wide component rename as mentioned in the AI summary.example/lib/pages/menubar.dart (2)
1-119: Well-structured new Menubar component implementation.The new MenubarPage implementation is well organized and follows the design patterns established in the library. The component:
- Properly uses the theme system for visual consistency
- Creates reusable UI elements (square and divider)
- Implements a complex menubar structure with nested items
- Uses appropriate components like ShadMenubarItem and ShadContextMenuItem
The implementation includes good examples of different menu item states (enabled/disabled) and proper hierarchy.
26-29: Consistent use of ShadSeparator.The implementation correctly uses the new ShadSeparator component for dividers, maintaining consistency with the library-wide component rename.
README.md (2)
48-48: Updated README to mark Menubar as completed.The Menubar component has been marked as completed and includes the correct documentation link.
57-57: Updated component name from Divider to Separator.The component has been correctly renamed from "Divider" to "Separator" in the README, ensuring documentation consistency with the code changes.
lib/src/app.dart (1)
689-690: Updated divider theme references to use the new separator theme.The code now uses
separatorThemeinstead ofdividerThemefor configuring theDividerThemeData, aligning with the library's transition from divider to separator components.example/lib/pages/context_menu.dart (1)
11-11: Updated to use ShadSeparator instead of ShadDivider.Properly migrated from the deprecated
ShadDividerto the newShadSeparatorcomponent while maintaining the same functionality.lib/src/utils/provider_index.dart (2)
4-14: Well-documented index provider class.The
ShadProviderIndexclass is clearly documented and properly implemented as an immutable class to hold index values, which will be used by the new menubar component.
15-37: Clean implementation of the index provider widget.The
ShadIndexProviderimplementation follows good practices with:
- Clear documentation explaining usage
- Proper parameter requirements
- Efficient implementation of the
notifyUpdatecallback to only rebuild when the index changesThis will provide solid infrastructure for the menubar component.
playground/lib/pages/divider.dart (3)
5-6: Renamed DividerPage to SeparatorPage.Successfully migrated the class name to align with the new component naming convention.
11-11: Updated variant type to ShadSeparatorVariant.Property type correctly changed from
ShadDividerVarianttoShadSeparatorVariant.
20-20: Updated component references to use ShadSeparator.Consistently updated all component references from
ShadDividertoShadSeparatorwhile maintaining the same functionality and properties.Also applies to: 25-25
playground/lib/router.dart (3)
18-18: Correctly imported the menubar pageThe import for the menubar page has been properly added to the router file, which is necessary for the new menubar route.
286-292: Correctly renamed divider to separatorThe route has been appropriately updated from
/dividerto/separator, and the corresponding builder now returns aSeparatorPagewithShadSeparatorVariant. This change aligns with the transition from dividers to separators throughout the codebase.
294-299: Properly implemented the menubar routeThe route for the menubar has been correctly added, returning the
MenubarPagecomponent. The implementation is simple and follows the pattern of other routes in the file.playground/lib/pages/menubar.dart (1)
5-20: Well-structured MenubarPage implementationThe
MenubarPageclass is well-implemented, providing appropriate padding and alignment for the menubar example. The use of theScaffoldwidget and proper alignment ensures good visual presentation.lib/src/components/accordion.dart (2)
5-5: Updated import for the separator componentThe import has been correctly updated to use the new separator component instead of the deprecated divider component.
283-283: Replaced divider with separator in the accordion implementationThe implementation now correctly uses
ShadSeparator.horizontal()instead of the deprecatedShadDivider.horizontal(), maintaining consistent behavior while adhering to the new component naming.lib/src/components/separator.dart (1)
16-32: Constructors are clearly defined and easy to use.Your approach of having separate named constructors (
vertical,horizontal, andraw) for different orientations improves readability and flexibility. Great job!lib/src/theme/components/menubar.dart (2)
13-14: Immutability is appropriately declared.Marking the theme class with
@immutableis a best practice to ensure a consistent and reliable theming approach.
345-386: Merge logic is clear and consistent.The
mergeWithmethod handles theme layering well by respecting themergeflag. This is a solid approach for combining theming instructions.lib/src/theme/themes/default_theme_variant.dart (3)
24-24: New import for menubar theme looks good.This aligns with the introduction of the new menubar component.
31-31: Importing separator theme aligns with the updated naming convention.Replacing dividers with separators is consistent throughout the library.
950-958: Separator theme defaults are well-chosen.Using a thickness of 1 pixel and the border color strikes a suitable balance. This should fit seamlessly with most app designs.
test/src/components/divider_test.dart (2)
62-66: Looks good moving from Divider to Separator.These changes correctly replace old references to
ShadDividerwithShadSeparator. No issues found.Also applies to: 100-106, 115-115
136-136: Updated references to ShadSeparator appear correct.These lines appropriately use
ShadSeparator.vertical(), reflecting the rename without issues.Also applies to: 178-178, 223-223, 232-232
lib/shadcn_ui.dart (1)
18-18: Exports updated to reflect Separator and Menubar components.All newly added export statements align with the renaming from “Divider” to “Separator” and the introduction of the Menubar. No issues found.
Also applies to: 46-46, 84-84, 102-102
lib/src/components/menubar.dart (2)
20-57: Menubar controller implementation looks solid.The addition of
_focusNodesand the cleanup indispose()appear to be well-managed. Good job ensuring external controllers aren’t disposed.
59-165: Flexible menubar design.Providing a fallback controller and customizable styling parameters (radius, padding, border, etc.) is well thought out. code is coherent; no issues found.
lib/src/theme/themes/default_theme_no_secondary_border_variant.dart (4)
24-24: Added necessary import for the new menubar component.The import statement for the menubar component has been correctly added, which is required for the new menubarTheme method.
31-31: Added separator component import to replace divider.The import statement for the separator component has been correctly added to replace the deprecated divider component.
970-982: Added menubar theme implementation.The menubarTheme method implementation looks good, providing all necessary styling properties for the new menubar component, including radius, padding, border styling, anchor positioning, and button-related properties.
984-992: Added separator theme implementation to replace divider theme.The separatorTheme method correctly implements the styling for the separator component that replaces the deprecated divider. The implementation includes all necessary properties: thickness, color, and margins.
lib/src/components/context_menu.dart (3)
202-205: Added new callback properties for enhanced interactivity.These new callback properties provide more granular control over tap events in the context menu, which will improve interactive behaviors.
265-323: Well-documented new properties with clear usage guidelines.Excellent documentation for each new tap event callback. The documentation clearly explains each callback's purpose, the events that trigger them, and references to related callbacks for a complete understanding.
399-402: Implemented the new callback properties in the TapRegion widget.The implementation correctly passes all four new callback properties to the TapRegion widget, enabling the enhanced interaction handling.
lib/src/theme/themes/base.dart (5)
17-17: Added import for the new menubar component.The menubar component import has been correctly added to the base theme file.
24-24: Replaced divider import with separator import.The separator component import has been correctly added to replace the deprecated divider component.
89-90: Updated constructor parameters to include new theme components.The ShadBaseTheme constructor has been properly updated to include the new menubarTheme and separatorTheme parameters, replacing the previous dividerTheme.
142-143: Added final fields for the new theme components.The ShadBaseTheme class now correctly includes final fields for menubarTheme and separatorTheme.
190-191: Added abstract methods for the new theme components.The ShadThemeVariant abstract class has been updated with new abstract methods for menubarTheme and separatorTheme, ensuring all theme variants implement these methods.
lib/src/theme/components/separator.dart (6)
5-6: Properly deprecated the old divider theme.Good use of the @deprecated annotation with a clear migration message directing users to use ShadSeparatorTheme instead. This maintains backward compatibility while guiding users toward the new API.
8-12: Updated class documentation and renamed class.The class documentation has been updated to reference the new ShadSeparator widget, and the class has been renamed from ShadDividerTheme to ShadSeparatorTheme for consistency.
40-51: Updated mergeWith method signature and implementation.The mergeWith method has been correctly updated to work with ShadSeparatorTheme instead of ShadDividerTheme.
53-69: Updated copyWith method signature and implementation.The copyWith method has been properly updated to return ShadSeparatorTheme instead of ShadDividerTheme.
71-87: Updated static lerp method signature and implementation.The static lerp method has been correctly updated to use ShadSeparatorTheme parameters and return type.
91-99: Updated equality operator implementation.The equality operator has been updated to correctly check for ShadSeparatorTheme type instead of ShadDividerTheme.
lib/src/theme/data.dart (9)
19-19: Appropriate import added for new menubar component.The import for the menubar theme component aligns with the PR objective to implement a menubar feature.
26-26: Consistent transition from divider to separator.This import supports the refactoring from divider to separator components as mentioned in the AI summary.
95-96: Constructor parameters properly added for new themes.The constructor signature has been correctly updated to include both the new menubar theme and the separator theme (replacing the old divider theme).
239-241: Theme initialization follows established pattern.The initialization of the new theme properties correctly follows the established pattern of getting default values from the effective variant and merging them with user-provided values.
295-296: Internal constructor properly updated.The internal constructor has been correctly updated to pass the new required theme parameters to the superclass.
399-401: Lerp method implementation is complete.The static lerp method correctly handles interpolation for the new theme properties, maintaining consistency with the existing codebase pattern.
459-460: Equality operator updated appropriately.The equality operator has been correctly extended to include the new theme properties in comparisons.
514-515: Hash code implementation is consistent.The hashCode getter has been properly updated to include the new theme properties, maintaining consistency with the equality operator implementation.
568-569: CopyWith method completely updated.The copyWith method has been thoroughly updated to include the new theme properties, both in the parameter list and in the implementation.
Also applies to: 626-627
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
example/lib/pages/separator.dart (1)
71-71: Consider updating text label for consistency.While all component references have been updated, this text label still uses "divider" instead of "separator".
- Text('divider', style: theme.textTheme.h4), + Text('separator', style: theme.textTheme.h4),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
example/lib/main.dart(2 hunks)example/lib/pages/separator.dart(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- example/lib/main.dart
🔇 Additional comments (5)
example/lib/pages/separator.dart (5)
7-8: Class naming properly updated.The class has been appropriately renamed from
DividerPagetoSeparatorPage, along with its state creation method. This change aligns with the component renaming fromShadDividertoShadSeparator.Also applies to: 11-11
14-14: State class name properly updated.The state class has been correctly renamed from
_DividerPageStateto_SeparatorPageStateto match the widget class name change.
23-23: App bar title updated to match component name.The app bar title has been updated from 'Divider' to 'Separator' to maintain consistency with the component name change.
55-59: Component reference properly updated.The horizontal divider widget has been updated from
ShadDivider.horizontaltoShadSeparator.horizontal, reflecting the component renaming.
66-70: Component reference properly updated.The vertical divider widget has been updated from
ShadDivider.verticaltoShadSeparator.vertical, reflecting the component renaming.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
test/src/components/separator_test.dart (1)
10-10: Variable naming inconsistency.There appears to be an inconsistency in variable naming. Here it's
shaSeparatorTheme(missing the 'd') while in line 123 it'sshadSeparatorTheme(with 'd'). Consider standardizing to use the same prefix.-const shaSeparatorTheme = ShadSeparatorTheme( +const shadSeparatorTheme = ShadSeparatorTheme(
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
test/src/components/separator_test.dart(9 hunks)
🔇 Additional comments (2)
test/src/components/separator_test.dart (2)
7-7: Rename from ShadDivider to ShadSeparator is properly applied.The code correctly implements the renaming from ShadDivider to ShadSeparator throughout the test file, including all horizontal separator tests. The golden test file path has also been updated to match the new component name.
Also applies to: 10-10, 20-20, 23-23, 62-62, 106-106, 115-116
123-123: Rename from ShadDivider to ShadSeparator is properly applied for vertical separator.The code correctly implements the renaming from ShadDivider to ShadSeparator for the vertical separator tests. The theme, component usage, and golden file path have all been updated consistently.
Also applies to: 133-133, 136-136, 177-177, 223-223, 232-234
closes #235
Summary by CodeRabbit
New Features
ShadContextMenuwith new tap event callbacks.Refactor
Documentation
Tests
Chores