Add missing parameters to BitDropMenu (#12422)

[msynk]

closes #12422

Summary by CodeRabbit

New Features

• DropMenu component now offers customizable callout styling with configurable background color and border color.
• Added NoShadow parameter to optionally remove the callout shadow effect for cleaner appearance.
• Enhanced documentation includes expanded examples demonstrating all styling options, responsive behavior, icon variations, and RTL support.

[coderabbitai]

Lost in the diff? Review this PR in Change Stack to follow the change map from intent to exact ranges.

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: e2523215-12ed-4dfe-8c9d-d895ab02f74b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

BitDropMenu component gains Background and Border color parameters, plus NoShadow boolean flag to control the callout's styling. The component generates corresponding CSS classes; demo UI demonstrates all variants with interactive parameter controls and embedded code samples.

Changes

BitDropMenu styling parameters

Layer / File(s)	Summary
Component parameters and CSS class generation src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss	BitDropMenu exposes Background and Border (BitColorKind?) and NoShadow (bool) parameters. GetCalloutCssClasses() maps these to CSS modifier classes: bit-drm-bg-*, bit-drm-br-*, and bit-drm-nsh for shadow removal. SCSS defines corresponding modifier classes controlling background colors, border styles, and shadow presence.
Demo parameter documentation and binding setup src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs	Demo metadata documents Background, Border, and NoShadow parameters; componentSubEnums defines BitColorKind enum (Primary/Secondary/Tertiary/Transparent); backing fields backgroundColorKind and borderColorKind enable interactive parameter selection.
Demo UI with new and updated example sections src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor	Demo page introduces NoShadow, Background, and Border sections with BitChoiceGroup controls for parameter binding; subsequent Icon, Responsive, Template, Events, External Icons, Style & Class, and RTL sections are renumbered to align with new example order.
Demo embedded code examples src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs	Example 1 expands to include NoShadow variant; examples 5–10 cover icon-only menus, responsive scrolling, templated menus, click handlers, custom styling (Style/Styles/Classes), and RTL (Persian) drop menus with scrolling and panel positioning.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A drop menu dressed up so fine,
With shadows banished and colors divine,
Background and borders now in control,
From casual clicks to the interactive whole!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main objective: adding the three missing parameters (NoShadow, Border, Background) to BitDropMenu as requested in issue #12422.
Linked Issues check	✅ Passed	The PR successfully implements all three requested parameters (NoShadow, Border, Background) with corresponding CSS styling, demo documentation, and sample code.
Out of Scope Changes check	✅ Passed	All changes directly support the implementation of the three missing parameters; no out-of-scope modifications were introduced beyond the stated objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 12422-blazorui-dropmenu-noshadow

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR addresses issue #12422 by adding missing customization parameters to BitDropMenu so consumers can control the callout’s box-shadow, background, and border without relying on custom CSS overrides. It also updates the demo/docs to expose these new parameters and provide examples.

Changes:

• Added NoShadow, Background, and Border parameters to BitDropMenu and wired them into callout CSS class generation.
• Extended BitDropMenu SCSS with new callout modifier classes for shadow/background/border.
• Updated the DropMenu demo page (samples, parameters table, and examples) to document and showcase the new parameters.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs	Adds sample snippets demonstrating NoShadow, Background, and Border; renumbers existing examples.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs	Documents the new parameters and introduces a BitColorKind sub-enum table + state for choice groups.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor	Adds new demo sections for NoShadow, Background, and Border, and wires SubEnums.
src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss	Adds styling hooks for the new callout customization parameters (shadow/background/border) and adjusts RTL handling.
src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs	Adds the new component parameters and updates callout class generation accordingly.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss`:
- Around line 89-132: The nested SCSS selectors under .bit-drm-cal are written
as descendant selectors (e.g., .bit-drm-nsh) but the component adds multiple
classes on the same element, so change each nested rule to use the
parent-reference form (e.g., &.bit-drm-nsh) so they compile to combined-class
selectors; update the rules for .bit-drm-rtl, .bit-drm-nsh, .bit-drm-pbg,
.bit-drm-sbg, .bit-drm-tbg, .bit-drm-rbg, .bit-drm-brd, .bit-drm-pbr,
.bit-drm-sbr, .bit-drm-tbr and .bit-drm-rbr inside .bit-drm-cal to use
&.classname just like the existing responsive modifiers do.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 2171afc4-59ea-4f96-a801-5178fdbc96d8

📥 Commits

Reviewing files that changed from the base of the PR and between ac60e3d and 6f59831.

📒 Files selected for processing (5)

• src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
• src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs