Fix popover/card/dialog/alert/toast/tile/item content overflowing rounded border#1013
Merged
Conversation
Fixes #990. Add a reusable InnerPathClipper foundation utility and wire it into FPopover, FCard, FDialog, FAlert, FToast (opt-in via clipBehavior / popoverClipBehavior, default Clip.none) and FTileGroup, FItemGroup (always-on, replacing the previous outer-path clip). Switch FItem's focused outline from an inline foreground BoxDecoration to FFocusedOutline so the new inner-path clip in FTileGroup/FItemGroup no longer crops the outline. Clamp FFocusedOutline.spacing at runtime so negative values don't produce a degenerate rect. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses content painting past rounded corners / over border rings across several Forui surfaces (popover, card, dialog, alert, toast, tile/item groups) by introducing a reusable “inner-path” clipper and wiring new opt-in clipping APIs into affected widgets.
Changes:
- Added
InnerPathClipperutility and used it to clip widget children to the inner decoration path (inside the border). - Introduced opt-in
clipBehavior/popoverClipBehaviorparameters forFAlert,FCard,FDialog,FToast, andFPopover, plus updated golden coverage for clipping behavior. - Refactored
FTileGroup/FItemGroupclipping approach and adjusted focused-outline rendering to avoid being cropped (including runtime clamping for large negative spacing).
Reviewed changes
Copilot reviewed 19 out of 263 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| forui/lib/src/foundation/inner_path_clipper.dart | New decoration-aware clipper intended to clip children to decoration inner paths. |
| forui/lib/src/foundation/focused_outline.dart | Clamp negative spacing at paint time to avoid degenerate/inverted outline rects. |
| forui/lib/src/widgets/toast/toast.dart | Add clipBehavior and clip toast content via InnerPathClipper when enabled. |
| forui/lib/src/widgets/alert.dart | Add clipBehavior and clip alert content via InnerPathClipper when enabled. |
| forui/lib/src/widgets/card/card.dart | Add clipBehavior and clip card content via InnerPathClipper when enabled. |
| forui/lib/src/widgets/dialog/dialog.dart | Add clipBehavior and clip dialog content via InnerPathClipper when enabled. |
| forui/lib/src/widgets/popover/popover.dart | Add popoverClipBehavior and clip popover content via InnerPathClipper when enabled. |
| forui/lib/src/widgets/popover_menu/popover_menu.dart | Enable popover clipping by default for popover menus (.antiAlias). |
| forui/lib/src/widgets/item/item.dart | Route focused outline through FTappable (instead of foreground decoration) to avoid being clipped by group clipping. |
| forui/lib/src/widgets/item/item_group.dart | Refactor group decoration/clipping to use DecoratedBox + ClipPath(InnerPathClipper). |
| forui/lib/src/widgets/tile/tile.dart | Adjust focused-outline spacing for tiles to render inset appropriately. |
| forui/lib/src/widgets/tile/tile_group.dart | Refactor group decoration/clipping to use DecoratedBox + ClipPath(InnerPathClipper). |
| forui/test/src/widgets/toast/toast_golden_test.dart | Add golden coverage for toast clipping on/off; update imports for Colors. |
| forui/test/src/widgets/popover/popover_golden_test.dart | Add golden coverage for popover clipping on/off. |
| forui/test/src/widgets/dialog/dialog_golden_test.dart | Add golden coverage for dialog clipping on/off. |
| forui/test/src/widgets/card_golden_test.dart | Add golden coverage for card clipping on/off. |
| forui/test/src/widgets/alert_golden_test.dart | Add golden coverage for alert clipping on/off. |
| forui/test/src/foundation/focused_outline_test.dart | Add regression tests ensuring large negative spacing does not crash painting. |
| forui/CHANGELOG.md | Document new clipping parameters and group clipping fixes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Describe the changes
Fixes #990.
InnerPathClipperfoundation utility that clips to the inner path of aDecoration(handlingShapeDecoration,BoxDecoration+ border + borderRadius viaShapeDecoration.fromBoxDecoration, with agetClipPathfallback).clipBehaviorparameter (defaultClip.none) toFCard,FDialog,FAlert,FToast, pluspopoverClipBehavioronFPopover. When set, content is wrapped inClipPath(InnerPathClipper(...))so children can't overflow the rounded corners or paint over the border ring.FTileGroupandFItemGroupto useDecoratedBox + ClipPath(InnerPathClipper)instead ofContainer + auto-padding + outer-path ShapeBorderClipper/ClipRRect. Drops the// ignore: use_decorated_boxworkaround and the misleading "border would be clipped" comment. Strictly better at curved corners.FItem's focused outline from an inlineposition: .foregroundBoxDecorationtoFFocusedOutlineso it isn't cropped by the group's new inner-path clip. The outline now respectsfocusedOutlineStyle.spacing(already set to-borderWidthon items /-borderWidth - 5on tiles, drawing inset into the child's bounds).FFocusedOutline.spacingat runtime so large negative values never produce a degenerate rect.Checklist
🤖 Generated with Claude Code