feat : Button Groups

example/lib/pages/components/button_example.dart

@@ -107,10 +107,20 @@ class _ButtonExampleState extends State<ButtonExample> {
                   Column(children: inputButtons(ZetaWidgetBorder.rounded)),
                   Text('Sharp Buttons', style: ZetaTextStyles.displayMedium),
                   Column(children: inputButtons(ZetaWidgetBorder.sharp)),
-                  Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium),
-                  Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium),
-                  Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()),
-                ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
+                  Text('Group Buttons', style: ZetaTextStyles.displayLarge),
+                  Column(
+                    children: groupButtons(ZetaWidgetBorder.rounded),
+                  ),
+                  Text('Floating Action Buttons',
+                      style: ZetaTextStyles.displayMedium),
+                  Text('Tap buttons to change current FAB: ',
+                      style: ZetaTextStyles.bodyMedium),
+                  Wrap(
+                      children:
+                          fabs.divide(SizedBox.square(dimension: 10)).toList()),
+                ]
+                    .divide(const SizedBox.square(dimension: ZetaSpacing.m))
+                    .toList(),
               ),
             ),
             Expanded(child: const SizedBox()),
@@ -165,4 +175,72 @@ class _ButtonExampleState extends State<ButtonExample> {
       ),
     ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList();
   }
+
+  List<Widget> groupButtons(ZetaWidgetBorder) {
+    return [
+      ZetaButtonGroup(
+         isLarge: true,
+          rounded: true,
+        buttons: [
+        GroupButton(
+          label: "Label",
+        ),
+        GroupButton(
+          label: "Label",
+        ),
+      ]),
+      ZetaButtonGroup(
+         isLarge: true,
+          rounded: true,
+        buttons: [
+        GroupButton(
+          label: "Label",
+        ),
+        GroupButton.dropdown(
+          onPressed: () {},
+          label: "Label",
+        ),
+      ]),
+      ZetaButtonGroup(
+         isLarge: true,
+            rounded: true,
+        buttons: [
+          GroupButton.icon(
+            icon: ZetaIcons.star_round,
+            label: "Label",
+          ),
+          GroupButton.dropdown(
+            onPressed: () {},
+            label: "Label",
+          ),
+          GroupButton.icon(
+
+            icon: ZetaIcons.star_round,
+            label: "Label",
+          ),
+        ],
+      ),
+      ZetaButtonGroup(
+        isLarge: true,
+            rounded: true,
+        buttons: [
+          GroupButton.icon( 
+            icon: ZetaIcons.star_round,
+            label: "Label",
+            onPressed: () {},
+          ),
+          GroupButton.icon(    
+            icon: ZetaIcons.star_round,
+            label: "Label",
+            onPressed: () {},
+          ),
+          GroupButton.icon(
+            icon: ZetaIcons.star_round,
+            label: "Label",
+            onPressed: () {},
+          ),
+        ],
+      ),
+    ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList();
+  }
 }

example/lib/pages/components/progress_example.dart

@@ -12,6 +12,19 @@ class ProgressExample extends StatefulWidget {
 }
 
 class ProgressExampleState extends State<ProgressExample> {
+  MaterialStatesController controller = MaterialStatesController();
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return ExampleScaffold(

example/widgetbook/pages/components/button_widgetbook.dart

@@ -55,7 +55,64 @@ Widget iconButtonUseCase(BuildContext context) => WidgetbookTestWidget(
       ),
     );
 
-Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget(
+Widget buttonGroupUseCase(BuildContext context) => WidgetbookTestWidget(
+        widget: ZetaButtonGroup(
+      isLarge: context.knobs.boolean(label: 'isLarge'),
+      rounded: context.knobs.boolean(label: 'rounded'),
+      buttons: [
+        GroupButton(
+          label: context.knobs.string(label: 'button1Title'),
+          onPressed:
+              context.knobs.boolean(label: 'button1Dropdown') ? () {} : null,
+          icon: context.knobs.listOrNull(
+            label: 'button1Icon',
+            options: [
+              ZetaIcons.star_round,
+            ],
+            labelBuilder: (value) {
+              if (value == ZetaIcons.star_half_round)
+                return 'ZetaIcons.star_half_round';
+              return '';
+            },
+          ),
+        ),
+        GroupButton(
+          label: context.knobs.string(label: 'button2Title'),
+          onPressed:
+              context.knobs.boolean(label: 'button2Dropdown') ? () {} : null,
+          icon: context.knobs.listOrNull(
+            label: 'button2Icon',
+            options: [
+              ZetaIcons.star_round,
+            ],
+            labelBuilder: (value) {
+              if (value == ZetaIcons.star_half_round)
+                return 'ZetaIcons.star_half_round';
+              return '';
+            },
+          ),
+        ),
+        GroupButton(
+          label: context.knobs.string(label: 'button3Title'),
+          onPressed:
+              context.knobs.boolean(label: 'button3Dropdown') ? () {} : null,
+          icon: context.knobs.listOrNull(
+            label: 'button3Icon',
+            options: [
+              ZetaIcons.star_round,
+            ],
+            labelBuilder: (value) {
+              if (value == ZetaIcons.star_half_round)
+                return 'ZetaIcons.star_half_round';
+              return '';
+            },
+          ),
+        )
+      ],
+    ));
+
+Widget floatingActionButtonUseCase(BuildContext context) =>
+    WidgetbookTestWidget(
       widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)),
     );
 

lib/src/components/buttons/button_group.dart

@@ -48,8 +48,7 @@ class ZetaButtonGroup extends StatelessWidget {
     super.debugFillProperties(properties);
     properties
     ..add(DiagnosticsProperty<bool>('isLarge', isLarge))
-    ..add(DiagnosticsProperty<bool>('rounded', rounded))
-    ;
+    ..add(DiagnosticsProperty<bool>('rounded', rounded));
   }
 }
 
@@ -61,13 +60,13 @@ class GroupButton extends StatefulWidget {
     super.key,
     this.label,
     this.icon,
-    this.onPress,
+    this.onPressed,
   });
 
   /// Constructs dropdown group button
   GroupButton.dropdown({
     super.key,
-    required this.onPress,
+    required this.onPressed,
     this.icon,
     this.label,
   });
@@ -76,7 +75,7 @@ class GroupButton extends StatefulWidget {
   GroupButton.icon({
     super.key,
     required this.icon,
-    this.onPress,
+    this.onPressed,
     this.label,
   });
 
@@ -87,7 +86,7 @@ class GroupButton extends StatefulWidget {
   final IconData? icon;
 
   /// Function for when [GroupButton] is clicked.
-  final VoidCallback? onPress;
+  final VoidCallback? onPressed;
 
   ///If [GroupButton] is large
   bool _isLarge = false;
@@ -110,9 +109,7 @@ class GroupButton extends StatefulWidget {
       key: key,
       label: label,
       icon: icon,
-      onPress: onPress,
-      // isFinal: isFinal ?? this.isFinal,
-      // isInitial: isInitial ?? this.isInitial,
+      onPressed: onPressed,
     );
   }
 
@@ -122,7 +119,7 @@ class GroupButton extends StatefulWidget {
     properties
       ..add(StringProperty('Label', label))
       ..add(DiagnosticsProperty<IconData?>('icon', icon))
-      ..add(ObjectFlagProperty<VoidCallback?>.has('onPress', onPress));
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onPressed', onPressed));
   }
 }
 
@@ -137,11 +134,13 @@ class _GroupButtonState extends State<GroupButton> {
     controller = MaterialStatesController();
   }
 
