Skip to content

Commit f396e28

Browse files
darrenaustindarrenaustin
authored
Migrate Chips to Material 3 (#107166)
1 parent 680a7bc commit f396e28

File tree

12 files changed

+791
-39
lines changed

12 files changed

+791
-39
lines changed

‎dev/tools/gen_defaults/bin/gen_defaults.dart‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import 'dart:io';
2020
import 'package:gen_defaults/app_bar_template.dart';
2121
import 'package:gen_defaults/button_template.dart';
2222
import 'package:gen_defaults/card_template.dart';
23+
import 'package:gen_defaults/chip_action_template.dart';
24+
import 'package:gen_defaults/chip_filter_template.dart';
25+
import 'package:gen_defaults/chip_input_template.dart';
2326
import 'package:gen_defaults/dialog_template.dart';
2427
import 'package:gen_defaults/fab_template.dart';
2528
import 'package:gen_defaults/icon_button_template.dart';
@@ -101,6 +104,10 @@ Future<void> main(List<String> args) async {
101104
ButtonTemplate('md.comp.outlined-button', '$materialLib/outlined_button.dart', tokens).updateFile();
102105
ButtonTemplate('md.comp.text-button', '$materialLib/text_button.dart', tokens).updateFile();
103106
CardTemplate('$materialLib/card.dart', tokens).updateFile();
107+
ChipActionTemplate('$materialLib/chip_action.dart', tokens).updateFile();
108+
ChipFilterTemplate('$materialLib/chip_filter.dart', tokens).updateFile();
109+
ChipFilterTemplate('$materialLib/chip_choice.dart', tokens).updateFile();
110+
ChipInputTemplate('$materialLib/chip_input.dart', tokens).updateFile();
104111
DialogTemplate('$materialLib/dialog.dart', tokens).updateFile();
105112
FABTemplate('$materialLib/floating_action_button.dart', tokens).updateFile();
106113
IconButtonTemplate('$materialLib/icon_button.dart', tokens).updateFile();

‎dev/tools/gen_defaults/lib/chip_action_template.dart‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'template.dart';
6+
7+
class ChipActionTemplate extends TokenTemplate {
8+
9+
const ChipActionTemplate(super.fileName, super.tokens);
10+
11+
static const String tokenGroup = 'md.comp.assist-chip';
12+
static const String variant = '.flat';
13+
14+
@override
15+
String generate() => '''
16+
// Generated version ${tokens["version"]}
17+
class _TokenDefaultsM3 extends ChipThemeData {
18+
const _TokenDefaultsM3(this.context, this.isEnabled)
19+
: super(
20+
elevation: ${elevation("$tokenGroup$variant.container")},
21+
shape: ${shape("$tokenGroup.container")},
22+
showCheckmark: true,
23+
);
24+
25+
final BuildContext context;
26+
final bool isEnabled;
27+
28+
@override
29+
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
30+
31+
@override
32+
Color? get backgroundColor => ${componentColor("$tokenGroup$variant.container")};
33+
34+
@override
35+
Color? get shadowColor => ${color("$tokenGroup.container.shadow-color")};
36+
37+
@override
38+
@override Color? get surfaceTintColor => ${color("$tokenGroup.container.surface-tint-layer.color")};
39+
40+
@override
41+
Color? get selectedColor => ${componentColor("$tokenGroup$variant.selected.container")};
42+
43+
@override
44+
Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
45+
46+
@override
47+
Color? get disabledColor => ${componentColor("$tokenGroup$variant.disabled.container")};
48+
49+
@override
50+
Color? get deleteIconColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
51+
52+
@override
53+
BorderSide? get side => isEnabled
54+
? ${border('$tokenGroup$variant.outline')}
55+
: ${border('$tokenGroup$variant.disabled.outline')};
56+
57+
@override
58+
IconThemeData? get iconTheme => IconThemeData(
59+
color: isEnabled
60+
? ${color("$tokenGroup.with-icon.icon.color")}
61+
: ${color("$tokenGroup.with-icon.disabled.icon.color")},
62+
size: ${tokens["$tokenGroup.with-icon.icon.size"]},
63+
);
64+
65+
@override
66+
EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
67+
68+
/// The chip at text scale 1 starts with 8px on each side and as text scaling
69+
/// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
70+
/// Once the widget has a text scaling of 2 or higher than the label padding
71+
/// remains 4px.
72+
@override
73+
EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
74+
const EdgeInsets.symmetric(horizontal: 8.0),
75+
const EdgeInsets.symmetric(horizontal: 4.0),
76+
clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
77+
)!;
78+
}
79+
''';
80+
}

‎dev/tools/gen_defaults/lib/chip_filter_template.dart‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'template.dart';
6+
7+
class ChipFilterTemplate extends TokenTemplate {
8+
const ChipFilterTemplate(super.fileName, super.tokens);
9+
10+
static const String tokenGroup = 'md.comp.filter-chip';
11+
static const String variant = '.flat';
12+
13+
@override
14+
String generate() => '''
15+
// Generated version ${tokens["version"]}
16+
class _TokenDefaultsM3 extends ChipThemeData {
17+
const _TokenDefaultsM3(this.context, this.isEnabled, this.isSelected)
18+
: super(
19+
elevation: ${elevation("$tokenGroup$variant.container")},
20+
shape: ${shape("$tokenGroup.container")},
21+
showCheckmark: true,
22+
);
23+
24+
final BuildContext context;
25+
final bool isEnabled;
26+
final bool isSelected;
27+
28+
@override
29+
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
30+
31+
@override
32+
Color? get backgroundColor => ${componentColor("$tokenGroup$variant.container")};
33+
34+
@override
35+
Color? get shadowColor => ${color("$tokenGroup.container.shadow-color")};
36+
37+
@override
38+
@override Color? get surfaceTintColor => ${color("$tokenGroup.container.surface-tint-layer.color")};
39+
40+
@override
41+
Color? get selectedColor => isEnabled
42+
? ${componentColor("$tokenGroup$variant.selected.container")}
43+
: ${componentColor("$tokenGroup$variant.disabled.selected.container")};
44+
45+
@override
46+
Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
47+
48+
@override
49+
Color? get disabledColor => isSelected
50+
? ${componentColor("$tokenGroup$variant.disabled.selected.container")}
51+
: ${componentColor("$tokenGroup$variant.disabled.unselected.container")};
52+
53+
@override
54+
Color? get deleteIconColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
55+
56+
@override
57+
BorderSide? get side => !isSelected
58+
? isEnabled
59+
? ${border('$tokenGroup$variant.unselected.outline')}
60+
: ${border('$tokenGroup$variant.disabled.unselected.outline')}
61+
: null;
62+
63+
@override
64+
IconThemeData? get iconTheme => IconThemeData(
65+
color: isEnabled
66+
? ${color("$tokenGroup.with-icon.icon.color")}
67+
: ${color("$tokenGroup.with-icon.disabled.icon.color")},
68+
size: ${tokens["$tokenGroup.with-icon.icon.size"]},
69+
);
70+
71+
@override
72+
EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
73+
74+
/// The chip at text scale 1 starts with 8px on each side and as text scaling
75+
/// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
76+
/// Once the widget has a text scaling of 2 or higher than the label padding
77+
/// remains 4px.
78+
@override
79+
EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
80+
const EdgeInsets.symmetric(horizontal: 8.0),
81+
const EdgeInsets.symmetric(horizontal: 4.0),
82+
clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
83+
)!;
84+
}
85+
''';
86+
}

‎dev/tools/gen_defaults/lib/chip_input_template.dart‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'template.dart';
6+
7+
class ChipInputTemplate extends TokenTemplate {
8+
const ChipInputTemplate(super.fileName, super.tokens);
9+
10+
static const String tokenGroup = 'md.comp.input-chip';
11+
static const String variant = '';
12+
13+
@override
14+
String generate() => '''
15+
// Generated version ${tokens["version"]}
16+
class _TokenDefaultsM3 extends ChipThemeData {
17+
const _TokenDefaultsM3(this.context, this.isEnabled)
18+
: super(
19+
elevation: ${elevation("$tokenGroup$variant.container")},
20+
shape: ${shape("$tokenGroup.container")},
21+
showCheckmark: true,
22+
);
23+
24+
final BuildContext context;
25+
final bool isEnabled;
26+
27+
@override
28+
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
29+
30+
@override
31+
Color? get backgroundColor => ${componentColor("$tokenGroup$variant.container")};
32+
33+
@override
34+
Color? get shadowColor => ${color("$tokenGroup.container.shadow-color")};
35+
36+
@override
37+
@override Color? get surfaceTintColor => ${color("$tokenGroup.container.surface-tint-layer.color")};
38+
39+
@override
40+
Color? get selectedColor => ${componentColor("$tokenGroup$variant.selected.container")};
41+
42+
@override
43+
Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
44+
45+
@override
46+
Color? get disabledColor => ${componentColor("$tokenGroup$variant.disabled.container")};
47+
48+
@override
49+
Color? get deleteIconColor => ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")};
50+
51+
@override
52+
BorderSide? get side => isEnabled
53+
? ${border('$tokenGroup$variant.unselected.outline')}
54+
: ${border('$tokenGroup$variant.disabled.unselected.outline')};
55+
56+
@override
57+
IconThemeData? get iconTheme => IconThemeData(
58+
color: isEnabled
59+
? ${color("$tokenGroup.with-leading-icon.leading-icon.color")}
60+
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")},
61+
size: ${tokens["$tokenGroup.with-leading-icon.leading-icon.size"]},
62+
);
63+
64+
@override
65+
EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
66+
67+
/// The chip at text scale 1 starts with 8px on each side and as text scaling
68+
/// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
69+
/// Once the widget has a text scaling of 2 or higher than the label padding
70+
/// remains 4px.
71+
@override
72+
EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
73+
const EdgeInsets.symmetric(horizontal: 8.0),
74+
const EdgeInsets.symmetric(horizontal: 4.0),
75+
clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
76+
)!;
77+
}
78+
''';
79+
}

0 commit comments

Comments
 (0)