fix: [MDS-461] Make widgets accept BorderRadius instead of SmoothBord…

…erRadius (#98)
coingaming · Mar 28, 2023 · f855f70 · f855f70
1 parent 728c939
commit f855f70
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 152 deletions.
diff --git a/example/lib/src/storybook/stories/tooltip.dart b/example/lib/src/storybook/stories/tooltip.dart
@@ -110,7 +110,7 @@ class TooltipStory extends Story {
                         return MoonTooltip(
                           show: show,
                           backgroundColor: color,
-                          borderRadiusValue: borderRadiusKnob.toDouble(),
+                          borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
                           tooltipPosition: tooltipPositionsKnob,
                           hasArrow: showArrowKnob,
                           arrowBaseWidth: arrowBaseWidthKnob,

diff --git a/lib/src/theme/accordion/accordion_item_properties.dart b/lib/src/theme/accordion/accordion_item_properties.dart
@@ -1,4 +1,3 @@
-import 'package:figma_squircle/figma_squircle.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -9,12 +8,7 @@ class MoonAccordionItemProperties extends ThemeExtension<MoonAccordionItemProper
   static final properties = MoonAccordionItemProperties(
     transitionDuration: const Duration(milliseconds: 200),
     transitionCurve: Curves.easeInOutCubic,
-    borderRadius: SmoothBorderRadius.all(
-      SmoothRadius(
-        cornerRadius: MoonBorders.borders.interactiveSm.topLeft.x,
-        cornerSmoothing: 1,
-      ),
-    ),
+    borderRadius: MoonBorders.borders.interactiveSm,
   );
 
   /// Accordion item transition duration.
@@ -24,7 +18,7 @@ class MoonAccordionItemProperties extends ThemeExtension<MoonAccordionItemProper
   final Curve transitionCurve;
 
   /// Accordion item border radius.
-  final SmoothBorderRadius borderRadius;
+  final BorderRadius borderRadius;
 
   const MoonAccordionItemProperties({
     required this.borderRadius,
@@ -36,7 +30,7 @@ class MoonAccordionItemProperties extends ThemeExtension<MoonAccordionItemProper
   MoonAccordionItemProperties copyWith({
     Duration? transitionDuration,
     Curve? transitionCurve,
-    SmoothBorderRadius? borderRadius,
+    BorderRadius? borderRadius,
   }) {
     return MoonAccordionItemProperties(
       transitionDuration: transitionDuration ?? this.transitionDuration,
@@ -52,7 +46,7 @@ class MoonAccordionItemProperties extends ThemeExtension<MoonAccordionItemProper
     return MoonAccordionItemProperties(
       transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t),
       transitionCurve: other.transitionCurve,
-      borderRadius: SmoothBorderRadius.lerp(borderRadius, other.borderRadius, t)!,
+      borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!,
     );
   }
 

diff --git a/lib/src/theme/checkbox/checkbox_properties.dart b/lib/src/theme/checkbox/checkbox_properties.dart
@@ -1,28 +1,27 @@
-import 'dart:ui';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+
 import 'package:moon_design/src/theme/borders.dart';
 
 @immutable
 class MoonCheckboxProperties extends ThemeExtension<MoonCheckboxProperties> with DiagnosticableTreeMixin {
   static final properties = MoonCheckboxProperties(
-    borderRadiusValue: MoonBorders.borders.interactiveXs.topLeft.x,
+    borderRadius: MoonBorders.borders.interactiveXs,
   );
 
-  /// Checkbox border radius value.
-  final double borderRadiusValue;
+  /// Checkbox border radius.
+  final BorderRadius borderRadius;
 
   const MoonCheckboxProperties({
-    required this.borderRadiusValue,
+    required this.borderRadius,
   });
 
   @override
   MoonCheckboxProperties copyWith({
-    double? borderRadiusValue,
+    BorderRadius? borderRadius,
   }) {
     return MoonCheckboxProperties(
-      borderRadiusValue: borderRadiusValue ?? this.borderRadiusValue,
+      borderRadius: borderRadius ?? this.borderRadius,
     );
   }
 
@@ -31,7 +30,7 @@ class MoonCheckboxProperties extends ThemeExtension<MoonCheckboxProperties> with
     if (other is! MoonCheckboxProperties) return this;
 
     return MoonCheckboxProperties(
-      borderRadiusValue: lerpDouble(borderRadiusValue, other.borderRadiusValue, t)!,
+      borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!,
     );
   }
 
@@ -40,6 +39,6 @@ class MoonCheckboxProperties extends ThemeExtension<MoonCheckboxProperties> with
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty("type", "MoonCheckboxProperties"))
-      ..add(DiagnosticsProperty<double>("borderRadiusValue", borderRadiusValue));
+      ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius));
   }
 }
