Fixing text overflow and widgetbook

ZebraDevs · Apr 16, 2024 · 6a34587 · 6a34587
1 parent dcf6cd7
commit 6a34587
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 74 deletions.
diff --git a/example/lib/pages/components/dropdown_example.dart b/example/lib/pages/components/dropdown_example.dart
@@ -15,38 +15,58 @@ class _DropdownExampleState extends State<DropdownExample> {
 
   @override
   Widget build(BuildContext context) {
+    final items = [
+      ZetaDropdownItem(
+        value: "Item 1",
+        icon: Icon(ZetaIcons.star_round),
+      ),
+      ZetaDropdownItem(
+        value: "Item 2",
+        icon: Icon(ZetaIcons.star_half_round),
+      ),
+      ZetaDropdownItem(
+        value: "Item 3",
+      )
+    ];
+
     return ExampleScaffold(
       name: "Dropdown",
-      child: Center(
-        child: SingleChildScrollView(
-          child: SizedBox(
-              width: 320,
-              child: Column(children: [
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          Center(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
                 ZetaDropdown(
-                  leadingType: LeadingStyle.checkbox,
+                  disabled: true,
+                  type: ZetaDropdownMenuType.standard,
                   onChange: (value) {
                     setState(() {
                       selectedItem = value;
                     });
                   },
                   selectedItem: selectedItem,
-                  items: [
-                    ZetaDropdownItem(
-                      value: "Item 1",
-                      icon: Icon(ZetaIcons.star_round),
-                    ),
-                    ZetaDropdownItem(
-                      value: "Item 2",
-                      icon: Icon(ZetaIcons.star_half_round),
-                    ),
-                    ZetaDropdownItem(
-                      value: "Item 3",
-                    )
-                  ],
+                  items: items,
                 ),
                 Text('Selected item : ${selectedItem}')
-              ])),
-        ),
+              ],
+            ),
+          ),
+          ZetaDropdown(
+            items: items,
+            selectedItem: selectedItem,
+            type: ZetaDropdownMenuType.checkbox,
+          ),
+          ZetaDropdown(
+            items: items,
+            selectedItem: selectedItem,
+            size: ZetaDropdownSize.mini,
+            type: ZetaDropdownMenuType.radio,
+          ),
+        ],
       ),
     );
   }

diff --git a/example/widgetbook/pages/components/dropdown_widgetbook.dart b/example/widgetbook/pages/components/dropdown_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget dropdownUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: Center(
@@ -19,52 +20,37 @@ class DropdownExample extends StatefulWidget {
 }
 
 class _DropdownExampleState extends State<DropdownExample> {
-  List<_DropdownItem> _children = [
-    _DropdownItem(
+  final items = [
+    ZetaDropdownItem(
       value: "Item 1",
-      leadingIcon: Icon(ZetaIcons.star_round),
+      icon: Icon(ZetaIcons.star_round),
     ),
-    _DropdownItem(
+    ZetaDropdownItem(
       value: "Item 2",
-      leadingIcon: Icon(ZetaIcons.star_half_round),
+      icon: Icon(ZetaIcons.star_half_round),
     ),
-    _DropdownItem(
+    ZetaDropdownItem(
       value: "Item 3",
     )
   ];
 
-  late _DropdownItem selectedItem = _DropdownItem(
-    value: "Item 1",
-    leadingIcon: Icon(ZetaIcons.star_round),
-  );
-
   @override
   Widget build(BuildContext _) {
-    return SingleChildScrollView(
-      child: SizedBox(
-          width: double.infinity,
-          child: Column(children: [
-            ZetaDropdown(
-              leadingType: widget.c.knobs.list(
-                label: "Checkbox type",
-                options: [
-                  LeadingStyle.none,
-                  LeadingStyle.checkbox,
-                  LeadingStyle.radio,
-                ],
-              ),
-              onChange: (value) {
-                setState(() {
-                  selectedItem = value;
-                });
-              },
-              selectedItem: selectedItem,
-              items: _children,
-              rounded: widget.c.knobs.boolean(label: "Rounded"),
-              isMinimized: widget.c.knobs.boolean(label: "Minimized"),
-            ),
-            Text('Selected item : ${selectedItem.value}')
-          ])),
+    return ZetaDropdown(
+      type: widget.c.knobs.list(
+        label: "Dropdown type",
+        options: ZetaDropdownMenuType.values,
+        labelBuilder: enumLabelBuilder,
+      ),
+      onChange: (value) {},
+      items: items,
+      rounded: widget.c.knobs.boolean(label: "Rounded"),
+      disabled: widget.c.knobs.boolean(label: "Disabled"),
+      size: widget.c.knobs.list(
+        label: 'Size',
+        options: ZetaDropdownSize.values,
+        labelBuilder: enumLabelBuilder,
+      ),
     );
   }
 }
diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart
@@ -99,7 +99,8 @@ class ZetaDropdown<T> extends StatefulWidget {
       ..add(IterableProperty<ZetaDropdownItem<T>>('items', items))
       ..add(DiagnosticsProperty<T?>('selectedItem', selectedItem))
       ..add(ObjectFlagProperty<ValueSetter<T>?>.has('onChange', onChange))
-      ..add(EnumProperty<ZetaDropdownSize>('size', size));
+      ..add(EnumProperty<ZetaDropdownSize>('size', size))
+      ..add(DiagnosticsProperty<bool>('disabled', disabled));
   }
 }
 
@@ -184,7 +185,7 @@ class _ZetaDropDownState<T> extends State<ZetaDropdown<T>> {
                   },
                   child: _ZetaDropDownMenu<T>(
                     items: widget.items,
-                    selected: widget.selectedItem,
+                    selected: _selectedItem?.value,
                     rounded: widget.rounded,
                     allocateLeadingSpace: _allocateLeadingSpace,
                     width: _size,
@@ -313,21 +314,35 @@ class _DropdownItemState<T> extends State<_DropdownItem<T>> {
       );
     }
 
-    return DefaultTextStyle(
-      style: ZetaTextStyles.bodyMedium,
-      child: OutlinedButton(
-        key: widget.itemKey,
-        onPressed: widget.onPress,
-        style: _getStyle(colors),
-        child: Row(
-          children: [
-            const SizedBox(width: ZetaSpacing.x3),
-            if (leading != null) leading,
-            Text(
-              widget.value.label,
-            ),
-          ],
-        ).paddingVertical(ZetaSpacing.x2_5),
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxHeight: ZetaSpacing.x10),
+      child: DefaultTextStyle(
+        style: ZetaTextStyles.bodyMedium,
+        child: OutlinedButton(
+          key: widget.itemKey,
+          onPressed: widget.onPress,
+          style: _getStyle(colors),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const SizedBox(width: ZetaSpacing.x3),
+              if (leading != null) leading,
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.only(right: ZetaSpacing.x2),
+                  child: Align(
+                    alignment: Alignment.centerLeft,
+                    child: FittedBox(
+                      child: Text(
+                        widget.value.label,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ).paddingVertical(ZetaSpacing.x2_5),
+        ),
       ),
     );
   }