Merge branch 'master' into ddincheva/monthPickerAnimation

Author: ddincheva

CHANGELOG.md

@@ -5,8 +5,15 @@ All notable changes for each version of this project will be documented in this
 
 ### General
 - `IgxInputGroup`
-    - **Breaking Chage** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property. 
+    - **Breaking Change** - 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.
+- `IgxOverlay`
+    - **Breaking Change** - `target` property in `PositionSettings` has been deprecated. You can set the attaching target for the component to show in `OverlaySettings` instead.
+- `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,9 +22,15 @@ 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.
+- `IgxOverlay`
+    - The `PositionSettings` `target` property has been deprecated and moved to `OverlaySettings`.
+    - An optional Point/HTML Element parameter `target` has been added to the `position()` method
+    
 ## 10.1.0
 
 ### General

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/combo/combo.component.ts

@@ -1228,7 +1228,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public ngOnInit() {
         this.ngControl = this._injector.get<NgControl>(NgControl, null);
-        this._overlaySettings.positionStrategy.settings.target = this.elementRef.nativeElement;
+        this._overlaySettings.target = this.elementRef.nativeElement;
         this.selection.set(this.id, new Set());
         this._iconService.addSvgIconFromText(caseSensitiveIcon.name, caseSensitiveIcon.value, 'case-sensitive');
     }

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,14 +696,18 @@
         indigo-design: 600,
     ), $variant);
 
+    %disable-focus-styles {
+        outline: 0;
+    }
+
     %grid-display {
         position: relative;
         display: grid;
         grid-template-rows: auto auto auto 1fr auto auto;
         grid-template-columns: 1fr;
         overflow: hidden;
         box-shadow: $grid-shadow;
-        
+
         @if $variant == 'fluent' {
             box-shadow: 0 0 0 1px --var($theme, 'grid-border-color');
         }
@@ -1139,16 +1143,19 @@
     %igx-grid__td--bool {
         justify-content: center;
 
-        igx-icon {
+        %igx-icon-display {
             height: rem(18px);
             width: rem(18px);
             font-size: rem(18px);
+        }
+
+        %igx-icon--error {
             color: igx-color($palette, 'grays', 500);
         }
     }
 
     %igx-grid__td--bool-true {
-        igx-icon {
+        %igx-icon--success {
             color: igx-color($palette, 'grays', 700);
         }
     }

projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-component.scss

@@ -15,6 +15,16 @@
         @extend %igx-icon-display !optional;
         @extend %igx-icon--inactive !optional;
     }
+
+    @include m(success) {
+        @extend %igx-icon-display !optional;
+        @extend %igx-icon--success !optional;
+    }
+
+    @include m(error) {
+        @extend %igx-icon-display !optional;
+        @extend %igx-icon--error !optional;
+    }
 }
 
 @include b(igx-svg-container) {

projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss

@@ -74,6 +74,14 @@
         }
     }
 
+    %igx-icon--success {
+        color: igx-color(map-get($theme, 'palette'), 'success');
+    }
+
+    %igx-icon--error {
+        color: igx-color(map-get($theme, 'palette'), 'error');
+    }
+
     %igx-icon--inactive {
         color: --var($theme, 'disabled-color') !important;
         opacity: .54;

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. |