Skip to content

Commit

Permalink
refactor: remove deprecations without automatic update (#202)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
* **card**: remove deprecated selectable, selected, disabled and selectedChange property. Please update to the `nx-selectable-card` component
* **datefield**: remove deprecated format function which is not needed to be called anymore
* **icon-registry**: remove deprecated `getSvgIcon` method. Use `getIcon` instead.
* **radio-toggle**: remove deprecated `selection` setter
  • Loading branch information
@Phil147
Phil147 authored and GitHub Enterprise committed Jan 26, 2021
1 parent 1440990 commit c5a7830
Show file tree
Hide file tree
Showing 8 changed files with 7 additions and 330 deletions.
135 changes: 3 additions & 132 deletions projects/ng-aquila/src/card/card.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {NxCardModule} from './card.module';
@Directive()
abstract class CardTest {
@ViewChild(NxCardComponent) cardInstance: NxCardComponent;
selected = false;
}

describe('NxCardComponent', () => {
Expand All @@ -28,24 +27,10 @@ describe('NxCardComponent', () => {
cardNativeElement = (fixture.nativeElement.querySelector('nx-card') as HTMLButtonElement);
}

function assertSelected(checked: boolean) {
fixture.detectChanges();
expect(testInstance.selected).toBe(checked);
expect(cardInstance.selected).toBe(checked);
expect(cardNativeElement.classList.contains('is-selected')).toBe(checked);
}

function pressKey(key: string) {
cardNativeElement.dispatchEvent(new KeyboardEvent('keydown', { key }));
fixture.detectChanges();
}

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [
BasicCard,
DynamicCard,
DisabledCard
BasicCard
],
imports: [
NxCardModule
Expand All @@ -63,97 +48,8 @@ describe('NxCardComponent', () => {
createTestComponent(BasicCard);
});

it('has no tabindex', () => {
expect(cardNativeElement.getAttribute('tabindex')).toBe('');
});

it('is not selectable', () => {
expect(cardNativeElement.classList.contains('is-selectable')).toBe(false);
});

it('is not clickable', () => {
cardNativeElement.click();
expect(cardNativeElement.classList.contains('is-selected')).toBe(false);
});
});

describe('disabled card', () => {

it('has tab index -1', () => {
createTestComponent(DisabledCard);

expect(cardNativeElement.getAttribute('tabindex')).toBe('-1');
});

it('is not clickable', () => {
createTestComponent(DisabledCard);

cardNativeElement.click();
expect(cardNativeElement.classList.contains('is-selected')).toBe(false);
});
});

describe('selectable card', () => {
beforeEach(() => {
createTestComponent(DynamicCard);
(testInstance as DynamicCard).selectable = true;
fixture.detectChanges();
});

it('is not selected', () => {
assertSelected(false);
});

it('has a tabindex', () => {
expect(cardNativeElement.getAttribute('tabindex')).toBe('0');
});

it('should change the selectable-state on binding changes', waitForAsync(() => {
expect(cardNativeElement.classList.contains('is-selectable')).toBe(true);
}));

it('toggles the selected state based on [selected] input', () => {
fixture.componentInstance.selected = true;
assertSelected(true);
});

it('toggles the selected state based on user actions (click)', () => {
cardNativeElement.click();
assertSelected(true);
cardNativeElement.click();
assertSelected(false);
});

it('toggles the selected state based on user actions (enter)', () => {
pressKey('Enter');
assertSelected(true);
pressKey('Enter');
assertSelected(false);
});
});

describe('programatic changes', () => {
beforeEach(() => {
createTestComponent(BasicCard);
});

it('is selectable', () => {
cardInstance.selectable = true;
fixture.detectChanges();
expect(cardNativeElement.classList.contains('is-selectable')).toBe(true);
});

it('is selected', () => {
cardInstance.selectable = true;
cardInstance.selected = true;
fixture.detectChanges();
expect(cardNativeElement.classList.contains('is-selected')).toBe(true);
});

it('updates view on [disabled] change', () => {
cardInstance.disabled = true;
fixture.detectChanges();
expect(cardNativeElement.classList.contains('is-disabled')).toBe(true);
it('has no tabindex attribute', () => {
expect(cardNativeElement.getAttribute('tabindex')).toBe(null);
});
});

Expand All @@ -178,28 +74,3 @@ describe('NxCardComponent', () => {
})
class BasicCard extends CardTest {
}

@Component({
template: `
<nx-card
[selectable]="selectable"
[(selected)]="selected">Hello Text
</nx-card>
`
})
class DynamicCard extends CardTest {
selectable = false;
selected = false;
}

@Component({
template: `
<nx-card
selectable="true"
[disabled]="disabled">Hello Text
</nx-card>
`
})
class DisabledCard extends CardTest {
disabled = true;
}
116 changes: 4 additions & 112 deletions projects/ng-aquila/src/card/card.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,129 +8,21 @@ import { FocusMonitor } from '@angular/cdk/a11y';
selector: 'nx-card',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'nx-card',
'[class.is-selectable]': 'selectable',
'[class.is-selected]': 'selected',
'[class.is-disabled]': 'disabled',
'[attr.aria-disabled]': 'disabled',
'(click)': '_toggleSelected()',
'(keydown.enter)': '_toggleSelected()',
'[attr.tabindex]': '_getTabindex()'
'class': 'nx-card'
}
})
export class NxCardComponent implements OnDestroy {
_tabindex: string;

/**
* Whether this card is selectable or not.
*
* The selectable property of the card is deprecated.
* Please use the selectable card component instead.
*
* @deprecated
* @deletion-target 11.0.0
*/
@Input()
set selectable(value: boolean) {
this._selectable = coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
}

get selectable(): boolean {
return this._selectable;
}

private _selectable: boolean;

/**
* Whether this card is selected or not.
*
* The selected property of the card is deprecated.
* Please use the selectable card component instead.
*
* @deprecated
* @deletion-target 11.0.0
*/
@Input()
set selected(value: boolean) {
this._selected = coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
}

get selected(): boolean {
return this._selected;
}

private _selected: boolean;

/**
* Whether a selectable card is disabled or not.
*
* The disabled property of the card will be deprecated,
* as its selectable properties are deprecated as well.
* Please use the selectable card component instead.
*
* @deprecated
* @deletion-target 11.0.0
*/
@Input()
set disabled(value: boolean) {
this._disabled = coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
}

get disabled(): boolean {
return this._disabled;
}

private _disabled: boolean = false;

/**
* Event emitted when the selected value has changed.
*
* This output property of the card is deprecated,
* as its selectable properties are deprecated as well.
* Please use the selectable card component instead.
*
* @deprecated
* @deletion-target 11.0.0
*/
@Output() selectedChange = new EventEmitter<boolean>();

constructor(
private _changeDetectorRef: ChangeDetectorRef,
@Attribute('tabindex') tabindex: string,
private _elementRef: ElementRef,
private _focusMonitor: FocusMonitor
) {
this._tabindex = tabindex;
// we still listen for focus in case the user set a tabindex on the element
// the focus monitor only adds the cdk-keyboard-focus class if the element is focusable
// meaning it needs a tabindex in this case
this._focusMonitor.monitor(this._elementRef);
}

ngOnDestroy() {
this._focusMonitor.stopMonitoring(this._elementRef);
}

_toggleSelected(): void {
if (this.selectable && !this.disabled) {
this.selected = !this.selected;
this.selectedChange.emit(this.selected);
}
}

_getTabindex(): string {
if (this.disabled) {
return '-1';
}

if (this.selectable) {
return this._tabindex || '0';
}

return this._tabindex || '';
}

static ngAcceptInputType_selectable: BooleanInput;
static ngAcceptInputType_selected: BooleanInput;
static ngAcceptInputType_disabled: BooleanInput;
}
12 changes: 0 additions & 12 deletions projects/ng-aquila/src/card/card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,6 @@ b2c: true
expert: true
stable: done
---
<div class="docs-deprecation-warning">
<h3>Deprecation warning</h3>
Note that the following properties of the card are deprecated and will be removed in v11:
<ul class="nx-margin-left-3m">
<li>selectable</li>
<li>selected</li>
<li>disabled</li>
<li>selectedChange</li>
</ul>
<br>
Please use the <strong>Selectable Card</strong> component instead.
</div>

Use this component to present a card with different options.

Expand Down
40 changes: 0 additions & 40 deletions projects/ng-aquila/src/card/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,48 +15,8 @@
&:hover, &:focus {
outline: none;
}

&.is-selectable {
cursor: pointer;

&:hover {
@include var(background, card-background-hover-color);
}
}

&.is-selected {
box-shadow: nx-box-shadow(l);
@include var(background, card-background-selected-color);
}

&.is-disabled {
cursor: not-allowed;
opacity: 0.4;

&:hover {
@include var(background, card-background-color);
}
}
}

:host.cdk-keyboard-focused {
@include focus-style;
}

@media screen and (-ms-high-contrast: active) {
:host.is-selectable {
border-color: buttonText;
}

:host.is-selected {
border-width: nx-border-size(l);
padding: nx-spacer(m) - nx-border-size(l);
border-color: highlight;
}

:host.is-disabled {
opacity: 1;
border-color: GrayText;
color: GrayText;
}
}
11 changes: 0 additions & 11 deletions projects/ng-aquila/src/datefield/datefield.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,17 +255,6 @@ export class NxDatefieldDirective<D> implements AfterContentInit, ControlValueAc

private _localeSubscription = Subscription.EMPTY;

/**
* @deprecated
* @deletion-target 10.0.0 Calling `format` manually is not needed anymore and can be removed.
*
* This will force the current value to be parsed again by the given DateAdapter.
* That's a convenience method so you can trigger it manually.
*/
public format() {
this.value = this.value;
}

constructor(
private _elementRef: ElementRef,
@Optional() public _dateAdapter: NxDateAdapter<D>,
Expand Down
Loading

0 comments on commit c5a7830

Please sign in to comment.