-  void onPress() {
-    widget.onPress!();
+  void onPressed() {
+    if(widget.onPressed != null){
+      widget.onPressed?.call();
     setState(() {
       selected = !selected;
     });
+    }
   }
 
   @override
@@ -167,15 +166,15 @@ class _GroupButtonState extends State<GroupButton> {
       padding: EdgeInsets.zero,
       child: FilledButton(
         statesController: controller,
-        onPressed: onPress,
+        onPressed: onPressed,
         style: getStyle(borderType, colors),
         child: SelectionContainer.disabled(
           child: Row(
             mainAxisSize: MainAxisSize.min,
             children: [
               if (widget.icon != null) Icon(widget.icon),
               Text(widget.label!),
-              if (widget.onPress != null)
+              if (widget.onPressed != null)
                 const Icon(ZetaIcons.expand_more_round),
             ],
           ).paddingAll(_padding),
@@ -191,6 +190,7 @@ class _GroupButtonState extends State<GroupButton> {
     ZetaColors colors,
     bool finalButton,
   ) {
+    if(selected) return BorderSide(color: colors.black);
     if (states.contains(MaterialState.disabled)) {
       return BorderSide(color: colors.cool.shade40);
     }
@@ -219,13 +219,11 @@ class _GroupButtonState extends State<GroupButton> {
   }
 
   ButtonStyle getStyle(ZetaWidgetBorder borderType, ZetaColors colors) {
-    final ZetaColorSwatch color =
-        selected ? colors.cool : ZetaColorSwatch.fromColor(colors.black);
-
     return ButtonStyle(
       shape: MaterialStateProperty.all(
         RoundedRectangleBorder(
-          borderRadius: borderType.radius,
+          borderRadius: _getRadius(borderType),
+
         ),
       ),
       backgroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
@@ -246,7 +244,7 @@ class _GroupButtonState extends State<GroupButton> {
         if (states.contains(MaterialState.disabled)) {
           return colors.textDisabled;
         }
-        if (selected) return color.onColor;
+        if (selected) return colors.black.onColor;
         return colors.textDefault;
       }),
       elevation: const MaterialStatePropertyAll(0),

lib/src/components/buttons/button_style.dart

@@ -55,7 +55,8 @@ extension ButtonFunctions on ZetaButtonType {
   }
 
   /// Returns if button has border
-  bool get border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle;
+  bool get border =>
+      this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle;
 
   ///Returns if button is solid
   bool get solid => index < 4;
@@ -85,8 +86,9 @@ ButtonStyle buttonStyle(
   ZetaButtonType type,
   Color? backgroundColor,
 ) {
-  final ZetaColorSwatch color =
-      backgroundColor != null ? ZetaColorSwatch.fromColor(backgroundColor) : type.color(colors);
+  final ZetaColorSwatch color = backgroundColor != null
+      ? ZetaColorSwatch.fromColor(backgroundColor)
+      : type.color(colors);
 
   final bool isSolid = type.solid || backgroundColor != null;
 
@@ -129,7 +131,8 @@ ButtonStyle buttonStyle(
         }
       },
     ),
-    overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+    overlayColor:
+        MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       return null;
     }),
     side: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
@@ -142,7 +145,9 @@ ButtonStyle buttonStyle(
       }
       if (type.border) {
         return BorderSide(
-          color: type == ZetaButtonType.outline ? colors.primary.border : colors.borderDefault,
+          color: type == ZetaButtonType.outline
+              ? colors.primary.border
+              : colors.borderDefault,
         );
       }
 

lib/src/components/progress/progress_bar.dart

@@ -148,9 +148,7 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
           width: _weight,
           height: _weight,
           decoration: BoxDecoration(
-            color: colors.surfaceDisabled,
-            borderRadius: ZetaRadius.rounded,
-          ),
+              color: colors.surfaceDisabled, borderRadius: ZetaRadius.rounded,),
         ),
       ],
     );

lib/zeta_flutter.dart

@@ -15,6 +15,7 @@ export 'src/components/banners/system_banner.dart';
 export 'src/components/bottom sheets/bottom_sheet.dart';
 export 'src/components/bottom sheets/menu_items.dart';
 export 'src/components/buttons/button.dart';
+export 'src/components/buttons/button_group.dart';
 export 'src/components/buttons/button_style.dart';
 export 'src/components/buttons/fab.dart';
 export 'src/components/buttons/icon_button.dart';