fix: [MDS-532] Add ShapeDecoration as props to every widget where it …

…makes sense (#173)
coingaming · May 22, 2023 · b4eba9c · b4eba9c
1 parent 0499041
commit b4eba9c
Show file tree

Hide file tree

Showing 21 changed files with 242 additions and 143 deletions.
diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart
@@ -205,49 +205,72 @@ class ButtonStory extends Story {
                       trailing: showTrailingKnob ? MoonIcon(resolvedIconVariant) : null,
                     ),
                     const SizedBox(height: 40),
-                    const TextDivider(text: "Custom MoonButton with non-standard children"),
+                    const TextDivider(text: "Custom MoonButtons with non-standard children"),
                     const SizedBox(height: 32),
                     MoonButton(
                       onTap: showDisabledKnob ? null : () {},
                       height: 40,
                       padding: const EdgeInsets.symmetric(horizontal: 8),
-                      borderRadius: const BorderRadius.only(
-                        topLeft: Radius.circular(20),
-                        bottomRight: Radius.circular(20),
+                      showTooltip: showTooltipKnob,
+                      tooltipMessage: 'This is MoonTooltip',
+                      shapeDecoration: const ShapeDecoration(
+                        image: DecorationImage(
+                          image: AssetImage("assets/images/placeholder-640x359.png"),
+                          fit: BoxFit.cover,
+                        ),
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.only(
+                            topLeft: Radius.circular(20),
+                            bottomRight: Radius.circular(20),
+                          ),
+                        ),
                       ),
-                      buttonSize: buttonSizesKnob,
-                      isFullWidth: setFullWidthKnob,
+                      leading: Container(
+                        width: 24,
+                        height: 24,
+                        padding: const EdgeInsets.all(4),
+                        child: CircularProgressIndicator(
+                          strokeWidth: 2,
+                          color: context.moonTheme!.colors.popo,
+                        ),
+                      ),
+                    ),
+                    const SizedBox(height: 32),
+                    MoonButton(
+                      onTap: showDisabledKnob ? null : () {},
+                      height: 72,
+                      padding: const EdgeInsets.symmetric(horizontal: 8),
                       showTooltip: showTooltipKnob,
                       tooltipMessage: 'This is MoonTooltip',
-                      backgroundColor: context.moonTheme!.colors.krillin100,
-                      showPulseEffect: showPulseEffectKnob,
-                      showPulseEffectJiggle: showPulseEffectJiggleKnob,
-                      leading: showLeadingKnob
-                          ? Container(
-                              width: 24,
-                              height: 24,
-                              padding: const EdgeInsets.all(4),
-                              child: const CircularProgressIndicator(
-                                strokeWidth: 2,
-                                color: Colors.white,
-                              ),
-                            )
-                          : null,
-                      label: showLabelKnob
-                          ? SizedBox(
-                              width: 20,
-                              height: 20,
-                              child: CircleAvatar(
-                                backgroundColor: context.moonTheme!.colors.trunks,
-                                child: const MoonIcon(
-                                  Icons.person,
-                                  size: 16,
-                                  color: Colors.white,
-                                ),
-                              ),
-                            )
-                          : null,
-                      trailing: showTrailingKnob ? MoonIcon(resolvedIconVariant) : null,
+                      shapeDecoration: ShapeDecoration(
+                        shadows: const [
+                          BoxShadow(
+                            blurRadius: 3,
+                            offset: Offset(0, 2),
+                          )
+                        ],
+                        gradient: LinearGradient(
+                          begin: Alignment.topLeft,
+                          end: Alignment.bottomRight,
+                          colors: [
+                            context.moonTheme!.colors.krillin100,
+                            context.moonTheme!.colors.dodoria100,
+                          ],
+                        ),
+                        shape: const StarBorder(pointRounding: 0.5, valleyRounding: 0.5),
+                      ),
+                      label: SizedBox(
+                        width: 32,
+                        height: 32,
+                        child: CircleAvatar(
+                          backgroundColor: context.moonTheme!.colors.frieza60,
+                          child: const MoonIcon(
+                            MoonIcons.rocket_24,
+                            size: 24,
+                            color: Colors.white,
+                          ),
+                        ),
+                      ),
                     ),
                     const SizedBox(height: 64),
                   ],

