Migrate NavigationBar to M3 tokens. (flutter#98285)

Author: darrenaustin

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -18,6 +18,7 @@ import 'dart:convert';
 import 'dart:io';
 
 import 'package:gen_defaults/fab_template.dart';
+import 'package:gen_defaults/navigation_bar_template.dart';
 import 'package:gen_defaults/typography_template.dart';
 
 Map<String, dynamic> _readTokenFile(String fileName) {
@@ -64,5 +65,6 @@ Future<void> main(List<String> args) async {
   tokens['colorsDark'] = _readTokenFile('color_dark.json');
 
   FABTemplate('$materialLib/floating_action_button.dart', tokens).updateFile();
+  NavigationBarTemplate('$materialLib/navigation_bar.dart', tokens).updateFile();
   TypographyTemplate('$materialLib/typography.dart', tokens).updateFile();
 }

dev/tools/gen_defaults/data/shape.json

@@ -33,6 +33,10 @@
     "bottomRight": 0.0
   },
 
+  "md.sys.shape.corner.full": {
+    "family": "SHAPE_FAMILY_CIRCULAR"
+  },
+
   "md.sys.shape.corner.large": {
     "family": "SHAPE_FAMILY_ROUNDED_CORNERS",
     "topLeft": 16.0,

dev/tools/gen_defaults/lib/navigation_bar_template.dart

@@ -0,0 +1,57 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'template.dart';
+
+class NavigationBarTemplate extends TokenTemplate {
+  const NavigationBarTemplate(String fileName, Map<String, dynamic> tokens) : super(fileName, tokens);
+
+  @override
+  String generate() => '''
+// Generated version ${tokens["version"]}
+class _TokenDefaultsM3 extends NavigationBarThemeData {
+  _TokenDefaultsM3(BuildContext context)
+      : _theme = Theme.of(context),
+        _colors = Theme.of(context).colorScheme,
+        super(
+          height: ${tokens["md.comp.navigation-bar.container.height"]},
+          elevation: ${elevation("md.comp.navigation-bar.container")},
+          labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
+        );
+
+  final ThemeData _theme;
+  final ColorScheme _colors;
+
+  // With Material 3, the NavigationBar uses an overlay blend for the
+  // default color regardless of light/dark mode. This should be handled
+  // in the Material widget based off of elevation, but for now we will do
+  // it here in the defaults.
+  @override Color? get backgroundColor => ElevationOverlay.colorWithOverlay(_colors.${color("md.comp.navigation-bar.container")}, _colors.primary, ${elevation("md.comp.navigation-bar.container")});
+
+  @override MaterialStateProperty<IconThemeData?>? get iconTheme {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      return IconThemeData(
+        size: ${tokens["md.comp.navigation-bar.icon.size"]},
+        color: states.contains(MaterialState.selected)
+          ? _colors.${color("md.comp.navigation-bar.active.icon")}
+          : _colors.${color("md.comp.navigation-bar.inactive.icon")},
+      );
+    });
+  }
+
+  @override Color? get indicatorColor => _colors.${color("md.comp.navigation-bar.active-indicator")};
+  @override ShapeBorder? get indicatorShape => ${shape("md.comp.navigation-bar.active-indicator")};
+
+  @override MaterialStateProperty<TextStyle?>? get labelTextStyle {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+    final TextStyle style = _theme.textTheme.${textStyle("md.comp.navigation-bar.label-text")}!;
+      return style.apply(color: states.contains(MaterialState.selected)
+        ? _colors.${color("md.comp.navigation-bar.active.label-text")}
+        : _colors.${color("md.comp.navigation-bar.inactive.label-text")}
+      );
+    });
+  }
+}
+''';
+}

dev/tools/gen_defaults/lib/template.dart

@@ -76,17 +76,24 @@ abstract class TokenTemplate {
 
   /// Generate a shape constant for the given component token.
   ///
-  /// Currently only supports "SHAPE_FAMILY_ROUNDED_CORNERS" which it
-  /// maps to a [RoundedRectangleBorder] expression.
+  /// Currently supports family:
+  ///   - "SHAPE_FAMILY_ROUNDED_CORNERS" which maps to [RoundedRectangleBorder].
+  ///   - "SHAPE_FAMILY_CIRCULAR" which maps to a [StadiumBorder].
   String shape(String componentToken) {
-    // TODO(darrenaustin): handle more than just rounded rectangle shapes
     final Map<String, dynamic> shape = tokens[tokens['$componentToken.shape']!]! as Map<String, dynamic>;
-    return 'const RoundedRectangleBorder(borderRadius: '
-        'BorderRadius.only('
-          'topLeft: Radius.circular(${shape['topLeft']}), '
-          'topRight: Radius.circular(${shape['topRight']}), '
-          'bottomLeft: Radius.circular(${shape['bottomLeft']}), '
-          'bottomRight: Radius.circular(${shape['bottomRight']})))';
+    switch (shape['family']) {
+      case 'SHAPE_FAMILY_ROUNDED_CORNERS':
+        return 'const RoundedRectangleBorder(borderRadius: '
+            'BorderRadius.only('
+            'topLeft: Radius.circular(${shape['topLeft']}), '
+            'topRight: Radius.circular(${shape['topRight']}), '
+            'bottomLeft: Radius.circular(${shape['bottomLeft']}), '
+            'bottomRight: Radius.circular(${shape['bottomRight']})))';
+      case 'SHAPE_FAMILY_CIRCULAR':
+        return 'const StadiumBorder()';
+    }
+    print('Unsupported shape family type: ${shape['family']} for $componentToken');
+    return '';
   }
 
   /// Generate a [TextTheme] text style name for the given component token.

dev/tools/gen_defaults/test/gen_defaults_test.dart

@@ -101,16 +101,21 @@ static final String tokenBar = 'bar';
   test('Templates can get proper shapes from given data', () {
     const Map<String, dynamic> tokens = <String, dynamic>{
       'foo.shape': 'shape.large',
+      'bar.shape': 'shape.full',
       'shape.large': <String, dynamic>{
         'family': 'SHAPE_FAMILY_ROUNDED_CORNERS',
         'topLeft': 1.0,
         'topRight': 2.0,
         'bottomLeft': 3.0,
         'bottomRight': 4.0,
-      }
+      },
+      'shape.full': <String, dynamic>{
+        'family': 'SHAPE_FAMILY_CIRCULAR',
+      },
     };
     final TestTemplate template = TestTemplate('foobar.dart', tokens);
     expect(template.shape('foo'), 'const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(1.0), topRight: Radius.circular(2.0), bottomLeft: Radius.circular(3.0), bottomRight: Radius.circular(4.0)))');
+    expect(template.shape('bar'), 'const StadiumBorder()');
   });
 }