feat(docs): add the Popover page

Walkthrough

The changes in this pull request encompass various modifications across multiple files within the Lumex UI documentation and component structure. Key updates include the removal of the locked: true parameter from certain navigation components, adjustments to the viewBox attributes in icon components, and the introduction of new examples for both icons and popovers. Additionally, several new Razor components have been created to enhance documentation, demonstrating various features such as colors, dimensions, and custom styles for icons and popovers. The overall structure and functionality of existing components remain largely intact.

Changes

File Path	Change Summary
docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs	Removed `locked: true` from `Add` method calls for `LumexIcon`, `LumexPopover`, and `LumexNumbox<T>`.
docs/LumexUI.Docs.Client/Components/ComponentLinks.razor	Changed `ViewBox` to `viewBox` in `LumexIcon` component instances.
docs/LumexUI.Docs.Client/Components/Header.razor	Changed `ViewBox` to `viewBox` in `_headerActions` for `LumexIcon`.
docs/LumexUI.Docs.Client/Pages/Components/Icon/Examples/Colors.razor	Added multiple `LumexIcon` instances with various `ThemeColor` values using `Icons.Rounded.Favorite`.
docs/LumexUI.Docs.Client/Pages/Components/Icon/Examples/CustomStyles.razor	Added a `LumexIcon` component with `Icons.Rounded.Bed`, size 40, styled with `text-indigo-500`.
docs/LumexUI.Docs.Client/Pages/Components/Icon/Examples/DimensionsFont.razor	Introduced a new component demonstrating `LumexIcon` with varying dimensions, linked to Google Fonts.
docs/LumexUI.Docs.Client/Pages/Components/Icon/Examples/DimensionsSvg.razor	Introduced a new component for `LumexIcon` with sizes 16-100%, showcasing responsive design.
docs/LumexUI.Docs.Client/Pages/Components/Icon/Examples/Usage.razor	Added multiple instances of `LumexIcon` using different icons from `Icons.Rounded`.
docs/LumexUI.Docs.Client/Pages/Components/Icon/Icon.razor	Introduced documentation structure for `LumexIcon`, including sections for usage, colors, dimensions, custom styles, and API.
docs/LumexUI.Docs.Client/Pages/Components/Icon/PreviewCodes/Colors.razor	Added a component to render interactive color icons.
docs/LumexUI.Docs.Client/Pages/Components/Icon/PreviewCodes/CustomStyles.razor	Added a component for rendering custom styles for icons.
docs/LumexUI.Docs.Client/Pages/Components/Icon/PreviewCodes/DimensionsFont.razor	Added a preview for dimensions font example.
docs/LumexUI.Docs.Client/Pages/Components/Icon/PreviewCodes/DimensionsSvg.razor	Added a preview for SVG dimensions example.
docs/LumexUI.Docs.Client/Pages/Components/Icon/PreviewCodes/Usage.razor	Added a component for displaying usage examples of icons.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/Arrow.razor	Introduced a new example for `LumexPopover` with an arrow.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/Colors.razor	Introduced a component for dynamically generating `LumexPopover` instances based on theme colors.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/CustomStyles.razor	Introduced a `LumexPopover` with specific styles and positioning.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/Offset.razor	Introduced a `LumexPopover` example with an offset property.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/Placements.razor	Introduced a grid layout displaying `LumexPopover` instances with different placements.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/Shadows.razor	Introduced a component for displaying popovers with various shadow styles.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/Sizes.razor	Introduced a component for displaying popovers with different sizes.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/Usage.razor	Added an example usage of the `LumexPopover` component.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/_Radius.razor	Introduced a component for displaying popovers with varying radius values.
docs/LumexUI.Docs.Client/Pages/Components/Popover/Popover.razor	Introduced structured documentation for the Popover component, including various sections for usage and customization.
docs/LumexUI.Docs.Client/Pages/Components/Popover/PreviewCodes/Arrow.razor	Added a preview component for the Arrow example in Popover.
docs/LumexUI.Docs.Client/Pages/Components/Popover/PreviewCodes/Colors.razor	Added a preview component for color-related popover examples.
docs/LumexUI.Docs.Client/Pages/Components/Popover/PreviewCodes/CustomStyles.razor	Added a preview component for custom styles in popovers.
docs/LumexUI.Docs.Client/Pages/Components/Popover/PreviewCodes/Offset.razor	Added a preview component for offset examples in popovers.
docs/LumexUI.Docs.Client/Pages/Components/Popover/PreviewCodes/Placements.razor	Added a preview component for placement examples in popovers.
docs/LumexUI.Docs.Client/Pages/Components/Popover/PreviewCodes/Radius.razor	Added a preview component for radius examples in popovers.
docs/LumexUI.Docs.Client/Pages/Components/Popover/PreviewCodes/Shadows.razor	Added a preview component for shadow examples in popovers.
docs/LumexUI.Docs.Client/Pages/Components/Popover/PreviewCodes/Sizes.razor	Added a preview component for size examples in popovers.
docs/LumexUI.Docs.Client/Pages/Components/Popover/PreviewCodes/Usage.razor	Added a preview component for usage examples in popovers.
src/LumexUI/Common/Models/Dimensions.cs	Introduced a new `Dimensions` struct with properties for width and height.
src/LumexUI/Components/Button/LumexButton.razor.cs	Changed `OnClickAsync` access modifier from `private` to `private protected`.
src/LumexUI/Components/Icon/LumexIcon.razor	Modified `viewBox` attribute of an SVG element to a fixed value.
src/LumexUI/Components/Icon/LumexIcon.razor.cs	Removed `ViewBox` parameter and updated `FontIconStyle` property to allow null values, relocated dimension validation logic.
src/LumexUI/Components/Popover/LumexPopover.razor.cs	Updated XML documentation and modified the `Hide` method to clear the last shown popover.
src/LumexUI/Components/Popover/LumexPopoverContent.razor	Removed `z-index` style and adjusted the structure of nested `<div>` elements.
src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs	Simplified documentation and updated `InnerWrapperClass` property to retrieve styles differently.
src/LumexUI/Components/Popover/LumexPopoverTrigger.razor	Changed inheritance from `LumexComponentBase` to `LumexButton`, altering rendering approach.
src/LumexUI/Components/Popover/LumexPopoverTrigger.razor.cs	Updated class inheritance and simplified parameters, added methods for handling attributes and click events.
src/LumexUI/Styles/Popover.cs	Modified styling logic for radius and shadow properties and simplified `GetInnerWrapperStyles` method signature.
src/LumexUI/wwwroot/js/components/popover.js	Enhanced error handling in the `destroy` function by checking for `destroyOutsideClickHandler` before invoking it.
tests/LumexUI.Tests/Components/Popover/PopoverTests.razor	Commented out the test method `ShouldNotShowOnTriggeringShownOne`.

Poem

In the garden of code, a rabbit hops free,
With icons and popovers, as bright as can be.
The viewBox is set, the colors now shine,
Each change a new bloom, in this code garden fine.
So let’s celebrate all, with a joyful cheer,
For in every small change, a new world draws near! 🐇✨

📜 Recent review details

**Configuration used: CodeRabbit UI** **Review profile: CHILL**

📥 Commits

Files that changed from the base of the PR and between 38eba58918bdec44ba9887b68c9beb50d97c4efe and 99cd1db111095930650a487d2b331ff230cfa5bf.

📒 Files selected for processing (1)

* tests/LumexUI.Tests/Components/Popover/PopoverTests.razor (1 hunks)

[!NOTE]

🎁 Summarized by CodeRabbit Free
Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting .

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` 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) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

Files with missing lines	Patch %	Lines
src/LumexUI/Components/Icon/LumexIcon.razor.cs	33.33%	3 Missing and 1 partial :warning:
...UI/Components/Popover/LumexPopoverTrigger.razor.cs	66.67%	3 Missing and 1 partial :warning:

LumexUI / lumexui