feat(components): introduce Skeleton component#202
Conversation
…kering on state change
desmondinho
added
📦 Scope: Components
WalkthroughThis pull request updates the Lumex UI framework by adding new UI components and documentation examples. The navigation store now includes two new components: one for the skeleton loader and one for an avatar group. Several new Razor components introduce interactive examples for skeleton loading states, along with associated documentation pages and preview codes. A new LumexSkeleton component is implemented with corresponding styling and slot management, and tests have been added to verify its correct rendering. Additionally, new CSS animations are defined to support a shimmering effect. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant LC as Loading Component
participant UI as UI Renderer
User->>LC: Clicks "Toggle Skeleton" button
LC->>LC: Toggles _loading state
LC->>UI: Re-renders skeleton placeholders based on _loading
UI-->>User: Displays updated loading state
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ 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:
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: 0
🧹 Nitpick comments (10)
tests/LumexUI.Tests/Components/Skeleton/SkeletonTests.razor (1)
4-19: Consider expanding test coverage for the Skeleton component.The basic rendering test is a good start, but consider adding more test cases to verify:
- Different parameter configurations (e.g., different Classes values)
- Loading state behavior
- ChildContent rendering
- Slot content rendering if applicable
This would provide more comprehensive test coverage for the component.
src/LumexUI/Styles/_theme.css (1)
184-188: Consider using transform instead of translate for better browser compatibility.While the
translateproperty works in modern browsers, usingtransform: translateX(100%)would provide better compatibility with slightly older browsers.@keyframes shimmer { 100% { - translate: 100%; + transform: translateX(100%); } }src/LumexUI/Components/Skeleton/LumexSkeleton.razor (1)
4-4: Consider adding XML documentation to explain component usage.Since this is a new component, adding XML documentation would help other developers understand how to use it properly.
@namespace LumexUI @inherits LumexComponentBase +@* + * LumexSkeleton provides a loading placeholder for content. + * It can wrap child content and display a loading state when the Loading parameter is true. + *@ @using S = SkeletonSlots;docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Examples/Usage.razor (2)
1-1: Consider using relative units for better responsiveness.The fixed width of
w-[200px]might not be ideal for all screen sizes. Consider using relative units or responsive class names.-<LumexCard class="w-[200px] space-y-5 p-4" radius="@Radius.Large"> +<LumexCard class="w-full max-w-[200px] space-y-5 p-4" radius="@Radius.Large">
1-16: Missing example for toggling the loading state.The example could be improved by demonstrating how to toggle the loading state of the LumexSkeleton component.
Consider adding a toggle button example:
@code { private bool isLoading = true; private void ToggleLoading() { isLoading = !isLoading; } } <div class="mb-4"> <LumexButton OnClick="ToggleLoading">Toggle Loading</LumexButton> </div> <LumexCard class="w-full max-w-[200px] space-y-5 p-4" radius="@Radius.Large"> <LumexSkeleton class="rounded-lg" Loading="@isLoading"> <div class="h-24 rounded-lg bg-default-300" /> </LumexSkeleton> <!-- rest of the example --> </LumexCard>src/LumexUI/Components/Skeleton/SkeletonSlots.cs (1)
21-22: Consider setting a default value for the obsolete Root propertySince the Root property is marked as obsolete and only has a getter (no setter), it might be helpful to explicitly initialize it to null or set it to the same value as Base to maintain backward compatibility during the transition period.
docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Skeleton.razor (1)
59-64: Consider adding component importsWhile the code references LumexSkeleton, LumexCard, and LumexButton in the API components array, there are no corresponding using statements for these components. This will work if they're in the same namespace, but it's generally good practice to include explicit using statements for clarity.
src/LumexUI/Components/Skeleton/LumexSkeleton.razor.cs (3)
37-37: Consider backward compatibility for collection initializationThe empty collection initialization syntax
[]is a feature of C# 11+. If the project needs to support older C# versions, consider using the traditional initialization approach:new Dictionary<string, ComponentSlot>().
46-60: Improve error handling in GetStyles methodThe current implementation throws a NotImplementedException in two scenarios:
- When a slot is not found in _slots
- When an unknown slot name is passed to the switch expression
Consider using more specific exception types or providing more helpful error messages to aid in debugging. For example:
private string? GetStyles(string slot) { if (!_slots.TryGetValue(slot, out var styles)) { - throw new NotImplementedException(); + throw new KeyNotFoundException($"Slot '{slot}' is not defined in the skeleton styles."); } return slot switch { nameof(SkeletonSlots.Base) => styles(Classes?.Base, Class), nameof(SkeletonSlots.Content) => styles(Classes?.Content), - _ => throw new NotImplementedException() + _ => throw new ArgumentException($"Unsupported slot name: {slot}", nameof(slot)) }; }
17-61: Consider making the component async-compatibleThe current implementation doesn't address asynchronous content loading scenarios. Consider adding support for Task-based content loading by implementing an async version or providing guidance in the documentation on how to use the component with async operations. This would enhance the component's usability in real-world scenarios where content is typically fetched asynchronously.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs(3 hunks)docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Examples/Loading.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Examples/Standalone.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Examples/Usage.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Skeleton/PreviewCodes/Loading.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Skeleton/PreviewCodes/Standalone.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Skeleton/PreviewCodes/Usage.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Skeleton.razor(1 hunks)src/LumexUI/Components/Skeleton/LumexSkeleton.razor(1 hunks)src/LumexUI/Components/Skeleton/LumexSkeleton.razor.cs(1 hunks)src/LumexUI/Components/Skeleton/SkeletonSlots.cs(1 hunks)src/LumexUI/Styles/Skeleton.cs(1 hunks)src/LumexUI/Styles/_theme.css(2 hunks)tests/LumexUI.Tests/Components/Skeleton/SkeletonTests.razor(1 hunks)
🔇 Additional comments (20)
docs/LumexUI.Docs.Client/Pages/Components/Skeleton/PreviewCodes/Standalone.razor (1)
1-5: Looks good! Documentation structure follows convention.The component is correctly structured with the InteractiveWebAssembly render mode and follows the established pattern for documentation examples in the LumexUI framework.
docs/LumexUI.Docs.Client/Pages/Components/Skeleton/PreviewCodes/Loading.razor (1)
1-5: Documentation structure looks good!The component correctly uses InteractiveWebAssembly render mode and follows the established pattern for documentation examples in the LumexUI framework.
docs/LumexUI.Docs.Client/Pages/Components/Skeleton/PreviewCodes/Usage.razor (1)
1-5: Documentation structure looks good!The component correctly uses InteractiveWebAssembly render mode and follows the established pattern for documentation examples in the LumexUI framework.
src/LumexUI/Styles/_theme.css (1)
170-170: Good addition of a shimmer animation variable.The
--animate-shimmervariable is well defined with a 2-second infinite animation that can be easily applied throughout the component library, providing consistent loading animations.src/LumexUI/Components/Skeleton/LumexSkeleton.razor (2)
1-15: Well-structured Skeleton component with proper slot management.The component follows the LumexUI conventions by inheriting from
LumexComponentBaseand using slot management. The data attributes for slots and loading state provide good accessibility and testability.
10-10: Good use of ToAttributeValue() for boolean conversion.Converting the boolean Loading parameter to an attribute value ensures proper HTML rendering.
docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs (2)
43-43: Good addition of LumexSkeleton to navigation with New status.The component is correctly added to the ComponentsCategory with the appropriate ComponentStatus.New flag to indicate it's a new addition to the library.
53-53:Details
✅ Verification successful
Verify if LumexAvatarGroup is part of this PR scope.
While LumexSkeleton is mentioned in the PR objectives, LumexAvatarGroup is not. Ensure this addition is intentional and part of the PR scope.
Also applies to: 89-89
🏁 Script executed:
#!/bin/bash # Check if LumexAvatarGroup component files are part of this PR # Look for LumexAvatarGroup implementation files echo "Searching for LumexAvatarGroup implementation files:" fd -t f "LumexAvatarGroup" --exec echo {}Length of output: 271
Action: Verified Inclusion of LumexAvatarGroup Component
The additional files for
LumexAvatarGroupwere found at:
./src/LumexUI/Components/Avatar/LumexAvatarGroup.razor./src/LumexUI/Components/Avatar/LumexAvatarGroup.razor.csSince these files confirm that
LumexAvatarGroupis indeed part of the PR scope, the addition indocs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.csat lines 53 and 89 is intentional.docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Examples/Usage.razor (1)
1-16: Good demonstration of LumexSkeleton usage in different contexts.The example effectively shows how to use the Skeleton component within a card layout with various widths and styling options.
docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Examples/Loading.razor (1)
1-29: Well-structured example demonstrating the Skeleton component functionalityThis example effectively showcases the LumexSkeleton component with multiple instances of varying widths and background colors. The toggle button implementation provides a good interactive demonstration of how the loading state works.
docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Examples/Standalone.razor (1)
1-9: Clean implementation of a standalone skeleton loader patternThis example effectively demonstrates how to create a profile/comment loading skeleton with appropriate spacing and sizing. The combination of circular and rectangular skeletons creates a realistic content placeholder.
src/LumexUI/Components/Skeleton/SkeletonSlots.cs (1)
11-33: Well-structured slot implementation with clear documentationThe SkeletonSlots class follows the component architecture pattern with proper XML documentation and clear deprecation notice for the Root property. The separation of Base and Content slots provides good flexibility for styling different parts of the skeleton component.
src/LumexUI/Styles/Skeleton.cs (2)
18-68: Well-implemented skeleton styling with appropriate animation effectsThe styling implementation creates a sophisticated shimmer effect using pseudo-elements and CSS transitions. The code handles different states (loading/not-loading) properly and includes accessibility considerations with the reduced motion preference support.
37-41:Details
❓ Verification inconclusive
Ensure the "animate-shimmer" animation is properly defined
The code references a custom animation class "before:animate-shimmer" which should be defined elsewhere in your CSS/Tailwind configuration. Make sure this animation is properly defined to achieve the intended shimmer effect.
🌐 Web query:
How to define custom animations in Tailwind CSS?💡 Result:
Tailwind CSS allows custom animations through configuration file extensions and arbitrary values. Here's how to implement them:
Custom Animation Setup
Initialize Configuration File
- Create/update
tailwind.config.jsusing:npx tailwindcss initDefine Keyframes
Add custom animation sequences in thetheme.extend.keyframessection:module.exports = { theme: { extend: { keyframes: { glow: { '0%, 100%': { boxShadow: '0 0 10px #ff00ff' }, '50%': { boxShadow: '0 0 20px #ff00ff' } } } } } }Create Animation Preset
Link keyframes to animation properties intheme.extend.animation:animation: { glow: 'glow 1.5s infinite', 'waving-hand': 'wave 2s linear infinite' }Implementation in HTML
Apply custom animations using
animate-{name}classes:<div class="animate-glow bg-pink-500 p-4 rounded"> Glowing Element </div>Advanced Customization
Timing Control: Use utility classes like:
duration-1000(1s duration)delay-200(200ms delay)ease-in-out(timing function)Arbitrary Values: For one-off animations without config changes:
<div class="animate-[wiggle_1s_ease-in-out_infinite]"> <!-- Content --> </div>Third-Party Integration
Libraries like Tailwind CSS Animated and TW Elements provide pre-built animation utilities and visual editors for complex effects[1][11].
Key considerations:
- Add animation names to
safelistin config for dynamic classes[2]- Use
motion-safe/motion-reducevariants for accessibility[8]- Optimize performance with hardware-accelerated properties
For complex 3D animations, define transforms in keyframes using CSS-native functions like
rotate3dandscale3d[3][5].Citations:
- 1: https://prismic.io/blog/tailwind-animations
- 2: https://tw-elements.com/docs/standard/content-styles/animations/
- 3: https://canopas.com/tailwind-css-custom-animations-b041a1310aab
- 4: https://blog.logrocket.com/creating-custom-animations-tailwind-css/
- 5: https://pagedone.io/docs/animation
- 6: https://refine.dev/blog/tailwind-animations/
- 7: https://tailwindcss.com/docs/transition-duration
- 8: https://tailwindcss.com/docs/animation
- 9: https://tailwindcss.com/docs/transition-timing-function
- 10: https://tailwindcss.com/docs/transition-property
- 11: https://www.tailwindcss-animated.com
- 12: https://www.youtube.com/watch?v=6lDJ3pchnZc
Action Required: Verify 'animate-shimmer' Animation is Defined in Tailwind CSS
The Skeleton component’s styling (lines 37-41) references the custom class
before:animate-shimmer. Please ensure that this class is correctly defined in your Tailwind CSS configuration. Specifically, verify that:
- A corresponding keyframes definition for the shimmer effect is present in the
theme.extend.keyframessection oftailwind.config.js.- An animation preset linking these keyframes is added in
theme.extend.animation(e.g., mapping"shimmer"to"shimmer 1.5s infinite").- Tailwind compiles and applies the custom animation as expected in your UI.
A sample configuration might look like this:
module.exports = { theme: { extend: { keyframes: { shimmer: { '0%': { backgroundPosition: '-100% 0' }, '100%': { backgroundPosition: '100% 0' }, }, }, animation: { shimmer: 'shimmer 1.5s infinite', }, }, }, }Review and adjust your configuration accordingly to ensure that the shimmer effect is rendered as intended.
docs/LumexUI.Docs.Client/Pages/Components/Skeleton/Skeleton.razor (4)
6-25: Well-structured documentation sectionsThe documentation is clearly organized with Usage, Standalone, and Loading sections, making it easy for users to understand the different ways the Skeleton component can be utilized. The explanatory text effectively communicates the purpose of each usage scenario.
27-35: Comprehensive slot documentationThe slots section effectively documents the available slots for the Skeleton component, providing clear descriptions for both the Base and Content slots, which aligns well with the component implementation.
53-57: Properly defined slotsThe slots array correctly defines and documents the two slots available in the SkeletonSlots enum (Base and Content), which match the implementation in the component code. This ensures consistency between documentation and implementation.
66-75: Well-implemented initializationThe OnInitialized method properly sets up the documentation page with comprehensive metadata including title, category, description and navigation structure, which enhances the user experience.
src/LumexUI/Components/Skeleton/LumexSkeleton.razor.cs (2)
1-17: Well-documented class implementationThe class has comprehensive XML documentation that clearly explains the purpose of the Skeleton component and follows the project's code style with proper copyright notice and licensing information.
18-35: Well-documented parametersAll parameters have clear XML documentation with appropriate descriptions. The Loading parameter includes helpful remarks about its default value, which improves developer experience.
* 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) * v2.0.0-preview.3
* 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 #175
Introducing the new Skeleton component.
What's been done?
Checklist
Additional Notes
Summary by CodeRabbit
New Features
Documentation
Style