diff --git a/docs/pages/docs/overlay/popover.mdx b/docs/pages/docs/overlay/popover.mdx index 78a43ecd3..4b77dc6bd 100644 --- a/docs/pages/docs/overlay/popover.mdx +++ b/docs/pages/docs/overlay/popover.mdx @@ -105,7 +105,7 @@ const FPopover( ); ``` -### `FPopover.tappable()`. +### `FPopover.tappable()` ```dart const FPopover.tappable( diff --git a/forui/lib/src/widgets/sheet/sheet.dart b/forui/lib/src/widgets/sheet/sheet.dart index b436a3712..2a2937a06 100644 --- a/forui/lib/src/widgets/sheet/sheet.dart +++ b/forui/lib/src/widgets/sheet/sheet.dart @@ -253,7 +253,7 @@ class FSheetStyle with Diagnosticable { /// Creates a [FSheetStyle]. const FSheetStyle({ required this.backgroundColor, - this.enterDuration = const Duration(milliseconds: 250), + this.enterDuration = const Duration(milliseconds: 200), this.exitDuration = const Duration(milliseconds: 200), this.flingVelocity = 700, this.closeProgressThreshold = 0.5, diff --git a/forui/test/golden/sheet/modal/constrained-Layout.btt.png b/forui/test/golden/sheet/modal/constrained-Layout.btt.png new file mode 100644 index 000000000..f221474ca Binary files /dev/null and b/forui/test/golden/sheet/modal/constrained-Layout.btt.png differ diff --git a/forui/test/golden/sheet/modal/constrained-Layout.ltr.png b/forui/test/golden/sheet/modal/constrained-Layout.ltr.png new file mode 100644 index 000000000..f14bc1ef5 Binary files /dev/null and b/forui/test/golden/sheet/modal/constrained-Layout.ltr.png differ diff --git a/forui/test/golden/sheet/modal/constrained-Layout.rtl.png b/forui/test/golden/sheet/modal/constrained-Layout.rtl.png new file mode 100644 index 000000000..0100d49ea Binary files /dev/null and b/forui/test/golden/sheet/modal/constrained-Layout.rtl.png differ diff --git a/forui/test/golden/sheet/modal/constrained-Layout.ttb.png b/forui/test/golden/sheet/modal/constrained-Layout.ttb.png new file mode 100644 index 000000000..7ae8a55b7 Binary files /dev/null and b/forui/test/golden/sheet/modal/constrained-Layout.ttb.png differ diff --git a/forui/test/golden/sheet/modal/default-Layout.btt.png b/forui/test/golden/sheet/modal/default-Layout.btt.png new file mode 100644 index 000000000..4c445b81e Binary files /dev/null and b/forui/test/golden/sheet/modal/default-Layout.btt.png differ diff --git a/forui/test/golden/sheet/modal/default-Layout.ltr.png b/forui/test/golden/sheet/modal/default-Layout.ltr.png new file mode 100644 index 000000000..99e33aa9e Binary files /dev/null and b/forui/test/golden/sheet/modal/default-Layout.ltr.png differ diff --git a/forui/test/golden/sheet/modal/default-Layout.rtl.png b/forui/test/golden/sheet/modal/default-Layout.rtl.png new file mode 100644 index 000000000..da29ba003 Binary files /dev/null and b/forui/test/golden/sheet/modal/default-Layout.rtl.png differ diff --git a/forui/test/golden/sheet/modal/default-Layout.ttb.png b/forui/test/golden/sheet/modal/default-Layout.ttb.png new file mode 100644 index 000000000..0f4b44fdf Binary files /dev/null and b/forui/test/golden/sheet/modal/default-Layout.ttb.png differ diff --git a/forui/test/golden/sheet/modal/scrollable-Layout.btt.png b/forui/test/golden/sheet/modal/scrollable-Layout.btt.png new file mode 100644 index 000000000..44bbf8f28 Binary files /dev/null and b/forui/test/golden/sheet/modal/scrollable-Layout.btt.png differ diff --git a/forui/test/golden/sheet/modal/scrollable-Layout.ltr.png b/forui/test/golden/sheet/modal/scrollable-Layout.ltr.png new file mode 100644 index 000000000..1fb608d80 Binary files /dev/null and b/forui/test/golden/sheet/modal/scrollable-Layout.ltr.png differ diff --git a/forui/test/golden/sheet/modal/scrollable-Layout.rtl.png b/forui/test/golden/sheet/modal/scrollable-Layout.rtl.png new file mode 100644 index 000000000..1fb608d80 Binary files /dev/null and b/forui/test/golden/sheet/modal/scrollable-Layout.rtl.png differ diff --git a/forui/test/golden/sheet/modal/scrollable-Layout.ttb.png b/forui/test/golden/sheet/modal/scrollable-Layout.ttb.png new file mode 100644 index 000000000..44bbf8f28 Binary files /dev/null and b/forui/test/golden/sheet/modal/scrollable-Layout.ttb.png differ diff --git a/forui/test/src/widgets/sheet/modal_sheet_golden_test.dart b/forui/test/src/widgets/sheet/modal_sheet_golden_test.dart new file mode 100644 index 000000000..7d9a727f4 --- /dev/null +++ b/forui/test/src/widgets/sheet/modal_sheet_golden_test.dart @@ -0,0 +1,105 @@ +@Tags(['golden']) +library; + +import 'package:flutter/material.dart'; + +import 'package:flutter_test/flutter_test.dart'; + +import 'package:forui/forui.dart'; +import '../../test_scaffold.dart'; + +void main() { + group('FModalSheet', () { + for (final side in Layout.values) { + testWidgets('default - $side', (tester) async { + await tester.pumpWidget( + TestScaffold.app( + child: Builder( + builder: (context) => FButton.icon( + child: FIcon(FAssets.icons.chevronRight), + onPress: () => showFModalSheet( + context: context, + side: side, + builder: (context) => Container( + height: double.infinity, + width: double.infinity, + color: context.theme.colorScheme.background, + child: const Center(child: Text('Sheet')), + ), + ), + ), + ), + ), + ); + + await tester.tap(find.byType(FButton)); + await tester.pumpAndSettle(); + + await expectLater(find.byType(TestScaffold), matchesGoldenFile('sheet/modal/default-$side.png')); + }); + + testWidgets('constrained - $side', (tester) async { + await tester.pumpWidget( + TestScaffold.app( + child: Builder( + builder: (context) => FButton.icon( + child: FIcon(FAssets.icons.chevronRight), + onPress: () => showFModalSheet( + context: context, + side: side, + constraints: const BoxConstraints(maxHeight: 200, maxWidth: 200), + builder: (context) => Container( + height: double.infinity, + width: double.infinity, + color: context.theme.colorScheme.background, + child: const Center(child: Text('Sheet')), + ), + ), + ), + ), + ), + ); + + await tester.tap(find.byType(FButton)); + await tester.pumpAndSettle(); + + await expectLater(find.byType(TestScaffold), matchesGoldenFile('sheet/modal/constrained-$side.png')); + }); + + testWidgets('scrollable - $side', (tester) async { + await tester.pumpWidget( + TestScaffold.app( + child: Builder( + builder: (context) => FButton.icon( + child: FIcon(FAssets.icons.chevronRight), + onPress: () => showFModalSheet( + context: context, + side: side, + mainAxisMaxRatio: null, + builder: (context) => Container( + height: double.infinity, + width: double.infinity, + color: context.theme.colorScheme.background, + child: ListView.builder( + scrollDirection: side.vertical ? Axis.vertical : Axis.horizontal, + itemBuilder: (context, index) => Padding( + padding: const EdgeInsets.all(8.0), + child: Text('Tile $index'), + ), + itemCount: 20, + ), + ), + ), + ), + ), + ), + ); + + await tester.tap(find.byType(FButton)); + await tester.pumpAndSettle(); + + await expectLater(find.byType(TestScaffold), matchesGoldenFile('sheet/modal/scrollable-$side.png')); + }); + } + }); +} diff --git a/forui/test/src/widgets/sheet/modal_sheet_test.dart b/forui/test/src/widgets/sheet/modal_sheet_test.dart new file mode 100644 index 000000000..1c5590c6d --- /dev/null +++ b/forui/test/src/widgets/sheet/modal_sheet_test.dart @@ -0,0 +1,108 @@ +import 'package:flutter/material.dart'; + +import 'package:flutter_test/flutter_test.dart'; + +import 'package:forui/forui.dart'; +import '../../test_scaffold.dart'; + +void main() { + group('FModalSheet', () { + testWidgets('tap on barrier dismisses', (tester) async { + await tester.pumpWidget( + TestScaffold.app( + child: Builder( + builder: (context) => FButton.icon( + child: FIcon(FAssets.icons.chevronRight), + onPress: () => showFModalSheet( + context: context, + side: Layout.btt, + builder: (context) => Container( + height: double.infinity, + width: double.infinity, + color: context.theme.colorScheme.background, + child: const Center(child: Text('sheet')), + ), + ), + ), + ), + ), + ); + + await tester.tap(find.byType(FButton)); + await tester.pumpAndSettle(const Duration(seconds: 1)); + expect(find.text('sheet'), findsOne); + + await tester.tapAt(const Offset(100, 100)); + await tester.pumpAndSettle(const Duration(seconds: 1)); + expect(find.text('sheet'), findsNothing); + }); + + for (final (side, offset) in [ + (Layout.btt, const Offset(0, 300)), + (Layout.ttb, const Offset(0, -300)), + (Layout.ltr, const Offset(-300, 0)), + (Layout.rtl, const Offset(300, 0)), + ]) { + testWidgets('drag to dismiss - $side', (tester) async { + await tester.pumpWidget( + TestScaffold.app( + child: Builder( + builder: (context) => FButton.icon( + child: FIcon(FAssets.icons.chevronRight), + onPress: () => showFModalSheet( + context: context, + side: side, + builder: (context) => Container( + height: double.infinity, + width: double.infinity, + color: context.theme.colorScheme.background, + child: const Center(child: Text('sheet')), + ), + ), + ), + ), + ), + ); + + await tester.tap(find.byType(FButton)); + await tester.pumpAndSettle(const Duration(seconds: 1)); + expect(find.text('sheet'), findsOne); + + await tester.drag(find.text('sheet'), offset); + await tester.pumpAndSettle(const Duration(seconds: 1)); + expect(find.text('sheet'), findsNothing); + }); + + testWidgets('drag to dismiss on non-draggable - $side', (tester) async { + await tester.pumpWidget( + TestScaffold.app( + child: Builder( + builder: (context) => FButton.icon( + child: FIcon(FAssets.icons.chevronRight), + onPress: () => showFModalSheet( + context: context, + side: side, + draggable: false, + builder: (context) => Container( + height: double.infinity, + width: double.infinity, + color: context.theme.colorScheme.background, + child: const Center(child: Text('sheet')), + ), + ), + ), + ), + ), + ); + + await tester.tap(find.byType(FButton)); + await tester.pumpAndSettle(const Duration(seconds: 1)); + expect(find.text('sheet'), findsOne); + + await tester.drag(find.text('sheet'), offset); + await tester.pumpAndSettle(const Duration(seconds: 1)); + expect(find.text('sheet'), findsOne); + }); + } + }); +}