From 873b2559e2413e5f5d3145bb044bc75b6f572d9b Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 14 Oct 2025 11:58:04 +0300 Subject: [PATCH 1/5] feat(date-range): align label of the date-range-picker --- .../_date-range-picker-theme.scss | 18 ++++++++++++++++++ .../date-range-picker.component.ts | 4 +++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss index 5cd16765d30..20f957c0e11 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss @@ -6,8 +6,19 @@ /// @param {Map} $theme - The theme used to style the component. @mixin date-range-picker($theme) { @include css-vars($theme); + $variant: map.get($theme, '_meta', 'theme'); + + $label-height: map.get(( + 'material': 0, + 'fluent': rem(21px), + 'bootstrap': rem(28px), + 'indigo': rem(19px), + ), $variant); %igx-date-range-picker { + @include sizable(); + --input-group-size: #{map.get($theme, 'size')}; + --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); display: flex; > igx-icon { @@ -27,6 +38,8 @@ igx-date-range-end, %igx-date-range-picker__start, %igx-date-range-picker__end { + --size: var(--input-group-size) !important; + flex: 1 0 0%; } @@ -35,6 +48,11 @@ align-items: center; color: var-get($theme, 'label-color'); margin: 0 rem(8px); + height: var(--input-group-size); + + &.labeled-input { + transform: translateY($label-height); + } } %igx-date-range-picker-buttons { diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index 46347ae67c4..39be0d07f32 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -537,7 +537,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective /** @hidden @internal */ public get separatorClass(): string { - return 'igx-date-range-picker__label'; + const classes = ['igx-date-range-picker__label']; + if (this.label) classes.push('labeled-input'); + return classes.join(' '); } protected override get toggleContainer(): HTMLElement | undefined { From bdf61ff76eece21fb8e55284b396a7a2812f0e8d Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 16 Oct 2025 07:38:29 +0300 Subject: [PATCH 2/5] style(date-range-picker): fix datepicker label positioning --- .../_date-range-picker-theme.scss | 17 ++++++++--------- .../date-range-picker.component.ts | 7 +++++-- src/app/date-range/date-range.sample.html | 3 +++ src/app/date-range/date-range.sample.ts | 6 ++++++ 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss index 20f957c0e11..2795c264881 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss @@ -8,13 +8,6 @@ @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); - $label-height: map.get(( - 'material': 0, - 'fluent': rem(21px), - 'bootstrap': rem(28px), - 'indigo': rem(19px), - ), $variant); - %igx-date-range-picker { @include sizable(); --input-group-size: #{map.get($theme, 'size')}; @@ -50,8 +43,14 @@ margin: 0 rem(8px); height: var(--input-group-size); - &.labeled-input { - transform: translateY($label-height); + @if $variant != 'material' { + align-self: flex-end; + + &.input-has-hint { + align-self: center; + } + } @else { + align-self: flex-start; } } diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index 39be0d07f32..a0da954db2e 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -24,7 +24,7 @@ import { DateTimeUtil } from '../date-common/util/date-time.util'; import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive'; import { IgxInputDirective, IgxInputGroupComponent, IgxInputGroupType, IgxInputState, - IgxLabelDirective, IGX_INPUT_GROUP_TYPE, IgxSuffixDirective + IgxLabelDirective, IgxHintDirective, IGX_INPUT_GROUP_TYPE, IgxSuffixDirective } from '../input-group/public_api'; import { AutoPositionStrategy, IgxOverlayService, OverlayCancelableEventArgs, OverlayEventArgs, @@ -407,6 +407,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective @ContentChild(IgxLabelDirective) public label: IgxLabelDirective; + @ContentChild(IgxHintDirective) + public hint: IgxHintDirective; + @ContentChild(IgxPickerActionsDirective) public pickerActions: IgxPickerActionsDirective; @@ -538,7 +541,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective /** @hidden @internal */ public get separatorClass(): string { const classes = ['igx-date-range-picker__label']; - if (this.label) classes.push('labeled-input'); + if (this.hint) classes.push('input-has-hint'); return classes.join(' '); } diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html index 550e770ec48..d7623b79436 100644 --- a/src/app/date-range/date-range.sample.html +++ b/src/app/date-range/date-range.sample.html @@ -46,6 +46,9 @@
Angular Date Range Picker, two inputs, template-driven form
type="text" [placeholder]="properties.placeholder" /> + @if (properties.hint) { + {{ properties.hint }} + } diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts index 17a6c357b24..d9dc33bd735 100644 --- a/src/app/date-range/date-range.sample.ts +++ b/src/app/date-range/date-range.sample.ts @@ -150,6 +150,12 @@ export class DateRangeSampleComponent { defaultValue: 'MM/dd/yyyy' } }, + hint: { + label: 'Hint Text', + control: { + type: 'text' + } + }, displayFormat: { label: 'Display Format', control: { From 7922c2223616a40f524a96092260015766e41a62 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 16 Oct 2025 07:44:33 +0300 Subject: [PATCH 3/5] fix(datepicker): fix scenario when inputs have no label --- .../date-range-picker/_date-range-picker-theme.scss | 4 ++++ .../src/lib/date-range-picker/date-range-picker.component.ts | 1 + 2 files changed, 5 insertions(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss index 2795c264881..5825fe309be 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss @@ -48,6 +48,10 @@ &.input-has-hint { align-self: center; + + &:not(.input-has-label) { + align-self: flex-start; + } } } @else { align-self: flex-start; diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index a0da954db2e..781315ce2ec 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -541,6 +541,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective /** @hidden @internal */ public get separatorClass(): string { const classes = ['igx-date-range-picker__label']; + if (this.label) classes.push('input-has-label'); if (this.hint) classes.push('input-has-hint'); return classes.join(' '); } From 5fec43e66b6038694e1623127895c7f4690bf13a Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 22 Oct 2025 09:40:20 +0300 Subject: [PATCH 4/5] chore(theming): bump version --- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 37449a322a4..a941b44f90f 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^21.0.2", + "igniteui-theming": "^22.0.0-beta.1", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index c051bc13e2e..418edb6ee79 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -73,7 +73,7 @@ "tslib": "^2.3.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", - "igniteui-theming": "^21.0.2", + "igniteui-theming": "^22.0.0-beta.1", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": { From 292b1bc9931325dbde54146121ca4d4a4a5d0987 Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 22 Oct 2025 10:00:14 +0300 Subject: [PATCH 5/5] chore(theming): bump version --- package-lock.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5849e3ed253..6ef83711baa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^21.0.2", + "igniteui-theming": "^22.0.0-beta.1", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13403,9 +13403,9 @@ } }, "node_modules/igniteui-theming": { - "version": "21.0.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz", - "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==", + "version": "22.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0-beta.1.tgz", + "integrity": "sha512-9+itoHayUT2h029KTxPqI8lG+JG6u2IgcrIbbml+4MWLzF8bRbPQQkGy9JAsOaRp2+FZUspSLh9kyyZCs3gr/g==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": {