Skip to content

Commit 13cb19f

Browse files
nouha06nouha06
committed
feat(alert-message): fix padding in cose button and add scale for status icon
1 parent c195843 commit 13cb19f

8 files changed

Lines changed: 322 additions & 243 deletions

File tree

‎app/lib/ui/components/alert/alert_customization_utils.dart‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,17 +56,17 @@ class AlertCustomizationUtils {
5656

5757
switch (status) {
5858
case Neutral():
59-
return theme.surfaceInverseHigh;
59+
return theme.contentDefault;
6060
case Accent():
61-
return theme.surfaceStatusAccentEmphasized;
61+
return theme.contentStatusAccent;
6262
case Positive():
63-
return theme.surfaceStatusPositiveEmphasized;
63+
return theme.contentStatusPositive;
6464
case Info():
65-
return theme.surfaceStatusInfoEmphasized;
65+
return theme.contentStatusInfo;
6666
case Warning():
67-
return theme.surfaceStatusWarningEmphasized;
67+
return theme.contentStatusWarning;
6868
case Negative():
69-
return theme.surfaceStatusNegativeEmphasized;
69+
return theme.contentStatusNegative;
7070
}
7171
}
7272

‎app/lib/ui/components/alert/alert_message_demo_screen.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -278,10 +278,10 @@ class _CustomizationContentState extends State<_CustomizationContent> {
278278
fieldType: FieldType.helperLink,
279279
),
280280
CustomizableChips<ActionLinkPositionEnum>(
281-
title: context.l10n.app_components_alert_alertMessage_actionLink_tech,
281+
title: ActionLinkPositionEnum.enumName(context),
282282
options: customizationState.actionLinkPositionState.list,
283283
selectedOption: customizationState.selectedActionLinkPosition,
284-
getText: (option) => option.name.toString(),
284+
getText: (option) => option.stringValue(context),
285285
onSelected: (selectedOption) {
286286
setState(() {
287287
customizationState.selectedActionLinkPosition = selectedOption;

‎app/lib/ui/utilities/global_enum.dart‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,24 @@
88
/// If the input is `LinkEnumSize.defaultSize`, the function will return "default"
99
/// If the input is `ButtonsEnumHierarchy.strong`, the function will return "Strong"
1010
/// If the input is `TagEnumHierarchy.muted`, the function will return "Muted"
11+
/// If the input is `MyEnum.endBottom`, the function will return "End Bottom"
1112
///
1213
String capitalizeEnumValue(Enum enumValue) {
13-
String enumName = enumValue.toString().split('.').last; // Extracts the enum name
14+
String enumName = enumValue
15+
.toString()
16+
.split('.')
17+
.last; // Extracts the enum name
18+
1419
// Check if the enum name contains "default"
1520
if (enumName.contains('default')) {
1621
return 'Default';
1722
}
18-
return enumName[0].toUpperCase() + enumName.substring(1); // Capitalizes the first letter
23+
24+
// Insert a space before any uppercase letter that is not the first character
25+
// and then capitalize the first letter of each word.
26+
String result = enumName.replaceAllMapped(
27+
RegExp(r'(?<=[a-z])(?=[A-Z])'),
28+
(match) => ' ',
29+
);
30+
return result[0].toUpperCase() + result.substring(1);
1931
}

‎ouds_core/lib/components/alert/internal/ouds_alert_status_modifier.dart‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,11 @@ class OudsAlertStatusModifier {
120120
final nonFunctionalIcon = statusModifier.getAssetsName(status);
121121
final functionalIcon = statusModifier.getStatusIcon(status);
122122
final alertTokens = OudsTheme.of(context).componentsTokens(context).alert;
123+
final iconTokens = OudsTheme.of(context).componentsTokens(context).icon;
124+
125+
//zoom in/out icon according to accessibility feature
126+
final textScaler = MediaQuery.textScalerOf(context);
127+
final double scaledSizeIcon = textScaler.scale(alertTokens.sizeIcon);
123128

124129
if (status is Warning) {
125130
return Stack(
@@ -128,25 +133,25 @@ class OudsAlertStatusModifier {
128133
// Background shape
129134
SvgPicture.asset(
130135
excludeFromSemantics: true,
131-
width: alertTokens.sizeIcon,
132-
height: alertTokens.sizeIcon,
136+
width: scaledSizeIcon,
137+
height: scaledSizeIcon,
133138
fit: BoxFit.contain,
134139
AppAssets.icons.componentAlertWarningExternalShape,
135140
colorFilter: ColorFilter.mode(
136-
Color(0xFFFFD000), //todo change it when PR token is merged
141+
iconTokens.colorContentStatusWarningExternalShape,
137142
BlendMode.srcIn, // Blend mode to apply the tint
138143
),
139144
package: OudsTheme.of(context).packageName,
140145
),
141146
// Foreground shape
142147
SvgPicture.asset(
143148
excludeFromSemantics: true,
144-
width: alertTokens.sizeIcon,
145-
height: alertTokens.sizeIcon,
149+
width: scaledSizeIcon,
150+
height: scaledSizeIcon,
146151
fit: BoxFit.contain,
147152
AppAssets.icons.componentAlertWarningInternalShape,
148153
colorFilter: ColorFilter.mode(
149-
Color(0xFF856A00), //todo change it when PR token is merged
154+
iconTokens.colorContentStatusWarningInternalShape,
150155
BlendMode.srcIn, // Blend mode to apply the tint
151156
),
152157
package: OudsTheme.of(context).packageName,
@@ -161,8 +166,8 @@ class OudsAlertStatusModifier {
161166
package: functionalIcon != null
162167
? OudsTheme.of(context).packageName
163168
: null,
164-
width: alertTokens.sizeIcon,
165-
height: alertTokens.sizeIcon,
169+
width: scaledSizeIcon,
170+
height: scaledSizeIcon,
166171
fit: BoxFit.contain,
167172
colorFilter: ColorFilter.mode(
168173
statusModifier.getStatusIconColor(status),

‎ouds_core/lib/components/alert/ouds_alert_message.dart‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -202,12 +202,13 @@ class _OudsAlertMessageState extends State<OudsAlertMessage> {
202202
?.where((bullet) => bullet.isNotEmpty)
203203
.map((bullet) => buildBulletList(context, widget.status, bullet)),
204204
// Optional action link positioned at the bottom.
205-
if (widget.actionLink != null &&
205+
if (actionLink != null &&
206+
widget.actionLink != null &&
206207
widget.actionLink!.text.isNotEmpty &&
207208
widget.actionLink!.position ==
208209
OudsAlertMessageActionLinkPosition.bottom) ...[
209210
SizedBox(height: alertTokens.spaceRowGapAction),
210-
?actionLink,
211+
actionLink,
211212
],
212213
],
213214
),
@@ -246,8 +247,12 @@ class _OudsAlertMessageState extends State<OudsAlertMessage> {
246247
child: SvgPicture.asset(
247248
excludeFromSemantics: true,
248249
hasIcon,
249-
width: alertTokens.sizeIcon,
250-
height: alertTokens.sizeIcon,
250+
width: MediaQuery.textScalerOf(
251+
context,
252+
).scale(alertTokens.sizeIcon),
253+
height: MediaQuery.textScalerOf(
254+
context,
255+
).scale(alertTokens.sizeIcon),
251256
fit: BoxFit.contain,
252257
colorFilter: ColorFilter.mode(
253258
alertMessageStatusModifier.getStatusIconColor(widget.status),
@@ -285,13 +290,11 @@ class _OudsAlertMessageState extends State<OudsAlertMessage> {
285290
widget.actionLink!.text.isNotEmpty &&
286291
widget.actionLink!.position ==
287292
OudsAlertMessageActionLinkPosition.topEnd) ...[
288-
Padding(
289-
padding: EdgeInsetsDirectional.only(
290-
end: closeButton != null
291-
? alertTokens.spaceColumnGap
292-
: alertTokens.spacePaddingInline,
293-
),
294-
child: actionLink,
293+
?actionLink,
294+
SizedBox(
295+
width: closeButton != null
296+
? alertTokens.spaceColumnGapAction
297+
: alertTokens.spacePaddingInline,
295298
),
296299
],
297300
// Optional close button.
@@ -340,7 +343,7 @@ class _OudsAlertMessageState extends State<OudsAlertMessage> {
340343
) {
341344
final theme = OudsTheme.of(context);
342345
final alertMessageStatusModifier = OudsAlertStatusModifier(context);
343-
final maxTextWidth = theme.sizeScheme(context).maxWidthTypeBodyMedium;
346+
final maxTextWidth = theme.sizeScheme(context).maxWidthTypeLabelMedium;
344347
final textScaler = MediaQuery.textScalerOf(context);
345348
final double iconContainerWidth = textScaler.scale(
346349
theme.sizeScheme(context).iconWithLabelMediumSizeMedium,
@@ -359,7 +362,7 @@ class _OudsAlertMessageState extends State<OudsAlertMessage> {
359362

360363
return IntrinsicHeight(
361364
child: Row(
362-
crossAxisAlignment: CrossAxisAlignment.center,
365+
crossAxisAlignment: CrossAxisAlignment.start,
363366
children: [
364367
SizedBox(
365368
width: iconContainerWidth,
@@ -380,7 +383,12 @@ class _OudsAlertMessageState extends State<OudsAlertMessage> {
380383
),
381384
),
382385
),
383-
SizedBox(width: 8), //TODO: Use bullet list tokens when available
386+
SizedBox(
387+
width: theme
388+
.componentsTokens(context)
389+
.bulletList
390+
.spaceColumnGapBodyMedium,
391+
),
384392
Flexible(
385393
child: ConstrainedBox(
386394
constraints: BoxConstraints(maxWidth: maxTextWidth),

0 commit comments

Comments
 (0)