Add BitDropdown component#102
Draft
albx wants to merge 12 commits into
Draft
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a new BitDropdown component to the BitBlazor library, including a companion BitDropdownItem, supporting customization enums, styles, Storybook stories, and bUnit tests to validate rendering and interactive behaviors.
Changes:
- Introduces
BitDropdown+ActivatorContextfor templated activators and keyboard-driven open/close/focus behavior. - Adds
BitDropdownItemwith active/disabled states, optional navigation (Href), and keyboard navigation within the menu. - Adds enums + CSS + Storybook stories and test coverage for rendering/behavior scenarios.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/BitBlazor.Test/Components/Dropdown/BitDropdownTest.Rendering.razor | Rendering-focused bUnit tests validating generated markup for common dropdown configurations. |
| tests/BitBlazor.Test/Components/Dropdown/BitDropdownTest.Behaviors.cs | Behavior-focused bUnit tests validating toggling, placement attributes, and keyboard interactions. |
| stories/BitBlazor.Stories/Components/Stories/Components/BitDropdown.stories.razor | Storybook coverage for default/custom activators and visual variants (position, width, color, item size). |
| src/BitBlazor/Components/Dropdown/BitDropdown.razor | Dropdown markup composition (container, activator template, menu wrapper, cascading context). |
| src/BitBlazor/Components/Dropdown/BitDropdown.razor.cs | Dropdown state management, placement attributes, item registration, focus navigation, and close behavior. |
| src/BitBlazor/Components/Dropdown/BitDropdown.razor.css | Styling to shrink-wrap dropdown container for correct menu positioning without JS/Popper. |
| src/BitBlazor/Components/Dropdown/ActivatorContext.cs | Activator state + attributes + keyboard handler logic exposed to custom activator templates. |
| src/BitBlazor/Components/Dropdown/BitDropdownItem.razor | Dropdown item markup (interactive anchor element with attributes, click, and key handling). |
| src/BitBlazor/Components/Dropdown/BitDropdownItem.razor.cs | Dropdown item behaviors (disabled/active, click vs navigate, arrow key focus movement, escape-to-close). |
| src/BitBlazor/Components/Dropdown/BitDropdownItem.razor.css | Minimal dropdown item cursor styling. |
| src/BitBlazor/Components/Dropdown/DropdownPosition.cs | Enum for menu placement relative to the activator. |
| src/BitBlazor/Components/Dropdown/DropdownMenuColor.cs | Enum for menu theme variants. |
| src/BitBlazor/Components/Dropdown/DropdownMenuWidth.cs | Enum for menu width variants. |
| src/BitBlazor/Components/Dropdown/DropdownItemSize.cs | Enum for dropdown item size variants. |
| @code { | ||
| private RenderFragment<ActivatorContext> DefaultActivator => | ||
| context => | ||
| @<button class="btn btn-dropdown dropdown-toggle" type="button" id="@context.ActivatorId" @ref="activatorContext.ActivatorRef" @attributes="context.Attributes" @onclick="@context.ToggleDropdown" @onkeydown="@context.HandleKeyDownAsync" @onkeydown:preventDefault="true"> |
Comment on lines
+86
to
+92
| case "ArrowDown": | ||
| if (!dropdown.IsOpen) | ||
| { | ||
| dropdown.Toggle(); | ||
| } | ||
| await dropdown.FocusFirstItemAsync(); | ||
| break; |
Comment on lines
+94
to
+100
| case "ArrowUp": | ||
| if (!dropdown.IsOpen) | ||
| { | ||
| dropdown.Toggle(); | ||
| } | ||
| await dropdown.FocusLastItemAsync(); | ||
| break; |
Comment on lines
+27
to
+30
| /// When providing a custom <see cref="BitDropdown.ActivatorTemplate"/>, bind this to your | ||
| /// activator element via <c>@ref="context.ActivatorRef"</c> to enable focus restoration on Escape. | ||
| /// Omitting it is safe: <see cref="CloseAsync"/> degrades gracefully without it. | ||
| /// </summary> |
| @namespace BitBlazor.Components | ||
|
|
||
| <li> | ||
| <a href="@Href" class="@ComputeLinkCssClass()" disabled="@Disabled" tabindex="@(Disabled ? "-1" : "0")" @ref="itemAnchorRef" @attributes="AdditionalAttributes" @onclick="ClickAsync" @onclick:preventDefault="@RendererInfo.IsInteractive" @onkeydown="OnKeyDownAsync"> |
Comment on lines
+16
to
+19
| var component = ctx.Render<BitDropdown>(parameters => parameters | ||
| .Add(p => p.ActivatorLabel, "Open") | ||
| .AddChildContent<BitDropdownItem>(itemParams => | ||
| itemParams.AddChildContent("<span>Item</span>"))); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new, highly customizable
BitDropdowncomponent for the BitBlazor library, along with its supporting types and styles. The implementation includes both the dropdown menu and individual dropdown items, with a strong focus on accessibility, keyboard navigation, and flexible theming. The main changes are organized as follows:New Dropdown Component Implementation
BitDropdowncomponent, which supports custom activator templates, menu positioning, color themes, menu widths, and item sizing. It manages open/close state, focus management, and accessibility attributes. (BitDropdown.razor,BitDropdown.razor.cs) [1] [2]ActivatorContextclass to encapsulate the activator button's state and behavior, including keyboard event handling and accessibility attributes. (ActivatorContext.cs)Dropdown Item Component
BitDropdownItemcomponent, which represents an interactive or navigational item within the dropdown. It supports disabled and active states, custom content, keyboard navigation, and focus management. (BitDropdownItem.razor,BitDropdownItem.razor.cs) [1] [2]Theming and Customization
DropdownPosition,DropdownMenuColor,DropdownMenuWidth, andDropdownItemSize, enabling flexible positioning, appearance, and sizing of the dropdown and its items. (DropdownPosition.cs,DropdownMenuColor.cs,DropdownMenuWidth.cs,DropdownItemSize.cs) [1] [2] [3] [4]Styling
BitDropdown.razor.css,BitDropdownItem.razor.css) [1] [2]