feat!: adapt to yaru compact sizes (#763)

* feat!: adapt to yaru compact sizes

See #383

* fix option button

* fix popupbutton

* Update to yaru ^1.0.0

* chore: update goldens

example/pubspec.yaml

@@ -18,7 +18,7 @@ dependencies:
   provider: ^6.0.2
   safe_change_notifier: ^0.3.1
   ubuntu_service: ^0.2.4
-  yaru: ">=0.10.0 <1.0.0"
+  yaru: ^1.0.0
   yaru_icons: ">=1.0.0 <3.0.0"
   yaru_widgets:
     path: ../

lib/constants.dart

@@ -2,7 +2,7 @@
 const kYaruPagePadding = 20.0;
 
 /// The default height of [YaruTitleBar].
-const kYaruTitleBarHeight = 47.0;
+const kYaruTitleBarHeight = 46.0;
 
 /// The default border radius for Yaru-style banners.
 const kYaruBannerRadius = 10.0;
@@ -18,7 +18,7 @@ const kYaruButtonRadius = 6.0;
 const kYaruMasterDetailBreakpoint = 620.0;
 
 /// The best height for any item inside a [YaruTitleBar]
-const kYaruTitleBarItemHeight = 35.0;
+const kYaruTitleBarItemHeight = 34.0;
 
 /// The default icon size
-const kYaruIconSize = 16.0;
+const kYaruIconSize = 20.0;

lib/src/widgets/yaru_choice_chip_bar.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:yaru_icons/yaru_icons.dart';
+import 'package:yaru_widgets/constants.dart';
 
 /// A list of [ChoiceChipBar]s wrapped either in a controllable [ListView] or [Wrap].
 class YaruChoiceChipBar extends StatefulWidget {
@@ -13,8 +14,8 @@ class YaruChoiceChipBar extends StatefulWidget {
     this.animationDuration = const Duration(milliseconds: 300),
     this.navigationStep = 100.0,
     this.animationCurve = Curves.bounceIn,
-    this.radius = 34.0,
-    this.chipHeight = 34.0,
+    this.radius = kYaruTitleBarItemHeight,
+    this.chipHeight = kYaruTitleBarItemHeight,
     this.wrapScrollDirection = Axis.horizontal,
     this.wrapAlignment = WrapAlignment.start,
     this.wrapRunAlignment = WrapAlignment.start,

lib/src/widgets/yaru_icon_button.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:yaru_widgets/constants.dart';
 
 /// An [IconButton] with a default fixed size of 40x40.
 class YaruIconButton extends StatelessWidget {
@@ -9,11 +10,11 @@ class YaruIconButton extends StatelessWidget {
     this.constraints,
     this.enableFeedback = true,
     this.focusNode,
-    this.iconSize = 40.0,
+    this.iconSize = kYaruIconSize,
     this.isSelected,
     this.mouseCursor,
     this.onPressed,
-    this.padding = const EdgeInsets.all(8.0),
+    this.padding,
     this.selectedIcon,
     this.splashRadius,
     this.style,
@@ -32,7 +33,7 @@ class YaruIconButton extends StatelessWidget {
   final bool? isSelected;
   final MouseCursor? mouseCursor;
   final VoidCallback? onPressed;
-  final EdgeInsetsGeometry padding;
+  final EdgeInsetsGeometry? padding;
   final Widget? selectedIcon;
   final double? splashRadius;
   final ButtonStyle? style;
@@ -99,7 +100,7 @@ class YaruIconButton extends StatelessWidget {
       isSelected: isSelected,
       mouseCursor: mouseCursor,
       onPressed: onPressed,
-      padding: padding,
+      padding: padding ?? EdgeInsets.zero,
       selectedIcon: selectedIcon,
       splashRadius: splashRadius,
       style: defaultStyleOf(context).merge(style),

lib/src/widgets/yaru_option_button.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:yaru_widgets/constants.dart';
 
 /// An [OutlinedButton] with a default size of 40x40.
 ///
@@ -28,10 +29,7 @@ class YaruOptionButton extends OutlinedButton {
     required Widget child,
   }) : super(
           style: _styleFrom(padding: EdgeInsets.zero).merge(style),
-          child: IconTheme.merge(
-            data: const IconThemeData(size: 24),
-            child: child,
-          ),
+          child: child,
         );
 
   /// Creates a [YaruOptionButton] with a color disk.
@@ -53,8 +51,9 @@ class YaruOptionButton extends OutlinedButton {
 
   static ButtonStyle _styleFrom({EdgeInsetsGeometry? padding}) {
     return OutlinedButton.styleFrom(
-      minimumSize: const Size.square(40),
-      maximumSize: const Size.square(40),
+      minimumSize: const Size.square(kYaruTitleBarItemHeight),
+      maximumSize: const Size.square(kYaruTitleBarItemHeight),
+      fixedSize: const Size.square(kYaruTitleBarItemHeight),
       padding: padding,
     );
   }

lib/src/widgets/yaru_popup_menu_button.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:yaru_icons/yaru_icons.dart';
+import 'package:yaru_widgets/constants.dart';
 
 import 'yaru_check_button.dart';
 
@@ -18,7 +19,7 @@ class YaruPopupMenuButton<T> extends StatelessWidget {
     this.padding = const EdgeInsets.symmetric(horizontal: 5),
     this.childPadding = const EdgeInsets.symmetric(horizontal: 5),
     this.enabled = true,
-    this.offset = const Offset(0, 40),
+    this.offset = const Offset(0, kYaruTitleBarItemHeight),
     this.enableFeedback,
     this.constraints,
     this.elevation,
@@ -99,11 +100,10 @@ class YaruPopupMenuButton<T> extends StatelessWidget {
                         child: child,
                       ),
                       SizedBox(
-                        height: 40,
+                        height: kYaruTitleBarItemHeight,
                         child: icon ??
                             const Icon(
                               YaruIcons.pan_down,
-                              size: 20,
                             ),
                       ),
                     ],

lib/src/widgets/yaru_title_bar.dart

@@ -161,6 +161,7 @@ class YaruTitleBar extends StatelessWidget implements PreferredSizeWidget {
             .merge(titleBarTheme.titleTextStyle);
 
     final defaultBorder = BorderSide(
+      strokeAlign: -1,
       color: light
           ? Colors.black.withOpacity(highContrast ? 1 : 0.1)
           : Colors.white.withOpacity(highContrast ? 1 : 0.06),

pubspec.yaml

@@ -11,7 +11,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  yaru: ">=0.10.0 <1.0.0"
+  yaru: ^1.0.0
   yaru_icons: ">=1.0.0 <3.0.0"
   yaru_window: ^0.1.1