fix(UX-1006): Gave dropdown functionality to dropdown buttons in butt…

…on groups (#115) fix: Changed the functionality of dropdown sizes. Mini now sets the width of the menu to its largest child, and standard will set the minimum width to the width of the dropdown's parent. fix: Removed the default offest from dropdown and added an offest.
ZebraDevs · Jun 26, 2024 · d9bfe19 · d9bfe19
1 parent 82c5feb
commit d9bfe19
Show file tree

Hide file tree

Showing 8 changed files with 406 additions and 277 deletions.
diff --git a/example/lib/pages/components/button_example.dart b/example/lib/pages/components/button_example.dart
@@ -202,24 +202,37 @@ class _ButtonExampleState extends State<ButtonExample> {
           label: "Label",
         ),
         ZetaGroupButton.dropdown(
-          onPressed: () {},
+          onChange: print,
           label: "Label",
-          dropdown: SizedBox(height: 100, width: 100),
+          items: [
+            ZetaDropdownItem(value: 'Item 1'),
+            ZetaDropdownItem(value: 'Item 2'),
+          ],
         ),
       ]),
       ZetaButtonGroup(
         isLarge: true,
         rounded: true,
+        isInverse: true,
         buttons: [
           ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
             onPressed: () {},
             label: "Label",
           ),
           ZetaGroupButton.dropdown(
-            onPressed: () {},
+            icon: ZetaIcons.star,
+            onChange: (item) {
+              print(item);
+            },
             label: "Label",
-            dropdown: SizedBox(height: 100, width: 100),
+            items: [
+              ZetaDropdownItem(
+                value: 'Item 1',
+                icon: Icon(ZetaIcons.star_half),
+              ),
+              ZetaDropdownItem(value: 'Item 2'),
+            ],
           ),
           ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,

diff --git a/example/lib/pages/components/dropdown_example.dart b/example/lib/pages/components/dropdown_example.dart
@@ -40,6 +40,12 @@ class _DropdownExampleState extends State<DropdownExample> {
             value: selectedItem,
             type: ZetaDropdownMenuType.checkbox,
           ),
+          ZetaDropdown(
+            items: items,
+            value: selectedItem,
+            size: ZetaDropdownSize.mini,
+            onChange: (_) {},
+          ),
           Center(
             child: Column(
               mainAxisSize: MainAxisSize.min,

diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart
@@ -65,31 +65,39 @@ Widget buttonGroupUseCase(BuildContext context) {
   final onPressed = disabledKnob(context) ? null : () {};
 
   return WidgetbookTestWidget(
-      widget: ZetaButtonGroup(
-    isLarge: context.knobs.boolean(label: 'Large'),
-    rounded: rounded,
-    isInverse: context.knobs.boolean(label: 'Inverse'),
-    buttons: [
-      ZetaGroupButton(
-        label: context.knobs.string(label: 'Button 1 Title', initialValue: 'Button'),
-        onPressed: onPressed,
-        icon: iconKnob(context, name: 'Button 1 Icon', nullable: true, initial: null, rounded: rounded),
-        dropdown: context.knobs.boolean(label: 'Button 1 Dropdown') ? Container() : null,
-      ),
-      ZetaGroupButton(
-        label: context.knobs.string(label: 'Button 2 Title'),
-        onPressed: onPressed,
-        icon: iconKnob(context, name: 'Button 2 Icon', nullable: true, initial: null, rounded: rounded),
-        dropdown: context.knobs.boolean(label: 'Button 2 Dropdown') ? Container() : null,
-      ),
-      ZetaGroupButton(
-        label: context.knobs.string(label: 'Button 3 Title'),
-        onPressed: onPressed,
-        icon: iconKnob(context, name: 'Button 3 Icon', nullable: true, initial: null, rounded: rounded),
-        dropdown: context.knobs.boolean(label: 'Button 3 Dropdown') ? Container() : null,
-      )
-    ],
-  ));
+    widget: ZetaButtonGroup(
+      isLarge: context.knobs.boolean(label: 'Large'),
+      rounded: rounded,
+      isInverse: context.knobs.boolean(label: 'Inverse'),
+      buttons: [
+        ZetaGroupButton(
+          label: context.knobs.string(label: 'Button 1 Title', initialValue: 'Button'),
+          onPressed: onPressed,
+          icon: iconKnob(context, name: 'Button 1 Icon', nullable: true, initial: null, rounded: rounded),
+        ),
+        ZetaGroupButton.dropdown(
+          label: context.knobs.string(label: 'Button 2 Title'),
+          onChange: disabledKnob(context) ? null : (_) {},
+          icon: iconKnob(context, name: 'Button 2 Icon', nullable: true, initial: null, rounded: rounded),
+          items: [
+            ZetaDropdownItem(
+              value: 'Item 1',
+              icon: Icon(ZetaIcons.star),
+            ),
+            ZetaDropdownItem(
+              value: 'Item 2',
+              icon: Icon(ZetaIcons.star_half),
+            ),
+          ],
+        ),
+        ZetaGroupButton(
+          label: context.knobs.string(label: 'Button 3 Title'),
+          onPressed: onPressed,
+          icon: iconKnob(context, name: 'Button 3 Icon', nullable: true, initial: null, rounded: rounded),
+        )
+      ],
+    ),
+  );
 }
 
 Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget(