Skip to content

Commit 612e19b

Browse files
haavamoahaavamoa
authored
Improve SystemMessage styling and dismissal (#902)
1 parent 00d92b4 commit 612e19b

21 files changed

Lines changed: 549 additions & 57 deletions

‎.github/copilot-instructions.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,7 @@ Format: `[Component/Feature] Description` (see existing entries for style)
256256
8. **When reusing an existing component in a new context** (e.g. embedding a component inside a new handler, effect, or renderer), always read the component's existing canonical platform consumer first and replicate **all** of its event subscriptions, lifecycle hooks, and teardown logic. Never assume that rendering the component is sufficient. Components often have additional contracts (update events, binding context propagation, etc.) that only the canonical consumer reveals. Missing these causes silent regressions where the component renders correctly initially but fails to update afterwards.
257257
9. **Don't** put navigation-row accessibility defaults on the generic `ListItem`. `ListItem` is used for many patterns, including rows with switches or other interactive content. Defaults that make a row expose parent button semantics must be scoped to `NavigationListItem` or another navigation-specific component.
258258
10. **NavigationListItem accessibility**: The row itself must be the accessibility element and must have the platform Button trait so screen readers announce `"{Title}, Button"` / `"{Title}, knapp"`. Set the semantic description and button trait on the outer `NavigationListItem`, exclude internal visual children from the accessibility tree, and when the item is hosted in a `CollectionView`, propagate the trait to all relevant native cell/content wrappers because the focused accessibility element may be the cell, the cell content view, or the MAUI platform view.
259+
11. **SystemMessage styles**: When adding Alert-like styling to `SystemMessage`, create dedicated SystemMessage style resources/API based on Alert color tokens. Do not change or refactor existing `AlertStyle`, `AlertStyleResources`, or `AlertTypeStyle` just to support SystemMessage.
259260

260261
## Key Files to Reference
261262
- `API/Builder/AppHostBuilderExtensions.cs` - Library initialization and handler registration

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
## [61.1.0]
2+
- [SystemMessage] Added `SystemMessageStyle` support for Alert-based background, text and border colors, border and shadow, fling-to-dismiss, and screen reader announcement.
3+
14
## [61.0.0]
25
- [BarcodeScanner] **BREAKING**: Removed `BarcodeScannerStartOptions.DuplicateScanCooldown`. Repeated scans of the same barcode are no longer suppressed after the scanner resumes.
36

‎src/app/Components/ComponentsSamples/Alerting/Alerts/AlertSamplesViewModel.cs‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
using DIPS.Mobile.UI.Components.Alerting.Alert;
33
using DIPS.Mobile.UI.Components.Alerting.SystemMessage;
44
using DIPS.Mobile.UI.MVVM;
5-
using DIPS.Mobile.UI.Resources.Colors;
6-
using Colors = DIPS.Mobile.UI.Resources.Colors.Colors;
5+
using DIPS.Mobile.UI.Resources.Styles.SystemMessage;
76

87
namespace Components.ComponentsSamples.Alerting.Alerts;
98

@@ -18,8 +17,7 @@ public AlertSamplesViewModel()
1817
SystemMessageService.Display(config =>
1918
{
2019
config.Text = s;
21-
config.BackgroundColor = Colors.GetColor(ColorName.color_surface_information);
22-
config.TextColor = Colors.GetColor(ColorName.color_text_action);
20+
config.Style = SystemMessageStyle.Information;
2321
});
2422
});
2523

‎src/app/Components/ComponentsSamples/Alerting/SystemMessages/SystemMessageSamples.xaml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
55
xmlns:dui="http://dips.com/mobile.ui"
66
xmlns:localizedStrings="clr-namespace:Components.Resources.LocalizedStrings"
7+
xmlns:systemMessageStyles="clr-namespace:DIPS.Mobile.UI.Resources.Styles.SystemMessage;assembly=DIPS.Mobile.UI"
78
xmlns:systemMessages="clr-namespace:Components.ComponentsSamples.Alerting.SystemMessages"
89
x:Class="Components.ComponentsSamples.Alerting.SystemMessages.SystemMessageSamples"
910
Padding="{dui:Sizes size_5}"
@@ -73,6 +74,18 @@
7374

