TF-4370 Add Description field to Create new Label modal
This commit is contained in:
@@ -26,6 +26,8 @@ class TextFieldBuilder extends StatefulWidget {
|
||||
final bool autocorrect;
|
||||
final TextDirection textDirection;
|
||||
final bool readOnly;
|
||||
final bool isFillContainer;
|
||||
final TextAlignVertical? textAlignVertical;
|
||||
final MouseCursor? mouseCursor;
|
||||
final String? semanticLabel;
|
||||
|
||||
@@ -36,6 +38,8 @@ class TextFieldBuilder extends StatefulWidget {
|
||||
this.obscureText = false,
|
||||
this.autoFocus = false,
|
||||
this.readOnly = false,
|
||||
this.isFillContainer = false,
|
||||
this.textAlignVertical,
|
||||
this.textStyle,
|
||||
this.textDirection = TextDirection.ltr,
|
||||
this.textInputAction,
|
||||
@@ -89,6 +93,8 @@ class _TextFieldBuilderState extends State<TextFieldBuilder> {
|
||||
decoration: widget.decoration,
|
||||
maxLines: widget.maxLines,
|
||||
minLines: widget.minLines,
|
||||
textAlignVertical: widget.textAlignVertical,
|
||||
expands: widget.isFillContainer,
|
||||
keyboardAppearance: widget.keyboardAppearance,
|
||||
style: widget.textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
|
||||
color: AppColor.textFieldTextColor,
|
||||
|
||||
@@ -11,7 +11,12 @@ class DefaultInputFieldWidget extends StatelessWidget {
|
||||
final String? hintText;
|
||||
final String? errorText;
|
||||
final Color? inputColor;
|
||||
final bool hasMaxLines;
|
||||
final bool isFillContainer;
|
||||
final TextAlignVertical? textAlignVertical;
|
||||
final double? maxHeight;
|
||||
final FocusNode? focusNode;
|
||||
final TextInputAction? inputAction;
|
||||
final OnTextChange? onTextChange;
|
||||
final OnTextSubmitted? onTextSubmitted;
|
||||
|
||||
@@ -22,6 +27,11 @@ class DefaultInputFieldWidget extends StatelessWidget {
|
||||
this.errorText,
|
||||
this.focusNode,
|
||||
this.inputColor,
|
||||
this.hasMaxLines = true,
|
||||
this.isFillContainer = false,
|
||||
this.textAlignVertical,
|
||||
this.maxHeight,
|
||||
this.inputAction,
|
||||
this.onTextChange,
|
||||
this.onTextSubmitted,
|
||||
});
|
||||
@@ -30,17 +40,19 @@ class DefaultInputFieldWidget extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return TextFieldBuilder(
|
||||
controller: textEditingController,
|
||||
maxLines: 1,
|
||||
textInputAction: TextInputAction.next,
|
||||
maxLines: hasMaxLines ? 1 : null,
|
||||
textInputAction: inputAction ?? TextInputAction.next,
|
||||
textStyle: ThemeUtils.textStyleBodyBody3(
|
||||
color: inputColor ?? AppColor.m3SurfaceBackground,
|
||||
),
|
||||
isFillContainer: isFillContainer,
|
||||
textAlignVertical: textAlignVertical,
|
||||
focusNode: focusNode,
|
||||
onTextSubmitted: onTextSubmitted,
|
||||
onTextChange: onTextChange,
|
||||
decoration: InputDecoration(
|
||||
constraints: BoxConstraints(
|
||||
maxHeight: errorText?.isNotEmpty == true ? 60 : 40,
|
||||
maxHeight: maxHeight ?? (errorText?.isNotEmpty == true ? 60 : 40),
|
||||
),
|
||||
filled: true,
|
||||
fillColor: errorText?.isNotEmpty == true
|
||||
|
||||
@@ -11,8 +11,13 @@ class LabelInputFieldBuilder extends StatelessWidget {
|
||||
final FocusNode? focusNode;
|
||||
final double? runSpacing;
|
||||
final double? inputFieldMaxWidth;
|
||||
final double? inputFieldHeight;
|
||||
final bool arrangeHorizontally;
|
||||
final bool isLabelHasColon;
|
||||
final bool hasMaxLines;
|
||||
final bool isFillContainer;
|
||||
final TextAlignVertical? textAlignVertical;
|
||||
final TextInputAction? inputAction;
|
||||
final OnTextChange? onTextChange;
|
||||
|
||||
const LabelInputFieldBuilder({
|
||||
@@ -21,12 +26,17 @@ class LabelInputFieldBuilder extends StatelessWidget {
|
||||
required this.textEditingController,
|
||||
this.arrangeHorizontally = true,
|
||||
this.isLabelHasColon = true,
|
||||
this.hasMaxLines = true,
|
||||
this.isFillContainer = false,
|
||||
this.textAlignVertical,
|
||||
this.hintText,
|
||||
this.errorText,
|
||||
this.focusNode,
|
||||
this.labelStyle,
|
||||
this.runSpacing,
|
||||
this.inputFieldMaxWidth,
|
||||
this.inputFieldHeight,
|
||||
this.inputAction,
|
||||
this.onTextChange,
|
||||
});
|
||||
|
||||
@@ -39,6 +49,11 @@ class LabelInputFieldBuilder extends StatelessWidget {
|
||||
hintText: hintText,
|
||||
errorText: errorText,
|
||||
focusNode: focusNode,
|
||||
hasMaxLines: hasMaxLines,
|
||||
textAlignVertical: textAlignVertical,
|
||||
isFillContainer: isFillContainer,
|
||||
inputAction: inputAction,
|
||||
maxHeight: inputFieldHeight,
|
||||
onTextChange: onTextChange,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -55,6 +55,9 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
|
||||
final ValueNotifier<bool> _createLabelStateNotifier = ValueNotifier(false);
|
||||
final TextEditingController _nameInputController = TextEditingController();
|
||||
final FocusNode _nameInputFocusNode = FocusNode();
|
||||
final TextEditingController _descriptionInputController =
|
||||
TextEditingController();
|
||||
final FocusNode _descriptionInputFocusNode = FocusNode();
|
||||
|
||||
List<String> _labelDisplayNameList = <String>[];
|
||||
Color? _selectedColor;
|
||||
@@ -135,6 +138,12 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildLabelNameInputField(appLocalizations),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 16),
|
||||
child: _buildLabelDescriptionInputField(
|
||||
appLocalizations,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 26, bottom: 16),
|
||||
child: Text(
|
||||
@@ -297,6 +306,29 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLabelDescriptionInputField(AppLocalizations appLocalizations) {
|
||||
return LabelInputFieldBuilder(
|
||||
label: appLocalizations.labelDescription,
|
||||
hintText: appLocalizations.labelDescriptionHintText,
|
||||
textEditingController: _descriptionInputController,
|
||||
focusNode: _descriptionInputFocusNode,
|
||||
arrangeHorizontally: false,
|
||||
isLabelHasColon: false,
|
||||
hasMaxLines: false,
|
||||
isFillContainer: true,
|
||||
labelStyle: ThemeUtils.textStyleInter600().copyWith(
|
||||
fontSize: 14,
|
||||
height: 18 / 14,
|
||||
color: Colors.black,
|
||||
),
|
||||
runSpacing: 16,
|
||||
inputFieldMaxWidth: double.infinity,
|
||||
inputFieldHeight: 84,
|
||||
textAlignVertical: TextAlignVertical.top,
|
||||
inputAction: TextInputAction.newline,
|
||||
);
|
||||
}
|
||||
|
||||
void _onLabelNameInputChanged(
|
||||
AppLocalizations appLocalizations,
|
||||
String value,
|
||||
@@ -376,6 +408,8 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
|
||||
void dispose() {
|
||||
_nameInputFocusNode.dispose();
|
||||
_nameInputController.dispose();
|
||||
_descriptionInputFocusNode.dispose();
|
||||
_descriptionInputController.dispose();
|
||||
_labelNameErrorTextNotifier.dispose();
|
||||
_labelSelectedColorNotifier.dispose();
|
||||
_createLabelStateNotifier.dispose();
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"@@last_modified": "2026-03-04T11:35:04.572137",
|
||||
"@@last_modified": "2026-03-11T14:39:59.601630",
|
||||
"initializing_data": "Initializing data...",
|
||||
"@initializing_data": {
|
||||
"type": "text",
|
||||
@@ -5447,5 +5447,17 @@
|
||||
"type": "text",
|
||||
"placeholders_order": [],
|
||||
"placeholders": {}
|
||||
},
|
||||
"labelDescription": "Description (optional)",
|
||||
"@labelDescription": {
|
||||
"type": "text",
|
||||
"placeholders_order": [],
|
||||
"placeholders": {}
|
||||
},
|
||||
"labelDescriptionHintText": "Add a short description to explain what this label is for",
|
||||
"@labelDescriptionHintText": {
|
||||
"type": "text",
|
||||
"placeholders_order": [],
|
||||
"placeholders": {}
|
||||
}
|
||||
}
|
||||
@@ -5762,4 +5762,18 @@ class AppLocalizations {
|
||||
name: 'deleteALabelFailure',
|
||||
);
|
||||
}
|
||||
|
||||
String get labelDescription {
|
||||
return Intl.message(
|
||||
'Description (optional)',
|
||||
name: 'labelDescription',
|
||||
);
|
||||
}
|
||||
|
||||
String get labelDescriptionHintText {
|
||||
return Intl.message(
|
||||
'Add a short description to explain what this label is for',
|
||||
name: 'labelDescriptionHintText',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user