Skip to content

Commit

Permalink
fix: [MDS-984] Update LinearProgress according to design (#342)
Browse files Browse the repository at this point in the history
  • Loading branch information
Kypsis authored Feb 5, 2024
1 parent 833a4a4 commit 2294a0b
Show file tree
Hide file tree
Showing 14 changed files with 341 additions and 91 deletions.
22 changes: 17 additions & 5 deletions example/lib/src/storybook/stories/linear_progress.dart
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,16 @@ class LinearProgressStory extends StatelessWidget {
description: "Show pin for LinearProgress",
);

final showMinLabelKnob = context.knobs.boolean(
label: "showMinLabel",
description: "Show minLabel for LinearProgress",
);

final showMaxLabelKnob = context.knobs.boolean(
label: "showMaxLabel",
description: "Show maxLabel for LinearProgress",
);

final showPinShadowKnob = context.knobs.boolean(
label: "showPinShadow",
description: "Show pin shadow for LinearProgress",
Expand All @@ -108,18 +118,20 @@ class LinearProgressStory extends StatelessWidget {
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 16),
child: MoonLinearProgress(
linearProgressSize: progressSizeKnob,
value: linearProgressValueKnob,
color: color,
backgroundColor: backgroundColor,
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
showMinLabel: showMinLabelKnob,
showMaxLabel: showMaxLabelKnob,
showPin: showPinKnob,
pinStyle: PinStyle(
pinColor: pinColor,
pinBorderColor: pinBorderColor,
thumbColor: thumbColor,
showShadow: showPinShadowKnob,
),
value: linearProgressValueKnob,
linearProgressSize: progressSizeKnob,
color: color,
backgroundColor: backgroundColor,
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
),
),
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,25 @@ class MoonLinearProgressColors extends ThemeExtension<MoonLinearProgressColors>
/// Linear progress background color.
final Color backgroundColor;

/// Linear progress minWidget and maxWidget text color.
final Color textColor;

const MoonLinearProgressColors({
required this.color,
required this.backgroundColor,
required this.textColor,
});

@override
MoonLinearProgressColors copyWith({
Color? color,
Color? backgroundColor,
Color? textColor,
}) {
return MoonLinearProgressColors(
color: color ?? this.color,
backgroundColor: backgroundColor ?? this.backgroundColor,
textColor: textColor ?? this.textColor,
);
}

Expand All @@ -34,6 +40,7 @@ class MoonLinearProgressColors extends ThemeExtension<MoonLinearProgressColors>
return MoonLinearProgressColors(
color: colorPremulLerp(color, other.color, t)!,
backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!,
textColor: colorPremulLerp(textColor, other.textColor, t)!,
);
}

Expand All @@ -43,6 +50,7 @@ class MoonLinearProgressColors extends ThemeExtension<MoonLinearProgressColors>
properties
..add(DiagnosticsProperty("type", "MoonLinearProgressColors"))
..add(ColorProperty("color", color))
..add(ColorProperty("backgroundColor", backgroundColor));
..add(ColorProperty("backgroundColor", backgroundColor))
..add(ColorProperty("textColor", textColor));
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,37 @@ class MoonLinearProgressSizeProperties extends ThemeExtension<MoonLinearProgress
/// Linear progress height.
final double progressHeight;

/// Linear progress thumb size value.
final double thumbSizeValue;

/// Linear progress gap between progress bar and minWidget or maxWidget.
final double verticalGap;

/// Linear progress minWidget and maxWidget text style.
final TextStyle textStyle;

const MoonLinearProgressSizeProperties({
required this.borderRadius,
required this.progressHeight,
required this.thumbSizeValue,
required this.verticalGap,
required this.textStyle,
});

@override
MoonLinearProgressSizeProperties copyWith({
BorderRadiusGeometry? borderRadius,
double? progressHeight,
double? thumbSizeValue,
double? verticalGap,
TextStyle? textStyle,
}) {
return MoonLinearProgressSizeProperties(
borderRadius: borderRadius ?? this.borderRadius,
progressHeight: progressHeight ?? this.progressHeight,
thumbSizeValue: thumbSizeValue ?? this.thumbSizeValue,
verticalGap: verticalGap ?? this.verticalGap,
textStyle: textStyle ?? this.textStyle,
);
}

Expand All @@ -35,6 +53,9 @@ class MoonLinearProgressSizeProperties extends ThemeExtension<MoonLinearProgress
return MoonLinearProgressSizeProperties(
borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!,
progressHeight: lerpDouble(progressHeight, other.progressHeight, t)!,
thumbSizeValue: lerpDouble(thumbSizeValue, other.thumbSizeValue, t)!,
verticalGap: lerpDouble(verticalGap, other.verticalGap, t)!,
textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
);
}

Expand All @@ -44,6 +65,9 @@ class MoonLinearProgressSizeProperties extends ThemeExtension<MoonLinearProgress
properties
..add(DiagnosticsProperty("type", "MoonLinearProgressSizeProperties"))
..add(DiagnosticsProperty<BorderRadiusGeometry>("borderRadius", borderRadius))
..add(DoubleProperty("progressHeight", progressHeight));
..add(DoubleProperty("progressHeight", progressHeight))
..add(DoubleProperty("thumbSizeValue", thumbSizeValue))
..add(DoubleProperty("verticalGap", verticalGap))
..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle));
}
}
15 changes: 15 additions & 0 deletions lib/src/theme/progress/linear_progress/linear_progress_sizes.dart
Original file line number Diff line number Diff line change
Expand Up @@ -35,26 +35,41 @@ class MoonLinearProgressSizes extends ThemeExtension<MoonLinearProgressSizes> wi
MoonLinearProgressSizeProperties(
borderRadius: tokens.borders.surfaceXs,
progressHeight: tokens.sizes.x6s,
thumbSizeValue: tokens.sizes.x3s,
verticalGap: tokens.sizes.x4s,
textStyle: tokens.typography.caption.text10,
),
x5s = x5s ??
MoonLinearProgressSizeProperties(
borderRadius: tokens.borders.surfaceXs,
progressHeight: tokens.sizes.x5s,
thumbSizeValue: tokens.sizes.x3s,
verticalGap: tokens.sizes.x4s,
textStyle: tokens.typography.caption.text10,
),
x4s = x4s ??
MoonLinearProgressSizeProperties(
borderRadius: tokens.borders.surfaceSm,
progressHeight: tokens.sizes.x4s,
thumbSizeValue: tokens.sizes.x3s,
verticalGap: 6,
textStyle: tokens.typography.caption.text10,
),
x3s = x3s ??
MoonLinearProgressSizeProperties(
borderRadius: tokens.borders.surfaceMd,
progressHeight: tokens.sizes.x3s,
thumbSizeValue: tokens.sizes.x2s,
verticalGap: 6,
textStyle: tokens.typography.caption.text10,
),
x2s = x2s ??
MoonLinearProgressSizeProperties(
borderRadius: tokens.borders.surfaceLg,
progressHeight: tokens.sizes.x2s,
thumbSizeValue: tokens.sizes.x2s,
verticalGap: tokens.sizes.x5s,
textStyle: tokens.typography.caption.text10,
);

@override
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ class MoonLinearProgressTheme extends ThemeExtension<MoonLinearProgressTheme> wi
MoonLinearProgressColors(
color: tokens.colors.piccolo,
backgroundColor: tokens.colors.beerus,
textColor: tokens.colors.textPrimary,
),
sizes = sizes ?? MoonLinearProgressSizes(tokens: tokens);

Expand Down
24 changes: 16 additions & 8 deletions lib/src/theme/progress_pin/progress_pin_properties.dart
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ class MoonProgressPinProperties extends ThemeExtension<MoonProgressPinProperties
/// Progress pin shadow elevation.
final double shadowElevation;

/// Progress pin arrow height.
final double arrowHeight;

/// Progress pin arrow width.
final double arrowWidth;

/// Vertical space between pin and linear progress.
final double pinDistance;

Expand All @@ -17,36 +23,36 @@ class MoonProgressPinProperties extends ThemeExtension<MoonProgressPinProperties
/// Progress pin border width.
final double pinBorderWidth;

/// Thumb width multiplier for linear progress.
final double thumbWidthMultiplier;

/// Progress pin text style.
final TextStyle textStyle;

