Skip to content

Commit 3b17423

Browse files
desmondinhodesmondinho
authored
feat(components): add Alert component (#225)
* feat(alert): add baseline implementation * feat(alert): add styles (may be not complete) * feat(alert): complete styles * feat(button): add full radius styles * feat(alert): apply styles * feat(alert): add close button handler * chore(alert): complete XML docs summaries * chore(docs): adjust background colors for preview and toolbar * chore(components): darken text color for warning flat variant * chore(alert): styling tweaks * feat(docs): add Alert page * chore(alert): add missing close-button slot attribute * chore(alert): ensure TitleContent takes precedence over Title * docs(alert): add callout regarding Title and TitleContent parameters usage * test(alert): add tests
1 parent dbfdcc4 commit 3b17423

32 files changed

+1259
-3
lines changed

‎docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ public class NavigationStore
2323
private static NavigationCategory ComponentsCategory =>
2424
new NavigationCategory( "Components", Icons.Rounded.Joystick )
2525
.Add( new( nameof( LumexAccordion ) ) )
26+
.Add( new( nameof( LumexAlert ), ComponentStatus.New ) )
2627
.Add( new( nameof( LumexAvatar ), ComponentStatus.New ) )
2728
.Add( new( nameof( LumexBadge ), ComponentStatus.New ) )
2829
.Add( new( nameof( LumexButton ) ) )

‎docs/LumexUI.Docs.Client/Components/Preview.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
private readonly Slots _slots = new()
2626
{
2727
Preview = "relative p-4 flex flex-wrap items-center gap-4 overflow-x-auto scrollbar-hide",
28-
PreviewWrapper = "relative p-4 rounded-xl bg-zinc-50 ring ring-foreground-900/10 not-prose",
28+
PreviewWrapper = "relative p-4 rounded-xl ring ring-foreground-900/10 not-prose",
2929
Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
3030
};
3131

‎docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ public partial class PreviewCode
2424

2525
private string ToolbarClass => ElementClass.Empty()
2626
.Add( "p-2" )
27+
.Add( "bg-default-50/50" )
2728
.Add( "border-t" )
2829
.Add( "border-foreground-900/10" )
2930
.Add( "border-b", when: _expanded )

‎docs/LumexUI.Docs.Client/Pages/Components/Alert/Alert.razor‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@page "/docs/components/alert"
2+
@layout DocsContentLayout
3+
4+
@using LumexUI.Docs.Client.Pages.Components.Alert.PreviewCodes
5+
6+
<DocsSection Title="Usage">
7+
<Usage />
8+
9+
<Callout Variant="@CalloutVariant.Info">
10+
When both <Code>Title</Code> and <Code>TitleContent</Code> are provided,
11+
<Code>TitleContent</Code> takes precedence.
12+
</Callout>
13+
14+
<DocsSection Title="Radius">
15+
<p>Use <Code>Radius</Code> parameter to control the border radius of the alert.</p>
16+
<Radii />
17+
</DocsSection>
18+
19+
<DocsSection Title="Colors">
20+
<p>Use <Code>Color</Code> parameter to set the color of the alert.</p>
21+
<Colors />
22+
</DocsSection>
23+
24+
<DocsSection Title="Variants">
25+
<p>Use <Code>Variant</Code> parameter to change the visual style of the alert.</p>
26+
<Variants />
27+
</DocsSection>
28+
29+
<DocsSection Title="Custom Icon">
30+
<p>
31+
By default, the alert displays an appropriate icon based on the <Code>Color</Code> parameter.
32+
Use <Code>Icon</Code> parameter to replace the default icon with a custom one.
33+
</p>
34+
<CustomIcon />
35+
</DocsSection>
36+
37+
<DocsSection Title="Hide Icon">
38+
<p>Use <Code>HideIcon</Code> parameter to hide the icon entirely.</p>
39+
<HideIcon />
40+
</DocsSection>
41+
42+
<DocsSection Title="Closeable">
43+
<p>Use <Code>Closeable</Code> or <Code>OnClose</Code> parameters to add a close button to dismiss the alert.</p>
44+
<Closeable />
45+
</DocsSection>
46+
47+
<DocsSection Title="End Content">
48+
<p>Use <Code>EndContent</Code> parameter to add additional content at the end of the alert, such as actions.</p>
49+
<EndContent />
50+
</DocsSection>
51+
52+
<DocsSection Title="Two-way Data Binding">
53+
<p>
54+
Use <Code>@@bind-Visible</Code> directive or <Code>Visible</Code> and <Code>VisibleChanged</Code>
55+
parameters to manually control alert visibility.
56+
</p>
57+
<TwoWayDataBinding />
58+
</DocsSection>
59+
</DocsSection>
60+
61+
<DocsSection Title="Custom Styles">
62+
<div>
63+
<h4 class="font-semibold">Alert</h4>
64+
<ul>
65+
<li><Code>Class</Code>: The CSS class names to style the alert wrapper.</li>
66+
<li><Code>Classes</Code>: The CSS class names to style the alert slots.</li>
67+
</ul>
68+
</div>
69+
<CustomStyles />
70+
</DocsSection>
71+
72+
<DocsApiSection Components="@_apiComponents" />
73+
74+
@code {
75+
[CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;
76+
77+
private readonly Heading[] _headings = new Heading[]
78+
{
79+
new("Usage", [
80+
new("Radius"),
81+
new("Colors"),
82+
new("Variants"),
83+
new("Custom Icon"),
84+
new("Hide Icon"),
85+
new("Closeable"),
86+
new("End Content"),
87+
new("Two-way Data Binding"),
88+
]),
89+
new("Custom Styles"),
90+
new("API")
91+
};
92+
93+
private readonly Slot[] _slots = new Slot[]
94+
{
95+
new(nameof(AlertSlots.Base), "The base container of the alert component."),
96+
new(nameof(AlertSlots.MainWrapper), "The wrapper for the alert title and description content."),
97+
new(nameof(AlertSlots.Title), "The alert title element."),
98+
new(nameof(AlertSlots.Description), "The alert description element."),
99+
new(nameof(AlertSlots.CloseButton), "The alert close button element."),
100+
new(nameof(AlertSlots.IconWrapper), "The wrapper for the alert icon."),
101+
new(nameof(AlertSlots.Icon), "The alert icon element.")
102+
};
103+
104+
private readonly string[] _apiComponents = new string[]
105+
{
106+
nameof(LumexAlert),
107+
nameof(LumexButton)
108+
};
109+
110+
protected override void OnInitialized()
111+
{
112+
Layout.Initialize(
113+
title: "Alert",
114+
category: "Components",
115+
description: "Alerts display concise feedback about an action or event for the user.",
116+
headings: _headings,
117+
linksProps: new ComponentLinksProps( "Alert", isServer: false )
118+
);
119+
}
120+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Closeable.razor‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@if( _isVisible )
2+
{
3+
<LumexAlert Title="@title"
4+
Description="@description"
5+
Color="@ThemeColor.Success"
6+
Variant="@AlertVariant.Faded"
7+
Visible="@_isVisible"
8+
OnClose="@(() => _isVisible = false)" />
9+
}
10+
else
11+
{
12+
<LumexButton Variant="@Variant.Outlined"
13+
OnClick="@(() => _isVisible = true)">
14+
Show alert
15+
</LumexButton>
16+
}
17+
18+
@code {
19+
private string title = "Success Notification";
20+
private string description = "Your action has been completed successfully. We'll notify you when updates are available.";
21+
22+
private bool _isVisible = true;
23+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Colors.razor‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="w-full flex flex-col gap-3">
2+
@foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
3+
{
4+
var colorText = color.ToString().ToLower();
5+
<LumexAlert Title="@($"This is a `{colorText}` color alert")" Color="@color" />
6+
}
7+
</div>

‎docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/CustomIcon.razor‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<LumexAlert Icon="@Icons.Rounded.Favorite">
2+
An alert with a custom icon
3+
</LumexAlert>

‎docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/CustomStyles.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<LumexAlert Description="The documents you requested are ready to be viewed"
2+
Color="@ThemeColor.Primary"
3+
Variant="@AlertVariant.Flat"
4+
Classes="@_classes">
5+
<div class="flex items-center gap-2 mt-2">
6+
<LumexButton Size="@Size.Small"
7+
Variant="@Variant.Outlined"
8+
Class="bg-background text-foreground-700 border shadow-xs">
9+
View documents
10+
</LumexButton>
11+
12+
<LumexButton Size="@Size.Small"
13+
Variant="@Variant.Light"
14+
Class="text-foreground-600">
15+
Remind me later
16+
</LumexButton>
17+
</div>
18+
</LumexAlert>
19+
20+
@code {
21+
private AlertSlots _classes = new()
22+
{
23+
Base = new ElementClass()
24+
.Add( "relative" )
25+
.Add( "shadow-sm" )
26+
.Add( "bg-default-50" )
27+
.Add( "overflow-hidden" )
28+
.Add( "before:absolute before:z-10 before:left-0 before:inset-y-0 before:w-1 before:bg-primary" )
29+
};
30+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/EndContent.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<LumexAlert Title="You have no credits left"
2+
Description="Upgrade to a paid plan to continue"
3+
Color="@ThemeColor.Warning"
4+
Variant="@AlertVariant.Faded">
5+
<EndContent>
6+
<LumexButton Size="@Size.Small"
7+
Color="@ThemeColor.Warning"
8+
Variant="@Variant.Flat">
9+
Upgrade
10+
</LumexButton>
11+
</EndContent>
12+
</LumexAlert>

‎docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/HideIcon.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<LumexAlert Title="This is an alert"
2+
Description="Thanks for subscribing to our newsletter!"
3+
Color="@ThemeColor.Secondary"
4+
Variant="@AlertVariant.Faded"
5+
HideIcon="@true" />

0 commit comments

Comments
 (0)