feat(input-group): change default type from 'line' to 'box'#17340
Conversation
Change the default type of igx-input-group and igx-select from 'line' to 'box' to align with current Material Design guidelines. Add migration schematic (migration-57) that adds type="line" to existing igx-input-group, igx-select, igx-date-picker, igx-date-range-picker, and igx-time-picker elements that don't already have an explicit type attribute. Closes #17339
|
@copilot The next major version will be 22.0.0, so the migration should be for version |
Done — renamed the migration to |
There was a problem hiding this comment.
Pull request overview
This PR updates Ignite UI for Angular form components to default to the box input styling (aligning with Material’s removal of the line style) and adds a v22 migration to preserve existing app behavior by explicitly setting type="line" where no type is provided.
Changes:
- Changed the implicit fallback type from
'line'to'box'forIgxInputGroupComponentandIgxSelectComponent. - Added migration-57 (v22.0.0) to inject
type="line"into templates for select/picker/input-group tags that lacktype/[type]. - Updated unit tests and input-group README to reflect the new default.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| projects/igniteui-angular/select/src/select/select.component.ts | Changes select type fallback default to box. |
| projects/igniteui-angular/select/src/select/select.component.spec.ts | Updates select specs to assert box default and CSS classes. |
| projects/igniteui-angular/migrations/update-22_0_0/index.ts | Adds v22 migration that inserts type="line" when no explicit type is set. |
| projects/igniteui-angular/migrations/update-22_0_0/index.spec.ts | Adds migration tests for all targeted tags and skip cases. |
| projects/igniteui-angular/migrations/migration-collection.json | Registers migration-57 pointing to update-22_0_0. |
| projects/igniteui-angular/input-group/src/input-group/input-group.component.ts | Changes input-group type fallback default to box and updates its doc comment. |
| projects/igniteui-angular/input-group/src/input-group/input-group.component.spec.ts | Updates input-group spec to assert box default. |
| projects/igniteui-angular/input-group/README.md | Updates documented default type to box. |
| @Input() | ||
| public get type(): IgxInputGroupType { | ||
| return this._type || this._inputGroupType || 'line'; | ||
| return this._type || this._inputGroupType || 'box'; | ||
| } |
There was a problem hiding this comment.
Fixed in 80e41ca — updated the JSDoc to state "Defaults to box if no input-group type is set" instead of referencing the old line default.
kdinev
added
version: 22.0.x
📅 date-picker
🕐 time-picker
input-group
combo
select
Material Design removed the
linetype input style. The default for all form components should now bebox.Changes
'line'to'box'inIgxInputGroupComponentandIgxSelectComponenttype getters (IgxComboComponentalready defaulted to'box')type="line"toigx-input-group,igx-select,igx-date-picker,igx-date-range-picker, andigx-time-pickerelements that lack an explicittype/[type]attribute, preserving existing behavior for apps that relied on the old default'box'; added 8 migration tests covering all target tags and skip-when-already-set casesMigration behavior
Before (implicit line type):
After migration:
New projects get
boxby default with no attribute needed.