Unverified Commit efc5123d authored by jslavitz's avatar jslavitz Committed by GitHub

Chip press elevation (#22383)

* Make Chip press elevation customizable.
parent 75b24070
......@@ -27,7 +27,6 @@ const double _kDeleteIconSize = 18.0;
const int _kCheckmarkAlpha = 0xde; // 87%
const int _kDisabledAlpha = 0x61; // 38%
const double _kCheckmarkStrokeWidth = 2.0;
const double _kPressElevation = 8.0;
const Duration _kSelectDuration = Duration(milliseconds: 195);
const Duration _kCheckmarkDuration = Duration(milliseconds: 150);
......@@ -275,6 +274,12 @@ abstract class SelectableChipAttributes {
/// ```
ValueChanged<bool> get onSelected;
/// Elevation to be applied on the chip during the press motion.
/// This controls the size of the shadow below the chip.
///
/// Defaults to 8.
double get pressElevation;
/// Color to be used for the chip's background, indicating that it is
/// selected.
///
......@@ -378,6 +383,12 @@ abstract class TappableChipAttributes {
/// ```
VoidCallback get onPressed;
/// Elevation to be applied on the chip during the press motion.
/// This controls the size of the shadow below the chip.
///
/// Defaults to 8.
double get pressElevation;
/// Tooltip string to be used for the body area (where the label and avatar
/// are) of the chip.
String get tooltip;
......@@ -564,6 +575,7 @@ class InputChip extends StatelessWidget
this.deleteIconColor,
this.deleteButtonTooltipMessage,
this.onPressed,
this.pressElevation,
this.disabledColor,
this.selectedColor,
this.tooltip,
......@@ -603,6 +615,8 @@ class InputChip extends StatelessWidget
@override
final VoidCallback onPressed;
@override
final double pressElevation;
@override
final Color disabledColor;
@override
final Color selectedColor;
......@@ -633,6 +647,7 @@ class InputChip extends StatelessWidget
deleteButtonTooltipMessage: deleteButtonTooltipMessage,
onSelected: onSelected,
onPressed: onPressed,
pressElevation: pressElevation,
selected: selected,
tapEnabled: true,
disabledColor: disabledColor,
......@@ -716,6 +731,7 @@ class ChoiceChip extends StatelessWidget
this.labelStyle,
this.labelPadding,
this.onSelected,
this.pressElevation,
@required this.selected,
this.selectedColor,
this.disabledColor,
......@@ -741,6 +757,8 @@ class ChoiceChip extends StatelessWidget
@override
final ValueChanged<bool> onSelected;
@override
final double pressElevation;
@override
final bool selected;
@override
final Color disabledColor;
......@@ -772,6 +790,7 @@ class ChoiceChip extends StatelessWidget
labelStyle: labelStyle ?? (selected ? chipTheme.secondaryLabelStyle : null),
labelPadding: labelPadding,
onSelected: onSelected,
pressElevation: pressElevation,
selected: selected,
showCheckmark: false,
onDeleted: null,
......@@ -889,6 +908,7 @@ class FilterChip extends StatelessWidget
this.labelPadding,
this.selected = false,
@required this.onSelected,
this.pressElevation,
this.disabledColor,
this.selectedColor,
this.tooltip,
......@@ -915,6 +935,8 @@ class FilterChip extends StatelessWidget
@override
final ValueChanged<bool> onSelected;
@override
final double pressElevation;
@override
final Color disabledColor;
@override
final Color selectedColor;
......@@ -943,6 +965,7 @@ class FilterChip extends StatelessWidget
labelStyle: labelStyle,
labelPadding: labelPadding,
onSelected: onSelected,
pressElevation: pressElevation,
selected: selected,
tooltip: tooltip,
shape: shape,
......@@ -1014,6 +1037,7 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
this.labelStyle,
this.labelPadding,
@required this.onPressed,
this.pressElevation,
this.tooltip,
this.shape,
this.clipBehavior = Clip.none,
......@@ -1039,6 +1063,8 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
@override
final VoidCallback onPressed;
@override
final double pressElevation;
@override
final String tooltip;
@override
final ShapeBorder shape;
......@@ -1058,6 +1084,7 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
avatar: avatar,
label: label,
onPressed: onPressed,
pressElevation: pressElevation,
tooltip: tooltip,
labelStyle: labelStyle,
backgroundColor: backgroundColor,
......@@ -1127,6 +1154,7 @@ class RawChip extends StatefulWidget
this.deleteButtonTooltipMessage,
this.onPressed,
this.onSelected,
this.pressElevation = 8.0,
this.tapEnabled = true,
this.selected,
this.showCheckmark = true,
......@@ -1165,6 +1193,8 @@ class RawChip extends StatefulWidget
@override
final VoidCallback onPressed;
@override
final double pressElevation;
@override
final bool selected;
@override
final bool isEnabled;
......@@ -1220,10 +1250,6 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
Animation<double> enableAnimation;
Animation<double> selectionFade;
static final Animatable<double> pressedShadowTween = Tween<double>(
begin: 0.0,
end: _kPressElevation,
);
bool get hasDeleteButton => widget.onDeleted != null;
bool get hasAvatar => widget.avatar != null;
......@@ -1436,8 +1462,9 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
final TextDirection textDirection = Directionality.of(context);
final ShapeBorder shape = widget.shape ?? chipTheme.shape;
Widget result = Material(
elevation: isTapping ? _kPressElevation : 0.0,
elevation: isTapping ? widget.pressElevation : 0.0,
animationDuration: pressedAnimationDuration,
shape: shape,
clipBehavior: widget.clipBehavior,
......
......@@ -1403,6 +1403,36 @@ void main() {
expect(deleted, true);
});
testWidgets('Chip elevation works correctly', (WidgetTester tester) async {
final ThemeData theme = ThemeData(
platform: TargetPlatform.android,
primarySwatch: Colors.red,
);
final ChipThemeData chipTheme = theme.chipTheme;
InputChip inputChip = const InputChip(label: Text('Label'), pressElevation: 8.0);
Widget buildChip(ChipThemeData data) {
return _wrapForChip(
textDirection: TextDirection.ltr,
child: Theme(
data: theme,
child: inputChip,
),
);
}
await tester.pumpWidget(buildChip(chipTheme));
expect(inputChip.pressElevation, 8.0);
inputChip = const InputChip(label: Text('Label'), pressElevation: 12.0);
await tester.pumpWidget(buildChip(chipTheme));
await tester.pumpAndSettle();
expect(inputChip.pressElevation, 12.0);
});
testWidgets('can be tapped outside of chip body', (WidgetTester tester) async {
bool pressed = false;
await tester.pumpWidget(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment