fix: [MDS-984] Update LinearProgress according to design (#342)

example/lib/src/storybook/stories/linear_progress.dart

@@ -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",
@@ -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,
         ),
       ),
     );

lib/src/theme/progress/linear_progress/linear_progress_colors.dart

@@ -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,
     );
   }
 
@@ -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)!,
     );
   }
 
@@ -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));
   }
 }

lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart

@@ -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,
     );
   }
 
@@ -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)!,
     );
   }
 
@@ -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));
   }
 }

lib/src/theme/progress/linear_progress/linear_progress_sizes.dart

@@ -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

lib/src/theme/progress/linear_progress/linear_progress_theme.dart

@@ -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);
 

lib/src/theme/progress_pin/progress_pin_properties.dart

@@ -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;
 
@@ -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,
     );
   }
@@ -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)!,
     );
   }
@@ -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));
   }
 }

lib/src/theme/progress_pin/progress_pin_theme.dart

@@ -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

lib/src/widgets/common/progress_indicators/linear_progress_indicator.dart

@@ -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;
@@ -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.
@@ -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,
@@ -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,
             ),
           ),

lib/src/widgets/common/progress_indicators/painters/linear_progress_indicator_painter.dart

@@ -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,
   });
 
@@ -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);
 
@@ -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
@@ -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;
   }
 }