Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/toolbar-refactor

Author: rkaraivanov

CHANGELOG.md

@@ -7,6 +7,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxInputGroup`
     - **Breaking Chage** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property. 
     - **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`
@@ -15,8 +19,11 @@ 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.
 
 ## 10.1.0
 

projects/igniteui-angular/src/lib/avatar/README.md

@@ -5,7 +5,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 
 # Usage
 ```html
-<igx-avatar roundShape="true" icon="person" bgColor="#0375be" data-init="SS">
+<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
 </igx-avatar>
 ```
 
@@ -27,7 +27,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 
 Using `igx-avatar` tag to include it into your app.
 ```html
-<igx-avatar roundShape="true" icon="person" bgColor="#0375be" data-init="SS">
+<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
 </igx-avatar>
 ```
 

projects/igniteui-angular/src/lib/avatar/avatar.component.ts

@@ -47,7 +47,7 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
  *
  * @example
  * ```html
- * <igx-avatar initials="MS" roundShape="true" size="large">
+ * <igx-avatar initials="MS" [roundShape]="true" size="large">
  * </igx-avatar>
  * ```
  */
@@ -145,12 +145,12 @@ export class IgxAvatarComponent implements OnInit {
     public id = `igx-avatar-${NEXT_ID++}`;
 
     /**
-     * Sets a round shape to the avatar, if `roundShape` is set to `true`.
+     * Sets a round shape to the avatar, if `[roundShape]` is set to `true`.
      * By default the shape of the avatar is a square.
      *
      * @example
      * ```html
-     * <igx-avatar roundShape="true" ></igx-avatar>
+     * <igx-avatar [roundShape]="true" ></igx-avatar>
      * ```
      */
 

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -605,8 +605,7 @@
         }
 
         %cal-value,
-        %cal-value--label,
-        {
+        %cal-value--label {
             // 100 divided by the number of weekdays
             min-width: 14.28%;
 
@@ -683,11 +682,7 @@
 
                 &::after {
                     top: 100%;
-                    @if $not-bootstrap-theme{
-                        height: ($cal-row-padding / 2) + rem(2px);
-                    } @else {
-                        height: $cal-row-padding + rem(5px);
-                    }
+                    height: if($not-bootstrap-theme, ($cal-row-padding / 2) + rem(2px), $cal-row-padding + rem(5px));
                 }
 
                 &::before {
@@ -718,7 +713,7 @@
         }
 
         &:nth-child(2) {
-            @if $not-bootstrap-theme{
+            @if $not-bootstrap-theme {
                 margin-top: 0;
             }
         }
@@ -733,7 +728,7 @@
                 }
             }
 
-            @if $bootstrap-theme{
+            @if $bootstrap-theme {
                 margin-bottom: 0;
             }
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -30,6 +30,10 @@
         igx-display-container {
             @extend %grid-display-container-thead !optional;
         }
+
+        &:focus {
+            @extend %disable-focus-styles !optional;
+        }
     }
 
     @include e(thead-title) {
@@ -64,6 +68,10 @@
 
     @include e(tbody-content) {
         @extend %grid-tbody !optional;
+
+        &:focus {
+            @extend %disable-focus-styles !optional;
+        }
     }
 
     @include e(tbody-message) {
@@ -104,6 +112,10 @@
 
     @include e(tfoot) {
         @extend %grid-tfoot !optional;
+
+        &:focus {
+            @extend %disable-focus-styles !optional;
+        }
     }
 
     @include e(tfoot-thumb) {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -696,6 +696,10 @@
         indigo-design: 600,
     ), $variant);
 
+    %disable-focus-styles {
+        outline: 0;
+    }
+
     %grid-display {
         position: relative;
         display: grid;

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
      */

projects/igniteui-angular/src/lib/select/select.component.html

@@ -12,7 +12,7 @@
         [value]="this.selectionValue"
         role="combobox"
         aria-haspopup="listbox"
-        [attr.aria-labelledby]="this.label ? this.label.id : ''"
+        [attr.aria-labelledby]="this.label?.id"
         [attr.aria-expanded]="!this.collapsed"
         [attr.aria-owns]="this.listId"
         [attr.aria-activedescendant]="!this.collapsed ? this.focusedItem?.id : null"
@@ -40,7 +40,8 @@
     </div>
 
     <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->
-    <div #scrollContainer class="igx-drop-down__list-scroll" unselectable="on" [style.maxHeight]="maxHeight" [attr.id]="this.listId" role="listbox">
+    <div #scrollContainer class="igx-drop-down__list-scroll" unselectable="on" [style.maxHeight]="maxHeight"
+        [attr.id]="this.listId" role="listbox" [attr.aria-labelledby]="this.label?.id">
         <ng-content select="igx-select-item, igx-select-item-group"></ng-content>
     </div>