mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
b34ee07372
The regular chip and the action chip templates were referencing non existent M3 design tokens. Fixes https://github.com/flutter/flutter/issues/141288 The `ActionChip` doesn't have any visual difference. Even though the template and file changes, the default `labelStyle` color already uses `onSurface`. For the reviewer, I've changed the `action_chip_test` to expect a color from the colorScheme so that it is more explicit that the color might not be the same as the labelLarge default in the global textTheme, even if for this case the color is the same. The regular `Chip` does have visual differences, in particular, the label and trailing icon colors, which were not following the specification. In order to fix this, the regular chip now is based from the `filter-chip` spec as described in the linked issue. ## Before  ## After 
92 lines
3.2 KiB
Dart
92 lines
3.2 KiB
Dart
// 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 ChipTemplate extends TokenTemplate {
|
|
const ChipTemplate(super.blockName, super.fileName, super.tokens, {
|
|
super.colorSchemePrefix = '_colors.',
|
|
super.textThemePrefix = '_textTheme.'
|
|
});
|
|
|
|
static const String tokenGroup = 'md.comp.filter-chip';
|
|
static const String variant = '.flat';
|
|
|
|
@override
|
|
String generate() => '''
|
|
class _${blockName}DefaultsM3 extends ChipThemeData {
|
|
_${blockName}DefaultsM3(this.context, this.isEnabled)
|
|
: super(
|
|
elevation: ${elevation("$tokenGroup$variant.container")},
|
|
shape: ${shape("$tokenGroup.container")},
|
|
showCheckmark: true,
|
|
);
|
|
|
|
final BuildContext context;
|
|
final bool isEnabled;
|
|
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
|
late final TextTheme _textTheme = Theme.of(context).textTheme;
|
|
|
|
@override
|
|
TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")}?.copyWith(
|
|
color: isEnabled
|
|
? ${color("$tokenGroup.unselected.label-text.color")}
|
|
: ${color("$tokenGroup.disabled.label-text.color")},
|
|
);
|
|
|
|
@override
|
|
MaterialStateProperty<Color?>? get color => null; // Subclasses override this getter
|
|
|
|
@override
|
|
Color? get shadowColor => ${colorOrTransparent("$tokenGroup.container.shadow-color")};
|
|
|
|
@override
|
|
Color? get surfaceTintColor => ${colorOrTransparent("$tokenGroup.container.surface-tint-layer.color")};
|
|
|
|
@override
|
|
Color? get checkmarkColor => null;
|
|
|
|
@override
|
|
Color? get deleteIconColor => isEnabled
|
|
? ${color("$tokenGroup.with-trailing-icon.unselected.trailing-icon.color")}
|
|
: ${color("$tokenGroup.with-trailing-icon.disabled.trailing-icon.color")};
|
|
|
|
@override
|
|
BorderSide? get side => isEnabled
|
|
? ${border('$tokenGroup$variant.unselected.outline')}
|
|
: ${border('$tokenGroup$variant.disabled.unselected.outline')};
|
|
|
|
@override
|
|
IconThemeData? get iconTheme => IconThemeData(
|
|
color: isEnabled
|
|
? ${color("$tokenGroup.with-leading-icon.unselected.leading-icon.color")}
|
|
: ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")},
|
|
size: ${getToken("$tokenGroup.with-icon.icon.size")},
|
|
);
|
|
|
|
@override
|
|
EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
|
|
|
|
/// The label padding of the chip scales with the font size specified in the
|
|
/// [labelStyle], and the system font size settings that scale font sizes
|
|
/// globally.
|
|
///
|
|
/// The chip at effective font size 14.0 starts with 8px on each side and as
|
|
/// the font size scales up to closer to 28.0, the label padding is linearly
|
|
/// interpolated from 8px to 4px. Once the label has a font size of 2 or
|
|
/// higher, label padding remains 4px.
|
|
@override
|
|
EdgeInsetsGeometry? get labelPadding {
|
|
final double fontSize = labelStyle?.fontSize ?? 14.0;
|
|
final double fontSizeRatio = MediaQuery.textScalerOf(context).scale(fontSize) / 14.0;
|
|
return EdgeInsets.lerp(
|
|
const EdgeInsets.symmetric(horizontal: 8.0),
|
|
const EdgeInsets.symmetric(horizontal: 4.0),
|
|
clampDouble(fontSizeRatio - 1.0, 0.0, 1.0),
|
|
)!;
|
|
}
|
|
}
|
|
''';
|
|
}
|