Fix title bar corners (#487)

* Fix title bar corners

Fixes: #481

* Prettier formatting

lib/src/controls/yaru_title_bar.dart

@@ -24,6 +24,8 @@ class YaruTitleBar extends StatelessWidget implements PreferredSizeWidget {
     this.titleSpacing,
     this.foregroundColor,
     this.backgroundColor,
+    this.shape,
+    this.border,
     this.isActive,
     this.isClosable,
     this.isDraggable,
@@ -59,6 +61,12 @@ class YaruTitleBar extends StatelessWidget implements PreferredSizeWidget {
   /// The background color.
   final Color? backgroundColor;
 
+  /// The shape.
+  final ShapeBorder? shape;
+
+  /// The border.
+  final BorderSide? border;
+
   /// Whether the title bar visualized as active.
   final bool? isActive;
 
@@ -132,14 +140,14 @@ class YaruTitleBar extends StatelessWidget implements PreferredSizeWidget {
           fontWeight: FontWeight.w500,
         )
         .merge(theme.titleTextStyle);
-    final shape = theme.shape ??
-        Border(
-          bottom: BorderSide(
-            color: light
-                ? Colors.black.withOpacity(0.1)
-                : Colors.white.withOpacity(0.06),
-          ),
-        );
+
+    final defaultBorder = BorderSide(
+      color: light
+          ? Colors.black.withOpacity(0.1)
+          : Colors.white.withOpacity(0.06),
+    );
+    final border = Border(bottom: this.border ?? theme.border ?? defaultBorder);
+    final shape = border + (this.shape ?? theme.shape ?? const Border());
 
     // TODO: backdrop effect
     Widget? backdropEffect(Widget? child) {
@@ -248,6 +256,8 @@ class YaruWindowTitleBar extends StatelessWidget
     this.titleSpacing,
     this.foregroundColor,
     this.backgroundColor,
+    this.shape,
+    this.border,
     this.isActive,
     this.isClosable,
     this.isDraggable,
@@ -284,6 +294,12 @@ class YaruWindowTitleBar extends StatelessWidget
   /// The background color.
   final Color? backgroundColor;
 
+  /// The shape.
+  final ShapeBorder? shape;
+
+  /// The border.
+  final BorderSide? border;
+
   /// Whether the title bar visualized as active.
   final bool? isActive;
 
@@ -351,6 +367,8 @@ class YaruWindowTitleBar extends StatelessWidget
           centerTitle: centerTitle,
           titleSpacing: titleSpacing,
           backgroundColor: backgroundColor,
+          shape: shape,
+          border: border,
           isActive: isActive ?? window?.isActive,
           isClosable: isClosable ?? window?.isClosable,
           isDraggable: isDraggable ?? window?.isMovable,
@@ -379,6 +397,8 @@ class YaruDialogTitleBar extends YaruWindowTitleBar {
     super.titleSpacing,
     super.foregroundColor,
     super.backgroundColor,
+    super.shape = defaultShape,
+    super.border,
     super.isActive,
     super.isClosable = true,
     super.isDraggable,
@@ -393,4 +413,10 @@ class YaruDialogTitleBar extends YaruWindowTitleBar {
     super.onRestore = null,
     super.onShowMenu = YaruWindow.showMenu,
   });
+
+  static const defaultShape = RoundedRectangleBorder(
+    borderRadius: BorderRadius.vertical(
+      top: Radius.circular(kYaruContainerRadius),
+    ),
+  );
 }

lib/src/controls/yaru_title_bar_theme.dart

@@ -14,6 +14,7 @@ class YaruTitleBarThemeData extends ThemeExtension<YaruTitleBarThemeData>
     this.backgroundColor,
     this.titleTextStyle,
     this.shape,
+    this.border,
   });
 
   final double? elevation;
@@ -23,6 +24,7 @@ class YaruTitleBarThemeData extends ThemeExtension<YaruTitleBarThemeData>
   final MaterialStateProperty<Color?>? backgroundColor;
   final TextStyle? titleTextStyle;
   final ShapeBorder? shape;
+  final BorderSide? border;
 
   @override
   YaruTitleBarThemeData copyWith({
@@ -33,6 +35,7 @@ class YaruTitleBarThemeData extends ThemeExtension<YaruTitleBarThemeData>
     MaterialStateProperty<Color?>? backgroundColor,
     TextStyle? titleTextStyle,
     ShapeBorder? shape,
+    BorderSide? border,
   }) {
     return YaruTitleBarThemeData(
       elevation: elevation ?? this.elevation,
@@ -42,6 +45,7 @@ class YaruTitleBarThemeData extends ThemeExtension<YaruTitleBarThemeData>
       backgroundColor: backgroundColor ?? this.backgroundColor,
       titleTextStyle: titleTextStyle ?? this.titleTextStyle,
       shape: shape ?? this.shape,
+      border: border ?? this.border,
     );
   }
 
@@ -69,6 +73,11 @@ class YaruTitleBarThemeData extends ThemeExtension<YaruTitleBarThemeData>
       ),
       titleTextStyle: TextStyle.lerp(titleTextStyle, o?.titleTextStyle, t),
       shape: ShapeBorder.lerp(shape, o?.shape, t),
