Skip to content

Commit

Permalink
fix: [MDS-517] Fix TextInput and TextArea bugs (#164)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kypsis
Kypsis committed May 15, 2023
1 parent cedaf84 commit abcb01c
Show file tree
Hide file tree
Showing 13 changed files with 5,981 additions and 593 deletions.
22 changes: 22 additions & 0 deletions example/lib/src/storybook/common/widgets/error.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import 'package:flutter/material.dart';
import 'package:moon_design/moon_design.dart';

class StoryErrorWidget extends StatelessWidget {
final String errorText;

const StoryErrorWidget({
super.key,
required this.errorText,
});

@override
Widget build(BuildContext context) {
return Row(
children: [
const MoonIcon(MoonIcons.info_16, size: 16),
const SizedBox(width: 4),
Text(errorText),
],
);
}
}
24 changes: 22 additions & 2 deletions example/lib/src/storybook/stories/text_area.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:example/src/storybook/common/color_options.dart';
import 'package:example/src/storybook/common/widgets/error.dart';
import 'package:flutter/material.dart';
import 'package:moon_design/moon_design.dart';
import 'package:storybook_flutter/storybook_flutter.dart';
Expand Down Expand Up @@ -82,6 +83,22 @@ class TextAreaStory extends Story {
initial: true,
);

final growableKnob = context.knobs.boolean(
label: "Growable",
description: "Whether the MoonTextArea has no fixed height and is growable",
);

final hasFocusEffectKnob = context.knobs.boolean(
label: "hasFocusEffect",
description: "Whether to display focus effect around MoonTextInput.",
initial: true,
);

final showHelperKnob = context.knobs.boolean(
label: "helper",
description: "Show widget in MoonTextArea helper slot.",
);

return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
Expand All @@ -91,10 +108,12 @@ class TextAreaStory extends Story {
child: Builder(
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
MoonTextArea(
enabled: enabledKnob,
height: 300,
hasFocusEffect: hasFocusEffectKnob,
height: growableKnob ? null : 200,
textColor: textColor,
hintTextColor: hintTextColor,
backgroundColor: backgroundColor,
Expand All @@ -107,7 +126,8 @@ class TextAreaStory extends Story {
validator: (value) => value?.length != null && value!.length < 10
? "The text should be longer than 10 characters."
: null,
errorBuilder: (context, errorText) => Text(errorText!),
helper: showHelperKnob ? const Text("Supporting text") : null,
errorBuilder: (context, errorText) => StoryErrorWidget(errorText: errorText!),
),
const SizedBox(height: 16),
MoonFilledButton(
Expand Down
146 changes: 109 additions & 37 deletions example/lib/src/storybook/stories/text_input.dart
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import 'package:example/src/storybook/common/color_options.dart';
import 'package:example/src/storybook/common/widgets/error.dart';
import 'package:flutter/material.dart';
import 'package:moon_design/moon_design.dart';
import 'package:storybook_flutter/storybook_flutter.dart';

TextEditingController _textEditingController = TextEditingController();
TextEditingController _textController = TextEditingController();
TextEditingController _passwordController = TextEditingController();

bool _hidePassword = true;

class TextInputStory extends Story {
TextInputStory()
Expand Down Expand Up @@ -97,6 +101,17 @@ class TextInputStory extends Story {
initial: true,
);

final hasFocusEffectKnob = context.knobs.boolean(
label: "hasFocusEffect",
description: "Whether to display focus effect around MoonTextInput.",
initial: true,
);

final hasFloatingLabelKnob = context.knobs.boolean(
label: "hasFloatingLabel",
description: "Whether MoonTextInput has floating label.",
);

final showLeadingKnob = context.knobs.boolean(
label: "leading",
description: "Show widget in MoonTextInput leading slot.",
Expand All @@ -109,9 +124,9 @@ class TextInputStory extends Story {
initial: true,
);

final showSupportingKnob = context.knobs.boolean(
label: "supporting",
description: "Show widget in MoonTextInput supporting slot.",
final showHelperKnob = context.knobs.boolean(
label: "helper",
description: "Show widget in MoonTextInput helper slot.",
);

return Center(
Expand All @@ -124,41 +139,98 @@ class TextInputStory extends Story {
builder: (context) {
return Column(
children: [
SizedBox(
height: 86,
child: MoonTextInput(
controller: _textEditingController,
textInputSize: textInputSizesKnob,
enabled: enabledKnob,
textColor: textColor,
hintTextColor: hintTextColor,
backgroundColor: backgroundColor,
activeBorderColor: activeBorderColor,
inactiveBorderColor: inactiveBorderColor,
errorBorderColor: errorBorderColor,
borderRadius: borderRadiusKnob != null
? BorderRadius.circular(borderRadiusKnob.toDouble())
: null,
hintText: "Enter your text here...",
validator: (value) => value?.length != null && value!.length < 10
? "The text should be longer than 10 characters."
: null,
leading: showLeadingKnob ? const MoonIcon(MoonIcons.search_24) : null,
trailing: showTrailingKnob
? MoonButton.icon(
icon: MoonIcon(
MoonIcons.close_24,
color: DefaultTextStyle.of(context).style.color,
MoonFormTextInput(
controller: _textController,
enabled: enabledKnob,
textInputSize: textInputSizesKnob,
hasFocusEffect: hasFocusEffectKnob,
hasFloatingLabel: hasFloatingLabelKnob,
textColor: textColor,
hintTextColor: hintTextColor,
backgroundColor: backgroundColor,
activeBorderColor: activeBorderColor,
inactiveBorderColor: inactiveBorderColor,
errorBorderColor: errorBorderColor,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
hintText: "Enter your text here (over 10 characters)",
validator: (value) => value?.length != null && value!.length < 10
? "The text should be longer than 10 characters."
: null,
leading: showLeadingKnob
? const MoonIcon(
MoonIcons.search_24,
size: 24,
)
: null,
trailing: showTrailingKnob
? MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
child: const MoonIcon(
MoonIcons.close_small_24,
size: 24,
),
buttonSize: MoonButtonSize.xs,
onTap: () => _textEditingController.clear(),
)
: null,
supporting: showSupportingKnob ? const Text("Supporting text") : null,
errorBuilder: (context, errorText) => Text(errorText!),
),
onTap: () => _textController.clear(),
),
)
: null,
helper: showHelperKnob ? const Text("Supporting text") : null,
errorBuilder: (context, errorText) => StoryErrorWidget(errorText: errorText!),
),
const SizedBox(height: 16),
StatefulBuilder(
builder: (context, setState) {
return MoonFormTextInput(
controller: _passwordController,
enabled: enabledKnob,
keyboardType: TextInputType.visiblePassword,
obscureText: _hidePassword,
textInputSize: textInputSizesKnob,
hasFocusEffect: hasFocusEffectKnob,
hasFloatingLabel: hasFloatingLabelKnob,
textColor: textColor,
hintTextColor: hintTextColor,
backgroundColor: backgroundColor,
activeBorderColor: activeBorderColor,
inactiveBorderColor: inactiveBorderColor,
errorBorderColor: errorBorderColor,
borderRadius: borderRadiusKnob != null
? BorderRadius.circular(borderRadiusKnob.toDouble())
: null,
hintText: "Enter password (123abc)",
validator: (value) => value != "123abc" ? "Wrong password." : null,
leading: showLeadingKnob
? const MoonIcon(
MoonIcons.search_24,
size: 24,
)
: null,
trailing: showTrailingKnob
? MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
child: IntrinsicWidth(
child: Align(
alignment: Alignment.centerRight,
child: Text(
_hidePassword ? "Show" : "Hide",
style: DefaultTextStyle.of(context)
.style
.copyWith(decoration: TextDecoration.underline),
),
),
),
onTap: () => setState(() => _hidePassword = !_hidePassword),
),
)
: null,
helper: showHelperKnob ? const Text("Supporting text") : null,
errorBuilder: (context, errorText) => StoryErrorWidget(errorText: errorText!),
);
},
),
const SizedBox(height: 8),
const SizedBox(height: 24),
MoonFilledButton(
label: const Text("Submit"),
onTap: () => Form.of(context).validate(),
Expand Down
1 change: 1 addition & 0 deletions example/lib/src/storybook/storybook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ class StorybookPage extends StatelessWidget {
child: Scaffold(
extendBody: true,
extendBodyBehindAppBar: true,
resizeToAvoidBottomInset: false,
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: child,
Expand Down
2 changes: 2 additions & 0 deletions lib/moon_design.dart
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/// Moon Design for Flutter
library moon_design;

export 'package:moon_design/src/theme/accordion/accordion_theme.dart';
Expand Down Expand Up @@ -65,6 +66,7 @@ export 'package:moon_design/src/widgets/radio/radio.dart';
export 'package:moon_design/src/widgets/switch/switch.dart';
export 'package:moon_design/src/widgets/tag/tag.dart';
export 'package:moon_design/src/widgets/text_area/text_area.dart';
export 'package:moon_design/src/widgets/text_input/form_text_input.dart';
export 'package:moon_design/src/widgets/text_input/text_input.dart';
export 'package:moon_design/src/widgets/toast/toast.dart';
export 'package:moon_design/src/widgets/tooltip/tooltip.dart';
22 changes: 11 additions & 11 deletions lib/src/theme/text_area/text_area_properties.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
borderRadius: MoonBorders.borders.interactiveSm,
transitionDuration: const Duration(milliseconds: 200),
transitionCurve: Curves.easeInOutCubic,
supportingPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s, vertical: MoonSizes.sizes.x4s),
textPadding: const EdgeInsets.all(16),
supportingPadding: EdgeInsets.only(top: MoonSizes.sizes.x4s),
textPadding: EdgeInsets.all(MoonSizes.sizes.x2s),
textStyle: MoonTextStyles.body.text16,
supportingTextStyle: MoonTextStyles.body.text12,
helperTextStyle: MoonTextStyles.body.text12,
);

/// TextArea border radius.
Expand All @@ -26,7 +26,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
/// TextArea transition curve.
final Curve transitionCurve;

/// The padding around TextArea supporting widget or error builder.
/// The padding around TextArea helper widget or error builder.
final EdgeInsetsGeometry supportingPadding;

/// TextArea text padding.
Expand All @@ -35,8 +35,8 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
/// TextArea text style.
final TextStyle textStyle;

/// TextArea supporting or error text style.
final TextStyle supportingTextStyle;
/// TextArea helper or error text style.
final TextStyle helperTextStyle;

const MoonTextAreaProperties({
required this.borderRadius,
Expand All @@ -45,7 +45,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
required this.supportingPadding,
required this.textPadding,
required this.textStyle,
required this.supportingTextStyle,
required this.helperTextStyle,
});

@override
Expand All @@ -56,7 +56,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
EdgeInsetsGeometry? supportingPadding,
EdgeInsetsGeometry? textPadding,
TextStyle? textStyle,
TextStyle? supportingTextStyle,
TextStyle? helperTextStyle,
}) {
return MoonTextAreaProperties(
borderRadius: borderRadius ?? this.borderRadius,
Expand All @@ -65,7 +65,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
supportingPadding: supportingPadding ?? this.supportingPadding,
textPadding: textPadding ?? this.textPadding,
textStyle: textStyle ?? this.textStyle,
supportingTextStyle: supportingTextStyle ?? this.supportingTextStyle,
helperTextStyle: helperTextStyle ?? this.helperTextStyle,
);
}

Expand All @@ -80,7 +80,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
supportingPadding: EdgeInsetsGeometry.lerp(supportingPadding, other.supportingPadding, t)!,
textPadding: EdgeInsetsGeometry.lerp(textPadding, other.textPadding, t)!,
textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
supportingTextStyle: TextStyle.lerp(supportingTextStyle, other.supportingTextStyle, t)!,
helperTextStyle: TextStyle.lerp(helperTextStyle, other.helperTextStyle, t)!,
);
}

Expand All @@ -95,6 +95,6 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
..add(DiagnosticsProperty<EdgeInsetsGeometry>("supportingPadding", supportingPadding))
..add(DiagnosticsProperty<EdgeInsetsGeometry>("textPadding", textPadding))
..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle))
..add(DiagnosticsProperty<TextStyle>("supportingTextStyle", supportingTextStyle));
..add(DiagnosticsProperty<TextStyle>("helperTextStyle", helperTextStyle));
}
}
Loading

0 comments on commit abcb01c

Please sign in to comment.