Skip to content

Commit

Permalink
fix(UX-1242): Fixed extended app bar alignment (#189)
Browse files Browse the repository at this point in the history 
refactor: App bar variants are now constructed through named constructors.
fix(UX-1207): The search box on the search app bar now gets closed when the back button is pressed.
refactor: Search app bars can no longer be extended app bars.
test: Wrote tests for ZetaTopAppbar
chore: Merged goldenTest and goldenTestWithCallbacks. Also made the widgetType parameter optional and defaulted it to the type of widget.
ci: changed pull request code coverage pass score
  • Loading branch information
@mikecoomber
mikecoomber authored Oct 17, 2024
1 parent ba4901d commit 58fc7f5
Show file tree
Hide file tree
Showing 38 changed files with 888 additions and 581 deletions.
36 changes: 17 additions & 19 deletions .github/workflows/pull-request.yml
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
name: CI - Pull Request
on:
pull_request_target:

# Pull Request Runs on the same branch will be cancelled
concurrency:
group: ${{ github.head_ref }}
cancel-in-progress: true


jobs:
code-quality:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
repository: ${{github.event.pull_request.head.repo.full_name}}
ref: ${{ github.head_ref }}
fetch-depth: 0
- uses: subosito/flutter-action@v2
with:
cache: true
- run: dart run build_runner build --delete-conflicting-outputs
- uses: ZebraDevs/flutter-code-quality@main
with:
token: ${{secrets.GITHUB_TOKEN}}
coverage-pass-score: '90'


runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
repository: ${{github.event.pull_request.head.repo.full_name}}
ref: ${{ github.head_ref }}
fetch-depth: 0
- uses: subosito/flutter-action@v2
with:
cache: true
- run: dart run build_runner build --delete-conflicting-outputs
- uses: ZebraDevs/flutter-code-quality@main
with:
token: ${{secrets.GITHUB_TOKEN}}
coverage-pass-score: "80"

check-secret:
runs-on: ubuntu-latest
outputs:
Expand Down
78 changes: 9 additions & 69 deletions example/lib/pages/components/top_app_bar_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,7 @@ class TopAppBarExample extends StatefulWidget {
}

class _TopAppBarExampleState extends State<TopAppBarExample> {
final _searchControllerExtended = ZetaSearchController();
final _searchControllerRegular = ZetaSearchController();

void _showHideSearchExtended() {
_searchControllerExtended.isEnabled
? _searchControllerExtended.closeSearch()
: _searchControllerExtended.startSearch();
}

void _showHideSearchRegular() {
_searchControllerRegular.isEnabled
? _searchControllerRegular.closeSearch()
: _searchControllerRegular.startSearch();
}
final _searchController = ZetaSearchController();

@override
Widget build(BuildContext context) {
Expand Down Expand Up @@ -78,8 +65,7 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
],
),
Text('Centered', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
type: ZetaTopAppBarType.centeredTitle,
ZetaTopAppBar.centered(
leading: IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.menu),
Expand Down Expand Up @@ -119,24 +105,20 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
],
),
Text('Search', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
type: ZetaTopAppBarType.centeredTitle,
leading: BackButton(),
ZetaTopAppBar.search(
leading: IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.menu),
),
title: Text("Title"),
actions: [
IconButton(
onPressed: _showHideSearchRegular,
icon: ZetaIcon(ZetaIcons.search),
)
],
searchController: _searchControllerRegular,
searchController: _searchController,
onSearch: (text) => debugPrint('search text: $text'),
onSearchMicrophoneIconPressed: () async {
var sampleTexts = ['This is a sample text', 'Another sample', 'Speech recognition text', 'Example'];

var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];

_searchControllerRegular.text = generatedText;
_searchController.text = generatedText;
},
),
Text('Extended', style: ZetaTextStyles.titleLarge),
Expand Down Expand Up @@ -188,48 +170,6 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
],
),
),
Text('Extended Search', style: ZetaTextStyles.titleLarge),
SizedBox(
width: 800,
height: 200,
child: CustomScrollView(
slivers: [
ZetaTopAppBar.extended(
leading: BackButton(),
title: Text("Title"),
actions: [
IconButton(
onPressed: _showHideSearchExtended,
icon: ZetaIcon(ZetaIcons.search),
)
],
searchController: _searchControllerExtended,
onSearch: (text) => debugPrint('search text: $text'),
onSearchMicrophoneIconPressed: () async {
var sampleTexts = [
'This is a sample text',
'Another sample',
'Speech recognition text',
'Example'
];
var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];
_searchControllerExtended.text = generatedText;
},
),
SliverToBoxAdapter(
child: Container(
width: 800,
height: 800,
color: Zeta.of(context).colors.surfaceSelectedHover,
child: CustomPaint(
painter: Painter(context: context),
size: Size(800, 800),
),
),
),
],
),
),
].gap(20),
),
),
Expand Down
86 changes: 24 additions & 62 deletions example/widgetbook/pages/components/top_app_bar_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Widget defaultTopAppBarUseCase(BuildContext context) {
label: "Title Alignment",
options: [
ZetaTopAppBarType.defaultAppBar,
ZetaTopAppBarType.centeredTitle,
ZetaTopAppBarType.centered,
],
initialOption: ZetaTopAppBarType.defaultAppBar,
labelBuilder: (option) {
Expand Down Expand Up @@ -53,7 +53,7 @@ Widget defaultTopAppBarUseCase(BuildContext context) {
icon: ZetaIcon(ZetaIcons.more_vertical),
)
]
: null,
: [],
),
],
));
Expand Down Expand Up @@ -84,7 +84,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
label: "Title Alignment",
options: [
ZetaTopAppBarType.defaultAppBar,
ZetaTopAppBarType.centeredTitle,
ZetaTopAppBarType.centered,
],
initialOption: ZetaTopAppBarType.defaultAppBar,
labelBuilder: (option) {
Expand All @@ -101,7 +101,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
initialValue: false,
);

