Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(UX-1064): Comms Buttons #182

Merged
merged 8 commits into from
Oct 4, 2024
Merged

feat(UX-1064): Comms Buttons #182

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7f86a4d
feat: comms buttons
DE7924 Sep 30, 2024
21c9137
docs: changed comms button example to use assorted constructors
DE7924 Oct 1, 2024
a803c8f
chore(automated): Lint commit and format
invalid-email-address Oct 1, 2024
e24ca0d
fix: set toggle related properties on non-toggle constructors to null
DE7924 Oct 2, 2024
8e9453c
Merge branch 'UX-1064/Comms-Buttons' of https://github.com/ZebraDevs/…
DE7924 Oct 2, 2024
063946a
test: goldens
DE7924 Oct 2, 2024
bd418a5
fix: moved variables from outside the build method to inside the buil…
DE7924 Oct 4, 2024
55c5879
fix: removed commented lines
DE7924 Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions example/lib/home.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import 'package:zeta_example/pages/components/button_example.dart';
import 'package:zeta_example/pages/components/chat_item_example.dart';
import 'package:zeta_example/pages/components/checkbox_example.dart';
import 'package:zeta_example/pages/components/chip_example.dart';
import 'package:zeta_example/pages/components/comms_button_example.dart';
import 'package:zeta_example/pages/components/contact_item_example.dart';
import 'package:zeta_example/pages/components/date_input_example.dart';
import 'package:zeta_example/pages/components/dialog_example.dart';
Expand Down Expand Up @@ -69,6 +70,7 @@ final List<Component> components = [
Component(ChatItemExample.name, (context) => const ChatItemExample()),
Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
Component(ChipExample.name, (context) => const ChipExample()),
Component(CommsButtonExample.name, (context) => const CommsButtonExample()),
Component(ContactItemExample.name, (context) => const ContactItemExample()),
Component(ListExample.name, (context) => const ListExample()),
Component(ListItemExample.name, (context) => const ListItemExample()),
Expand Down
262 changes: 262 additions & 0 deletions example/lib/pages/components/comms_button_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,262 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class CommsButtonExample extends StatelessWidget {
static const String name = 'CommsButton';

const CommsButtonExample({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return ExampleScaffold(
name: name,
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Wrap(
runSpacing: Zeta.of(context).spacing.xl_3,
alignment: WrapAlignment.start,
children: [
Column(
children: [
ZetaCommsButton.reject(
label: 'Reject',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.reject(
label: 'Reject',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.reject(
label: 'Reject',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.answer(
label: 'Answer',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.answer(
label: 'Answer',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.answer(
label: 'Answer',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.mute(
label: 'Mute',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Un-Mute',
),
ZetaCommsButton.mute(
label: 'Mute',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Un-Mute',
),
ZetaCommsButton.mute(
label: 'Mute',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Un-Mute',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.video(
label: 'Hide Video',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Show Video',
),
ZetaCommsButton.video(
label: 'Hide Video',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Show Video',
),
ZetaCommsButton.video(
label: 'Hide Video',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Show Video',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.transfer(
label: 'Transfer',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.transfer(
label: 'Transfer',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.transfer(
label: 'Transfer',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.hold(
label: 'Hold Call',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'On Hold',
),
ZetaCommsButton.hold(
label: 'Hold Call',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'On Hold',
),
ZetaCommsButton.hold(
label: 'Hold Call',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'On Hold',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.speaker(
label: 'Speaker On',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Speaker Off',
),
ZetaCommsButton.speaker(
label: 'Speaker On',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Speaker Off',
),
ZetaCommsButton.speaker(
label: 'Speaker On',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Speaker Off',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.record(
label: 'Record',
size: ZetaWidgetSize.large,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Stop',
),
ZetaCommsButton.record(
label: 'Record',
size: ZetaWidgetSize.medium,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Stop',
),
ZetaCommsButton.record(
label: 'Record',
size: ZetaWidgetSize.small,
onToggle: (isToggled) {
print('Toggled');
print(isToggled);
},
toggledLabel: 'Stop',
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.add(
label: 'Add',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.add(
label: 'Add',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.add(
label: 'Add',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
Column(
children: [
ZetaCommsButton.security(
label: 'Security',
size: ZetaWidgetSize.large,
),
ZetaCommsButton.security(
label: 'Security',
size: ZetaWidgetSize.medium,
),
ZetaCommsButton.security(
label: 'Security',
size: ZetaWidgetSize.small,
),
].gap(Zeta.of(context).spacing.large),
),
].gap(Zeta.of(context).spacing.large),
),
),
),
);
}
}
2 changes: 2 additions & 0 deletions example/widgetbook/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import 'pages/components/button_widgetbook.dart';
import 'pages/components/chat_item_widgetbook.dart';
import 'pages/components/checkbox_widgetbook.dart';
import 'pages/components/chip_widgetbook.dart';
import 'pages/components/comms_button_widgetbook.dart';
import 'pages/components/contact_item_widgetbook.dart';
import 'pages/components/date_input_widgetbook.dart';
import 'pages/components/dial_pad_widgetbook.dart';
Expand Down Expand Up @@ -185,6 +186,7 @@ class _HotReloadState extends State<HotReload> {
WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)),
WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)),
WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
WidgetbookUseCase(name: 'Comms Button', builder: (context) => commsButtonUseCase(context)),
WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),
WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)),
WidgetbookUseCase(name: 'Dialog', builder: (context) => dialogUseCase(context)),
Expand Down
35 changes: 35 additions & 0 deletions example/widgetbook/pages/components/comms_button_widgetbook.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

import '../../utils/scaffold.dart';
import '../../utils/utils.dart';

Widget commsButtonUseCase(BuildContext context) {
return WidgetbookScaffold(
builder: (context, _) => ZetaCommsButton(
label: context.knobs.string(
label: 'Text',
initialValue: 'Answer',
),
size: context.knobs.list(
label: 'Size',
options: ZetaWidgetSize.values,
labelBuilder: enumLabelBuilder,
initialOption: ZetaWidgetSize.medium,
),
type: context.knobs.list(
label: 'Type',
options: ZetaCommsButtonType.values,
labelBuilder: enumLabelBuilder,
initialOption: ZetaCommsButtonType.positive,
),
icon: iconKnob(
context,
nullable: false,
name: "Icon",
initial: ZetaIcons.phone,
),
),
);
}
Loading