const MoonProgressPinProperties({
required this.shadowElevation,
required this.arrowHeight,
required this.arrowWidth,
required this.pinDistance,
required this.pinWidth,
required this.pinBorderWidth,
required this.thumbWidthMultiplier,
required this.textStyle,
});

@override
MoonProgressPinProperties copyWith({
double? shadowElevation,
double? arrowHeight,
double? arrowWidth,
double? pinDistance,
double? pinWidth,
double? pinBorderWidth,
double? thumbWidthMultiplier,
TextStyle? textStyle,
}) {
return MoonProgressPinProperties(
shadowElevation: shadowElevation ?? this.shadowElevation,
arrowHeight: arrowHeight ?? this.arrowHeight,
arrowWidth: arrowWidth ?? this.arrowWidth,
pinDistance: pinDistance ?? this.pinDistance,
pinWidth: pinWidth ?? this.pinWidth,
pinBorderWidth: pinBorderWidth ?? this.pinBorderWidth,
thumbWidthMultiplier: thumbWidthMultiplier ?? this.thumbWidthMultiplier,
textStyle: textStyle ?? this.textStyle,
);
}
Expand All @@ -57,10 +63,11 @@ class MoonProgressPinProperties extends ThemeExtension<MoonProgressPinProperties

return MoonProgressPinProperties(
shadowElevation: lerpDouble(shadowElevation, other.shadowElevation, t)!,
arrowHeight: lerpDouble(arrowHeight, other.arrowHeight, t)!,
arrowWidth: lerpDouble(arrowWidth, other.arrowWidth, t)!,
pinDistance: lerpDouble(pinDistance, other.pinDistance, t)!,
pinWidth: lerpDouble(pinWidth, other.pinWidth, t)!,
pinBorderWidth: lerpDouble(pinBorderWidth, other.pinBorderWidth, t)!,
thumbWidthMultiplier: lerpDouble(thumbWidthMultiplier, other.thumbWidthMultiplier, t)!,
textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
);
}
Expand All @@ -71,10 +78,11 @@ class MoonProgressPinProperties extends ThemeExtension<MoonProgressPinProperties
properties
..add(DiagnosticsProperty("type", "MoonProgressPinProperties"))
..add(DoubleProperty("shadowElevation", shadowElevation))
..add(DoubleProperty("arrowHeight", arrowHeight))
..add(DoubleProperty("arrowWidth", arrowWidth))
..add(DoubleProperty("pinDistance", pinDistance))
..add(DoubleProperty("pinWidth", pinWidth))
..add(DoubleProperty("pinBorderWidth", pinBorderWidth))
..add(DoubleProperty("thumbWidthMultiplier", thumbWidthMultiplier))
..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle));
}
}
9 changes: 5 additions & 4 deletions lib/src/theme/progress_pin/progress_pin_theme.dart
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,13 @@ class MoonProgressPinTheme extends ThemeExtension<MoonProgressPinTheme> with Dia
),
properties = properties ??
MoonProgressPinProperties(
pinDistance: 6,
arrowHeight: 6,
arrowWidth: tokens.sizes.x4s,
pinDistance: tokens.sizes.x5s,
pinWidth: 36,
pinBorderWidth: 2,
thumbWidthMultiplier: 1.5,
pinBorderWidth: tokens.sizes.x6s,
shadowElevation: 6,
textStyle: tokens.typography.caption.text10.copyWith(letterSpacing: 0.5),
textStyle: tokens.typography.caption.text10,
);

@override
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import 'package:moon_design/src/widgets/common/progress_indicators/painters/line

class MoonLinearProgressIndicator extends MoonBaseProgressIndicator {
/// The border radius of the linear progress indicator.
final BorderRadiusGeometry borderRadius;
final BorderRadiusGeometry containerRadius;
final BorderRadiusGeometry progressRadius;

/// The minimum height of the linear progress indicator.
final double minHeight;
Expand All @@ -20,7 +21,8 @@ class MoonLinearProgressIndicator extends MoonBaseProgressIndicator {
super.semanticsLabel,
super.semanticsValue,
this.minHeight = 4,
this.borderRadius = BorderRadius.zero,
this.containerRadius = BorderRadius.zero,
this.progressRadius = BorderRadius.zero,
}) : assert(minHeight > 0);