diff --git a/example/lib/src/storybook/stories/chip.dart b/example/lib/src/storybook/stories/chip.dart
@@ -104,7 +104,7 @@ class ChipStory extends Story {
               description: "Show widget in MoonChip trailing slot.",
             );
 
-            final resolvedIconVariant = chipSizesKnob == MoonChipSize.md ? MoonIcons.frame_24 : MoonIcons.frame_16;
+            final resolvedIconVariant = chipSizesKnob == MoonChipSize.sm ? MoonIcons.frame_16 : MoonIcons.frame_24;
 
             return Center(
               child: SingleChildScrollView(

diff --git a/example/lib/src/storybook/stories/modal.dart b/example/lib/src/storybook/stories/modal.dart
@@ -46,7 +46,8 @@ class ModalStory extends Story {
                     textDirection: Directionality.of(context),
                     child: MoonModal(
                       backgroundColor: backgroundColor,
-                      borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+                      borderRadius:
+                          borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
                       child: SizedBox(
                         width: 300,
                         child: Column(

diff --git a/example/lib/src/storybook/stories/text_area.dart b/example/lib/src/storybook/stories/text_area.dart
@@ -88,8 +88,8 @@ class TextAreaStory extends Story {
               description: "Whether the MoonTextArea has no fixed height and is growable",
             );
 
-            final hasFocusEffectKnob = context.knobs.boolean(
-              label: "hasFocusEffect",
+            final showFocusEffectKnob = context.knobs.boolean(
+              label: "showFocusEffect",
               description: "Whether to display focus effect around MoonTextInput.",
               initial: true,
             );
@@ -112,7 +112,7 @@ class TextAreaStory extends Story {
                           children: [
                             MoonTextArea(
                               enabled: enabledKnob,
-                              hasFocusEffect: hasFocusEffectKnob,
+                              showFocusEffect: showFocusEffectKnob,
                               height: growableKnob ? null : 200,
                               textColor: textColor,
                               hintTextColor: hintTextColor,

diff --git a/example/lib/src/storybook/stories/text_input.dart b/example/lib/src/storybook/stories/text_input.dart
@@ -101,8 +101,8 @@ class TextInputStory extends Story {
               initial: true,
             );
 
-            final hasFocusEffectKnob = context.knobs.boolean(
-              label: "hasFocusEffect",
+            final showFocusEffectKnob = context.knobs.boolean(
+              label: "showFocusEffect",
               description: "Whether to display focus effect around MoonTextInput.",
               initial: true,
             );
@@ -143,7 +143,7 @@ class TextInputStory extends Story {
                               controller: _textController,
                               enabled: enabledKnob,
                               textInputSize: textInputSizesKnob,
-                              hasFocusEffect: hasFocusEffectKnob,
+                              showFocusEffect: showFocusEffectKnob,
                               hasFloatingLabel: hasFloatingLabelKnob,
                               textColor: textColor,
                               hintTextColor: hintTextColor,
@@ -187,7 +187,7 @@ class TextInputStory extends Story {
                                   keyboardType: TextInputType.visiblePassword,
                                   obscureText: _hidePassword,
                                   textInputSize: textInputSizesKnob,
-                                  hasFocusEffect: hasFocusEffectKnob,
+                                  showFocusEffect: showFocusEffectKnob,
                                   hasFloatingLabel: hasFloatingLabelKnob,
                                   textColor: textColor,
                                   hintTextColor: hintTextColor,

diff --git a/lib/src/widgets/accordion/accordion_item.dart b/lib/src/widgets/accordion/accordion_item.dart
@@ -129,6 +129,9 @@ class MoonAccordionItem<T> extends StatefulWidget {
   /// The size of the accordion.
   final MoonAccordionItemSize? accordionSize;
 
+  /// Custom shape decoration for the accordion.
+  final ShapeDecoration? shapeDecoration;
+
   /// The semantic label for the accordion.
   final String? semanticLabel;
 
@@ -193,6 +196,7 @@ class MoonAccordionItem<T> extends StatefulWidget {
     this.shadows,
     this.children = const <Widget>[],
     this.accordionSize,
+    this.shapeDecoration,
     this.semanticLabel,
     this.identityValue,
     this.groupIdentityValue,
@@ -481,16 +485,17 @@ class _MoonAccordionItemState<T> extends State<MoonAccordionItem<T>> with Single
                       duration: effectiveHoverEffectDuration,
                       curve: effectiveHoverEffectCurve,
                       clipBehavior: widget.clipBehavior ?? Clip.none,
-                      decoration: !widget.hasContentOutside
-                          ? ShapeDecoration(
-                              color: resolvedBackgroundColor,
-                              shadows: effectiveShadows,
-                              shape: SmoothRectangleBorder(
-                                side: widget.showBorder ? BorderSide(color: effectiveBorderColor) : BorderSide.none,
-                                borderRadius: effectiveBorderRadius.smoothBorderRadius(context),
-                              ),
-                            )
-                          : null,
+                      decoration: widget.shapeDecoration ??
+                          (!widget.hasContentOutside
+                              ? ShapeDecoration(
+                                  color: resolvedBackgroundColor,
+                                  shadows: effectiveShadows,
+                                  shape: SmoothRectangleBorder(
+                                    side: widget.showBorder ? BorderSide(color: effectiveBorderColor) : BorderSide.none,
+                                    borderRadius: effectiveBorderRadius.smoothBorderRadius(context),
+                                  ),
+                                )
+                              : null),
                       child: Column(
                         mainAxisSize: MainAxisSize.min,
                         children: <Widget>[

diff --git a/lib/src/widgets/alert/alert.dart b/lib/src/widgets/alert/alert.dart
@@ -55,6 +55,9 @@ class MoonAlert extends StatefulWidget {
   /// The padding of the alert.
   final EdgeInsetsGeometry? padding;
 
+  /// Custom shape decoration for the alert.
+  final ShapeDecoration? shapeDecoration;
+
   /// The semantic label for the alert.
   final String? semanticLabel;
 
@@ -99,6 +102,7 @@ class MoonAlert extends StatefulWidget {
     this.transitionDuration,
     this.transitionCurve,
     this.padding,
+    this.shapeDecoration,
     this.semanticLabel,
     this.bodyTextStyle,
     this.titleTextStyle,
@@ -253,17 +257,18 @@ class _MoonAlertState extends State<MoonAlert> with SingleTickerProviderStateMix
             child: Container(
               padding: effectivePadding,
               constraints: BoxConstraints(minHeight: effectiveMinimumHeight),
-              decoration: ShapeDecoration(
-                color: effectiveBackgroundColor,
-                shape: SmoothRectangleBorder(
-                  side: BorderSide(
-                    color: effectiveBorderColor,
-                    width: widget.showBorder ? effectiveBorderWidth : 0,
-                    style: widget.showBorder ? BorderStyle.solid : BorderStyle.none,
+              decoration: widget.shapeDecoration ??
+                  ShapeDecoration(
+                    color: effectiveBackgroundColor,
+                    shape: SmoothRectangleBorder(
+                      side: BorderSide(
+                        color: effectiveBorderColor,
+                        width: widget.showBorder ? effectiveBorderWidth : 0,
+                        style: widget.showBorder ? BorderStyle.solid : BorderStyle.none,
+                      ),
+                      borderRadius: effectiveBorderRadius.smoothBorderRadius(context),
+                    ),
                   ),
-                  borderRadius: effectiveBorderRadius.smoothBorderRadius(context),
-                ),
-              ),
               child: AnimatedDefaultTextStyle(
                 duration: effectiveTransitionDuration,
                 style: TextStyle(color: effectiveTextColor),

diff --git a/lib/src/widgets/buttons/button.dart b/lib/src/widgets/buttons/button.dart
@@ -130,6 +130,9 @@ class MoonButton extends StatelessWidget {
   /// The size of the button.
   final MoonButtonSize? buttonSize;
 
+  /// Custom shape decoration for the button.
+  final ShapeDecoration? shapeDecoration;
+
   /// The semantic label for the button.
   final String? semanticLabel;
 
@@ -197,6 +200,7 @@ class MoonButton extends StatelessWidget {
     this.padding,
     this.focusNode,
     this.buttonSize,
+    this.shapeDecoration,
     this.semanticLabel,
     this.tooltipMessage = "",
     this.onTap,
@@ -243,6 +247,7 @@ class MoonButton extends StatelessWidget {
     FocusNode? focusNode,
     EdgeInsetsGeometry? padding,
     MoonButtonSize? buttonSize,
+    ShapeDecoration? shapeDecoration,
     String? semanticLabel,
     String tooltipMessage = "",
     VoidCallback? onLongPress,
@@ -285,6 +290,7 @@ class MoonButton extends StatelessWidget {
       focusNode: focusNode,
       padding: padding,
       buttonSize: buttonSize,
+      shapeDecoration: shapeDecoration,
       semanticLabel: semanticLabel,
       tooltipMessage: tooltipMessage,
       onLongPress: onLongPress,
@@ -414,17 +420,18 @@ class MoonButton extends StatelessWidget {
           width: width,
           height: effectiveHeight,
           constraints: BoxConstraints(minWidth: effectiveHeight),
-          decoration: ShapeDecoration(
-            color: canAnimateHover ? hoverColor : backgroundColor,
-            shape: SmoothRectangleBorder(
-              side: BorderSide(
-                color: effectiveBorderColor,
-                width: showBorder ? effectiveBorderWidth : 0,
-                style: showBorder ? BorderStyle.solid : BorderStyle.none,
+          decoration: shapeDecoration ??
+              ShapeDecoration(
+                color: canAnimateHover ? hoverColor : backgroundColor,
+                shape: SmoothRectangleBorder(
+                  side: BorderSide(
+                    color: effectiveBorderColor,
+                    width: showBorder ? effectiveBorderWidth : 0,
+                    style: showBorder ? BorderStyle.solid : BorderStyle.none,
+                  ),
+                  borderRadius: effectiveBorderRadius.smoothBorderRadius(context),
+                ),
               ),
-              borderRadius: effectiveBorderRadius.smoothBorderRadius(context),
-            ),
-          ),
           child: Padding(
             padding: isFullWidth ? EdgeInsets.zero : correctedPadding,
             child: AnimatedIconTheme(

diff --git a/lib/src/widgets/buttons/filled_button.dart b/lib/src/widgets/buttons/filled_button.dart
@@ -44,6 +44,9 @@ class MoonFilledButton extends StatelessWidget {
   /// The size of the button.
   final MoonButtonSize? buttonSize;
 
+  /// Custom shape decoration for the button.
+  final ShapeDecoration? shapeDecoration;
+
   /// The semantic label for the button.
   final String? semanticLabel;
 
@@ -86,6 +89,7 @@ class MoonFilledButton extends StatelessWidget {
     this.minTouchTargetSize = 40,
     this.focusNode,
     this.buttonSize,
+    this.shapeDecoration,
     this.semanticLabel,
     this.tooltipMessage = "",
     this.onTap,
@@ -115,6 +119,7 @@ class MoonFilledButton extends StatelessWidget {
       minTouchTargetSize: minTouchTargetSize,
       focusNode: focusNode,
       buttonSize: buttonSize,
+      shapeDecoration: shapeDecoration,
       semanticLabel: semanticLabel,
       tooltipMessage: tooltipMessage,
       onTap: onTap,

diff --git a/lib/src/widgets/buttons/outlined_button.dart b/lib/src/widgets/buttons/outlined_button.dart
@@ -42,6 +42,9 @@ class MoonOutlinedButton extends StatelessWidget {
   /// The size of the button.
   final MoonButtonSize? buttonSize;
 
+  /// Custom shape decoration for the button.
+  final ShapeDecoration? shapeDecoration;
+
   /// The semantic label for the button.
   final String? semanticLabel;
 
@@ -84,6 +87,7 @@ class MoonOutlinedButton extends StatelessWidget {
     this.minTouchTargetSize = 40,
     this.focusNode,
     this.buttonSize,
+    this.shapeDecoration,
     this.semanticLabel,
     this.tooltipMessage = "",
     this.onTap,
@@ -110,6 +114,7 @@ class MoonOutlinedButton extends StatelessWidget {
       minTouchTargetSize: minTouchTargetSize,
       focusNode: focusNode,
       buttonSize: buttonSize,
+      shapeDecoration: shapeDecoration,
       semanticLabel: semanticLabel,
       tooltipMessage: tooltipMessage,
       onTap: onTap,