feat(components): add Alert component#225
Conversation
WalkthroughThis update introduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LumexAlert
participant ParentComponent
User->>LumexAlert: Interacts (e.g., clicks close)
alt Closeable or OnClose set
LumexAlert->>LumexAlert: Set Visible = false
LumexAlert->>ParentComponent: Invoke OnClose callback
LumexAlert->>ParentComponent: Trigger VisibleChanged event
end
Note over LumexAlert: Rerender with Visible = false (alert hidden)
Suggested labels
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/CustomStyles.razor (1)
3-3: Same@new(...)wrapping issue as flagged inVariants.razorApply the same parentheses fix here.
docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Colors.razor (1)
3-3: Same@new(...)wrapping issue as flagged inVariants.razorApply the same parentheses fix here.
🧹 Nitpick comments (8)
docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Radii.razor (1)
4-4: Consider using a more robust enum-to-string conversion.While
ToString().ToLower()works, consider using a more explicit approach for enum display names if the enum values don't match the desired display format exactly.- var radiusText = radius.ToString().ToLower(); + var radiusText = radius.ToString().ToLowerInvariant();Using
ToLowerInvariant()ensures consistent behavior across different cultures.src/LumexUI/Common/Enums/AlertVariant.cs (1)
7-31: Well-designed enum with good documentation structure.The
AlertVariantenum provides a clear type-safe way to specify alert visual styles. The XML documentation is helpful, though the descriptions could be slightly more specific about the visual differences between variants.Consider enhancing the documentation to be more specific about visual characteristics:
/// <summary> -/// An alert with a flat background. +/// An alert with a flat background and no border. /// </summary> Flat, /// <summary> -/// An alert with a flat background and subtle border. +/// An alert with a flat background and a subtle border for enhanced definition. /// </summary> Fadeddocs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Colors.razor (1)
2-5: Use culture-invariant casing to avoid localisation glitches
ToLower()honours the current UI culture and can mis-case in languages such as Turkish.
ToLowerInvariant()is safer for UI labels.- var colorText = color.ToString().ToLower(); + var colorText = color.ToString().ToLowerInvariant();docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/CustomStyles.razor (1)
21-29: Make the style cache static to avoid reallocation on every render
_classesnever changes; declaring itstatic readonlyprevents a newAlertSlots
instance being created each time the example component re-renders.- private AlertSlots _classes = new() + private static readonly AlertSlots _classes = new()tests/LumexUI.Tests/Components/Alert/AlertTests.razor (1)
55-55: Fix typo in test method name.- public void ShouldNowShowCloseButtonIfNotCloseableOrOnCloseNotPassed() + public void ShouldNotShowCloseButtonIfNotCloseableOrOnCloseNotPassed()src/LumexUI/Components/Alert/AlertSlots.cs (1)
18-22: Consider consistency in property accessors for deprecated Root property.The
Rootproperty only has a getter while all other properties have both getter and setter. If this is intentional to prevent setting the deprecated property, consider adding a comment explaining this design decision.src/LumexUI/Components/Alert/LumexAlert.razor.cs (1)
121-131: Consider using a different icon or no icon forThemeColor.NoneMapping
ThemeColor.Noneto an info icon might be confusing since "None" typically implies absence of styling or content. Consider either not displaying an icon for this case or using a more neutral icon.private readonly Dictionary<ThemeColor, string> _icons = new() { - [ThemeColor.None] = Icons.Rounded.Info, + [ThemeColor.None] = string.Empty, // Or use a neutral icon [ThemeColor.Default] = Icons.Rounded.Info, [ThemeColor.Primary] = Icons.Rounded.Info, [ThemeColor.Secondary] = Icons.Rounded.Info, [ThemeColor.Success] = Icons.Rounded.CheckCircle, [ThemeColor.Warning] = Icons.Rounded.GppMaybe, [ThemeColor.Danger] = Icons.Rounded.Report, [ThemeColor.Info] = Icons.Rounded.Info };src/LumexUI/Styles/Alert.cs (1)
128-545: Consider refactoring repetitive compound variant definitionsThe compound variant definitions contain significant repetition. Each color follows the same pattern across variants, which could be generated programmatically to improve maintainability.
Would you like me to create a helper method that generates these compound variants programmatically? This would reduce the code from ~400 lines to ~50 lines and make it easier to maintain consistency across variants.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (32)
docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs(1 hunks)docs/LumexUI.Docs.Client/Components/Preview.razor(1 hunks)docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Alert.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Closeable.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Colors.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/CustomIcon.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/CustomStyles.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/EndContent.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/HideIcon.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Radii.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/TwoWayDataBinding.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Usage.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Variants.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Closeable.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Colors.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/CustomIcon.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/CustomStyles.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/EndContent.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/HideIcon.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Radii.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/TwoWayDataBinding.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Usage.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Variants.razor(1 hunks)src/LumexUI/Common/Enums/AlertVariant.cs(1 hunks)src/LumexUI/Components/Alert/AlertSlots.cs(1 hunks)src/LumexUI/Components/Alert/LumexAlert.razor(1 hunks)src/LumexUI/Components/Alert/LumexAlert.razor.cs(1 hunks)src/LumexUI/Styles/Alert.cs(1 hunks)src/LumexUI/Styles/Button.cs(1 hunks)src/LumexUI/Styles/ColorVariants.cs(1 hunks)tests/LumexUI.Tests/Components/Alert/AlertTests.razor(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
tests/LumexUI.Tests/Components/Alert/AlertTests.razor (1)
Learnt from: desmondinho
PR: LumexUI/lumexui#159
File: src/LumexUI.Motion/LumexUI.Motion.csproj:9-11
Timestamp: 2025-01-30T00:22:33.596Z
Learning: LumexUI.Motion is planned to be distributed as a separate NuGet package with its own test coverage, hence the assembly-wide coverage exclusion in the project.
🧬 Code Graph Analysis (1)
docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs (2)
src/LumexUI/Components/Alert/LumexAlert.razor.cs (1)
LumexAlert(18-175)src/LumexUI/Utilities/Identifier.cs (1)
New(16-29)
🔇 Additional comments (24)
docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs (1)
27-27: LGTM! Clean styling enhancement.The addition of the
bg-default-50/50background color class improves the visual consistency of preview code toolbars across the documentation, particularly for the new alert component examples.docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs (1)
26-26: LGTM! Proper component registration.The LumexAlert component is correctly added to the navigation with appropriate status marking and maintains alphabetical ordering. The use of
nameof()ensures type safety.docs/LumexUI.Docs.Client/Components/Preview.razor (1)
28-28: LGTM! Background styling refinement.The removal of
bg-zinc-50from the PreviewWrapper class aligns with the broader styling updates for preview components, ensuring consistent visual appearance across the documentation.docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/HideIcon.razor (1)
1-5: LGTM! Well-structured example component.This example clearly demonstrates the
HideIconfeature of the LumexAlert component with appropriate parameter values and correct Blazor syntax. The combination of properties showcases a realistic use case.src/LumexUI/Styles/ColorVariants.cs (1)
38-38: LGTM! Targeted color intensity improvement.The change from
text-warning-700totext-warning-800increases the text darkness for better contrast in the flat variant, which should improve readability for warning alerts while maintaining design consistency.src/LumexUI/Styles/Button.cs (1)
58-59: LGTM! Consistent radius styling extension.The addition of
Radius.Fullsupport withrounded-fullCSS class follows the established pattern and provides complete radius styling options for the button component.docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Usage.razor (1)
1-2: LGTM! Clean and clear basic usage example.This example effectively demonstrates the fundamental usage of the
LumexAlertcomponent with the essentialTitleandDescriptionparameters.docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/CustomIcon.razor (1)
1-3: LGTM! Good demonstration of custom icon usage.This example effectively shows how to use custom icons with the
LumexAlertcomponent and demonstrates the child content approach as an alternative to Title/Description properties.docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Variants.razor (1)
1-7: LGTM! Comprehensive and maintainable variants demonstration.This example effectively showcases all alert variants using
Enum.GetValues<AlertVariant>()for dynamic iteration, ensuring all variants are displayed without manual maintenance. The layout and string interpolation are well-implemented.docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Closeable.razor (1)
1-5: LGTM! Standard preview wrapper implementation.This preview component correctly follows the established documentation pattern with appropriate
InteractiveWebAssemblyrender mode for the closeable alert functionality and properPreviewCodecomponent usage.docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Radii.razor (1)
2-6: LGTM! Clean implementation of radius demonstration.The foreach loop correctly iterates through all Radius enum values and demonstrates each variant effectively. The string interpolation and dynamic property binding are implemented properly.
docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/CustomIcon.razor (1)
1-5: LGTM! Standard preview wrapper implementation.The component correctly implements the preview pattern with appropriate render mode and component references. The structure is consistent with the documentation framework.
docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/EndContent.razor (1)
1-12: LGTM! Excellent demonstration of EndContent slot usage.The example effectively shows how to use the EndContent slot with a contextually appropriate button. The color coordination between alert and button (both using warning theme) provides good visual consistency.
docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Usage.razor (1)
1-5: LGTM! Consistent preview wrapper implementation.The component follows the established pattern correctly and maintains consistency with other preview components in the documentation.
docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/HideIcon.razor (1)
1-5: LGTM! Maintains consistent preview pattern.The component correctly implements the documentation preview pattern and maintains consistency with the other preview components.
docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/EndContent.razor (1)
1-6: LGTM! Clean and consistent preview component structure.The component follows the established pattern for documentation preview components with proper render mode and PreviewCode wrapper implementation.
docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Radii.razor (1)
1-6: LGTM! Maintains consistent preview component pattern.The component structure is identical to other preview components, ensuring consistency across the documentation system.
docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/TwoWayDataBinding.razor (1)
1-6: LGTM! Excellent consistency across preview components.This component maintains the exact same structure as other preview components, demonstrating good architectural consistency in the documentation system.
docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Closeable.razor (1)
1-23: Excellent demonstration of closeable alert functionality.This example effectively showcases key Alert component features:
- Conditional rendering with visibility control
- Proper usage of Alert properties (Title, Description, Color, Variant, Visible, OnClose)
- Interactive toggle behavior with the show/hide button
- Clean two-way binding implementation
The code structure is clear and provides a comprehensive example for documentation users.
docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/TwoWayDataBinding.razor (1)
1-26: LGTM! Clean two-way data binding implementation.The example demonstrates proper usage of
@bind-Visibledirective with theLumexAlertcomponent. The conditional rendering logic, state management, and user interaction flow are all correctly implemented.tests/LumexUI.Tests/Components/Alert/AlertTests.razor (1)
8-91: Excellent test coverage for the Alert component.The test suite comprehensively covers all critical functionality including rendering, content display, close button behavior, event handling, and DOM manipulation. The use of FluentAssertions and proper test structure makes the tests clear and maintainable.
src/LumexUI/Components/Alert/LumexAlert.razor (1)
6-58: HasTitle and HasDescription implementations verifiedI’ve confirmed in
src/LumexUI/Components/Alert/LumexAlert.razor.csthat:
HasTitlechecksTitleContent is not null || !string.IsNullOrEmpty(Title)HasDescriptionchecksDescriptionContent is not null || !string.IsNullOrEmpty(Description)Both properties correctly support conditional rendering of title and description. No further changes needed.
docs/LumexUI.Docs.Client/Pages/Components/Alert/Alert.razor (1)
1-120: Comprehensive and well-structured documentation page.The documentation provides excellent coverage of the Alert component with:
- Clear section organization and navigation
- Helpful callouts for important usage notes
- Complete feature demonstrations through examples
- Proper API references and slot descriptions
- Good integration with the documentation layout system
src/LumexUI/Components/Alert/AlertSlots.cs (1)
11-58: Well-implemented slots class with proper documentation.The
AlertSlotsclass follows good practices with:
- Comprehensive XML documentation
- Proper obsolete attribute usage for deprecated properties
- Appropriate code coverage exclusion
- Clean implementation of the ISlot interface
docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Variants.razor
Show resolved
Hide resolved
* feat: support Tailwind CSS v4 (#183) * build(deps): bump TailwindMerge.NET from 0.3.0 to 1.0.0 * feat: add new CSS theme file * feat/build: add custom targets file to improve library usability * chore: move `Plugin` folder one level higher; remove `Scripts` folder * feat/build: pack new theme and custom `.targets` files * build(docs): add `Directory.Build.props` and `Directory.Build.targets` * chore(docs): remove tailwind npm deps; use standalone CLI instead * docs: apply `static` on theme * refactor(theme-provider): simplify names of box-shadow css variables * refactor(theme-provider): opacities are percentage to match `color-mix` function syntax * chore(components): apply `static` on theme; fix some vars * refactor(components): drop Tailwind CSS v3 support * feat(theme): add custom transition variables * fix(theme): correct `default` color; add `default-foreground` color * chore(theme): add reference for the custom transitions approach (it's not in docs afaik) * fix: rename `shadow-sm` to `shadow-xs` * fix: rename `rounded-sm` to `rounded-xs` * fix: rename `rounded` to `rounded-sm` * fix: rename `outline-none` to `outline-hidden` * fix: rename `ring-1` to `ring` * fix(button): add base `cursor-pointer` class * docs: remove `children` custom variant in favor of `*` * fix(theme): correct `enter` custom animation * chore(components): cleanup styles * fix(theme): add missing comma separator in custom transition vars * docs: configure typography * refactor(theme): simplify `scrollbar-hide` utility * chore(theme): apply `inline` on theme * refactor: replace `theme` function with CSS vars * fix(components): correct scale/translate transitions * feat(theme): update colors from hex to oklch * docs(installation): update installation guide * feat(theme): add leading CSS vars * chore(docs): fix prose `<code>` tag ticks * refactor(utils): remove hex luminance calculator * docs(customization): update Theme and Colors pages * docs(colors): remove 'common colors are not configurable' callout * fix(checkbox): correct radius styles * fix(data-grid): correct striped styles * fix(input/select): correct label placement out transitions * fix(input/select): correct outlined variant focus styles * fix(input): add cursor-pointer style on the clear button * fix(input/select): correct flat variant focus styles * fix(docs): correct some component examples * build(docs): adjust Tailwind standalone CLI file download for Linux * build(docs): adjust Tailwind standalone CLI file download for Linux * ci(deploy): try add staging env in the ci/cd * ci(build-test): change trigger branch * ci(deploy): update trigger branches * ci(deploy): change env vars usage (test) * ci: add deploy-dev.yml; revert deploy.yml * ci(deploy): test staging * chore(docs): nits * chore(components): tweak styles of some components * chore(docs): tweak some components examples * chore: coderabbit comments * ci: remove deploy-dev.yml * fix(theme): remove extra shade (950) from the color scales for consistency in dark mode (#199) * fix(theme): remove extra key (950) from the color scales for consistency in dark mode * build(docs): explicitly set Tailwind v4.0.9 * feat(components): introduce Avatar and AvatarGroup components (#201) * feat: add baseline implementation * feat: add slots * feat: add basic slots styles * feat: add appearance params, such as `Color`, `Radius`, `Size` * feat: add `Bordered` and `Disabled` params * feat: add compound variants styles * feat: apply slots styles * docs: add baseline examples page * feat: add `data-loaded` attribute on img * feat: add `ShowFallback` parameter * chore: fix compound style variants * chore: set `showFallback` on after first render * feat(utils): add implicit cast to string for the `ElementClass` * feat: add LumexAvatarGroup component * feat: take into account when LumexAvatar is rendered inside the LumexAvatarGroup * feat: add `AvatarClasses` parameter in the avatar group component * docs: add Avatar page * build(docs): explicitly set Tailwind v4.0.9 * test: add tests for LumexAvatar and LumexAvatarGroup components * chore: simplify condition for fallback render * fix(docs): replace usages of `-foreground-950` CSS classes with `-foreground-900` * fix(docs): remove `dark:prose-invert` CSS class until dark theme is properly configured * feat(components): introduce Skeleton component (#202) * feat(skeleton): add baseline implementation of the component * feat(skeleton): add slots and styles * feat(skeleton): add XML summaries * fix(skeleton): return back `after` pseudo CSS classes to prevent flickering on state change * docs(skeleton): add Skeleton page * test(skeleton): add tests * docs(skeleton): fix Loading example button text * fix(navbar): add a check before toggling navbar menu on navigation (#204) * feat(components): introduce Spinner component (#207) * feat(spinner): add baseline implementation * feat(spinner): add variants and styles * feat(spinner): add slots * docs(spinner): add Spinner page * docs: nits * test(spinner): add tests * docs: map static assets * build(docs): remove extra MSBuild target for the Tailwind prod build * docs: revert static assets changes * docs: update static assets usage * Revert "docs: update static assets usage" This reverts commit 94ae9ec. * 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 * feat(components): add new Badge component (#222) * feat(badge): initial * feat(badge): add badge slots * feat(badge): add badge baseline implementation * feat(badge): add base visual-related params * feat(badge): add majority of badge styles * feat(badge): add outline around badge * feat(badge): add `Invisible` param to control badge visibility * feat(badge): add `IsOneChar` param to make badge equilateral * feat(badge): decrease badge dimensions if no content provided * refactor(badge): rename `IsOneChar` param to `OneChar` * fix(badge): use correct type for `Variant` param * feat(badge): apply CSS classes directly to the badge slot * fix(badge): ensure correct placement styles * fix(badge): correct `Content` check condition * fix(badge): allow null for content * fix(badge): properly render Content as RenderFragment * docs(badge): add Badge docs page * test(badge): add tests * test(badge): add more tests * fix(badge): ensure `OneChar` param is taken into account * fix(badge): fix one char switch * chore: apply CodeRabbit suggestions * build(deps): bump requests from 2.32.0 to 2.32.4 in /scripts (#219) Bumps [requests](https://github.com/psf/requests) from 2.32.0 to 2.32.4. - [Release notes](https://github.com/psf/requests/releases) - [Changelog](https://github.com/psf/requests/blob/main/HISTORY.md) - [Commits](psf/requests@v2.32.0...v2.32.4) --- updated-dependencies: - dependency-name: requests dependency-version: 2.32.4 dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(components): add Tooltip component (#224) * feat(tooltip): initial * refactor(popover): introduce PopoverWrapper to simplify open state * fix(popover): ensure arrow is positioned correctly * fix(popover): ensure popover closes on trigger click if already opened * fix(popover): position flicker * test(popover/dropdown): adjust tests * refactor(popover): remove LastShown meta from popover service * feat(tooltip): add baseline implementation * feat(tooltip): add common visual-related parameters to pass into popover * feat(tooltip): add OpenDelay and CloseDelay params * docs(tooltip): add Tooltip page * feat(tooltip): pass slots to popover * chore(popover): add full radius styles * test(tooltip): add tests * docs(tooltip): minor tweaks * docs(tooltip): typo * 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 * fix(theme): add tw custom CSS class-based dark mode variant (#226) * refactor(theme): replace C# theme config with a new CSS-first approach (#229) * feat(theme): add light and dark theme CSS files * refactor(components): cleanup theme provider * refactor(theme): remove Theme directory * test(theme): remove Theme directory * docs(theme): remove theme config * fix(alert): correct RenderFragment parameters usage * chore(theme): correct theme variables * docs(customization): replace Customization section with Theming * test(theme-provider): remove all tests * feat(theme): introduce a mechanism to toggle light/dark modes (#230) * feat(theme): introduce Theme service to manage and persist theme settings (JS) * feat(theme): introduce Theme service to manage and persist theme settings * docs(*): rename ComponentStatus enum to PageStatus * docs(theming): add Dark Mode page * chore(docs): component rename * feat(button): add new `IconOnly` parameter * docs(button): add demo for `IconOnly` parameter * refactor(*): remove all bundled Google Material Icons and related code (#232) * build: add new shared icons project * feat(icons): add base icon component * feat(icons): add dynamic icon component * feat(icons): add some icons * build(deps): reference icons in components * refactor(accordion): use new icon components * docs(components): use new icons in Callout components * docs(*): use new icons * refactor(icons): add "Icon" suffix; add more icons * docs(*): use new icons * test(*): fix tests * refactor(components): remove `LumexIcon` component * docs(datagrid): formatting * refactor(icons): remove all Google Material Icons * refactor(icons): remove script for downloading/updating icons * feat(components): add dark mode support (#234) * feat(alert): add dark mode support * feat(button): add dark mode support * feat(chip): add dark mode support * feat(datagrid): add dark mode support * feat(textbox/numbox): add dark mode support * feat(listbox): add dark mode support * feat(menu): add dark mode support * feat(select): add dark mode support * feat(tabs): add dark mode support * fix(theme): ensure default values are of correct shade in dark mode * feat(theme): add `color-scheme` in light theme * fix(icons): use better icons for alert component * docs: add dark mode support + theme toggle (#235) * docs: add dark mode support * docs: add missing border for the preview component * docs: remove extra border in the preview code component * chore(badge): improve flat variant contrast in light theme * chore(tabs): remove `EditorRequired` attribute from `Id` param * docs: add null check and theme class cleanup to prevent issues * docs: remove IPopoverService injection from theme toggle component * chore(components): remove unused / redundant types * fix(data-grid): correct outside click handler creation * feat(popover): enable position autoUpdate * refactor(popover): make use of popover trigger component instead of service * feat(dropdown): introduce dropdown trigger component instead of relying on popover service * docs(dark-mode): update theme toggle dropdown example * docs: add Home page with library usage examples (#241) * feat(icons): add more icons * docs: add showcases on home page * chore(components): adjust some styles * docs(overview): update paths * chore(docs): nits * fix(components): add missing popover js parts * chore(docs): nits * fix(popover): use overlay to close instead of custom outside click event * fix(tooltip): remove pressed effect from on trigger hover * chore(showcases): complete column visibility toggling in UserTable example * chore(showcases): adjust legend color in usage chart * test(popover): update tests * chore(docs): coderabbit suggestions * chore(*): migrate to DigitalOcean app platform * fix(*): update custom LumexUI targets to copy theme files before build * chore(*): add missing css files in the pack * v2.0.0-preview.4 * perf(*): optimize fonts in docs app * fix(docs): stylesheets import ordering * perf(docs): optimize docs CSS output * fix(docs): correct linux tailwind executable file name * chore(*): delete update-icons.yml * perf(docs): enable stream rendering on all pages * fix(docs): ensure initial theme is set * docs(overview): update content * docs(installation): update content * docs(design-tokens): update content * docs(customization): update content * docs(dark-mode): update content * docs(accordion): update content * refactor(docs): replace `Callout` with `LumexAlert` * docs(avatar): update content * docs(components): replace `Code` component usages with HTML tag * fix(docs): ensure ThemeSelector sets correct theme value on init * docs(landing): make adaptive * docs(customization): add dark mode for global theme sample * refactor(components): remove deprecated `Root` slot * refactor(utils): remove redundant; update access modifiers * docs(card): update slot names * refactor(docs): make stream rendering global * docs(header): remove active state from links; update stars counter * ci(*): remove deploy.yml * ci: run build-test on PR to main * v2.0.0 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
1 participant
Description
Closes #174
This PR adds a new Alert component.
What's been done?
Checklist
Additional Notes
Summary by CodeRabbit
New Features
LumexAlertcomponent with customizable content, styling, color themes, variants, radius, icons, and close functionality.LumexAlert, covering usage, customization, styling, and API references.LumexAlertcomponent in the documentation.Style
Bug Fixes
Tests
LumexAlertcomponent.