diff --git a/lib/src/utils/extensions.dart b/lib/src/utils/extensions.dart
@@ -1,4 +1,6 @@
 import 'dart:ui';
+
+import 'package:figma_squircle/figma_squircle.dart';
 import 'package:flutter/widgets.dart';
 
 extension DarkModeX on BuildContext {
@@ -8,3 +10,27 @@ extension DarkModeX on BuildContext {
     return brightness == Brightness.dark;
   }
 }
+
+extension BorderRadiusX on BorderRadius {
+  /// Returns SmoothBorderRadius.
+  SmoothBorderRadius get smoothBorderRadius {
+    return SmoothBorderRadius.only(
+      topLeft: SmoothRadius(
+        cornerRadius: topLeft.x,
+        cornerSmoothing: 1,
+      ),
+      topRight: SmoothRadius(
+        cornerRadius: topRight.x,
+        cornerSmoothing: 1,
+      ),
+      bottomLeft: SmoothRadius(
+        cornerRadius: bottomLeft.x,
+        cornerSmoothing: 1,
+      ),
+      bottomRight: SmoothRadius(
+        cornerRadius: bottomRight.x,
+        cornerSmoothing: 1,
+      ),
+    );
+  }
+}
diff --git a/lib/src/widgets/accordion/accordion_item.dart b/lib/src/widgets/accordion/accordion_item.dart
@@ -8,6 +8,7 @@ import 'package:moon_design/src/theme/effects/focus_effects.dart';
 import 'package:moon_design/src/theme/effects/hover_effects.dart';
 import 'package:moon_design/src/theme/shadows.dart';
 import 'package:moon_design/src/theme/theme.dart';
+import 'package:moon_design/src/utils/extensions.dart';
 import 'package:moon_design/src/widgets/common/effects/focus_effect.dart';
 import 'package:moon_design/src/widgets/common/icons/icons.dart';
 
@@ -88,7 +89,7 @@ class MoonAccordionItem<T> extends StatefulWidget {
   final EdgeInsetsGeometry? childrenPadding;
 
   /// The accordion's border radius.
-  final SmoothBorderRadius? borderRadius;
+  final BorderRadius? borderRadius;
 
   /// Specifies the alignment of [children], which are arranged in a column when
   /// the accordion is expanded.
@@ -426,14 +427,9 @@ class _MoonAccordionItemState<T> extends State<MoonAccordionItem<T>> with Single
     final Duration effectiveHoverEffectDuration =
         context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonHoverEffects.lightHoverEffect.hoverDuration;
 
-    final SmoothBorderRadius effectiveBorderRadius = widget.borderRadius ??
+    final BorderRadius effectiveBorderRadius = widget.borderRadius ??
         context.moonTheme?.accordionTheme.itemProperties.borderRadius ??
-        SmoothBorderRadius.all(
-          SmoothRadius(
-            cornerRadius: MoonBorders.borders.interactiveSm.topLeft.x,
-            cornerSmoothing: 1,
-          ),
-        );
+        MoonBorders.borders.interactiveSm;
 
     _animationController ??= AnimationController(duration: effectiveTransitionDuration, vsync: this);
     _curvedAnimation ??= CurvedAnimation(parent: _animationController!, curve: effectiveTransitionCurve);
@@ -478,7 +474,7 @@ class _MoonAccordionItemState<T> extends State<MoonAccordionItem<T>> with Single
                           shadows: effectiveShadows,
                           shape: SmoothRectangleBorder(
                             side: widget.showBorder ? BorderSide(color: effectiveBorderColor) : BorderSide.none,
-                            borderRadius: effectiveBorderRadius,
+                            borderRadius: effectiveBorderRadius.smoothBorderRadius,
                           ),
                         )
                       : null,
@@ -496,7 +492,7 @@ class _MoonAccordionItemState<T> extends State<MoonAccordionItem<T>> with Single
                                 shadows: effectiveShadows,
                                 shape: SmoothRectangleBorder(
                                   side: widget.showBorder ? BorderSide(color: effectiveBorderColor) : BorderSide.none,
-                                  borderRadius: effectiveBorderRadius,
+                                  borderRadius: effectiveBorderRadius.smoothBorderRadius,
                                 ),
                               )
                             : null,

diff --git a/lib/src/widgets/buttons/button.dart b/lib/src/widgets/buttons/button.dart
@@ -417,24 +417,7 @@ class MoonButton extends StatelessWidget {
                 width: showBorder ? effectiveBorderWidth : 0,
                 style: showBorder ? BorderStyle.solid : BorderStyle.none,
               ),
