Add an example of using window size classes with ChildPanelsMode #804
Conversation
Added an example of using window size classes within ChildPanelsMode
WalkthroughThe pull request updates the Changes
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
![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 and nitpick comments (1)
docs/extensions/compose.md (1)
315-317: LGTM! Important performance consideration highlighted.The warning about recomposition is crucial for developers to understand potential performance implications.
Consider adding a code example demonstrating how to reduce the recomposition scope, as this would provide immediate actionable guidance to developers.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
docs/extensions/compose.md(2 hunks)
🔇 Additional comments (2)
docs/extensions/compose.md (2)
297-298: LGTM! Clear and concise introduction.
The new section provides a helpful introduction to using window size classes with ChildPanelsMode, which directly addresses the PR's objective.
299-313: LGTM! Well-structured example with proper implementation.
The code example effectively demonstrates:
- Proper imports from material3-window-size-class
- Correct usage of calculateWindowSizeClass()
- Logical mode selection based on window width
- Clear mapping between window sizes and panel modes
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
docs/extensions/compose.md (1)
314-316: LGTM: Important performance warning about recomposition.The warning effectively highlights the recomposition behavior of calculateWindowSizeClass().
Consider adding a code example demonstrating how to reduce the recomposition scope, such as:
@Composable fun PanelsContent(component: PanelsComponent) { val mode = remember { derivedStateOf { calculatePanelsMode() } }.value // Rest of the code... }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
docs/extensions/compose.md(2 hunks)
🔇 Additional comments (2)
docs/extensions/compose.md (2)
297-298: LGTM: Clear introduction to window size classes.
The text effectively introduces the concept of using window size classes from the material3-window-size-class package for determining ChildPanelsMode.
299-312: LGTM: Well-structured example of window size class usage.
The example effectively demonstrates how to determine ChildPanelsMode based on window width using WindowSizeClass. The logic is clear and follows Material 3 guidelines.
|
Thank you! |
The current documentation is not entirely clear on how to switch the mode in ChildPanels depending on the current size of the application window.
Summary by CodeRabbit
New Features
ChildPanelsModeChangedEffectfor responsive layout adjustments based on window size.PanelsContentto react to window size changes and support animations for child components.Documentation
compose.mdwith comprehensive details on new features, usage instructions, and lifecycle management.