-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [MDS-379] Finalize the MoonTag (#31)
- Loading branch information
Showing
16 changed files
with
520 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import 'package:example/src/storybook/common/options.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/moon_design.dart'; | ||
| import 'package:storybook_flutter/storybook_flutter.dart'; | ||
|
|
||
| class TagStory extends Story { | ||
| TagStory() | ||
| : super( | ||
| name: "Tags", | ||
| builder: (context) { | ||
| final customLabelTextKnob = context.knobs.text( | ||
| label: "Custom label text", | ||
| initial: "MoonTag", | ||
| ); | ||
|
|
||
| final colorsKnob = context.knobs.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for tag.", | ||
| initial: 5, // bulma | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final color = colorTable(context)[colorsKnob]; | ||
|
|
||
| final borderRadiusKnob = context.knobs.sliderInt( | ||
| max: 12, | ||
| initial: 4, | ||
| label: "borderRadius", | ||
| description: "Border radius for tag.", | ||
| ); | ||
|
|
||
| final tagSizesKnob = context.knobs.options( | ||
| label: "tagSize", | ||
| description: "Tag size variants.", | ||
| initial: MoonTagSize.xs, | ||
| options: const [ | ||
| Option(label: "x2s", value: MoonTagSize.x2s), | ||
| Option(label: "xs", value: MoonTagSize.xs), | ||
| ], | ||
| ); | ||
|
|
||
| final setRtlModeKnob = context.knobs.boolean( | ||
| label: "RTL mode", | ||
| description: "Switch between LTR and RTL modes.", | ||
| ); | ||
|
|
||
| final setUpperCase = context.knobs.boolean( | ||
| label: "isUpperCase", | ||
| description: "Sets the text style of the tag to upper case.", | ||
| ); | ||
|
|
||
| final showLeftIconKnob = context.knobs.boolean( | ||
| label: "Show leftIcon", | ||
| description: "Show widget in the leftIcon slot.", | ||
| ); | ||
|
|
||
| final showLabelKnob = context.knobs.boolean( | ||
| label: "Show label", | ||
| description: "Show widget in the label slot.", | ||
| initial: true, | ||
| ); | ||
|
|
||
| final showRightIconKnob = context.knobs | ||
| .boolean(label: "Show rightIcon", description: "Show widget in the rightIcon slot.", initial: true); | ||
|
|
||
| final effectiveIconSize = tagSizesKnob == MoonTagSize.x2s ? 12.0 : 16.0; | ||
|
|
||
| return Directionality( | ||
| textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr, | ||
| child: Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| MoonTag( | ||
| borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), | ||
| tagSize: tagSizesKnob, | ||
| isUpperCase: setUpperCase, | ||
| backgroundColor: color, | ||
| leftIcon: showLeftIconKnob | ||
| ? MoonPlaceholderIcon( | ||
| height: effectiveIconSize, | ||
| width: effectiveIconSize, | ||
| ) | ||
| : null, | ||
| label: showLabelKnob | ||
| ? Text(setUpperCase ? customLabelTextKnob.toUpperCase() : customLabelTextKnob) | ||
| : null, | ||
| rightIcon: showRightIconKnob | ||
| ? MoonPlaceholderIcon( | ||
| height: effectiveIconSize, | ||
| width: effectiveIconSize, | ||
| ) | ||
| : null, | ||
| ), | ||
| const SizedBox(height: 64), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| }, | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
lib/src/theme/button_theme.dart → lib/src/theme/button/button_theme.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import 'dart:ui'; | ||
|
|
||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/borders.dart'; | ||
| import 'package:moon_design/src/theme/sizes.dart'; | ||
| import 'package:moon_design/src/theme/typography/text_styles.dart'; | ||
|
|
||
| @immutable | ||
| class MoonTagSizes extends ThemeExtension<MoonTagSizes> with DiagnosticableTreeMixin { | ||
| static final x2s = MoonTagSizes( | ||
| height: MoonSizes.sizes.x2s, | ||
| gap: MoonSizes.sizes.x5s, | ||
| padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), | ||
| borderRadius: MoonBorders.borders.interactiveXs, | ||
| textStyle: MoonTextStyles.text.text10.copyWith(fontWeight: FontWeight.w400), | ||
| upperCaseTextStyle: MoonTextStyles.heading.text9.copyWith(fontWeight: FontWeight.w700), | ||
| ); | ||
|
|
||
| static final xs = MoonTagSizes( | ||
| height: MoonSizes.sizes.xs, | ||
| gap: MoonSizes.sizes.x5s, | ||
| padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), | ||
| borderRadius: MoonBorders.borders.interactiveXs, | ||
| textStyle: MoonTextStyles.text.text12.copyWith(fontWeight: FontWeight.w400), | ||
| upperCaseTextStyle: MoonTextStyles.heading.text10, | ||
| ); | ||
|
|
||
| /// Tag height. | ||
| final double height; | ||
|
|
||
| /// Space between tag children. | ||
| final double gap; | ||
|
|
||
| /// Padding around tag children. | ||
| final EdgeInsets padding; | ||
|
|
||
| /// Tag border radius. | ||
| final BorderRadius borderRadius; | ||
|
|
||
| /// Tag text style. | ||
| final TextStyle textStyle; | ||
|
|
||
| /// Tag upper case text style. | ||
| final TextStyle upperCaseTextStyle; | ||
|
|
||
| const MoonTagSizes({ | ||
| required this.height, | ||
| required this.gap, | ||
| required this.padding, | ||
| required this.borderRadius, | ||
| required this.textStyle, | ||
| required this.upperCaseTextStyle, | ||
| }); | ||
|
|
||
| @override | ||
| MoonTagSizes copyWith({ | ||
| double? height, | ||
| double? gap, | ||
| EdgeInsets? padding, | ||
| BorderRadius? borderRadius, | ||
| TextStyle? textStyle, | ||
| TextStyle? upperCaseTextStyle, | ||
| }) { | ||
| return MoonTagSizes( | ||
| height: height ?? this.height, | ||
| gap: gap ?? this.gap, | ||
| padding: padding ?? this.padding, | ||
| borderRadius: borderRadius ?? this.borderRadius, | ||
| textStyle: textStyle ?? this.textStyle, | ||
| upperCaseTextStyle: upperCaseTextStyle ?? this.upperCaseTextStyle, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonTagSizes lerp(ThemeExtension<MoonTagSizes>? other, double t) { | ||
| if (other is! MoonTagSizes) return this; | ||
|
|
||
| return MoonTagSizes( | ||
| height: lerpDouble(height, other.height, t)!, | ||
| gap: lerpDouble(gap, other.gap, t)!, | ||
| padding: EdgeInsets.lerp(padding, other.padding, t)!, | ||
| borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, | ||
| textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, | ||
| upperCaseTextStyle: TextStyle.lerp(upperCaseTextStyle, other.upperCaseTextStyle, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonTagSizes")) | ||
| ..add(DoubleProperty("height", height)) | ||
| ..add(DoubleProperty("gap", gap)) | ||
| ..add(DiagnosticsProperty<EdgeInsets>("padding", padding)) | ||
| ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius)) | ||
| ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle)) | ||
| ..add(DiagnosticsProperty<TextStyle>("upperCaseTextStyle", upperCaseTextStyle)); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/tag/tag_sizes.dart'; | ||
|
|
||
| @immutable | ||
| class MoonTagTheme extends ThemeExtension<MoonTagTheme> with DiagnosticableTreeMixin { | ||
| static final sizes = MoonTagTheme( | ||
| x2s: MoonTagSizes.x2s, | ||
| xs: MoonTagSizes.xs, | ||
| ); | ||
|
|
||
| /// (2x) Extra small tag properties. | ||
| final MoonTagSizes x2s; | ||
|
|
||
| /// Extra small tag properties. | ||
| final MoonTagSizes xs; | ||
|
|
||
| const MoonTagTheme({ | ||
| required this.x2s, | ||
| required this.xs, | ||
| }); | ||
|
|
||
| @override | ||
| MoonTagTheme copyWith({ | ||
| MoonTagSizes? x2s, | ||
| MoonTagSizes? xs, | ||
| }) { | ||
| return MoonTagTheme( | ||
| x2s: x2s ?? this.x2s, | ||
| xs: xs ?? this.xs, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonTagTheme lerp(ThemeExtension<MoonTagTheme>? other, double t) { | ||
| if (other is! MoonTagTheme) return this; | ||
|
|
||
| return MoonTagTheme( | ||
| x2s: x2s.lerp(other.x2s, t), | ||
| xs: xs.lerp(other.xs, t), | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonTagTheme")) | ||
| ..add(DiagnosticsProperty<MoonTagSizes>("x2s", x2s)) | ||
| ..add(DiagnosticsProperty<MoonTagSizes>("xs", xs)); | ||
| } | ||
| } |
Oops, something went wrong.