-              borderRadius: SmoothBorderRadius.only(
-                topLeft: SmoothRadius(
-                  cornerRadius: effectiveBorderRadius.topLeft.x,
-                  cornerSmoothing: 1,
-                ),
-                topRight: SmoothRadius(
-                  cornerRadius: effectiveBorderRadius.topRight.x,
-                  cornerSmoothing: 1,
-                ),
-                bottomLeft: SmoothRadius(
-                  cornerRadius: effectiveBorderRadius.bottomLeft.x,
-                  cornerSmoothing: 1,
-                ),
-                bottomRight: SmoothRadius(
-                  cornerRadius: effectiveBorderRadius.bottomRight.x,
-                  cornerSmoothing: 1,
-                ),
-              ),
+              borderRadius: effectiveBorderRadius.smoothBorderRadius,
             ),
           ),
           child: Padding(

diff --git a/lib/src/widgets/checkbox/checkbox.dart b/lib/src/widgets/checkbox/checkbox.dart
@@ -1,10 +1,12 @@
 import 'package:figma_squircle/figma_squircle.dart';
 import 'package:flutter/material.dart';
 
+import 'package:moon_design/src/theme/borders.dart';
 import 'package:moon_design/src/theme/colors.dart';
 import 'package:moon_design/src/theme/effects/focus_effects.dart';
 import 'package:moon_design/src/theme/opacity.dart';
 import 'package:moon_design/src/theme/theme.dart';
+import 'package:moon_design/src/utils/extensions.dart';
 import 'package:moon_design/src/utils/touch_target_padding.dart';
 import 'package:moon_design/src/widgets/checkbox/checkbox_painter.dart';
 import 'package:moon_design/src/widgets/common/effects/focus_effect.dart';
@@ -211,17 +213,11 @@ class _MoonCheckboxState extends State<MoonCheckbox> with TickerProviderStateMix
     final Duration effectiveFocusEffectDuration =
         context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration;
 
-    final double effectiveBorderRadiusValue = context.moonTheme?.checkboxTheme.properties.borderRadiusValue ?? 4;
+    final BorderRadius effectiveBorderRadius =
+        context.moonTheme?.checkboxTheme.properties.borderRadius ?? MoonBorders.borders.interactiveXs;
 
     final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled;
 
-    final SmoothBorderRadius resolvedBorderRadius = SmoothBorderRadius.all(
-      SmoothRadius(
-        cornerRadius: effectiveBorderRadiusValue,
-        cornerSmoothing: 1,
-      ),
-    );
-
     final MaterialStateProperty<MouseCursor> effectiveMouseCursor =
         MaterialStateProperty.resolveWith<MouseCursor>((Set<MaterialState> states) {
       return MaterialStateMouseCursor.clickable.resolve(states);
@@ -235,7 +231,7 @@ class _MoonCheckboxState extends State<MoonCheckbox> with TickerProviderStateMix
         child: MoonFocusEffect(
           show: states.contains(MaterialState.focused),
           effectExtent: effectiveFocusEffectExtent,
-          childBorderRadius: resolvedBorderRadius,
+          childBorderRadius: effectiveBorderRadius,
           effectColor: effectiveFocusEffectColor,
           effectCurve: effectiveFocusEffectCurve,
           effectDuration: effectiveFocusEffectDuration,
@@ -254,7 +250,7 @@ class _MoonCheckboxState extends State<MoonCheckbox> with TickerProviderStateMix
                 ..checkColor = effectiveCheckColor
                 ..value = value
                 ..previousValue = _previousValue
-                ..shape = SmoothRectangleBorder(borderRadius: resolvedBorderRadius)
+                ..shape = SmoothRectangleBorder(borderRadius: effectiveBorderRadius.smoothBorderRadius)
                 ..side = _resolveSide(BorderSide(color: effectiveBorderColor)),
             ),
           ),

diff --git a/lib/src/widgets/chips/chip.dart b/lib/src/widgets/chips/chip.dart
@@ -6,6 +6,7 @@ import 'package:moon_design/src/theme/chip/chip_size_properties.dart';
 import 'package:moon_design/src/theme/colors.dart';
 import 'package:moon_design/src/theme/effects/hover_effects.dart';
 import 'package:moon_design/src/theme/theme.dart';
+import 'package:moon_design/src/utils/extensions.dart';
 import 'package:moon_design/src/utils/shape_decoration_premul.dart';
 import 'package:moon_design/src/widgets/common/animated_icon_theme.dart';
 import 'package:moon_design/src/widgets/common/base_control.dart';
@@ -281,24 +282,7 @@ class MoonChip extends StatelessWidget {
                 width: showBorder ? effectiveBorderWidth : 0,
                 style: showBorder ? BorderStyle.solid : BorderStyle.none,
               ),
-              borderRadius: SmoothBorderRadius.only(
-                topLeft: SmoothRadius(
-                  cornerRadius: effectiveBorderRadius.topLeft.x,
-                  cornerSmoothing: 1,
-                ),
-                topRight: SmoothRadius(
-                  cornerRadius: effectiveBorderRadius.topRight.x,
-                  cornerSmoothing: 1,
-                ),
-                bottomLeft: SmoothRadius(
-                  cornerRadius: effectiveBorderRadius.bottomLeft.x,
-                  cornerSmoothing: 1,
-                ),
-                bottomRight: SmoothRadius(
-                  cornerRadius: effectiveBorderRadius.bottomRight.x,
-                  cornerSmoothing: 1,
-                ),
-              ),
+              borderRadius: effectiveBorderRadius.smoothBorderRadius,
             ),
           ),
 

