feat(checkbox): add the ability to disable css transitions

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes for each version of this project will be documented in this
 ## 7.0.0
 - Updated package dependencies to Angular 7 ([#3000](https://github.com/IgniteUI/igniteui-angular/pull/3000))
 
+## 6.2.2
+- `igx-checkbox`:
+    - Added a new input property - `disableTransitions`. It allows disabling all CSS transitions on the `igx-checkbox` component for performance optimization.
+
 ## 6.2.1
 - `igx-drop-down`:
     - Added a new property `maxHeight`, defining the max height of the drop down.

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

@@ -75,7 +75,8 @@ To disable the ripple effect, do:
 | `@Input()` indeterminate | boolean | Specifies the indeterminate state of the checkbox. |
 | `@Input()` required | boolean | Specifies the required state of the checkbox. |
 | `@Input()` disabled | boolean | Specifies the disabled state of the checkbox. |
-| `@Input()` disableRipple | boolean | Specifies the whether the ripple effect should be disabled for the checkbox. |
+| `@Input()` disableRipple | boolean | Specifies whether the ripple effect should be disabled for the checkbox. |
+| `@Input()` disableTransitions | boolean | Specifies whether CSS transitions should be disabled for the checkbox. |
 | `@Input()` labelPosition | string `|` enum LabelPosition | Specifies the position of the text label relative to the checkbox element. |
 | `@Input("aria-labelledby")` ariaLabelledBy | string | Specify an external element by id to be used as label for the checkbox. |
 | `@Output()` change | EventEmitter<IChangeCheckboxEventArgs> | Emitted when the checkbox checked value changes. |

projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts

@@ -22,6 +22,7 @@ describe('IgxCheckbox', () => {
                 CheckboxRequiredComponent,
                 CheckboxExternalLabelComponent,
                 CheckboxInvisibleLabelComponent,
+                CheckboxDisabledTransitionsComponent,
                 IgxCheckboxComponent
             ],
             imports: [FormsModule, IgxRippleModule]
@@ -156,6 +157,21 @@ describe('IgxCheckbox', () => {
         expect(testInstance.subscribed).toBe(false);
     });
 
+    it('Should be able to enable/disable CSS transitions', () => {
+        const fixture = TestBed.createComponent(CheckboxDisabledTransitionsComponent);
+        const testInstance = fixture.componentInstance;
+        const checkboxInstance = testInstance.cb;
+        const checkboxHost = fixture.debugElement.query(By.css('igx-checkbox')).nativeElement;
+        fixture.detectChanges();
+
+        expect(checkboxInstance.disableTransitions).toBe(true);
+        expect(checkboxHost.classList).toContain('igx-checkbox--plain');
+
+        testInstance.cb.disableTransitions = false;
+        fixture.detectChanges();
+        expect(checkboxHost.classList).not.toContain('igx-checkbox--plain');
+    });
+
     it('Required state', () => {
         const fixture = TestBed.createComponent(CheckboxRequiredComponent);
         const testInstance = fixture.componentInstance;
@@ -281,3 +297,10 @@ class CheckboxInvisibleLabelComponent {
     @ViewChild('cb') public cb: IgxCheckboxComponent;
     label = 'Invisible Label';
 }
+
+@Component({
+    template: `<igx-checkbox #cb [disableTransitions]="true"></igx-checkbox>`
+})
+class CheckboxDisabledTransitionsComponent {
+    @ViewChild('cb') public cb: IgxCheckboxComponent;
+}

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

@@ -264,6 +264,19 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
      */
     @HostBinding('class.igx-checkbox--disabled')
     @Input() public disabled = false;
+    /**
+     * Sets/gets whether the checkbox should disable all css transitions.
+     * Default value is `false`.
+     * ```html
+     * <igx-checkbox [disableTransitions]="true"></igx-checkbox>
+     * ```
+     * ```typescript
+     * let disableTransitions = this.checkbox.disableTransitions;
+     * ```
+     * @memberof IgxCheckboxComponent
+     */
+    @HostBinding('class.igx-checkbox--plain')
+    @Input() public disableTransitions = false;
     /**
      *@hidden
      */

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss

@@ -124,6 +124,10 @@
         }
     }
 
+    @include m(plain) {
+        @extend %cbx-display--plain !optional;
+    }
+
     @include mx(focused, checked) {
         @include e(ripple) {
             @extend %cbx-ripple--focused !optional;

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -271,6 +271,15 @@
             opacity: .12;
         }
     }
+
+    %cbx-display--plain {
+        %cbx-composite,
+        %cbx-composite::after,
+        %cbx-composite-mark,
+        %cbx-composite-mark--x {
+            transition: none;
+        }
+    }
 }
 
 /// Adds typography styles for the igx-checkbox component.

src/app/input/input.sample.html

@@ -65,7 +65,11 @@ <h4 class="form-title igx-typography__overline">Delete Contacts</h4>
                         <igx-avatar src="assets/images/avatar/22.jpg" roundShape="true"></igx-avatar>
                         <span class="name">Alicia Keys</span>
                     </div>
-                    <igx-checkbox [(ngModel)]="user.registered">Value</igx-checkbox>
+                    <igx-checkbox
+                        [(ngModel)]="user.registered"
+                        [disableTransitions]="true">
+                        Value
+                    </igx-checkbox>
                 </div>
 
                 <div class="checkbox-sample">