style(date-range-picker): fix datepicker label positioning

Author: didimmova

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;
         }
     }
 

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(' ');
     }
 

src/app/date-range/date-range.sample.html

@@ -46,6 +46,9 @@ <h6>Angular Date Range Picker, two inputs, template-driven form</h6>
           type="text"
           [placeholder]="properties.placeholder"
         />
+        @if (properties.hint) {
+            <span igxHint>{{ properties.hint }}</span>
+        }
       </igx-date-range-start>
       <igx-date-range-end>
         <igx-picker-toggle igxPrefix>

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: {