Skip to content

Commit a835655

Browse files
AhmedAmineZrAhmedAmineZr
authored
feat(checkbox-item,radio-button-item,switch-item,text-input,pincode-input,phonenumber-input,password-input): add a constrained max width parameter to these components (#533)(#538)
* feat: Add constrainedMaxWidth parameter to control items and text input components feat:(checkbox-item,radio-button-item,switch-item,text-input): add a constrained max width parameter to these components * feat: Add constrainedMaxWidth Pin Code input * feat: replace center by container * chore: update changelog * chore: update position of property `constrained max width` * chore : add row to components non centred
1 parent 6774aa5 commit a835655

37 files changed

+545
-291
lines changed

‎app/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111
- [Tool] Add `ITSAppUsesNonExemptEncryption` into info.plist ([#526](https://github.com/Orange-OpenSource/ouds-flutter/issues/526))
1212

1313
### Changed
14+
- [DemoApp][Library] Update `Control Items` and `Inputs` API to allow max-width management ([#533](https://github.com/Orange-OpenSource/ouds-flutter/issues/533))
1415
- [Library] Update DSM links ([#528](https://github.com/Orange-OpenSource/ouds-flutter/issues/528))
1516
- [DemoApp][Library] Use OUDS Icons V1.4 ([#515](https://github.com/Orange-OpenSource/ouds-flutter/issues/515))
1617
- [Library] Update homepage documentation ([#135](https://github.com/Orange-OpenSource/ouds-flutter/issues/135))

‎app/lib/l10n/gen/ouds_flutter_app_localizations.dart‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -503,6 +503,12 @@ abstract class AppLocalizations {
503503
/// **'Clear value'**
504504
String get app_components_common_textInputClearIcon_a11y;
505505

506+
/// No description provided for @app_components_common_constrainedMaxWidth_label.
507+
///
508+
/// In en, this message translates to:
509+
/// **'Constrained max width'**
510+
String get app_components_common_constrainedMaxWidth_label;
511+
506512
/// No description provided for @app_components_button_label.
507513
///
508514
/// In en, this message translates to:

‎app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,10 @@ class AppLocalizationsAr extends AppLocalizations {
219219
@override
220220
String get app_components_common_textInputClearIcon_a11y => 'مسح المدخلات';
221221

222+
@override
223+
String get app_components_common_constrainedMaxWidth_label =>
224+
'Constrained max width';
225+
222226
@override
223227
String get app_components_button_label => 'Button';
224228

‎app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,10 @@ class AppLocalizationsEn extends AppLocalizations {
219219
@override
220220
String get app_components_common_textInputClearIcon_a11y => 'Clear value';
221221

222+
@override
223+
String get app_components_common_constrainedMaxWidth_label =>
224+
'Constrained max width';
225+
222226
@override
223227
String get app_components_button_label => 'Button';
224228

‎app/lib/l10n/ouds_flutter_en.arb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
"app_components_common_appearance_label": "Appearance",
114114
"app_components_common_version": "Reference design version:",
115115
"app_components_common_textInputClearIcon_a11y": "Clear value",
116+
"app_components_common_constrainedMaxWidth_label": "Constrained max width",
116117

117118
"@_components_button": {},
118119
"app_components_button_label": "Button",

‎app/lib/ui/components/button/button_demo_screen.dart‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ class _ButtonDemoState extends State<_ButtonDemo> {
139139
color: customizationState?.hasOnColoredBox == true ? OudsColoredBoxColor.brandPrimary : OudsColoredBoxColor.statusNeutralMuted,
140140
child: OudsButton(
141141
label: ButtonCustomizationUtils.getText(customizationState),
142-
icon: ButtonCustomizationUtils.getIcon(customizationState,themeController!),
142+
icon: ButtonCustomizationUtils.getIcon(customizationState, themeController!),
143143
appearance: ButtonCustomizationUtils.getAppearance(customizationState?.selectedAppearance as Object),
144144
loader: ButtonCustomizationUtils.getLoader(customizationState),
145145
onPressed: customizationState?.hasEnabled == true ? () {} : null,
@@ -152,23 +152,33 @@ class _ButtonDemoState extends State<_ButtonDemo> {
152152
ThemeBox(
153153
themeContract: themeController!.currentTheme,
154154
themeMode: themeController!.isInverseDarkTheme ? ThemeMode.light : ThemeMode.dark,
155-
child: OudsButton(
156-
label: ButtonCustomizationUtils.getText(customizationState),
157-
icon: ButtonCustomizationUtils.getIcon(customizationState,themeController!),
158-
appearance: ButtonCustomizationUtils.getAppearance(customizationState?.selectedAppearance as Object),
159-
loader: ButtonCustomizationUtils.getLoader(customizationState),
160-
onPressed: customizationState?.hasEnabled == true ? () {} : null,
155+
child: Row(
156+
mainAxisAlignment: MainAxisAlignment.center,
157+
children: [
158+
OudsButton(
159+
label: ButtonCustomizationUtils.getText(customizationState),
160+
icon: ButtonCustomizationUtils.getIcon(customizationState, themeController!),
161+
appearance: ButtonCustomizationUtils.getAppearance(customizationState?.selectedAppearance as Object),
162+
loader: ButtonCustomizationUtils.getLoader(customizationState),
163+
onPressed: customizationState?.hasEnabled == true ? () {} : null,
164+
),
165+
],
161166
),
162167
),
163168
ThemeBox(
164169
themeContract: themeController!.currentTheme,
165170
themeMode: themeController!.isInverseDarkTheme ? ThemeMode.dark : ThemeMode.light,
166-
child: OudsButton(
167-
label: ButtonCustomizationUtils.getText(customizationState),
168-
icon: ButtonCustomizationUtils.getIcon(customizationState,themeController!),
169-
appearance: ButtonCustomizationUtils.getAppearance(customizationState?.selectedAppearance as Object),
170-
loader: ButtonCustomizationUtils.getLoader(customizationState),
171-
onPressed: customizationState?.hasEnabled == true ? () {} : null,
171+
child: Row(
172+
mainAxisAlignment: MainAxisAlignment.center,
173+
children: [
174+
OudsButton(
175+
label: ButtonCustomizationUtils.getText(customizationState),
176+
icon: ButtonCustomizationUtils.getIcon(customizationState, themeController!),
177+
appearance: ButtonCustomizationUtils.getAppearance(customizationState?.selectedAppearance as Object),
178+
loader: ButtonCustomizationUtils.getLoader(customizationState),
179+
onPressed: customizationState?.hasEnabled == true ? () {} : null,
180+
),
181+
],
172182
),
173183
)
174184
],

‎app/lib/ui/components/checkbox/checkbox_item_demo_screen.dart‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,7 @@ class _CheckboxItemDemoState extends State<_CheckboxItemDemo> {
198198
isError: customizationState!.hasError ? true : false,
199199
errorText: ControlItemCustomizationUtils.getErrorMessageLabelText(customizationState!),
200200
divider: customizationState!.hasDivider ? true : false,
201+
constrainedMaxWidth: customizationState!.hasConstrainedMaxWidth ? true : false,
201202
tristate: widget.indeterminate,
202203
),
203204
],
@@ -228,6 +229,7 @@ class _CheckboxItemDemoState extends State<_CheckboxItemDemo> {
228229
isError: customizationState!.hasError ? true : false,
229230
errorText: ControlItemCustomizationUtils.getErrorMessageLabelText(customizationState!),
230231
divider: customizationState!.hasDivider ? true : false,
232+
constrainedMaxWidth: customizationState!.hasConstrainedMaxWidth ? true : false,
231233
tristate: widget.indeterminate,
232234
),
233235
],
@@ -355,6 +357,15 @@ class _CustomizationContentState extends State<_CustomizationContent> {
355357
focusNode: errorMessageFocus,
356358
fieldType: FieldType.error,
357359
),
360+
CustomizableSwitch(
361+
title: context.l10n.app_components_common_constrainedMaxWidth_label,
362+
value: customizationState.hasConstrainedMaxWidth,
363+
onChanged: (value) {
364+
setState(() {
365+
customizationState.hasConstrainedMaxWidth = value;
366+
});
367+
},
368+
),
358369
],
359370
);
360371
}

‎app/lib/ui/components/chip/chip_filter_demo_sreen.dart‎

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -134,36 +134,46 @@ class _ChipFilterDemoState extends State<_ChipFilterDemo> {
134134
ThemeBox(
135135
themeContract: themeController!.currentTheme,
136136
themeMode: themeController!.isInverseDarkTheme ? ThemeMode.light : ThemeMode.dark,
137-
child: OudsFilterChip(
138-
label: ChipCustomizationUtils.getText(customizationState),
139-
avatar: ChipCustomizationUtils.getIcon(customizationState, themeController!),
140-
selected: customizationState?.hasSelected,
141-
onSelected: customizationState?.hasEnabled == true
142-
? (newValue) {
143-
setState(
144-
() {
145-
customizationState?.hasSelected = newValue;
146-
},
147-
);
148-
}
149-
: null),
137+
child: Row(
138+
mainAxisAlignment: MainAxisAlignment.center,
139+
children: [
140+
OudsFilterChip(
141+
label: ChipCustomizationUtils.getText(customizationState),
142+
avatar: ChipCustomizationUtils.getIcon(customizationState, themeController!),
143+
selected: customizationState?.hasSelected,
144+
onSelected: customizationState?.hasEnabled == true
145+
? (newValue) {
146+
setState(
147+
() {
148+
customizationState?.hasSelected = newValue;
149+
},
150+
);
151+
}
152+
: null),
153+
],
154+
),
150155
),
151156
ThemeBox(
152157
themeContract: themeController!.currentTheme,
153158
themeMode: themeController!.isInverseDarkTheme ? ThemeMode.dark : ThemeMode.light,
154-
child: OudsFilterChip(
155-
label: ChipCustomizationUtils.getText(customizationState),
156-
avatar: ChipCustomizationUtils.getIcon(customizationState, themeController!),
157-
selected: customizationState?.hasSelected,
158-
onSelected: customizationState?.hasEnabled == true
159-
? (newValue) {
160-
setState(
161-
() {
162-
customizationState?.hasSelected = newValue;
163-
},
164-
);
165-
}
166-
: null),
159+
child: Row(
160+
mainAxisAlignment: MainAxisAlignment.center,
161+
children: [
162+
OudsFilterChip(
163+
label: ChipCustomizationUtils.getText(customizationState),
164+
avatar: ChipCustomizationUtils.getIcon(customizationState, themeController!),
165+
selected: customizationState?.hasSelected,
166+
onSelected: customizationState?.hasEnabled == true
167+
? (newValue) {
168+
setState(
169+
() {
170+
customizationState?.hasSelected = newValue;
171+
},
172+
);
173+
}
174+
: null),
175+
],
176+
),
167177
),
168178
],
169179
);

‎app/lib/ui/components/chip/chip_suggestion_demo_screen.dart‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -134,19 +134,29 @@ class _ChipSuggestionDemoState extends State<_ChipSuggestionDemo> {
134134
ThemeBox(
135135
themeContract: themeController!.currentTheme,
136136
themeMode: themeController!.isInverseDarkTheme ? ThemeMode.light : ThemeMode.dark,
137-
child: OudsSuggestionChip(
138-
label: ChipCustomizationUtils.getText(customizationState),
139-
avatar: ChipCustomizationUtils.getIcon(customizationState, themeController!),
140-
onPressed: customizationState?.hasEnabled == true ? () {} : null,
137+
child: Row(
138+
mainAxisAlignment: MainAxisAlignment.center,
139+
children: [
140+
OudsSuggestionChip(
141+
label: ChipCustomizationUtils.getText(customizationState),
142+
avatar: ChipCustomizationUtils.getIcon(customizationState, themeController!),
143+
onPressed: customizationState?.hasEnabled == true ? () {} : null,
144+
),
145+
],
141146
),
142147
),
143148
ThemeBox(
144149
themeContract: themeController!.currentTheme,
145150
themeMode: themeController!.isInverseDarkTheme ? ThemeMode.dark : ThemeMode.light,
146-
child: OudsSuggestionChip(
147-
label: ChipCustomizationUtils.getText(customizationState),
148-
avatar: ChipCustomizationUtils.getIcon(customizationState, themeController!),
149-
onPressed: customizationState?.hasEnabled == true ? () {} : null,
151+
child: Row(
152+
mainAxisAlignment: MainAxisAlignment.center,
153+
children: [
154+
OudsSuggestionChip(
155+
label: ChipCustomizationUtils.getText(customizationState),
156+
avatar: ChipCustomizationUtils.getIcon(customizationState, themeController!),
157+
onPressed: customizationState?.hasEnabled == true ? () {} : null,
158+
),
159+
],
150160
),
151161
),
152162
],

‎app/lib/ui/components/control_item/control_item_code_generator.dart‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ class ControlItemCodeGenerator {
3636
'tristateCode',
3737
'groupValueCode',
3838
'disableCode',
39-
'disableCodeRadio'
39+
'disableCodeRadio',
40+
'constrainedMaxWidthCode'
4041
];
4142

4243
// Method to set the inclusion list
@@ -76,7 +77,7 @@ ${_includedElements.contains('readOnlyCode') ? readOnlyCode(context) : ''}
7677
${_includedElements.contains('iconCode') ? iconCode(context) : ''}
7778
${_includedElements.contains('errorCode') ? errorCode(context) : ''}
7879
${_includedElements.contains('errorMessageCode') ? errorMessageCode(context) : ''}
79-
${_includedElements.contains('dividerCode') ? dividerCode(context) : ''}${_includedElements.contains('outlinedCode') ? outlinedCode(context) : ''}${tristateCode(context, indeterminate)}
80+
${_includedElements.contains('dividerCode') ? dividerCode(context) : ''}${_includedElements.contains('outlinedCode') ? outlinedCode(context) : ''}${tristateCode(context, indeterminate)}${_includedElements.contains('constrainedMaxWidthCode') ? constrainedMaxWidthCode(context) : ''}
8081
);""";
8182

8283
return code;
@@ -168,6 +169,12 @@ ${_includedElements.contains('dividerCode') ? dividerCode(context) : ''}${_inclu
168169
return "divider: ${customizationState?.hasDivider},";
169170
}
170171

172+
// Method to generate the Constrained Max Width code for the control item
173+
static String constrainedMaxWidthCode(BuildContext context) {
174+
final customizationState = ControlItemCustomization.of(context);
175+
return "\nconstrainedMaxWidth: ${customizationState?.hasConstrainedMaxWidth},";
176+
}
177+
171178
// Method to generate the outlined code for the control item
172179
static String outlinedCode(BuildContext context) {
173180
final customizationState = ControlItemCustomization.of(context);

0 commit comments

Comments
 (0)