Skip to content

refactor(input-group): add styling support for more input types#17270

Open
simeonoff wants to merge 6 commits into
masterfrom
simeonoff/fix-17156
Open

refactor(input-group): add styling support for more input types#17270
simeonoff wants to merge 6 commits into
masterfrom
simeonoff/fix-17156

Conversation

@simeonoff
Copy link
Copy Markdown
Collaborator

Closes #17156

Description

This PR adds minimal styling support for input types date, time, datetime-local, month, and week in the context of the igx-input-group component.

Type of Change (check all that apply):

  • Bug fix
  • New functionality
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Refactoring (no functional changes)
  • Documentation
  • Demos
  • CI/CD
  • Tests
  • Changelog
  • Skills/Agents

Component(s) / Area(s) Affected:

The only affected component is the Input Group.

How Has This Been Tested?

  • Unit tests
  • Manual testing
  • Automated e2e tests

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them
  • Accessibility (ARIA, keyboard navigation, focus management) has been verified

@simeonoff simeonoff requested a review from adrianptrv May 11, 2026 10:24
Copilot AI review requested due to automatic review settings May 11, 2026 10:24
@simeonoff simeonoff changed the title Simeonoff/fix 17156 refactor(input-group): add styling support for more input types May 11, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds styling support in igx-input-group for native date/time-like input types to prevent label/placeholder overlap (Issue #17156), and updates the showcase to demonstrate the newly supported types.

Changes:

  • Updated the Input Group showcase sample to include date, time, datetime-local, month, and week native input types (and adjusted defaults).
  • Extended Material/Bootstrap input-group styling selectors to account for date/time-like inputs (label/notch behavior, disabled text coloring).
  • Introduced color-scheme propagation based on theme variant to better align native control rendering with theme mode.

Reviewed changes

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

File Description
src/app/input-group-showcase/input-group-showcase.sample.ts Expands the demo’s selectable native input types and adjusts default selections.
projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss Adds styling rules for date/time-like native inputs to avoid label overlap and improve visual consistency.

simeonoff and others added 2 commits May 12, 2026 10:15
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@adrianptrv adrianptrv added 👀 status: in-review Issue is currently being reviewed and removed ❌ status: awaiting-test PRs awaiting manual verification labels May 18, 2026
@adrianptrv
Copy link
Copy Markdown
Contributor

There is a difference in the text colors for the idle state across the input types
In Angular, the text uses --filled-text-color for both the idle and filled states, while in WC it uses --idle-text-color for the idle state and --filled-text-color for the filled state.

Screenshot 2026-05-18 at 10 09 41

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

Projects

None yet

4 participants