feat(OtpInput ): support responsive layout

[ArgoZhang]

Link issues

fixes #6278

Summary By Copilot

Regression?

• Yes
• No

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Implement responsive styling for the OTP input component by renaming its classes to bb-otp-*, consolidating its styling into CSS custom properties, adding a media query for larger screens, and updating the related scss, JavaScript, C# logic, and tests accordingly.

New Features:

• Add responsive layout support for OtpInput using CSS custom properties and a media query

Enhancements:

• Rename CSS classes and scss variables from bb-opt-* to bb-otp-* across styles, JavaScript, and C# code
• Centralize OTP item styling into configurable CSS custom properties (width, padding, margin, font-size, border-width, disabled color)
• Update theme scss variables and sample component styles to align with the new CSS property names

Tests:

• Update unit tests to reference the renamed CSS classes

[sourcery-ai]

Reviewer's Guide

This PR refactors the OtpInput component to use a consistent “bb-otp-” prefix, introduces CSS custom properties (and a responsive media query) for layout control, and updates associated JavaScript handlers, C# class builders, unit tests, and sample usage accordingly.

Class diagram for updated OtpInput component structure

classDiagram
    class OtpInput {
        +string? PlaceHolder
        -string? ClassString
        -string? InputClassString
    }
    %% Note: ClassString and InputClassString now use 'bb-otp-input' and 'bb-otp-item' respectively

Loading

File-Level Changes

Change	Details	Files
Revise component SCSS to use new class names and CSS variables	Renamed root and item selectors from .bb-opt-* to .bb-otp-* Introduced CSS custom properties for width, font-size, padding, margin, border-width, disabled color Added @media(min-width:768px) block to set default OTP item dimensions	src/BootstrapBlazor/Components/Input/OtpInput.razor.scss
Update global theme SCSS variable definitions	Replaced $bb-opt-* variables with $bb-otp-* counterparts Added new $bb-otp-item-disabled-color variable Adjusted default values for item width, font size, padding, margin, border width	src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
Adjust JavaScript to target updated class selectors	Replaced all '.bb-opt-item' selectors with '.bb-otp-item' Updated querySelectorAll, EventHandler.on, and focus/paste handlers accordingly	src/BootstrapBlazor/Components/Input/OtpInput.razor.js
Change C# component class builders to new CSS prefix	Updated ClassString default from 'bb-opt-input' to 'bb-otp-input' Updated InputClassString default from 'bb-opt-item' to 'bb-otp-item'	src/BootstrapBlazor/Components/Input/OtpInput.razor.cs
Align unit tests with renamed selectors and output	Replaced Find/FindAll selectors for .bb-opt-item to .bb-otp-item Updated expected OuterHtml strings to reflect new class names	test/UnitTest/Components/OtpInputTest.cs
Refresh sample layouts to use new classes and vars	Updated deep selectors in sample CSS to .bb-otp-input/.bb-otp-item Added inline style in sample razor to set custom properties for demos	src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/TwoFactorApp.razor.css src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#6278	The OTP input component should adapt to different screen sizes, particularly on mobile devices, to prevent layout issues like overlapping or truncated input fields.	✅
#6278	Users should be able to input characters into the OTP input fields without needing to click each field individually or use a 'continue' button, allowing for continuous input.	✅

Possibly linked issues

• feat(OtpInput ): support responsive layout #6278: PR adds media query for OtpInput responsiveness, fixing display/input bugs on mobile per issue.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @ArgoZhang - I've reviewed your changes and they look great!

Prompt for AI Agents

Please address the comments from this code review:
## Individual Comments

### Comment 1
<location> `src/BootstrapBlazor/Components/Input/OtpInput.razor.scss:37` </location>
<code_context>
             --bs-border-color: var(--bs-danger);
         }
+
+        &span {
+            color: var(--bb-otp-item-disabled-color);
+        }
</code_context>

<issue_to_address>
The selector '&span' is likely incorrect and may not target the intended elements.

'&span' compiles to '.bb-otp-itemspan'. Use '& span' to target a <span> inside '.bb-otp-item'.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

issue (bug_risk): The selector '&span' is likely incorrect and may not target the intended elements.

'&span' compiles to '.bb-otp-itemspan'. Use '& span' to target a inside '.bb-otp-item'.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (d4d76e4) to head (1cb4024).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #6284   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          712       712           
  Lines        31397     31397           
  Branches      4437      4437           
=========================================
  Hits         31397     31397           

Flag	Coverage Δ
BB	100.00% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.