Skip to content

Fix inputs placeholder color issues in BlazorUI (#13639) - #13775

Open
msynk wants to merge 1 commit into
developfrom
msynk/13639-blazorui-inputs-placeholder-color-issues
Open

msynk wants to merge 1 commit into
developfrom
msynk/13639-blazorui-inputs-placeholder-color-issues

Conversation

@msynk

@msynk msynk commented Oct 11, 2026 •

Copy link
Copy Markdown
Member

closes #13639

Summary by CodeRabbit

  • New Features
    • Added configurable placeholder-color options for Data Grid, PDF Viewer, Circular Time Picker, Date Picker, and Date Range Picker inputs.
  • Bug Fixes
    • Improved placeholder readability across input components with stronger default contrast and consistent opacity.
    • Disabled inputs now use the disabled text color for placeholders.

@msynk
msynk requested a review from yasmoradi as a code owner October 11, 2026 13:04
@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 12e5abe2-82c2-42a7-8822-5c175cd4ab57

📥 Commits

Reviewing files that changed from the base of the PR and between e09d4d2 and 44cc452.


📒 Files selected for processing (22)
  • src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.scss
  • src/BlazorUI/Bit.BlazorUI.Extras/Components/PdfViewer/BitPdfViewer.scss
  • src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/BitPhoneInput.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor.params.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PdfViewer/BitPdfViewerDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TagsInput/BitTagsInputDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Theming/ThemingPage.razor
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Extras/DataGrid/BitDataGridStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Extras/PdfViewer/BitPdfViewerStylesheetTests.cs

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 1 remain after this review.



Walkthrough

Placeholder styling now uses configurable theme colors and full opacity across several Blazor UI components. Disabled placeholders use disabled foreground colors. Demo metadata and theming guidance document the placeholder color variables and defaults.

Changes

Placeholder styling

Layer / File(s) Summary
Component placeholder rules
src/BlazorUI/Bit.BlazorUI.Extras/Components/{DataGrid, PdfViewer, PhoneInput}/*.scss, src/BlazorUI/Bit.BlazorUI/Components/Inputs/{CircularTimePicker, DatePicker, DateRangePicker, OtpInput, TagsInput, TextField}/*.scss, src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Extras/{DataGrid, PdfViewer}/*Tests.cs
DataGrid and PDF Viewer add configurable placeholder colors. PhoneInput and input components use secondary foreground fallbacks and full opacity where described. Disabled placeholders use disabled foreground colors. Stylesheet tests include the added documented variables.
Demo and theme documentation
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/{DataGrid, PdfViewer, PhoneInput}/*, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/{CircularTimePicker, DatePicker, DateRangePicker, OtpInput, SearchBox, TagsInput, TextField}/*, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Theming/ThemingPage.razor
Demo metadata records placeholder color variables and defaults. The theming guidance distinguishes subtle foreground text from input placeholders.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~12 minutes

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 44cc4

The placeholder updates are localized to styling and documentation, and SearchBox rendering was already using the intended theme color. No merge-blocking issue was identified; the change appears ready for normal checks.

Pre-merge checks | Passed 3 | Failed 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Out of Scope Changes check Warning The pull request changes placeholder behavior or documentation for components outside issue #13639, including BitDataGrid, BitPdfViewer, BitPhoneInput, BitOtpInput, and BitTagsInput. The lin… Remove the unrelated DataGrid, PdfViewer, PhoneInput, OtpInput, and TagsInput changes from this pull request, or link a separate active issue that requires those changes and keep that scope explicit.
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 12 files. (10 skipped: … Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly and concisely describes the main change: fixing placeholder color behavior for BlazorUI inputs.
Linked Issues check Passed Issue #13639 requires themed placeholder colors for BitTextField, BitSearchBox, BitDatePicker, BitDateRangePicker, and BitCircularTimePicker. The reviewed head applies $clr-fg-sec defaults…

Full details: Out of Scope Changes check

Explanation

The pull request changes placeholder behavior or documentation for components outside issue #13639, including BitDataGrid, BitPdfViewer, BitPhoneInput, BitOtpInput, and BitTagsInput. The linked issue names only BitTextField, BitSearchBox, BitDatePicker, BitDateRangePicker, and BitCircularTimePicker. The related demo and stylesheet test edits for those extra components do not implement a requirement in #13639.


Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 12 files. (10 skipped: 10 unsupported.)


  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Commit to this branch
  • Create a new PR


🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

I’m a rabbit with a stylesheet,
Hopping where the soft hints lay.
Colors now follow theme tokens,
Disabled hints take muted shades.
I nibble clover, then I’m on my way.

Comment @coderabbitai help to get the list of available commands.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

BitTextField, BitSearchBox and the date and time pickers leave their placeholder at the browser's default color

1 participant