+      border: BorderSide.lerp(
+        border ?? BorderSide.none,
+        o?.border ?? BorderSide.none,
+        t,
+      ),
     );
   }
 
@@ -82,6 +91,7 @@ class YaruTitleBarThemeData extends ThemeExtension<YaruTitleBarThemeData>
     properties.add(DiagnosticsProperty('backgroundColor', backgroundColor));
     properties.add(DiagnosticsProperty('titleTextStyle', titleTextStyle));
     properties.add(DiagnosticsProperty('shape', shape));
+    properties.add(DiagnosticsProperty('border', border));
   }
 
   @override
@@ -94,7 +104,8 @@ class YaruTitleBarThemeData extends ThemeExtension<YaruTitleBarThemeData>
         other.foregroundColor == foregroundColor &&
         other.backgroundColor == backgroundColor &&
         other.titleTextStyle == titleTextStyle &&
-        other.shape == shape;
+        other.shape == shape &&
+        other.border == border;
   }
 
   @override
@@ -107,6 +118,7 @@ class YaruTitleBarThemeData extends ThemeExtension<YaruTitleBarThemeData>
       backgroundColor,
       titleTextStyle,
       shape,
+      border,
     );
   }
 }

test/controls/yaru_title_bar_test.dart

@@ -12,16 +12,20 @@ void main() {
       final variant = goldenVariant.currentValue!;
 
       final state = variant.value!;
+      final builder = variant.label.contains('dialog')
+          ? YaruDialogTitleBar.new
+          : YaruWindowTitleBar.new;
 
       await tester.pumpScaffold(
-        YaruWindowTitleBar(
+        builder(
           isActive: state.isActive,
           isClosable: state.isClosable,
           isDraggable: false,
           isMaximizable: state.isMaximizable,
           isMinimizable: state.isMinimizable,
           isRestorable: state.isRestorable,
           title: Text(state.title!),
+          backgroundColor: variant.label.contains('red') ? Colors.red : null,
         ),
         themeMode: variant.themeMode,
         size: const Size(480, kYaruTitleBarHeight),
@@ -84,4 +88,18 @@ final goldenVariant = ValueVariant({
       title: 'inactive',
     ),
   ),
+  ...goldenThemeVariants(
+    'dialog',
+    const YaruWindowState(
+      title: 'dialog',
+      isClosable: true,
+    ),
+  ),
+  ...goldenThemeVariants(
+    'dialog-red',
+    const YaruWindowState(
+      title: 'dialog red',
+      isClosable: true,
+    ),
+  ),
 });