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!: [MDS-1264] Release v1.0.0 #432

Merged
merged 4 commits into from
Aug 2, 2024
Merged

feat!: [MDS-1264] Release v1.0.0 #432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
029a359
fix: [MDS-1250] Fixes and improvements (#428)
GittHub-d Jul 19, 2024
cd97dc4
fix: [MDS-1260] Change font weight from 500 to 600 and remove caption…
GittHub-d Jul 29, 2024
94dabe7
chore: Prepare for v1.0.0 release (#430)
Kypsis Aug 2, 2024
f05efc8
Merge branch 'v1' into v1-release
Kypsis Aug 2, 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
12 changes: 11 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
_Note: This project uses **[Release Please](https://github.com/googleapis/release-please)** and **[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)** spec, please follow the conventions or consider using **[Commitizen](https://github.com/commitizen/cz-cli)**
to write commit messages._

## Disclaimer

The current major release, v1.0.0, will be maintained as-is and will not receive further updates, except for patches. The v1 theming is based on the soon-to-be deprecated Moon Design Figma v1 and lacks flexibility. For greater control over theming with v1 of moon_flutter, it is recommended to create custom wrapper widgets around the moon_flutter widgets that align with your project's specific theming requirements.

## Resources

- 📱 [Playground](https://flutter.moon.io)
Expand All @@ -22,7 +26,13 @@ final lightTokens = MoonTokens.light.copyWith(
textPrimary: Colors.amber,
),
typography: MoonTypography.typography.copyWith(
heading: MoonTypography.typography.heading.apply(fontFamily: "DMSans"),
heading: MoonTypography.typography.heading.apply(
// Using variable font and bumping down the font weight compared to the
// baseline 600 for heading.
fontFamily: "DMSans",
fontWeightDelta: -1,
fontVariations: [const FontVariation('wght', 500)],
),
),
);

Expand Down
44 changes: 13 additions & 31 deletions example/assets/code_snippets/breadcrumb.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ class BreadcrumbStory extends StatefulWidget {

class _BreadcrumbStoryState extends State<BreadcrumbStory> {
bool _showDropdown = false;
Color? _dropdownIconColor;

@override
Widget build(BuildContext context) {
Expand Down Expand Up @@ -50,38 +49,21 @@ class _BreadcrumbStoryState extends State<BreadcrumbStory> {
? MoonIcons.controls_chevron_right_small_16_light
: MoonIcons.controls_chevron_left_small_16_light,
),
showMoreWidget: MoonDropdown(
show: _showDropdown,
onTapOutside: () => setState(() {
_showDropdown = false;
_dropdownIconColor = context.moonColors!.iconSecondary;
}),
content: Column(
children: List.generate(
3,
(int index) => MoonMenuItem(
onTap: () {},
label: Text('Page ${index + 1}'),
),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: MouseRegion(
onHover: (PointerHoverEvent _) {
setState(() => _dropdownIconColor = context.moonColors!.iconPrimary);
},
onExit: (PointerExitEvent _) {
if (!_showDropdown) setState(() => _dropdownIconColor = context.moonColors!.iconSecondary);
},
child: MoonButton.icon(
buttonSize: MoonButtonSize.xs,
hoverEffectColor: Colors.transparent,
iconColor: _dropdownIconColor ?? context.moonColors!.iconSecondary,
onTap: () => setState(() => _showDropdown = !_showDropdown),
icon: const Icon(MoonIcons.generic_burger_regular_16_light),
showMoreWidget: MoonBreadcrumbItem(
onTap: () => setState(() => _showDropdown = !_showDropdown),
label: MoonDropdown(
show: _showDropdown,
onTapOutside: () => setState(() => _showDropdown = false),
content: Column(
children: List.generate(
3,
(int index) => MoonMenuItem(
onTap: () {},
label: Text('Page ${index + 1}'),
),
),
),
child: const Icon(MoonIcons.generic_burger_regular_16_light),
),
),
items: List.generate(
Expand Down
6 changes: 4 additions & 2 deletions example/lib/src/storybook/stories/primitives/bottom_sheet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,9 @@ class BottomSheetStory extends StatelessWidget {
? MediaQuery.of(context).size.height * heightKnob
: MediaQuery.of(context).size.height * 0.7,
closeProgressThreshold: closeProgressThresholdKnob,
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
borderRadius: borderRadiusKnob != null
? BorderRadius.circular(borderRadiusKnob.toDouble())
: null,
builder: (BuildContext context) => Column(
children: [
Container(
Expand All @@ -84,7 +86,7 @@ class BottomSheetStory extends StatelessWidget {
child: Center(
child: Text(
'Pick your choice!',
style: MoonTypography.typography.heading.text16,
style: MoonTypography.typography.body.text16,
),
),
),
Expand Down
178 changes: 74 additions & 104 deletions example/lib/src/storybook/stories/primitives/breadcrumb.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'dart:math';

import 'package:example/src/storybook/common/color_options.dart';
import 'package:example/src/storybook/common/widgets/text_divider.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:moon_design/moon_design.dart';
import 'package:storybook_flutter/storybook_flutter.dart';
Expand All @@ -16,7 +17,6 @@ class BreadcrumbStory extends StatefulWidget {

class _BreadcrumbStoryState extends State<BreadcrumbStory> {
bool _showDropdown = false;
Color? _dropdownIconColor;

@override
Widget build(BuildContext context) {
Expand Down Expand Up @@ -98,6 +98,35 @@ class _BreadcrumbStoryState extends State<BreadcrumbStory> {
description: "Show widget in MoonBreadcrumb item trailing slot.",
);

final List<MoonBreadcrumbItem> breadcrumbItems = List.generate(
itemCountKnob ?? 7,
(int index) {
final bool isHomePage = index == 0;

return MoonBreadcrumbItem(
semanticLabel: index.toString(),
onTap: () => MoonToast.show(
context,
displayDuration: const Duration(seconds: 1),
label: Text(isHomePage ? 'Home Page' : 'Page $index'),
),
leading: showLeadingKnob && isHomePage
? const Icon(
MoonIcons.generic_home_16_light,
size: 16,
)
: null,
label: Text(isHomePage ? 'Home' : 'Page $index'),
trailing: showTrailingKnob && isHomePage
? const Icon(
MoonIcons.generic_home_16_light,
size: 16,
)
: null,
);
},
);

return Center(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0),
Expand All @@ -108,50 +137,28 @@ class _BreadcrumbStoryState extends State<BreadcrumbStory> {
text: "MoonBreadcrumb",
paddingTop: 0,
),
Column(
children: [
MoonBreadcrumb(
visibleItemCount: visibleItemCountKnob ?? 3,
gap: gapKnob?.toDouble(),
padding: const EdgeInsets.symmetric(horizontal: 16),
hoverEffectColor: hoverEffectColor,
dividerColor: dividerColor,
itemTextStyle: TextStyle(color: itemColor),
currentItemTextStyle: TextStyle(color: currentItemColor),
items: List.generate(
itemCountKnob ?? 7,
(int index) {
final bool isHomePage = index == 0;

return MoonBreadcrumbItem(
onTap: () => MoonToast.show(
context,
displayDuration: const Duration(seconds: 1),
label: Text(isHomePage ? 'Home Page' : 'Page $index'),
),
leading:
showLeadingKnob && isHomePage ? const Icon(MoonIcons.generic_home_16_light, size: 16) : null,
label: Text(isHomePage ? 'Home' : 'Page $index'),
trailing:
showTrailingKnob && isHomePage ? const Icon(MoonIcons.generic_home_16_light, size: 16) : null,
);
},
),
),
const SizedBox(height: 16),
MoonButton(
backgroundColor: context.moonColors!.piccolo,
onTap: () => setState(() => {}),
label: Text(
'Reset',
style: TextStyle(color: context.moonColors!.goten),
),
),
],
MoonBreadcrumb(
visibleItemCount: visibleItemCountKnob ?? 3,
gap: gapKnob?.toDouble(),
padding: const EdgeInsets.symmetric(horizontal: 16),
hoverEffectColor: hoverEffectColor,
dividerColor: dividerColor,
itemTextStyle: TextStyle(color: itemColor),
currentItemTextStyle: TextStyle(color: currentItemColor),
items: breadcrumbItems,
),
const SizedBox(height: 32),
MoonButton(
backgroundColor: context.moonColors!.piccolo,
onTap: () => setState(() => {}),
label: Text(
'Reset',
style: TextStyle(color: context.moonColors!.goten),
),
),
const TextDivider(text: "Custom MoonBreadcrumb with MoonDropdown"),
StatefulBuilder(
builder: (context, setState) {
builder: (BuildContext context, StateSetter setState) {
return MoonBreadcrumb(
visibleItemCount: visibleItemCountKnob ?? 3,
gap: gapKnob?.toDouble(),
Expand All @@ -168,74 +175,37 @@ class _BreadcrumbStoryState extends State<BreadcrumbStory> {
? MoonIcons.controls_chevron_right_small_16_light
: MoonIcons.controls_chevron_left_small_16_light,
),
showMoreWidget: MoonDropdown(
show: _showDropdown,
onTapOutside: () => setState(() {
_showDropdown = false;
_dropdownIconColor = context.moonColors!.iconSecondary;
}),
content: Column(
children: List.generate(
4,
(int index) => MoonMenuItem(
width: 120,
onTap: () => MoonToast.show(
context,
displayDuration: const Duration(seconds: 1),
showMoreWidget: MoonBreadcrumbItem(
onTap: () => setState(() => _showDropdown = !_showDropdown),
label: MoonDropdown(
maxHeight: 250,
maxWidth: 150,
show: _showDropdown,
onTapOutside: () => setState(() => _showDropdown = false),
content: ListView(
shrinkWrap: true,
padding: EdgeInsets.zero,
children: List.generate(
max(
(itemCountKnob ?? 7) - (visibleItemCountKnob ?? 3),
0,
),
(int index) => MoonMenuItem(
onTap: () => MoonToast.show(
context,
displayDuration: const Duration(seconds: 1),
label: Text('Page ${index + 1}'),
),
label: Text('Page ${index + 1}'),
),
label: Text('Page ${index + 1}'),
),
),
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: gapKnob?.toDouble() ?? 8),
child: MouseRegion(
onHover: (PointerHoverEvent event) {
setState(() => _dropdownIconColor = hoverEffectColor ?? context.moonColors!.iconPrimary);
},
onExit: (PointerExitEvent event) {
if (!_showDropdown) {
setState(() => _dropdownIconColor = itemColor ?? context.moonColors!.iconSecondary);
}
},
child: MoonButton.icon(
buttonSize: MoonButtonSize.xs,
hoverEffectColor: Colors.transparent,
iconColor: _dropdownIconColor ?? context.moonColors!.iconSecondary,
icon: const Icon(MoonIcons.generic_burger_regular_16_light),
onTap: () => setState(() => _showDropdown = !_showDropdown),
),
child: const Icon(
MoonIcons.generic_burger_regular_16_light,
),
),
),
items: List.generate(
itemCountKnob ?? 7,
(int index) {
final bool isHomePage = index == 0;

return MoonBreadcrumbItem(
onTap: () => MoonToast.show(
context,
displayDuration: const Duration(seconds: 1),
label: Text(isHomePage ? 'Home Page' : 'Page $index'),
),
leading: showLeadingKnob && isHomePage
? const Icon(
MoonIcons.generic_home_16_light,
size: 16,
)
: null,
label: Text(isHomePage ? 'Home' : 'Page $index'),
trailing: showTrailingKnob && isHomePage
? const Icon(
MoonIcons.generic_home_16_light,
size: 16,
)
: null,
);
},
),
items: breadcrumbItems,
);
},
),
Expand Down
11 changes: 6 additions & 5 deletions example/lib/src/storybook/stories/primitives/drawer.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,11 @@ class DrawerStory extends StatelessWidget {
drawerScrimColor: barrierColor,
drawer: MoonDrawer(
backgroundColor: backgroundColor,
barrierColor: barrierColorKnob != null
? barrierColor
: context.moonTheme?.drawerTheme.colors.barrierColor ?? MoonColors.light.zeno,
borderRadius: BorderRadiusDirectional.horizontal(
end: Radius.circular(borderRadiusKnob?.toDouble() ?? 0),
),
width: drawerWidthKnob?.toDouble() ?? MediaQuery.of(context).size.width,
width: drawerWidthKnob?.toDouble() ??
MediaQuery.of(context).size.width * 0.8,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expand All @@ -82,7 +80,10 @@ class DrawerStory extends StatelessWidget {
child: Builder(
builder: (BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0),
padding: const EdgeInsets.symmetric(
vertical: 64.0,
horizontal: 16.0,
),
child: MoonFilledButton(
label: const Text("Tap me"),
onTap: () => Scaffold.of(context).openDrawer(),
Expand Down
9 changes: 6 additions & 3 deletions example/lib/src/storybook/stories/primitives/linear_progress.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ class LinearProgressStory extends StatelessWidget {
options: colorOptions,
);

final backgroundColor = colorTable(context)[progressBackgroundColorKnob ?? 40];
final backgroundColor =
colorTable(context)[progressBackgroundColorKnob ?? 40];

final pinColorKnob = context.knobs.nullable.options(
label: "pinColor",
Expand Down Expand Up @@ -116,13 +117,15 @@ class LinearProgressStory extends StatelessWidget {

return Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 16),
padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 20),
child: MoonLinearProgress(
linearProgressSize: progressSizeKnob,
value: linearProgressValueKnob,
color: color,
backgroundColor: backgroundColor,
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
borderRadius: borderRadiusKnob != null
? BorderRadius.circular(borderRadiusKnob.toDouble())
: null,
showMinLabel: showMinLabelKnob,
showMaxLabel: showMaxLabelKnob,
showPin: showPinKnob,
Expand Down
1 change: 1 addition & 0 deletions example/lib/src/storybook/stories/primitives/tab_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,7 @@ class _TabBarStoryState extends State<TabBarStory>
tabs: List.generate(
4,
(int index) => MoonTab(
disabled: index == 1,
trailing: const Icon(MoonIcons.other_frame_24_light),
tabStyle: tabStyle,
),
Expand Down
Loading