7475
<dui:NavigationListItem Title="{x:Static localizedStrings:LocalizedStrings.ShowSystemMessage}"
7576
Command="{Binding DisplayCommand}" />
77+
<dui:NavigationListItem Title="{x:Static localizedStrings:LocalizedStrings.Information}"
78+
Command="{Binding DisplayStyleCommand}"
79+
CommandParameter="{x:Static systemMessageStyles:SystemMessageStyle.Information}" />
80+
<dui:NavigationListItem Title="{x:Static localizedStrings:LocalizedStrings.Error}"
81+
Command="{Binding DisplayStyleCommand}"
82+
CommandParameter="{x:Static systemMessageStyles:SystemMessageStyle.Error}" />
83+
<dui:NavigationListItem Title="{x:Static localizedStrings:LocalizedStrings.Warning}"
84+
Command="{Binding DisplayStyleCommand}"
85+
CommandParameter="{x:Static systemMessageStyles:SystemMessageStyle.Warning}" />
86+
<dui:NavigationListItem Title="{x:Static localizedStrings:LocalizedStrings.Success}"
87+
Command="{Binding DisplayStyleCommand}"
88+
CommandParameter="{x:Static systemMessageStyles:SystemMessageStyle.Success}" />
7689
<dui:NavigationListItem Title="{x:Static localizedStrings:LocalizedStrings.RemoveSystemMessage}"
7790
Command="{Binding RemoveCommand}" />
7891
<dui:NavigationListItem Title="{x:Static localizedStrings:LocalizedStrings.RemoveSystemMessageAnimate}"

‎src/app/Components/ComponentsSamples/Alerting/SystemMessages/SystemMessageSamplesViewModel.cs‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
using DIPS.Mobile.UI.MVVM;
44
using DIPS.Mobile.UI.Resources.Colors;
55
using DIPS.Mobile.UI.Resources.Icons;
6+
using DIPS.Mobile.UI.Resources.Styles.SystemMessage;
67
using Colors = DIPS.Mobile.UI.Resources.Colors.Colors;
78
using Enum = System.Enum;
9+
using LocalizedStrings = Components.Resources.LocalizedStrings.LocalizedStrings;
810

911
namespace Components.ComponentsSamples.Alerting.SystemMessages;
1012

@@ -20,6 +22,7 @@ public class SystemMessageSamplesViewModel : ViewModel
2022
public SystemMessageSamplesViewModel()
2123
{
2224
DisplayCommand = new Command(Display);
25+
DisplayStyleCommand = new Command<SystemMessageStyle>(DisplayStyle);
2326
RemoveCommand = new Command(() => Remove(false));
2427
RemoveAnimateCommand = new Command(() => Remove(true));
2528
DisposeCommand = new Command(Dispose);
@@ -70,22 +73,53 @@ private void Remove(bool animate)
7073
}
7174

7275
private void Display()
76+
{
77+
Display(null);
78+
}
79+
80+
private void DisplayStyle(SystemMessageStyle style)
81+
{
82+
Display(style);
83+
}
84+
85+
private void Display(SystemMessageStyle? style)
7386
{
7487
SystemMessageService.Display(config =>
7588
{
7689
config.Duration = ((int)Duration);
7790
if(!string.IsNullOrEmpty(Input))
7891
config.Text = Input;
92+
93+
if (style is not null)
94+
{
95+
config.Style = style.Value;
96+
if (string.IsNullOrEmpty(Input))
97+
config.Text = GetStyleText(style.Value);
98+
}
99+
79100
if(m_selectedIconColor is not null)
80101
config.IconColor = m_selectedIconColor;
81102
if(m_selectedIcon is not null)
82103
config.Icon = m_selectedIcon;
83-
if(m_selectedTextColor is not null)
104+
105+
if(style is null && m_selectedTextColor is not null)
84106
config.TextColor = m_selectedTextColor;
85-
if(m_selectedBackgroundColor is not null)
107+
if(style is null && m_selectedBackgroundColor is not null)
86108
config.BackgroundColor = m_selectedBackgroundColor;
87109
});
88110
}
111+
112+
private static string GetStyleText(SystemMessageStyle style)
113+
{
114+
return style switch
115+
{
116+
SystemMessageStyle.Information => LocalizedStrings.Information,
117+
SystemMessageStyle.Error => LocalizedStrings.Error,
118+
SystemMessageStyle.Warning => LocalizedStrings.Warning,
119+
SystemMessageStyle.Success => LocalizedStrings.Success,
120+
_ => string.Empty
121+
};
122+
}
89123

90124
private void Dispose()
91125
{
@@ -95,6 +129,7 @@ private void Dispose()
95129
public ICommand RemoveAnimateCommand { get; }
96130
public ICommand RemoveCommand { get; }
97131
public ICommand DisplayCommand { get; }
132+
public ICommand DisplayStyleCommand { get; }
98133
public ICommand DisposeCommand { get; }
99134
public ICommand ChangeTextColorCommand { get; }
100135
public ICommand ChangeBackgroundColorCommand { get; }

‎src/app/Components/Resources/LocalizedStrings/LocalizedStrings.Designer.cs‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/Components/Resources/LocalizedStrings/LocalizedStrings.en.resx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,9 +258,18 @@
258258
<data name="Saving" xml:space="preserve">
259259
<value>Saving</value>
260260
</data>
261+
<data name="Information" xml:space="preserve">
262+
<value>Information</value>
263+
</data>
261264
<data name="Error" xml:space="preserve">
262265
<value>Error</value>
263266
</data>
267+
<data name="Warning" xml:space="preserve">
268+
<value>Warning</value>
269+
</data>
270+
<data name="Success" xml:space="preserve">
271+
<value>Success</value>
272+
</data>
264273
<data name="To" xml:space="preserve">
265274
<value>To</value>
266275
</data>

‎src/app/Components/Resources/LocalizedStrings/LocalizedStrings.resx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,9 +263,18 @@
263263
<data name="Saving" xml:space="preserve">
264264
<value>Lagring</value>
265265
</data>
266+
<data name="Information" xml:space="preserve">
267+
<value>Informasjon</value>
268+
</data>
266269
<data name="Error" xml:space="preserve">
267270
<value>Feil</value>
268271
</data>
272+
<data name="Warning" xml:space="preserve">
273+
<value>Advarsel</value>
274+
</data>
275+
<data name="Success" xml:space="preserve">
276+
<value>Suksess</value>
277+
</data>
269278
<data name="To" xml:space="preserve">
270279
<value>Til</value>
271280
</data>

‎src/app/Playground/MainPage.xaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
Tapped="GoToBarcodeScanResumeReproModal" />
3434
<dui:NavigationListItem Title="Sampling Patient Scan Repro (Modal)"
3535
Tapped="GoToSamplingPatientScanRepro" />
36+
<dui:NavigationListItem Title="SystemMessage readonly"
37+
Tapped="GoToSystemMessageReadonlySample" />
3638
<dui:Button Text="Tap me"
3739
Clicked="TapMe" />
3840
</VerticalStackLayout>

‎src/app/Playground/MainPage.xaml.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
using Playground.EirikSamples;
44
using Playground.HåvardSamples;
55
using Playground.SanderSamples;
6+
using Playground.SystemMessageSamples;
67
using Playground.VetleSamples;
78
using Playground.VetleSamples.CollectionViewTests;
89

@@ -121,4 +122,9 @@ private void GoToSamplingPatientScanRepro(object sender, EventArgs e)
121122
var navigationPage = new NavigationPage(scannerPage);
122123
Shell.Current.Navigation.PushModalAsync(navigationPage);
123124
}
125+
126+
private void GoToSystemMessageReadonlySample(object sender, EventArgs e)
127+
{
128+
Shell.Current.Navigation.PushAsync(new SystemMessageReadonlySample());
129+
}
124130
}

0 commit comments

Comments
 (0)