From 68b18e4b50dea28a1ea0faeac4908238f684f9eb Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 27 Nov 2018 17:07:08 +0200 Subject: [PATCH] feat(checkbox): add the ability to disable css transitions (#3144) * feat(checkbox): add the ability to disable css transitions * Update CHANGELOG.md --- CHANGELOG.md | 4 ++++ .../src/lib/checkbox/README.md | 3 ++- .../lib/checkbox/checkbox.component.spec.ts | 23 +++++++++++++++++++ .../src/lib/checkbox/checkbox.component.ts | 13 +++++++++++ .../checkbox/_checkbox-component.scss | 4 ++++ .../components/checkbox/_checkbox-theme.scss | 9 ++++++++ src/app/input/input.sample.html | 6 ++++- 7 files changed, 60 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a5e9f17f66f..4c5f0c4ab1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ All notable changes for each version of this project will be documented in this - Updated package dependencies to Angular 7 ([#3000](https://github.com/IgniteUI/igniteui-angular/pull/3000)) - Themes: Add dark schemas and mixins (PR [#3025](https://github.com/IgniteUI/igniteui-angular/pull/3025)) +## 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 ### Features - `igxGrid`, `igxChip`: Add display density DI token to igxGrid and igxChip ([#2804](https://github.com/IgniteUI/igniteui-angular/issues/2804)) diff --git a/projects/igniteui-angular/src/lib/checkbox/README.md b/projects/igniteui-angular/src/lib/checkbox/README.md index bebc41fdd3e..5775bf8f317 100644 --- a/projects/igniteui-angular/src/lib/checkbox/README.md +++ b/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 | Emitted when the checkbox checked value changes. | diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts index 734e5107d5d..b0316738f9e 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts +++ b/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: `` +}) +class CheckboxDisabledTransitionsComponent { + @ViewChild('cb') public cb: IgxCheckboxComponent; +} diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts index 7e384ca49e6..b9ddd5c1d3e 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts +++ b/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 + * + * ``` + * ```typescript + * let disableTransitions = this.checkbox.disableTransitions; + * ``` + * @memberof IgxCheckboxComponent + */ + @HostBinding('class.igx-checkbox--plain') + @Input() public disableTransitions = false; /** *@hidden */ diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss index e10920f8155..ea514a83db3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss +++ b/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; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 27af5cdcae2..caeb62f4215 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/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. diff --git a/src/app/input/input.sample.html b/src/app/input/input.sample.html index 8f5d67c6dee..6fe1645245a 100644 --- a/src/app/input/input.sample.html +++ b/src/app/input/input.sample.html @@ -65,7 +65,11 @@

Delete Contacts

Alicia Keys - Value + + Value +