diff --git a/lib/src/widgets/modal/modal.dart b/lib/src/widgets/modal/modal.dart
@@ -51,24 +51,7 @@ class MoonModal extends StatelessWidget {
             decoration: ShapeDecoration(
               color: effectiveBackgroundColor,
               shape: SmoothRectangleBorder(
-                borderRadius: SmoothBorderRadius.only(
-                  topLeft: SmoothRadius(
-                    cornerRadius: effectiveBorderRadius.topLeft.x,
-                    cornerSmoothing: 1,
-                  ),
-                  topRight: SmoothRadius(
-                    cornerRadius: effectiveBorderRadius.topRight.x,
-                    cornerSmoothing: 1,
-                  ),
-                  bottomLeft: SmoothRadius(
-                    cornerRadius: effectiveBorderRadius.bottomLeft.x,
-                    cornerSmoothing: 1,
-                  ),
-                  bottomRight: SmoothRadius(
-                    cornerRadius: effectiveBorderRadius.bottomRight.x,
-                    cornerSmoothing: 1,
-                  ),
-                ),
+                borderRadius: effectiveBorderRadius.smoothBorderRadius,
               ),
             ),
             child: child,

diff --git a/lib/src/widgets/popover/popover.dart b/lib/src/widgets/popover/popover.dart
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:moon_design/src/theme/colors.dart';
 import 'package:moon_design/src/theme/shadows.dart';
 import 'package:moon_design/src/theme/theme.dart';
+import 'package:moon_design/src/utils/extensions.dart';
 
 enum MoonPopoverPosition {
   top,
@@ -455,24 +456,7 @@ class MoonPopoverState extends State<MoonPopover> with RouteAware, SingleTickerP
                     color: effectiveBackgroundColor,
                     shadows: effectivePopoverShadows,
                     shape: SmoothRectangleBorder(
-                      borderRadius: SmoothBorderRadius.only(
-                        topLeft: SmoothRadius(
-                          cornerRadius: effectiveBorderRadius.topLeft.x,
-                          cornerSmoothing: 1,
-                        ),
-                        topRight: SmoothRadius(
-                          cornerRadius: effectiveBorderRadius.topRight.x,
-                          cornerSmoothing: 1,
-                        ),
-                        bottomLeft: SmoothRadius(
-                          cornerRadius: effectiveBorderRadius.bottomLeft.x,
-                          cornerSmoothing: 1,
-                        ),
-                        bottomRight: SmoothRadius(
-                          cornerRadius: effectiveBorderRadius.bottomRight.x,
-                          cornerSmoothing: 1,
-                        ),
-                      ),
+                      borderRadius: effectiveBorderRadius.smoothBorderRadius,
                     ),
                   ),
                   child: widget.content,

diff --git a/lib/src/widgets/tag/tag.dart b/lib/src/widgets/tag/tag.dart
@@ -141,24 +141,7 @@ class MoonTag extends StatelessWidget {
             decoration: ShapeDecoration(
               color: effectiveBackgroundColor,
               shape: SmoothRectangleBorder(
-                borderRadius: SmoothBorderRadius.only(
-                  topLeft: SmoothRadius(
-                    cornerRadius: effectiveBorderRadius.topLeft.x,
-                    cornerSmoothing: 1,
-                  ),
-                  topRight: SmoothRadius(
-                    cornerRadius: effectiveBorderRadius.topRight.x,
-                    cornerSmoothing: 1,
-                  ),
-                  bottomLeft: SmoothRadius(
-                    cornerRadius: effectiveBorderRadius.bottomLeft.x,
-                    cornerSmoothing: 1,
-                  ),
-                  bottomRight: SmoothRadius(
-                    cornerRadius: effectiveBorderRadius.bottomRight.x,
-                    cornerSmoothing: 1,
-                  ),
-                ),
+                borderRadius: effectiveBorderRadius.smoothBorderRadius,
               ),
             ),
             child: IconTheme(