return ZetaTopAppBar(
return ZetaTopAppBar.search(
leading: IconButton(
onPressed: () {},
icon: ZetaIcon(leadingIcon),
Expand All @@ -118,43 +118,26 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
searchController.text = generatedText;
}
: null,
actions: [
IconButton(
onPressed: () {
searchController.isEnabled ? searchController.closeSearch() : searchController.startSearch();
},
icon: ZetaIcon(ZetaIcons.search)),
],
);
}
}

Widget extendedTopAppBarUseCase(BuildContext context) => ExtendedSearch();
Widget extendedTopAppBarUseCase(BuildContext context) => ExtendedTopAppBar();

class ExtendedSearch extends StatefulWidget {
const ExtendedSearch({super.key});
class ExtendedTopAppBar extends StatefulWidget {
const ExtendedTopAppBar({super.key});

@override
State<ExtendedSearch> createState() => _ExtendedSearchState();
State<ExtendedTopAppBar> createState() => _ExtendedTopAppBarState();
}

class _ExtendedSearchState extends State<ExtendedSearch> {
final _searchControllerExtended = ZetaSearchController();

void _showHideSearchExtended() {
_searchControllerExtended.isEnabled
? _searchControllerExtended.closeSearch()
: _searchControllerExtended.startSearch();
}

class _ExtendedTopAppBarState extends State<ExtendedTopAppBar> {
@override
Widget build(BuildContext context) {
final title = context.knobs.string(label: "Title", initialValue: "Title");

final leadingIcon = iconKnob(context, name: 'Leading Icon', initial: ZetaIcons.hamburger_menu);

final showSearch = context.knobs.boolean(label: 'Search variant', initialValue: false);

return WidgetbookScaffold(
removeBody: true,
builder: (context, constraints) => SafeArea(
Expand All @@ -166,41 +149,20 @@ class _ExtendedSearchState extends State<ExtendedSearch> {
ZetaTopAppBar.extended(
leading: IconButton(icon: ZetaIcon(leadingIcon), onPressed: () {}),
title: Text(title),
actions: showSearch
? [
IconButton(
onPressed: _showHideSearchExtended,
icon: ZetaIcon(ZetaIcons.search),
)
]
: [
IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.language),
),
IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.favorite),
),
IconButton(
onPressed: () {},
icon: ZetaIcon(ZetaIcons.more_vertical),
)
],
searchController: showSearch ? _searchControllerExtended : null,
onSearch: showSearch ? (text) => debugPrint('search text: $text') : null,
onSearchMicrophoneIconPressed: showSearch
? () async {
var sampleTexts = [
'This is a sample text',
'Another sample',
'Speech recognition text',
'Example'
];
var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];
_searchControllerExtended.text = generatedText;
}
: null,
actions: [
IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.language),
),
IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.favorite),
),
IconButton(
onPressed: () {},
icon: ZetaIcon(ZetaIcons.more_vertical),
)
],
),
SliverToBoxAdapter(
child: Container(
Expand Down Expand Up @@ -232,7 +194,7 @@ class Painter extends CustomPainter {
var p1 = Offset(i, -10);
var p2 = Offset(constraints.maxHeight + i, constraints.maxHeight * 4);
var paint = Paint()
..color = Zeta.of(context).colors.primary
..color = Zeta.of(context).colors.surfacePrimarySubtle
..strokeWidth = Zeta.of(context).spacing.minimum;
canvas.drawLine(p1, p2, paint);
}
Expand Down
2 changes: 1 addition & 1 deletion lib/src/components/screen_header_bar/screen_header_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class ZetaScreenHeaderBar extends ZetaStatelessWidget {
title: title,
titleTextStyle: ZetaTextStyles.titleLarge,
actions: actionButtonLabel == null
? null
? []
: [
ZetaButton(
label: actionButtonLabel!,
Expand Down
Loading

0 comments on commit 58fc7f5

Please sign in to comment.