Skip to content

Commit de7c8c3

Browse files
desmondinhodesmondinho
authored
feat(components): introduce Chip component (#211)
* feat(chip): add baseline implementation * feat(chip): add ChipVariant enum * feat(chip): add appearance parameters and styles * feat(chip): add AvatarContent parameter * feat(chip): adjust paddings when chip has start/end content * docs(chip): add Chip page * feat(chip): add XML summaries * test(chip): add tests * chore(components): add missing XML documentation summaries
1 parent 2d2cbd8 commit de7c8c3

33 files changed

+1340
-2
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ public class NavigationStore
2828
.Add( new( nameof( LumexCard ) ) )
2929
.Add( new( nameof( LumexCheckbox ) ) )
3030
.Add( new( nameof( LumexCheckboxGroup ) ) )
31+
.Add( new( nameof( LumexChip ), ComponentStatus.New ) )
3132
.Add( new( nameof( LumexCollapse ) ) )
3233
.Add( new( nameof( LumexDataGrid<T> ) ) )
3334
.Add( new( nameof( LumexDivider ) ) )
@@ -60,6 +61,7 @@ public class NavigationStore
6061
.Add( new( nameof( LumexCardHeader ) ) )
6162
.Add( new( nameof( LumexCheckbox ) ) )
6263
.Add( new( nameof( LumexCheckboxGroup ) ) )
64+
.Add( new( nameof( LumexChip ) ) )
6365
.Add( new( nameof( LumexCollapse ) ) )
6466
.Add( new( nameof( LumexComponent ) ) )
6567
//.Add( nameof( LumexComponentBase ) )

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424

2525
private readonly Slots _slots = new()
2626
{
27-
Preview = "relative flex flex-wrap items-center gap-4 overflow-x-auto scrollbar-hide",
28-
PreviewWrapper = "relative p-8 rounded-xl bg-zinc-50 ring ring-foreground-900/10 not-prose",
27+
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",
2929
Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
3030
};
3131

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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
@page "/docs/components/chip"
2+
@layout DocsContentLayout
3+
4+
@using LumexUI.Docs.Client.Pages.Components.Chip.PreviewCodes
5+
6+
<DocsSection Title="Usage">
7+
<p>
8+
The chip component represents small, interactive elements
9+
used to display information, tags, or actions.
10+
</p>
11+
<Usage />
12+
13+
<DocsSection Title="Disabled">
14+
<p>
15+
Disable a chip to prevent user interaction,
16+
making it non-clickable and visually muted.
17+
</p>
18+
<Disabled />
19+
</DocsSection>
20+
21+
<DocsSection Title="Sizes">
22+
<p>Adjust the size for small to large chips.</p>
23+
<Sizes />
24+
</DocsSection>
25+
26+
<DocsSection Title="Radius">
27+
<p>Control the border radius for rounded or squared chips.</p>
28+
<Radii />
29+
</DocsSection>
30+
31+
<DocsSection Title="Colors">
32+
<p>Customize the chip’s theme color.</p>
33+
<Colors />
34+
</DocsSection>
35+
36+
<DocsSection Title="Variants">
37+
<p>Choose between different visual styles such as solid, bordered, or flat.</p>
38+
<Variants />
39+
</DocsSection>
40+
41+
<DocsSection Title="Start & End Content">
42+
<p>Add icons or elements to the beginning or end of a chip.</p>
43+
<StartEndContent />
44+
</DocsSection>
45+
46+
<DocsSection Title="Avatar">
47+
<p>Embed an avatar in the chip to visually represent users or entities.</p>
48+
<Avatar />
49+
</DocsSection>
50+
51+
<DocsSection Title="Close Button">
52+
<p>Add a close button to allow the user to dismiss the chip.</p>
53+
<p>
54+
If you pass the <Code>OnClose</Code> parameter, the close button will be visible.
55+
You can override the close icon by passing the <Code>EndContent</Code> parameter.
56+
</p>
57+
<CloseButton />
58+
</DocsSection>
59+
60+
<DocsSection Title="List of Chips">
61+
<p>Display multiple chips as a group for tag-like or multi-value selection UI.</p>
62+
<ListOfChips />
63+
</DocsSection>
64+
</DocsSection>
65+
66+
<DocsSlotsSection Slots="@_slots">
67+
<div>
68+
<h4 class="font-semibold">Chip</h4>
69+
<ul>
70+
<li><Code>Class</Code>: The CSS class names to style the wrapper.</li>
71+
<li><Code>Classes</Code>: The CSS class names to style the slots.</li>
72+
</ul>
73+
</div>
74+
<CustomStyles />
75+
</DocsSlotsSection>
76+
77+
<DocsApiSection Components="@_apiComponents" />
78+
79+
@code {
80+
[CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;
81+
82+
private readonly Heading[] _headings = new Heading[]
83+
{
84+
new("Composition"),
85+
new("Usage", [
86+
new("Disabled"),
87+
new("Sizes"),
88+
new("Radius"),
89+
new("Colors"),
90+
new("Variants"),
91+
new("Start & End Content"),
92+
new("Avatar"),
93+
new("Close Button"),
94+
new("List of Chips")
95+
]),
96+
new("Custom Styles"),
97+
new("API")
98+
};
99+
100+
private readonly Slot[] _slots = new Slot[]
101+
{
102+
new(nameof(ChipSlots.Base), "The main container for the chip component."),
103+
new(nameof(ChipSlots.Content), "The inner wrapper of the chip. It is visible when the variant is `Dot`."),
104+
new(nameof(ChipSlots.Dot), "The small dot on the left side of the chip."),
105+
new(nameof(ChipSlots.CloseButton), "The button that dismisses the chip."),
106+
};
107+
108+
private readonly string[] _apiComponents = new string[]
109+
{
110+
nameof(LumexChip),
111+
nameof(LumexIcon)
112+
};
113+
114+
protected override void OnInitialized()
115+
{
116+
Layout.Initialize(
117+
title: "Chip",
118+
category: "Components",
119+
description: "Chips are used to display information, tags, or actions in a concise form.",
120+
headings: _headings,
121+
linksProps: new ComponentLinksProps( "Chip", isServer: false )
122+
);
123+
}
124+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/Avatar.razor‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="flex gap-4">
2+
<LumexChip Variant="@ChipVariant.Flat">
3+
<AvatarContent>
4+
<LumexAvatar Src="https://i.pravatar.cc/150?img=2" Name="Daniel" />
5+
</AvatarContent>
6+
<ChildContent>
7+
Avatar
8+
</ChildContent>
9+
</LumexChip>
10+
11+
<LumexChip Variant="@ChipVariant.Flat">
12+
<AvatarContent>
13+
<LumexAvatar Name="Daniel" Initials="@((name) => name[0].ToString())" />
14+
</AvatarContent>
15+
<ChildContent>
16+
Avatar
17+
</ChildContent>
18+
</LumexChip>
19+
</div>

‎docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CloseButton.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="flex gap-4">
2+
<LumexChip OnClose="@OnClose">Chip</LumexChip>
3+
</div>
4+
5+
@code {
6+
private void OnClose( MouseEventArgs args )
7+
{
8+
// ...
9+
}
10+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="flex items-center gap-4">
2+
<LumexChip Color="@ThemeColor.Default">Default</LumexChip>
3+
<LumexChip Color="@ThemeColor.Primary">Primary</LumexChip>
4+
<LumexChip Color="@ThemeColor.Secondary">Secondary</LumexChip>
5+
<LumexChip Color="@ThemeColor.Success">Success</LumexChip>
6+
<LumexChip Color="@ThemeColor.Warning">Warning</LumexChip>
7+
<LumexChip Color="@ThemeColor.Danger">Danger</LumexChip>
8+
<LumexChip Color="@ThemeColor.Info">Info</LumexChip>
9+
</div>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<LumexChip Variant="@ChipVariant.Shadow"
2+
Classes="@_classes">
3+
New
4+
</LumexChip>
5+
6+
@code {
7+
private ChipSlots _classes = new()
8+
{
9+
Base = "bg-radial-[at_50%_0%] from-sky-200 via-blue-400 to-indigo-900 to-90% border border-sky-100 shadow-sky-200",
10+
Content = "drop-shadow text-white"
11+
};
12+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/Disabled.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<LumexChip Disabled="@true">Chip</LumexChip>

‎docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/ListOfChips.razor‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div class="flex items-center gap-4">
2+
@foreach( var fruit in _fruits )
3+
{
4+
<LumexChip Variant="@ChipVariant.Flat"
5+
OnClose="@((args) => OnClose(args, fruit))">
6+
@fruit
7+
</LumexChip>
8+
}
9+
</div>
10+
11+
@code {
12+
private string[] _data = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"];
13+
private List<string> _fruits;
14+
15+
public ListOfChips()
16+
{
17+
_fruits = [.. _data];
18+
}
19+
20+
private void OnClose( MouseEventArgs args, string fruit )
21+
{
22+
_fruits.RemoveAll( f => f == fruit );
23+
24+
if( _fruits.Count < 1 )
25+
{
26+
_fruits = [.. _data];
27+
}
28+
}
29+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/Radii.razor‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="flex items-center gap-4">
2+
<LumexChip Radius="@Radius.None">None</LumexChip>
3+
<LumexChip Radius="@Radius.Small">Small</LumexChip>
4+
<LumexChip Radius="@Radius.Medium">Medium</LumexChip>
5+
<LumexChip Radius="@Radius.Large">Large</LumexChip>
6+
<LumexChip Radius="@Radius.Full">Full</LumexChip>
7+
</div>

0 commit comments

Comments
 (0)