feat: Card has child instead of children parameter (#499)

* Card has child instead of children parameter * Update card_widget_test.dart * fix lint
conceptadev · Oct 17, 2024 · 91ce861 · 91ce861
1 parent 68a408e
commit 91ce861
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 103 deletions.
diff --git a/packages/remix/demo/lib/components/card_use_case.dart b/packages/remix/demo/lib/components/card_use_case.dart
@@ -15,30 +15,32 @@ Widget buildCard(BuildContext context) {
       variants: [
         context.knobs.variant(FortalezaCardStyle.variants),
       ],
-      children: [
-        Avatar(
-          fallbackBuilder: (spec) => spec('LF'),
-          variants: FortalezaCardStyle.variants,
-        ),
-        Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisAlignment: MainAxisAlignment.start,
-          children: [
-            StyledText(
-              'Leo Farias',
-              style: Style($text.style.ref($rx.text.text3)),
-            ),
-            StyledText(
-              'Flutter Engineer',
-              style: Style(
-                $text.style.ref($rx.text.text2),
-                $text.style.color.$neutral(10),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Avatar(
+            fallbackBuilder: (spec) => spec('LF'),
+          ),
+          Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              StyledText(
+                'Leo Farias',
+                style: Style($text.style.ref($rx.text.text3)),
               ),
-            ),
-          ],
-        ),
-      ],
+              StyledText(
+                'Flutter Engineer',
+                style: Style(
+                  $text.style.ref($rx.text.text2),
+                  $text.style.color.$neutral(10),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
     ),
   );
 }
diff --git a/packages/remix/lib/src/components/badge/badge_style.dart b/packages/remix/lib/src/components/badge/badge_style.dart
@@ -19,12 +19,8 @@ class BadgeStyle extends SpecStyle<BadgeSpecUtility> {
 
     final labelStyle = [
       $.label.chain
-        ..textHeightBehavior(
-          const TextHeightBehavior(
-            applyHeightToFirstAscent: false,
-            applyHeightToLastDescent: true,
-          ),
-        )
+        ..textHeightBehavior.heightToFirstAscent.off()
+        ..textHeightBehavior.heightToLastDescent.on()
         ..textAlign.center()
         ..style.height(1.5)
         ..style.fontWeight.w500()

diff --git a/packages/remix/lib/src/components/button/button_style.dart b/packages/remix/lib/src/components/button/button_style.dart
@@ -23,12 +23,8 @@ class ButtonStyle extends SpecStyle<ButtonSpecUtility> {
 
     final labelStyle = [
       $.label.chain
-        ..textHeightBehavior(
-          const TextHeightBehavior(
-            applyHeightToFirstAscent: false,
-            applyHeightToLastDescent: true,
-          ),
-        )
+        ..textHeightBehavior.heightToFirstAscent.off()
+        ..textHeightBehavior.heightToLastDescent.on()
         ..style.fontSize(14)
         ..style.height(1.5)
         ..style.color.white()

diff --git a/packages/remix/lib/src/components/card/card.dart b/packages/remix/lib/src/components/card/card.dart
@@ -16,23 +16,19 @@ part 'card_widget.dart';
 base class CardSpec extends Spec<CardSpec> with _$CardSpec, Diagnosticable {
   final BoxSpec container;
 
-  final FlexSpec flex;
-
   /// {@macro card_spec_of}
   static const of = _$CardSpec.of;
 
   static const from = _$CardSpec.from;
 
   const CardSpec({
     BoxSpec? container,
-    FlexSpec? flex,
     super.modifiers,
     super.animated,
-  })  : container = container ?? const BoxSpec(),
-        flex = flex ?? const FlexSpec();
+  }) : container = container ?? const BoxSpec();
 
-  Widget call({Key? key, required List<Widget> children}) {
-    return CardSpecWidget(key: key, spec: this, children: children);
+  Widget call({Key? key, required Widget child}) {
+    return CardSpecWidget(key: key, spec: this, child: child);
   }
 
   @override

diff --git a/packages/remix/lib/src/components/card/card.g.dart b/packages/remix/lib/src/components/card/card.g.dart
diff --git a/packages/remix/lib/src/components/card/card_style.dart b/packages/remix/lib/src/components/card/card_style.dart
@@ -15,13 +15,7 @@ class CardStyle extends SpecStyle<CardSpecUtility> {
         ..padding.all(8),
     ];
 
-    final flexStyle = [
-      $.flex.chain
-        ..mainAxisSize.min()
-        ..direction.vertical(),
-    ];
-
-    return Style.create([...containerStyle, ...flexStyle]);
+    return Style.create([...containerStyle]);
   }
 }
 

diff --git a/packages/remix/lib/src/components/card/card_widget.dart b/packages/remix/lib/src/components/card/card_widget.dart
@@ -3,13 +3,13 @@ part of 'card.dart';
 class Card extends StatelessWidget {
   const Card({
     super.key,
-    required this.children,
+    required this.child,
     this.style,
     this.variants = const [],
   });
 
   /// The list of child widgets to be displayed inside the card.
-  final List<Widget> children;
+  final Widget child;
 
   /// Additional custom styling for the card.
   ///
@@ -28,7 +28,7 @@ class Card extends StatelessWidget {
       builder: (context) {
         final spec = CardSpec.of(context);
 
-        return CardSpecWidget(spec: spec, children: children);
+        return CardSpecWidget(spec: spec, child: child);
       },
     );
   }
@@ -38,16 +38,16 @@ class CardSpecWidget extends StatelessWidget {
   const CardSpecWidget({
     super.key,
     required this.spec,
-    required this.children,
+    required this.child,
   });
 
   final CardSpec? spec;
-  final List<Widget> children;
+  final Widget child;
 
   @override
   Widget build(BuildContext context) {
     return spec!.container(
-      child: spec!.flex(direction: Axis.vertical, children: children),
+      child: child,
     );
   }
 }
diff --git a/packages/remix/lib/src/components/radio/radio_style.dart b/packages/remix/lib/src/components/radio/radio_style.dart
@@ -28,32 +28,23 @@ class RadioStyle extends SpecStyle<RadioSpecUtility> {
       spec.on.disabled($.indicator.color.black45()),
     ];
 
-    final textStyle = [
-      $.text.chain
-        ..style.fontSize(14)
-        ..style.height(1)
-        ..style.fontWeight.w500()
-        ..textHeightBehavior(
-          const TextHeightBehavior(
-            applyHeightToFirstAscent: false,
-            applyHeightToLastDescent: false,
-          ),
-        ),
-    ];
+    final textStyle = $.text.chain
+      ..style.fontSize(14)
+      ..style.height(1)
+      ..style.fontWeight.w500()
+      ..textHeightBehavior.heightToFirstAscent.off();
 
-    final flexStyle = [
-      $.flex.chain
-        ..row()
-        ..mainAxisAlignment.start()
-        ..crossAxisAlignment.center()
-        ..gap(8),
-    ];
+    final flexStyle = $.flex.chain
+      ..row()
+      ..mainAxisAlignment.start()
+      ..crossAxisAlignment.center()
+      ..gap(8);
 
     return Style.create([
       ...containerStyle,
       ...indicatorStyle,
-      ...textStyle,
-      ...flexStyle,
+      textStyle,
+      flexStyle,
     ]).animate(
       duration: const Duration(milliseconds: 100),
       curve: Curves.easeInOutQuad,

diff --git a/packages/remix/test/components/card/card_widget_test.dart b/packages/remix/test/components/card/card_widget_test.dart
@@ -10,7 +10,7 @@ void main() {
         const m.MaterialApp(
           home: Card(
             style: CardStyle(),
-            children: [m.Text('Test')],
+            child: m.Text('Test'),
           ),
         ),
       );
@@ -26,7 +26,7 @@ void main() {
         const m.MaterialApp(
           home: Card(
             style: FakeCardStyle(color),
-            children: [m.Text('Custom Style')],
+            child: m.Text('Custom Style'),
           ),
         ),
       );
@@ -40,18 +40,12 @@ void main() {
         const m.MaterialApp(
           home: Card(
             style: CardStyle(),
-            children: [
-              m.Text('Child 1'),
-              m.Text('Child 2'),
-              m.Text('Child 3'),
-            ],
+            child: m.Text('Child 1'),
           ),
         ),
       );
 
       expect(find.text('Child 1'), findsOneWidget);
-      expect(find.text('Child 2'), findsOneWidget);
-      expect(find.text('Child 3'), findsOneWidget);
     });
   });
 }