Skip to content

Commit

Permalink
feat : Button Groups (#34)
Browse files Browse the repository at this point in the history 
* Initial version, no border customization

* Add button groups

* Resolve issues

* Use token color

---------

Authored-by: Osman <[email protected]>
  • Loading branch information
@ahmed-osman3
ahmed-osman3 authored Mar 7, 2024
1 parent 6c6adaf commit 085dc17
Show file tree
Hide file tree
Showing 7 changed files with 182 additions and 32 deletions.
86 changes: 82 additions & 4 deletions example/lib/pages/components/button_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()),
Expand Down Expand Up @@ -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();
}
}
13 changes: 13 additions & 0 deletions example/lib/pages/components/progress_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
59 changes: 58 additions & 1 deletion example/widgetbook/pages/components/button_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
);

Expand Down
36 changes: 17 additions & 19 deletions lib/src/components/buttons/button_group.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand All @@ -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,
});
Expand All @@ -76,7 +75,7 @@ class GroupButton extends StatefulWidget {
GroupButton.icon({
super.key,
required this.icon,
this.onPress,
this.onPressed,
this.label,
});

Expand All @@ -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;
Expand All @@ -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,
);
}

Expand All @@ -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));
}
}

Expand All @@ -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
Expand All @@ -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),
Expand All @@ -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);
}
Expand Down Expand Up @@ -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) {
Expand All @@ -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),
Expand Down
15 changes: 10 additions & 5 deletions lib/src/components/buttons/button_style.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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) {
Expand All @@ -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,
);
}

Expand Down
4 changes: 1 addition & 3 deletions lib/src/components/progress/progress_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,),
),
],
);
Expand Down
1 change: 1 addition & 0 deletions lib/zeta_flutter.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down

0 comments on commit 085dc17

Please sign in to comment.