/// Color of the track being filled by the linear indicator.
Expand Down Expand Up @@ -65,7 +67,8 @@ class _MoonLinearProgressIndicatorState extends State<MoonLinearProgressIndicato
}

Widget buildStaticProgressIndicator(BuildContext context, double animationValue, TextDirection textDirection) {
final resolvedBorderRadius = widget.borderRadius.resolve(Directionality.of(context));
final resolvedContainerRadius = widget.containerRadius.resolve(Directionality.of(context));
final resolvedProgressRadius = widget.progressRadius.resolve(Directionality.of(context));

return widget.buildSemanticsWrapper(
context: context,
Expand All @@ -83,7 +86,8 @@ class _MoonLinearProgressIndicatorState extends State<MoonLinearProgressIndicato
// may be null
animationValue: animationValue,
// ignored if widget.value is not null
borderRadius: resolvedBorderRadius,
containerRadius: resolvedContainerRadius,
progressRadius: resolvedProgressRadius,
textDirection: textDirection,
),
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,17 @@ class MoonLinearProgressIndicatorPainter extends CustomPainter {
final Color valueColor;
final double? value;
final double animationValue;
final BorderRadius borderRadius;
final BorderRadius containerRadius;
final BorderRadius progressRadius;
final TextDirection textDirection;

const MoonLinearProgressIndicatorPainter({
required this.backgroundColor,
required this.valueColor,
this.value,
required this.animationValue,
required this.borderRadius,
required this.containerRadius,
required this.progressRadius,
required this.textDirection,
});

Expand All @@ -57,10 +59,10 @@ class MoonLinearProgressIndicatorPainter extends CustomPainter {

final containerRect = RRect.fromRectAndCorners(
Offset.zero & size,
topLeft: MoonSquircleRadius(cornerRadius: borderRadius.topLeft.x),
topRight: MoonSquircleRadius(cornerRadius: borderRadius.topRight.x),
bottomLeft: MoonSquircleRadius(cornerRadius: borderRadius.bottomLeft.x),
bottomRight: MoonSquircleRadius(cornerRadius: borderRadius.bottomRight.x),
topLeft: MoonSquircleRadius(cornerRadius: containerRadius.topLeft.x),
topRight: MoonSquircleRadius(cornerRadius: containerRadius.topRight.x),
bottomLeft: MoonSquircleRadius(cornerRadius: containerRadius.bottomLeft.x),
bottomRight: MoonSquircleRadius(cornerRadius: containerRadius.bottomRight.x),
);
canvas.drawRRect(containerRect, paint);

Expand All @@ -81,10 +83,10 @@ class MoonLinearProgressIndicatorPainter extends CustomPainter {

final progressRect = RRect.fromRectAndCorners(
Offset(left, 0.0) & Size(width, size.height),
topLeft: MoonSquircleRadius(cornerRadius: borderRadius.topLeft.x),
topRight: MoonSquircleRadius(cornerRadius: borderRadius.topRight.x),
bottomLeft: MoonSquircleRadius(cornerRadius: borderRadius.bottomLeft.x),
bottomRight: MoonSquircleRadius(cornerRadius: borderRadius.bottomRight.x),
topLeft: MoonSquircleRadius(cornerRadius: progressRadius.topLeft.x),
topRight: MoonSquircleRadius(cornerRadius: progressRadius.topRight.x),
bottomLeft: MoonSquircleRadius(cornerRadius: progressRadius.bottomLeft.x),
bottomRight: MoonSquircleRadius(cornerRadius: progressRadius.bottomRight.x),
);

// Clipping progressRect with containerRect
Expand Down Expand Up @@ -113,7 +115,8 @@ class MoonLinearProgressIndicatorPainter extends CustomPainter {
oldPainter.valueColor != valueColor ||
oldPainter.value != value ||
oldPainter.animationValue != animationValue ||
oldPainter.borderRadius != borderRadius ||
oldPainter.containerRadius != containerRadius ||
oldPainter.progressRadius != progressRadius ||
oldPainter.textDirection != textDirection;
}
}
Loading

0 comments on commit 2294a0b

Please sign in to comment.