Skip to content

Commit

Permalink
chore: organise (#49)
Browse files Browse the repository at this point in the history 
chore: rename ZetaBadge to ZetaLabel to match designs
chore: rename ZetaSystemBanner to ZetaBanner to match designs
fix: breadcrumb rounded icon
fix: navigation bar text color
chore: reorganise directories to match designs
docs: widgetbook hide addons panel
fix: avatar icon badge background color null fallback
refactor: Buttongroup default values in constructor
refactor: priority pil rename props and add custom color
docs: remove default size in widgetbook
fix: default avatar size in chip
docs: update widgetbook organization and styling
refactor: static FAB option
refactor: replace margin numbers with tokens
  • Loading branch information
@thelukewalton
thelukewalton committed Jun 10, 2024
1 parent c0a9668 commit 2dc8fe4
Show file tree
Hide file tree
Showing 45 changed files with 412 additions and 289 deletions.
4 changes: 2 additions & 2 deletions example/lib/pages/components/badges_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,8 @@ class _Badge extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ZetaBadge(label: 'Label', status: type),
ZetaBadge(label: 'Label', status: type, rounded: false),
ZetaLabel(label: 'Label', status: type),
ZetaLabel(label: 'Label', status: type, rounded: false),
],
);
}
Expand Down
48 changes: 24 additions & 24 deletions example/lib/pages/components/banner_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,45 +19,45 @@ class BannerExample extends StatelessWidget {
children: [
Text('System Banner', style: ZetaTextStyles.displayMedium),
_getTitle('Style variants'),
ZetaSystemBanner(
type: ZetaSystemBannerStatus.primary,
ZetaBanner(
type: ZetaBannerStatus.primary,
title: 'Centered',
context: context,
titleStart: true,
leadingIcon: ZetaIcons.info_round,
),
ZetaSystemBanner(
type: ZetaSystemBannerStatus.primary,
ZetaBanner(
type: ZetaBannerStatus.primary,
context: context,
title: 'Title Left',
),
ZetaSystemBanner(
type: ZetaSystemBannerStatus.primary,
ZetaBanner(
type: ZetaBannerStatus.primary,
context: context,
title: 'Title left with arrow',
titleStart: true,
trailing: Icon(ZetaIcons.chevron_right_round),
),
ZetaSystemBanner(
type: ZetaSystemBannerStatus.primary,
ZetaBanner(
type: ZetaBannerStatus.primary,
title: 'Title left + Icon',
titleStart: true,
context: context,
leadingIcon: ZetaIcons.info_round,
),
ZetaSystemBanner(
type: ZetaSystemBannerStatus.primary,
ZetaBanner(
type: ZetaBannerStatus.primary,
context: context,
title: 'Title left + Icon with Arrow',
titleStart: true,
leadingIcon: ZetaIcons.info_round,
trailing: IconButton(
icon: Icon(ZetaIcons.chevron_right_round),
onPressed: () {
ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner(
ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner(
title: 'Title',
context: context,
type: ZetaSystemBannerStatus.primary,
type: ZetaBannerStatus.primary,
trailing: IconButton(
icon: Icon(ZetaIcons.close_round),
onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(),
Expand All @@ -67,19 +67,19 @@ class BannerExample extends StatelessWidget {
),
),
_getTitle('Color variants'),
ZetaSystemBanner(
type: ZetaSystemBannerStatus.positive,
ZetaBanner(
type: ZetaBannerStatus.positive,
context: context,
title: 'Centered',
titleStart: true,
leadingIcon: ZetaIcons.info_round,
trailing: IconButton(
icon: Icon(ZetaIcons.chevron_right_round),
onPressed: () {
ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner(
ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner(
title: 'Title',
context: context,
type: ZetaSystemBannerStatus.positive,
type: ZetaBannerStatus.positive,
trailing: IconButton(
icon: Icon(ZetaIcons.close_round),
onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(),
Expand All @@ -88,19 +88,19 @@ class BannerExample extends StatelessWidget {
},
),
),
ZetaSystemBanner(
type: ZetaSystemBannerStatus.warning,
ZetaBanner(
type: ZetaBannerStatus.warning,
title: 'Centered',
context: context,
titleStart: true,
leadingIcon: ZetaIcons.info_round,
trailing: IconButton(
icon: Icon(ZetaIcons.chevron_right_round),
onPressed: () {
ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner(
ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner(
title: 'Title',
context: context,
type: ZetaSystemBannerStatus.warning,
type: ZetaBannerStatus.warning,
trailing: IconButton(
icon: Icon(ZetaIcons.close_round),
onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(),
Expand All @@ -109,19 +109,19 @@ class BannerExample extends StatelessWidget {
},
),
),
ZetaSystemBanner(
type: ZetaSystemBannerStatus.negative,
ZetaBanner(
type: ZetaBannerStatus.negative,
title: 'Centered',
context: context,
titleStart: true,
leadingIcon: ZetaIcons.info_round,
trailing: IconButton(
icon: Icon(ZetaIcons.chevron_right_round),
onPressed: () {
ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner(
ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner(
title: 'Title',
context: context,
type: ZetaSystemBannerStatus.negative,
type: ZetaBannerStatus.negative,
trailing: IconButton(
icon: Icon(ZetaIcons.close_round),
onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(),
Expand Down
2 changes: 1 addition & 1 deletion example/lib/pages/components/pagination_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ class _PaginationExampleState extends State<PaginationExample> {
name: PaginationExample.name,
child: Center(
child: Padding(
padding: const EdgeInsets.all(64),
padding: const EdgeInsets.all(ZetaSpacing.xL9),
child: Column(
children: [
Expanded(
Expand Down
6 changes: 3 additions & 3 deletions example/test/badge_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ void main() {
testWidgets('Initializes with correct parameters', (WidgetTester tester) async {
await tester.pumpWidget(
TestWidget(
widget: ZetaBadge(
widget: ZetaLabel(
label: 'Test Label',
status: ZetaWidgetStatus.warning,
),
),
);

final zetaBadgeFinder = find.byType(ZetaBadge);
final ZetaBadge badge = tester.firstWidget(zetaBadgeFinder);
final zetaBadgeFinder = find.byType(ZetaLabel);
final ZetaLabel badge = tester.firstWidget(zetaBadgeFinder);

expect(badge.rounded, true);
expect(badge.label, 'Test Label');
Expand Down
2 changes: 1 addition & 1 deletion example/test/priority_pill_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ void main() {
await tester.pumpWidget(
TestWidget(
widget: ZetaPriorityPill(
priority: 'High',
label: 'High',
index: '2',
),
),
Expand Down
88 changes: 61 additions & 27 deletions example/widgetbook/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

Expand Down Expand Up @@ -67,6 +70,34 @@ class HotReload extends StatefulWidget {
}

class _HotReloadState extends State<HotReload> {
closeAddonsPanel(_) async {
final renderObj = context.findRenderObject();
final size = MediaQuery.of(context).size;
if (size.width > 799) {
if (renderObj is RenderBox) {
await Future.delayed(Duration(milliseconds: 10));
final pos = Offset(size.width - 50, 10);
final hitTestResult = BoxHitTestResult();
renderObj.hitTest(hitTestResult, position: pos);
final entry = hitTestResult.path.firstWhere((e) => e is BoxHitTestEntry) as BoxHitTestEntry;
final event1 = PointerDownEvent(position: pos);
final event2 = PointerUpEvent(position: pos);

GestureBinding.instance
..dispatchEvent(event1, hitTestResult)
..dispatchEvent(event2, hitTestResult)
..handleEvent(event1, entry)
..handleEvent(event2, entry);
}
}
}

@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback(closeAddonsPanel);
}

@override
Widget build(BuildContext context) {
return Widgetbook(
Expand Down Expand Up @@ -94,15 +125,11 @@ class _HotReloadState extends State<HotReload> {
useCases: [
WidgetbookUseCase(name: 'Status Label', builder: (context) => statusLabelUseCase(context)),
WidgetbookUseCase(name: 'Priority Pill', builder: (context) => priorityPillUseCase(context)),
WidgetbookUseCase(name: 'Badge', builder: (context) => badgeUseCase(context)),
WidgetbookUseCase(name: 'Label', builder: (context) => labelUseCase(context)),
WidgetbookUseCase(name: 'Indicators', builder: (context) => indicatorsUseCase(context)),
WidgetbookUseCase(name: 'Tags', builder: (context) => tagsUseCase(context)),
],
),
WidgetbookUseCase(
name: 'Chat Item',
builder: (context) => chatItemWidgetBook(context),
),
WidgetbookComponent(
name: 'Buttons',
useCases: [
Expand All @@ -128,41 +155,48 @@ class _HotReloadState extends State<HotReload> {
WidgetbookUseCase(name: 'Circle', builder: (context) => progressCircleUseCase(context))
],
),
WidgetbookComponent(
name: 'List Items',
useCases: [
WidgetbookUseCase(name: 'List Item', builder: (context) => listItemUseCase(context)),
WidgetbookUseCase(
name: 'Notification List Item', builder: (context) => notificationListItemUseCase(context)),
WidgetbookUseCase(name: 'Contact Item', builder: (context) => contactItemUseCase(context)),
WidgetbookUseCase(name: 'Chat List Item', builder: (context) => chatItemWidgetBook(context)),
],
),
WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)),
WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)),
WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)),
WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)),
WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)),
WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)),
WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
WidgetbookUseCase(name: 'Contact Item', builder: (context) => contactItemUseCase(context)),
WidgetbookUseCase(name: "Dropdown", builder: (context) => dropdownUseCase(context)),
WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)),
WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)),
WidgetbookUseCase(name: 'Content', builder: (context) => bottomSheetContentUseCase(context)),
WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)),
WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),
WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)),
WidgetbookUseCase(name: 'Dialog', builder: (context) => dialogUseCase(context)),
WidgetbookUseCase(name: 'Filter Selection', builder: (context) => filterSelectionUseCase(context)),
WidgetbookUseCase(name: 'Global Header', builder: (context) => globalHeaderUseCase(context)),
WidgetbookUseCase(name: 'List Item', builder: (context) => listItemUseCase(context)),
WidgetbookUseCase(
name: 'Notification List Item', builder: (context) => notificationListItemUseCase(context)),
WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)),
WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)),
WidgetbookUseCase(name: 'Navigation Rail', builder: (context) => navigationRailUseCase(context)),
WidgetbookUseCase(name: 'Pagination', builder: (context) => paginationUseCase(context)),
WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)),
WidgetbookUseCase(name: 'Phone Input', builder: (context) => phoneInputUseCase(context)),
WidgetbookUseCase(name: 'Radio Button', builder: (context) => radioButtonUseCase(context)),
WidgetbookUseCase(name: 'Screen Header Bar', builder: (context) => screenHeaderBarUseCase(context)),
WidgetbookUseCase(name: 'Search Bar', builder: (context) => searchBarUseCase(context)),
WidgetbookUseCase(name: 'Segmented Control', builder: (context) => segmentedControlUseCase(context)),
WidgetbookUseCase(name: 'Switch', builder: (context) => switchUseCase(context)),
WidgetbookUseCase(name: 'Select Input', builder: (context) => selectInputUseCase(context)),
WidgetbookUseCase(name: 'Snack Bar', builder: (context) => snackBarUseCase(context)),
WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),
WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
WidgetbookUseCase(name: 'Phone Input', builder: (context) => phoneInputUseCase(context)),
WidgetbookUseCase(name: 'Stepper', builder: (context) => stepperUseCase(context)),
WidgetbookUseCase(name: 'Stepper Input', builder: (context) => stepperInputUseCase(context)),
WidgetbookUseCase(name: 'Dialog', builder: (context) => dialogUseCase(context)),
WidgetbookUseCase(name: 'Search Bar', builder: (context) => searchBarUseCase(context)),
WidgetbookUseCase(name: 'Navigation Rail', builder: (context) => navigationRailUseCase(context)),
WidgetbookUseCase(name: 'Tooltip', builder: (context) => tooltipUseCase(context)),
WidgetbookUseCase(name: 'Select Input', builder: (context) => selectInputUseCase(context)),
WidgetbookUseCase(name: 'Screen Header Bar', builder: (context) => screenHeaderBarUseCase(context)),
WidgetbookUseCase(name: 'Filter Selection', builder: (context) => filterSelectionUseCase(context)),
WidgetbookUseCase(name: 'Time Input', builder: (context) => timeInputUseCase(context)),
WidgetbookUseCase(name: 'Stepper', builder: (context) => stepperUseCase(context)),
WidgetbookUseCase(name: 'Switch', builder: (context) => switchUseCase(context)),
WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
WidgetbookUseCase(name: 'Text Input', builder: (context) => textInputUseCase(context)),
WidgetbookUseCase(name: 'Time Input', builder: (context) => timeInputUseCase(context)),
WidgetbookUseCase(name: 'Tooltip', builder: (context) => tooltipUseCase(context)),
WidgetbookUseCase(name: "Dropdown", builder: (context) => dropdownUseCase(context)),
]..sort((a, b) => a.name.compareTo(b.name)),
),
WidgetbookCategory(
Expand Down
2 changes: 1 addition & 1 deletion example/widgetbook/pages/assets/icon_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Widget iconsUseCase(BuildContext context) {
onTap: () async {
await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key));
ScaffoldMessenger.of(context).showMaterialBanner(
ZetaSystemBanner(context: context, title: 'Icon name copied'),
ZetaBanner(context: context, title: 'Icon name copied'),
);
await Future.delayed(Duration(seconds: 4));
ScaffoldMessenger.of(context).clearMaterialBanners();
Expand Down
1 change: 1 addition & 0 deletions example/widgetbook/pages/components/accordion_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import '../../test/test_components.dart';
import '../../utils/utils.dart';

Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget(
screenSize: Size(1280, 720),
widget: Padding(
padding: const EdgeInsets.all(ZetaSpacing.xL),
child: ZetaAccordion(
Expand Down
16 changes: 7 additions & 9 deletions example/widgetbook/pages/components/avatar_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,25 @@ Widget avatarUseCase(BuildContext context) {
widget: ZetaAvatar(
image: context.knobs.boolean(label: 'Image') ? image : null,
size: context.knobs.list(
label: 'Size',
options: ZetaAvatarSize.values,
labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
initialOption: ZetaAvatarSize.m),
label: 'Size',
options: ZetaAvatarSize.values,
labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
initialOption: ZetaAvatarSize.m,
),
upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false)
? ZetaAvatarBadge.icon(
icon: ZetaIcons.close_round,
iconColor: context.knobs.colorOrNull(label: "Badge Icon Color"),
color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ??
colors.iconDefault,
)
: null,
borderColor: context.knobs.colorOrNull(
label: 'Outline',
),
borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.green),
lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
? ZetaAvatarBadge.notification(
value: context.knobs.intOrNull.input(label: "Value", initialValue: 1),
)
: null,
initials: context.knobs.stringOrNull(label: 'Initials', initialValue: null),
initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'),
backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80),
),
);
Expand Down
Loading

0 comments on commit 2dc8fe4

Please sign in to comment.