feat(date-picker): content project the label #8086 (#8088)

Author: valadzhov

CHANGELOG.md

@@ -9,6 +9,8 @@ All notable changes for each version of this project will be documented in this
     - **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
 - `IgxSelect`
     - Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
+- `IgxDatePicker`
+    - **Breaking Change** - Deprecated the `label` and `labelVisibility` properties.
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -17,6 +19,8 @@ All notable changes for each version of this project will be documented in this
     - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`.
 - ` IgxExcelExporterService`
     - Added `worksheetName` property to the `IgxExcelExporterOptions`, that allows setting the name of the worksheet.
+- `IgxDatePicker`
+    - The `labelVisibility` and the `label` property have been deprecated and now a custom label is set by nesting a <label igxLabel></label> inside the <igx-date-picker><igx-date-picker> tags.
 - `IgxTimePicker`
     - Added a custom label functionality.
 - `IgxCalendar` and `IgxDatePicker` - new `showWeekNumbers` input, that allows showing of the week number at left side of content area.

projects/igniteui-angular/src/lib/date-picker/README.md

@@ -41,6 +41,12 @@ DatePicker with cancel and today buttons
 </igx-date-picker>
 ```
 
+The DatePicker's custom label can be set in the way shown below. If `labelVisibility` is set to `false` and a custom label is not used, a default one will be set.
+````html
+<igx-date-picker>
+    <label igxLabel>Custom label</label>
+</igx-date-picker>
+
 You have also ability to disable the datePicker
 ```html
 <igx-date-picker [disabled]="false">
@@ -123,8 +129,8 @@ The DatePicker action buttons could be retemplated.
 | `weekStart`| `Number \| WEEKDAYS` | Sets on which day will the week start. |
 | `locale` | `string` | Sets the locale used for formatting and displaying the dates in the calendar. For more information check out [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) page for valid formats. |
 | `formatOptions` | `Object` | The format options passed along with the `locale` property used for formatting the dates. |
-| `label` | `string` | Configure the input label text. |
-| `labelVisibility` | `string` | Configure the input label text visibility. |
+| `label` | `string` | Deprecated. Configure the input label text. |	
+| `labelVisibility` | `string` | Deprecated. Configure the input label text visibility. |
 | `format` | `string` | Configure the date display format when in edit mode. Accepts formats using the d, M and y symbols, custom separators and the following pre-defined format options - shortDate, mediumDate, longDate and fullDate. |
 | `mask` | `string` | Configure the date editor mask. Accepts the d, M and y symbols as mask - for example dd-MM-y. |
 | `disabledDates` | `DateRangeDescriptor[]` | Configure the disabled dates. |
@@ -154,4 +160,4 @@ The DatePicker action buttons could be retemplated.
 | `selectDate` | `date: Date` | `void` | Change the calendar selection. Calling this method will emit the `onSelection` event. |
 | `deselectDate` | `void` | Deselects the calendar date and clear input field value. |
 | `triggerTodaySelection` | `void` | Selects today's date in calendar and change the input field value. |
-| `openDialog` | `target?: HTMLElement` | `void` | Opens the dialog or drop down, depending on the mode. |
+| `openDialog` | `target?: HTMLElement` | `void` | Opens the dialog or drop down, depending on the mode. |

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -1,9 +1,15 @@
+<ng-template #labelTemplate>
+    <ng-content select="[igxLabel]"></ng-content>
+</ng-template>
+
 <ng-template #readOnlyDatePickerTemplate>
     <igx-input-group (click)="openDialog()">
+        <label igxLabel *ngIf="!labelDirective&&!labelVisibility">Date</label>
+        <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
         <igx-prefix>
             <igx-icon>today</igx-icon>
         </igx-prefix>
-        <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
+        <label *ngIf="labelVisibility&&!labelDirective" igxLabel>{{label}}</label>
         <input
             class="igx-date-picker__input-date"
             igxInput
@@ -18,10 +24,12 @@
 
 <ng-template #editableDatePickerTemplate>
     <igx-input-group #editableInputGroup>
+        <label igxLabel *ngIf="!labelDirective&&!labelVisibility">Date</label>
+        <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
         <igx-prefix (click)="onOpenClick($event)">
             <igx-icon>today</igx-icon>
         </igx-prefix>
-        <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
+        <label *ngIf="labelVisibility&&!labelDirective" igxLabel>{{label}}</label>
         <input
             class="igx-date-picker__input-date"
             igxInput

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -27,6 +27,7 @@ describe('IgxDatePicker', () => {
         TestBed.configureTestingModule({
             declarations: [
                 IgxDatePickerTestComponent,
+                IgxDatePickerProjectedLabelTestComponent,
                 IgxDatePickerWithWeekStartComponent,
                 IgxDatePickerWithCustomFormatterComponent,
                 IgxDatePickerWithPassedDateComponent,
@@ -149,7 +150,7 @@ describe('IgxDatePicker', () => {
             expect(datePicker.value).toEqual(date);
         });
 
-        it('When labelVisability is set to false the label should not be visible', () => {
+        it('When labelVisibility is set to false the label should not be visible', () => {
             let label = fixture.debugElement.query(By.directive(IgxLabelDirective));
 
             expect(label.nativeElement.innerText).toBe(datePicker.label);
@@ -158,7 +159,7 @@ describe('IgxDatePicker', () => {
             fixture.detectChanges();
 
             label = fixture.debugElement.query(By.directive(IgxLabelDirective));
-            expect(label).toBeNull();
+            expect(label.nativeElement.innerText).toBe('Date');
         });
 
         it('When update label property it should reflect on the label text of the datepicker', () => {
@@ -178,7 +179,7 @@ describe('IgxDatePicker', () => {
             fixture.detectChanges();
 
             let label = fixture.debugElement.query(By.directive(IgxLabelDirective));
-            expect(label).toBeNull();
+            expect(label.nativeElement.innerText).toBe('Date');
 
             fixture.componentInstance.labelVisibility = true;
             fixture.detectChanges();
@@ -187,6 +188,35 @@ describe('IgxDatePicker', () => {
             expect(label).not.toBeNull();
         });
 
+        it('should display default and custom label', () => {
+            const fixtureProjectedLabel = TestBed.createComponent(IgxDatePickerProjectedLabelTestComponent);
+            const dom = fixtureProjectedLabel.debugElement;
+            const testComponent = fixtureProjectedLabel.componentInstance;
+            fixtureProjectedLabel.detectChanges();
+
+            let label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            expect(label).toEqual(testComponent.customLabel);
+
+            testComponent.customLabelVisibility = false;
+            fixtureProjectedLabel.detectChanges();
+
+            label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            expect(label).toEqual('Date');
+
+            testComponent.labelVisibility = false;
+            fixtureProjectedLabel.detectChanges();
+            testComponent.customLabelVisibility = false;
+            fixtureProjectedLabel.detectChanges();
+            label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            fixtureProjectedLabel.detectChanges();
+            expect(label).toEqual('Date');
+
+            testComponent.customLabelVisibility = true;
+            fixtureProjectedLabel.detectChanges();
+            label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            expect(label).toEqual(testComponent.customLabel);
+        });
+
         it('Handling keyboard navigation with `space`(open) and `esc`(close) buttons', fakeAsync(() => {
             const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
             UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
@@ -1520,6 +1550,21 @@ export class IgxDatePickerWithWeekStartComponent {
     @ViewChild(IgxDatePickerComponent, { static: true }) public datePicker: IgxDatePickerComponent;
 }
 
+@Component({
+    template: `
+        <igx-date-picker [labelVisibility]="labelVisibility">
+            <label igxLabel *ngIf="customLabelVisibility">{{ customLabel }}</label>
+        </igx-date-picker>
+    `
+})
+export class IgxDatePickerProjectedLabelTestComponent {
+    @ViewChild(IgxDatePickerComponent, { static: true }) public datePicker: IgxDatePickerComponent;
+
+    public customLabelVisibility = true;
+    public customLabel = 'Custom label';
+    public labelVisibility = true;
+}
+
 @Component({
     template: `
         <igx-date-picker [labelVisibility]="labelVisibility"></igx-date-picker>
