Skip to content

Commit dc5fb4d

Browse files
nouha06boosted-botAhmedAmineZr
authored
chore: phone number input component update to v13 (#690)(#571)(#762)
* chore: update tokens * chore: update tokens with version 2.4.0 * chore: update tokens with version 2.4.0 * chore: update version components * chore(version): prepare version 2.0.0 (#747) Prepare version v2.0.0 (#747) * feat(phone-number-input): update phone number input to v1.3 * fix(password-input): Add a hint to explain how to interact with field --------- Co-authored-by: boosted-bot <boosted-bot@users.noreply.github.com> Co-authored-by: Ahmed Amine Zribi <ahmedamine.zribi@sofrecom.com>
1 parent 0baf4cc commit dc5fb4d

3 files changed

Lines changed: 66 additions & 88 deletions

File tree

‎app/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77
## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.1...develop)
88
### Added
99
### Changed
10+
- [Library] update `Phone number input` component to v1.3 ([#690](https://github.com/Orange-OpenSource/ouds-flutter/issues/690))
1011
- [Library] update `tag` component to v1.5 ([#694](https://github.com/Orange-OpenSource/ouds-flutter/issues/694))
1112
- [Library] update `input tag` component to v1.2 ([#695](https://github.com/Orange-OpenSource/ouds-flutter/issues/695))
1213
- [DemoApp][Library] update tokens 2.5.0 ([#778](https://github.com/Orange-OpenSource/ouds-flutter/issues/778))
1314
- [DemoApp][Library] update tokens 2.4.0 ([#726](https://github.com/Orange-OpenSource/ouds-flutter/issues/726))
1415

1516
### Fixed
17+
- [Library] `Phone number input` Add a hint to explain how to interact with fields ([#571](https://github.com/Orange-OpenSource/ouds-flutter/issues/571))
1618
- [Library] `input tag` the whole component should have the role button ([#481](https://github.com/Orange-OpenSource/ouds-flutter/issues/481))
1719

1820
## [1.3.1](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.0...1.3.1) - 2026-05-14

‎ouds_core/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77
## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.1...develop)
88
### Added
99
### Changed
10+
- [Library] update `Phone number input` component to v1.3 ([#690](https://github.com/Orange-OpenSource/ouds-flutter/issues/690))
1011
- [Library] update `tag` component to v1.5 ([#694](https://github.com/Orange-OpenSource/ouds-flutter/issues/694))
1112
- [Library] update `input tag` component to v1.2 ([#695](https://github.com/Orange-OpenSource/ouds-flutter/issues/695))
1213
- [Library] update tokens 2.5.0 ([#778](https://github.com/Orange-OpenSource/ouds-flutter/issues/778))
1314
- [Library] update tokens 2.4.0 ([#726](https://github.com/Orange-OpenSource/ouds-flutter/issues/726))
1415

1516
### Fixed
17+
- [Library] `Phone number input` Add a hint to explain how to interact with fields ([#571](https://github.com/Orange-OpenSource/ouds-flutter/issues/571))
1618
- [Library] `input tag` the whole component should have the role button ([#481](https://github.com/Orange-OpenSource/ouds-flutter/issues/481))
1719

1820
## [1.3.1](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.0...1.3.1) - 2026-05-14

‎ouds_core/lib/components/form_input/ouds_phone_number_input.dart‎

Lines changed: 62 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import 'package:ouds_core/components/form_input/internal/modifier/ouds_form_inpu
2828
import 'package:ouds_core/components/form_input/internal/ouds_form_input_control_state.dart';
2929
import 'package:ouds_core/components/form_input/internal/ouds_form_input_decoration.dart';
3030
import 'package:ouds_core/components/utilities/app_assets.dart';
31-
import 'package:ouds_core/components/utilities/input_utils.dart';
3231
import 'package:ouds_core/l10n/gen/ouds_localizations.dart';
3332
import 'package:ouds_theme_contract/ouds_theme.dart';
3433
import 'package:ouds_theme_contract/ouds_theme_contract.dart';
@@ -99,7 +98,7 @@ class OudsPhoneNumberInput extends StatefulWidget {
9998
final bool? enabled;
10099
final bool? readOnly;
101100
final TextInputType? keyboardType;
102-
CountrySelector? countrySelector;
101+
final CountrySelector? countrySelector;
103102
final OudsInputDecoration decoration;
104103
final void Function(String)? onEditingComplete;
105104

@@ -158,7 +157,7 @@ class _OudsPhoneNumberInputState extends State<OudsPhoneNumberInput> {
158157
final phoneUtil = PhoneNumberUtil.instance;
159158
int? maxLength;
160159

161-
/// Digits tapés par l'utilisateur
160+
/// Digits tapped by user
162161
@override
163162
void initState() {
164163
super.initState();
@@ -260,15 +259,16 @@ class _OudsPhoneNumberInputState extends State<OudsPhoneNumberInput> {
260259
// Check if the input is currently showing an error
261260
final isError = widget.decoration.errorText != null;
262261

263-
final l10n = OudsLocalizations.of(context);
264-
265262
String? formattedNumber = "";
266263
String limitedDigits = "";
267264

265+
final l10n = OudsLocalizations.of(context);
266+
268267
//needed for accessibility
269268
final contentText = widget.controller?.text ?? "";
270-
final prefixText = contentText.isNotEmpty
271-
? "${(widget.countrySelector != null) ? widget.countrySelector?.selectedCountry?.prefix : widget.decoration.prefix ?? ""}"
269+
270+
final suffixText = contentText.isNotEmpty
271+
? ", ${widget.decoration.suffix ?? ""}"
272272
: "";
273273
final helperText = isError
274274
? widget.decoration.errorText ?? ""
@@ -282,23 +282,32 @@ class _OudsPhoneNumberInputState extends State<OudsPhoneNumberInput> {
282282
: isReadOnly
283283
? l10n?.core_common_disabled_a11y ?? ""
284284
: "";
285+
final hintLabel = contentText.isEmpty
286+
? widget.decoration.hintText ?? ""
287+
: "";
288+
289+
final prefixCountry = (widget.countrySelector != null)
290+
? widget.countrySelector?.selectedCountry?.prefix
291+
: widget.decoration.prefix;
292+
293+
final prefixSemantics = contentText.isNotEmpty ? prefixCountry : "";
285294

286295
// Build Semantics value
287296
final semanticsValue = [
288-
l10n?.core_phoneNumberInput_a11y,
289-
prefixText,
297+
l10n?.core_textInput_trait_a11y,
298+
widget.decoration.labelText,
299+
prefixSemantics,
290300
contentText,
301+
suffixText,
291302
helperText,
292303
statusLabel,
293-
contentText.isEmpty && !_isFocused ? l10n?.core_common_hint_a11y : null,
304+
hintLabel,
294305
].where((s) => s != null && s.isNotEmpty).join(", ");
295306

296307
return Semantics(
297-
label: l10n?.core_phoneNumberInput_a11y,
308+
label: semanticsValue,
309+
hint: l10n?.core_common_hint_a11y,
298310
value: isError ? l10n?.core_common_error_a11y : null,
299-
//hint: widget.decoration.hintText ?? "", // if we want to display value in a11Y activate hint
300-
focused: effectiveFocusNode != null,
301-
focusable: true,
302311
child: ConstrainedBox(
303312
constraints: BoxConstraints(
304313
minWidth: textInput.sizeMinWidth,
@@ -353,43 +362,20 @@ class _OudsPhoneNumberInputState extends State<OudsPhoneNumberInput> {
353362
/// Center block: main text input
354363
Flexible(
355364
fit: FlexFit.loose,
356-
child: widget.readOnly == true
357-
? IgnorePointer(
358-
child: Semantics(
359-
label: semanticsValue,
360-
focused: effectiveFocusNode != null,
361-
focusable: true,
362-
child: _buildTextField(
363-
inputTextTextModifier,
364-
state,
365-
isError,
366-
effectiveFocusNode,
367-
theme,
368-
context,
369-
textInput,
370-
effectiveIsFocused,
371-
formattedNumber,
372-
limitedDigits,
373-
),
374-
),
375-
)
376-
: Semantics(
377-
label: semanticsValue,
378-
focused: effectiveFocusNode != null,
379-
focusable: true,
380-
child: _buildTextField(
381-
inputTextTextModifier,
382-
state,
383-
isError,
384-
effectiveFocusNode,
385-
theme,
386-
context,
387-
textInput,
388-
effectiveIsFocused,
389-
formattedNumber,
390-
limitedDigits,
391-
),
392-
),
365+
child: ExcludeSemantics(
366+
child: _buildTextField(
367+
inputTextTextModifier,
368+
state,
369+
isError,
370+
effectiveFocusNode,
371+
theme,
372+
context,
373+
textInput,
374+
effectiveIsFocused,
375+
formattedNumber,
376+
limitedDigits,
377+
),
378+
),
393379
),
394380

395381
/// Right block: suffix icon container
@@ -446,7 +432,7 @@ class _OudsPhoneNumberInputState extends State<OudsPhoneNumberInput> {
446432
/// - Displays label text if provided, with height constraints and style.
447433
/// - Shows hint text if provided or if formattedNumber is available, styled accordingly.
448434
/// - Adds a prefix widget if prefix or country selector is present, styled appropriately.
449-
/// - Ensures the text field is dense for compact layout.
435+
/// - Ensures the text field is dense for a compact layout.
450436
TextField _buildTextField(
451437
OudsFormFieldsTextColorModifier inputTextTextModifier,
452438
OudsFormFieldsControlState state,
@@ -465,11 +451,12 @@ class _OudsPhoneNumberInputState extends State<OudsPhoneNumberInput> {
465451
focusNode: effectiveFocusNode,
466452
keyboardType: widget.keyboardType,
467453
style: theme.typographyTokens
468-
.typeLabelDefaultLarge(context)
454+
.typeLabelModerateLarge(context)
469455
.copyWith(
470456
color: inputTextTextModifier.getTextLabelColor(state, isError),
471457
),
472458
enabled: widget.enabled,
459+
readOnly: widget.readOnly ?? false,
473460
inputFormatters: [
474461
FilteringTextInputFormatter.digitsOnly,
475462
MaxDigitsFormatter(
@@ -522,29 +509,13 @@ class _OudsPhoneNumberInputState extends State<OudsPhoneNumberInput> {
522509

523510
// Label text widget, shown if labelText is provided
524511
label: widget.decoration.labelText != null
525-
? Container(
526-
constraints: BoxConstraints(
527-
maxHeight: textInput.sizeLabelMaxHeight,
528-
),
529-
child: ExcludeSemantics(
530-
child: Text(
531-
maxLines: InputUtils.getLabelMaxLines(
532-
hintText: widget.decoration.hintText,
533-
controller: widget.controller,
534-
isFocused: effectiveIsFocused,
512+
? Text(
513+
widget.decoration.labelText ?? "",
514+
style: theme.typographyTokens
515+
.typeLabelDefaultLarge(context)
516+
.copyWith(
517+
color: inputTextTextModifier.getTextColor(state, isError),
535518
),
536-
overflow: TextOverflow.ellipsis,
537-
widget.decoration.labelText ?? "",
538-
style: theme.typographyTokens
539-
.typeLabelDefaultLarge(context)
540-
.copyWith(
541-
color: inputTextTextModifier.getTextColor(
542-
state,
543-
isError,
544-
),
545-
),
546-
),
547-
),
548519
)
549520
: null,
550521

@@ -725,19 +696,22 @@ class _OudsPhoneNumberInputState extends State<OudsPhoneNumberInput> {
725696
if (prefixToDisplay == null || prefixToDisplay.isEmpty) {
726697
return const SizedBox.shrink();
727698
}
728-
return Row(
729-
mainAxisSize: MainAxisSize.min,
730-
children: [
731-
Text(
732-
prefixToDisplay,
733-
style: theme.typographyTokens
734-
.typeLabelDefaultLarge(context)
735-
.copyWith(
736-
color: inputTextTextModifier.getSuffixPrefixTextColor(state),
737-
),
738-
),
739-
SizedBox(width: textInput.spaceColumnGapInlineText),
740-
],
699+
return ExcludeSemantics(
700+
excluding: (widget.controller?.text ?? "").isEmpty,
701+
child: Row(
702+
mainAxisSize: MainAxisSize.min,
703+
children: [
704+
Text(
705+
prefixToDisplay,
706+
style: theme.typographyTokens
707+
.typeLabelDefaultLarge(context)
708+
.copyWith(
709+
color: inputTextTextModifier.getSuffixPrefixTextColor(state),
710+
),
711+
),
712+
SizedBox(width: textInput.spaceColumnGapInlineText),
713+
],
714+
),
741715
);
742716
}
743717

0 commit comments

Comments
 (0)