fix(fortal): restore dialog and popover layout defaults (#129)

Author: leoafarias

docs/components/dialog.mdx

@@ -31,22 +31,20 @@ class DialogExample extends StatelessWidget {
       onPressed: () {
         showRemixDialog(
           context: context,
-          builder: (context) => Center(
-            child: FortalDialog(
-              title: 'Revoke access',
-              description:
-                  'This application will no longer be accessible.',
-              actions: [
-                FortalButton.ghost(
-                  label: 'Cancel',
-                  onPressed: () => Navigator.pop(context),
-                ),
-                FortalButton(
-                  label: 'Revoke access',
-                  onPressed: () => Navigator.pop(context),
-                ),
-              ],
-            ),
+          builder: (context) => FortalDialog(
+            title: 'Revoke access',
+            description:
+                'This application will no longer be accessible.',
+            actions: [
+              FortalButton.ghost(
+                label: 'Cancel',
+                onPressed: () => Navigator.pop(context),
+              ),
+              FortalButton(
+                label: 'Revoke access',
+                onPressed: () => Navigator.pop(context),
+              ),
+            ],
           ),
         );
       },
@@ -74,21 +72,19 @@ Future<void> showDeleteDialog(BuildContext context) async {
   await showRemixAlertDialog<void>(
     context: context,
     semanticLabel: 'Delete project confirmation',
-    builder: (context) => Center(
-      child: FortalDialog(
-        title: 'Delete project?',
-        description: 'This permanently deletes the project and all of its data.',
-        actions: [
-          FortalButton.ghost(
-            label: 'Cancel',
-            onPressed: () => Navigator.pop(context),
-          ),
-          FortalButton(
-            label: 'Delete project',
-            onPressed: () => Navigator.pop(context),
-          ),
-        ],
-      ),
+    builder: (context) => FortalDialog(
+      title: 'Delete project?',
+      description: 'This permanently deletes the project and all of its data.',
+      actions: [
+        FortalButton.ghost(
+          label: 'Cancel',
+          onPressed: () => Navigator.pop(context),
+        ),
+        FortalButton(
+          label: 'Delete project',
+          onPressed: () => Navigator.pop(context),
+        ),
+      ],
     ),
   );
 }
@@ -99,6 +95,11 @@ Future<void> showDeleteDialog(BuildContext context) async {
 
 Remix includes a Fortal-themed widget for this component:
 
+`FortalDialog` defaults to `FortalDialogSize.size3`,
+`FortalDialogAlign.center`, fills the available width up to 600 logical pixels,
+preserves safe viewport insets, and uses `modal: true`. Set
+`align: FortalDialogAlign.start` to place the surface at the safe top inset.
+
 <CodeGroup title="Fortal widget" defaultLanguage="dart">
 ```dart
 import 'package:flutter/material.dart';
@@ -110,6 +111,7 @@ class FortalDialogExample extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return FortalDialog(
+      align: FortalDialogAlign.center,
       title: 'Confirm changes',
       description: 'Save these settings before leaving?',
       actions: [

docs/components/popover.mdx

@@ -122,8 +122,10 @@ final styledPopover = RemixPopover(
 );
 ```
 
-The `FortalPopover` preset adds Fortal spacing, border, radius, surface color,
-shadow, and a maximum width. Content remains fully composable.
+The `FortalPopover` preset defaults to `FortalPopoverSize.size2`, adds Fortal
+spacing, border, radius, surface color, and shadow, constrains the surface to a
+maximum width of 480 logical pixels, and renders no arrow. Content remains
+fully composable.
 
 ## Keyboard and accessibility
 

packages/remix_fortal/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## 0.1.0-beta.1
 
+- **FIX**: Match the pinned Radix Themes dialog and popover layout defaults.
+  `FortalDialog` now defaults to centered placement, exposes `start` and
+  `center` alignment options, fills up to 600 pixels, and preserves safe
+  viewport insets;
+  `FortalPopover` has a 480-pixel maximum width.
 - Initial release. Fortal — the Radix Themes-inspired preset theme for
   [Remix](https://pub.dev/packages/remix) — now ships as its own package.
   `FortalScope`, `FortalTokens`, the `Fortal*` widgets, and the `fortal*Style()`

packages/remix_fortal/lib/src/recipes/dialog.dart

@@ -1,3 +1,5 @@
+import 'dart:math' as math;
+
 import 'package:flutter/material.dart';
 import 'package:mix_annotations/mix_annotations.dart';
 import 'package:remix/remix.dart';
@@ -9,10 +11,32 @@ part 'dialog.g.dart';
 /// Fortal dialog size presets matching Radix Themes 3.3.0.
 enum FortalDialogSize { size1, size2, size3, size4 }
 
+/// Fortal dialog vertical alignment matching Radix Themes 3.3.0.
+enum FortalDialogAlign { start, center }
+
+final _dialogViewportInsets = ContextToken<EdgeInsetsGeometry>((context) {
+  final safeArea = MediaQuery.paddingOf(context);
+  final viewportHeight = MediaQuery.sizeOf(context).height;
+  final horizontal = FortalTokens.space4.resolve(context);
+  final vertical = FortalTokens.space6.resolve(context);
+
+  return EdgeInsets.fromLTRB(
+    math.max(safeArea.left, horizontal),
+    math.max(safeArea.top, vertical),
+    math.max(safeArea.right, horizontal),
+    math.max(safeArea.bottom, math.max(vertical, viewportHeight * 0.06)),
+  );
+});
+
 /// Fortal-themed preset for [RemixDialog].
+///
+/// The generated [FortalDialog] defaults to [FortalDialogSize.size3],
+/// [FortalDialogAlign.center], fills up to 600 logical pixels, preserves safe
+/// viewport insets, and is modal.
 @MixWidget(target: RemixDialog.new)
 DialogStyler fortalDialogStyle({
   FortalDialogSize size = FortalDialogSize.size3,
+  FortalDialogAlign align = FortalDialogAlign.center,
 }) {
   final radius = switch (size) {
     FortalDialogSize.size1 || FortalDialogSize.size2 => FortalTokens.radius4(),
@@ -24,8 +48,20 @@ DialogStyler fortalDialogStyle({
     FortalDialogSize.size3 => FortalTokens.space5(),
     FortalDialogSize.size4 => FortalTokens.space6(),
   };
+  final alignment = switch (align) {
+    FortalDialogAlign.start => Alignment.topCenter,
+    FortalDialogAlign.center => Alignment.center,
+  };
 
   return DialogStyler()
+      .wrap(
+        .modifier(
+          PaddingModifierMix.create(padding: Prop.token(_dialogViewportInsets)),
+        ).align(alignment: alignment).orderOfModifiers([
+          PaddingModifier,
+          AlignModifier,
+        ]),
+      )
       .title(
         .style(FortalTokens.text5.mix())
             .fontWeight(FortalTokens.fontWeightBold())
@@ -46,6 +82,7 @@ DialogStyler fortalDialogStyle({
             .spacing(FortalTokens.space3())
             .marginTop(FortalTokens.space5()),
       )
+      .width(600)
       .padding(.all(padding))
       .borderRadius(.all(radius))
       .color(FortalTokens.colorPanel())

packages/remix_fortal/lib/src/recipes/dialog.g.dart

@@ -10,6 +10,9 @@ part 'popover.g.dart';
 enum FortalPopoverSize { size1, size2, size3, size4 }
 
 /// Fortal-themed preset for [RemixPopover].
+///
+/// The generated [FortalPopover] defaults to [FortalPopoverSize.size2], a
+/// 480-pixel maximum width, and no arrow.
 @MixWidget(target: RemixPopover.new)
 PopoverStyler fortalPopoverStyle({
   FortalPopoverSize size = FortalPopoverSize.size2,
@@ -28,6 +31,7 @@ PopoverStyler fortalPopoverStyle({
   };
 
   return PopoverStyler()
+      .maxWidth(480)
       .paddingAll(padding)
       .borderRadiusAll(radius)
       .color(FortalTokens.colorPanel())

packages/remix_fortal/lib/src/recipes/popover.dart

@@ -269,6 +269,11 @@
     }
   ],
   "dialog": [
+    {
+      "test": "test/components/dialog/dialog_widget_test.dart",
+      "case": "public contract has the pinned align order and default",
+      "covers": ["enum:align.start", "enum:align.center"]
+    },
     {
       "test": "test/components/dialog/dialog_widget_test.dart",
       "case": "opens and renders alert content",

packages/remix_fortal/lib/src/recipes/popover.g.dart

@@ -6,7 +6,80 @@ import 'package:remix_fortal/remix_fortal.dart';
 
 import '../../helpers/test_helpers.dart';
 
+Future<Rect> _pumpDialogSurface(
+  WidgetTester tester,
+  FortalDialog dialog, {
+  MediaQueryData? mediaQueryData,
+}) async {
+  Widget child = SizedBox.expand(child: dialog);
+  if (mediaQueryData != null) {
+    child = MediaQuery(data: mediaQueryData, child: child);
+  }
+  await tester.pumpRemixApp(child);
+  await tester.pumpAndSettle();
+
+  final align = find.descendant(
+    of: find.byType(RemixDialog),
+    matching: find.byType(Align),
+  );
+  final surface = tester.widget<Align>(align).child!;
+
+  return tester.getRect(find.byWidget(surface));
+}
+
 void main() {
+  testWidgets('default surface fills available width up to 600 pixels', (
+    tester,
+  ) async {
+    final rect = await _pumpDialogSurface(
+      tester,
+      const FortalDialog(title: 'Short'),
+    );
+
+    expect(rect.width, 600);
+  });
+
+  test('public contract has the pinned align order and default', () {
+    const dialog = FortalDialog(title: 'Defaults');
+
+    expect(FortalDialogAlign.values, const [
+      FortalDialogAlign.start,
+      FortalDialogAlign.center,
+    ]);
+    expect(dialog.align, FortalDialogAlign.center);
+  });
+
+  testWidgets('start alignment respects the safe top inset', (tester) async {
+    final rect = await _pumpDialogSurface(
+      tester,
+      const FortalDialog(
+        align: FortalDialogAlign.start,
+        title: 'Start aligned',
+      ),
+      mediaQueryData: const MediaQueryData(
+        size: Size(800, 600),
+        padding: EdgeInsets.fromLTRB(24, 48, 28, 40),
+      ),
+    );
+
+    expect(rect.top, 48);
+  });
+
+  testWidgets('default alignment centers within the safe padded viewport', (
+    tester,
+  ) async {
+    final rect = await _pumpDialogSurface(
+      tester,
+      const FortalDialog(title: 'Centered safely'),
+      mediaQueryData: const MediaQueryData(
+        size: Size(800, 600),
+        padding: EdgeInsets.fromLTRB(24, 48, 28, 40),
+      ),
+    );
+
+    expect(rect.center.dy, 304);
+  });
+
   testWidgets('bounded large-text structured content does not overflow', (
     tester,
   ) async {

packages/remix_fortal/reference/radix_themes_3_3_0/coverage_evidence.json

@@ -5,6 +5,20 @@ import 'package:remix_fortal/remix_fortal.dart';
 import '../../helpers/test_helpers.dart';
 
 void main() {
+  testWidgets('default style constrains the popover to 480 pixels', (
+    tester,
+  ) async {
+    final resolved = await resolveInFortalScope(
+      tester,
+      (context) => fortalPopoverStyle().build(context),
+    );
+
+    expect(
+      resolved.spec.container.spec.constraints,
+      const BoxConstraints(maxWidth: 480),
+    );
+  });
+
   testWidgets('FortalPopover supplies the themed overlay style', (
     tester,
   ) async {