@@ -1530,7 +1575,6 @@ export class IgxDatePickerTestComponent {
 
     public labelVisibility = true;
 }
-
 @Component({
     template: `
         <igx-date-picker [value]="date" [formatOptions]="formatOptions"></igx-date-picker>

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -61,6 +61,8 @@ import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from '.
 import { IgxCalendarContainerComponent } from './calendar-container.component';
 import { InteractionMode } from '../core/enums';
 import { fadeIn, fadeOut } from '../animations/fade';
+import { IgxLabelDirective } from '../directives/label/label.directive';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 
@@ -161,7 +163,18 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * ```html
      * <igx-date-picker [label]="Calendar"></igx-date-picker>
      * ```
+     * @deprecated Use igxLabel inside the date picker to change the label:
+     * ````html
+     * <igx-date-picker>
+     *      <label igxLabel>Custom label</label>
+     * </igx-date-picker>
+     * ````
+     * to set a custom label.
      */
+    @DeprecateProperty(`Use igxLabel inside the date picker to change the label:
+    <igx-date-picker>
+        <label igxLabel>Custom label</label>
+    </igx-date-picker> `)
     @Input()
     public label = 'Date';
 
@@ -171,7 +184,18 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * By default the visibility is set to true.
      * @example
      * <igx-date-picker [labelVisibility]="false"></igx-date-picker>
+     * @deprecated Use
+     * ````html
+     * <igx-date-picker>
+     *      <label igxLabel>Custom label</label>
+     * </igx-date-picker>
+     * ````
+     * to set a custom label.
      */
+    @DeprecateProperty(`Deprecated. Use
+    <igx-date-picker>
+        <label igxLabel>Custom label</label>
+    </igx-date-picker> to set a label.` )
     @Input()
     public labelVisibility = true;
 
@@ -631,6 +655,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     @ViewChild('readOnlyDatePickerTemplate', { read: TemplateRef, static: true })
     protected readOnlyDatePickerTemplate: TemplateRef<any>;
 
+    /*
+     * @hidden @internal
+     */
+    @ContentChild(IgxLabelDirective)
+    public labelDirective: IgxLabelDirective;
+
     /*
      * @hidden
      */

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

@@ -4,6 +4,7 @@ <h4 class="sample-title">Default Date Picker - dialog mode</h4>
         <p class="sample-description">Added buttons - today and cancel</p>
         <div class="preview">
             <igx-date-picker #datePicker  [showWeekNumbers]="true" cancelButtonLabel="cancel" todayButtonLabel="today">
+                <label igxLabel>Custom Label</label>
             </igx-date-picker>
             <igx-buttongroup class="datepicker-actions">
                 <button igxButton igxRipple (click)="d()">Today</button>