Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(wizard): remove deprecated, undocumented inline wizard mode #419

Merged
merged 1 commit into from
Dec 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .storybook/stories/modal/modal.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ const defaultStory: Story = args => ({
[clrModalCloseButtonAriaLabel]="clrModalCloseButtonAriaLabel"
[clrModalLabelledById]="clrModalLabelledById"
[clrModalOpen]="clrModalOpen"
[clrModalOverrideScrollService]="clrModalOverrideScrollService"
[clrModalPreventClose]="clrModalPreventClose"
[clrModalSize]="clrModalSize"
[clrModalSkipAnimation]="clrModalSkipAnimation"
Expand Down
14 changes: 3 additions & 11 deletions projects/angular/clarity.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -2861,8 +2861,6 @@ export class ClrModal implements OnChanges, OnDestroy {
// (undocumented)
altClose: EventEmitter<boolean>;
// (undocumented)
bypassScrollService: boolean;
// (undocumented)
closable: boolean;
// (undocumented)
close(): void;
Expand Down Expand Up @@ -2899,7 +2897,7 @@ export class ClrModal implements OnChanges, OnDestroy {
// (undocumented)
stopClose: boolean;
// (undocumented)
static ɵcmp: i0.ɵɵComponentDeclaration<ClrModal, "clr-modal", never, { "_open": "clrModalOpen"; "closable": "clrModalClosable"; "closeButtonAriaLabel": "clrModalCloseButtonAriaLabel"; "size": "clrModalSize"; "staticBackdrop": "clrModalStaticBackdrop"; "skipAnimation": "clrModalSkipAnimation"; "bypassScrollService": "clrModalOverrideScrollService"; "stopClose": "clrModalPreventClose"; "labelledBy": "clrModalLabelledById"; }, { "_openChanged": "clrModalOpenChange"; "altClose": "clrModalAlternateClose"; }, never, [".modal-nav", ".modal-title", ".modal-body", ".modal-footer"], false, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ClrModal, "clr-modal", never, { "_open": "clrModalOpen"; "closable": "clrModalClosable"; "closeButtonAriaLabel": "clrModalCloseButtonAriaLabel"; "size": "clrModalSize"; "staticBackdrop": "clrModalStaticBackdrop"; "skipAnimation": "clrModalSkipAnimation"; "stopClose": "clrModalPreventClose"; "labelledBy": "clrModalLabelledById"; }, { "_openChanged": "clrModalOpenChange"; "altClose": "clrModalAlternateClose"; }, never, [".modal-nav", ".modal-title", ".modal-body", ".modal-footer"], false, never>;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration<ClrModal, never>;
}
Expand Down Expand Up @@ -4509,7 +4507,7 @@ export class ClrVerticalNavModule {

// @public (undocumented)
export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
constructor(platformId: any, navService: WizardNavigationService, pageCollection: PageCollectionService, buttonService: ButtonHubService, headerActionService: HeaderActionService, elementRef: ElementRef, differs: IterableDiffers);
constructor(platformId: any, navService: WizardNavigationService, pageCollection: PageCollectionService, buttonService: ButtonHubService, headerActionService: HeaderActionService, differs: IterableDiffers);
// Warning: (ae-forgotten-export) The symbol "ButtonHubService" needs to be exported by the entry point index.d.ts
//
// (undocumented)
Expand Down Expand Up @@ -4543,8 +4541,6 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
get isFirst(): boolean;
// (undocumented)
get isLast(): boolean;
// (undocumented)
get isStatic(): boolean;
modalCancel(): void;
// Warning: (ae-forgotten-export) The symbol "WizardNavigationService" needs to be exported by the entry point index.d.ts
//
Expand Down Expand Up @@ -4577,10 +4573,6 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
set stopCancel(value: boolean);
// (undocumented)
get stopCancel(): boolean;
// (undocumented)
get stopModalAnimations(): string;
// @deprecated (undocumented)
_stopModalAnimations: boolean;
set stopNavigation(value: boolean);
// (undocumented)
get stopNavigation(): boolean;
Expand All @@ -4594,7 +4586,7 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
// (undocumented)
wizardTitle: ElementRef;
// (undocumented)
static ɵcmp: i0.ɵɵComponentDeclaration<ClrWizard, "clr-wizard", never, { "size": "clrWizardSize"; "closable": "clrWizardClosable"; "forceForward": "clrWizardForceForwardNavigation"; "clrWizardOpen": "clrWizardOpen"; "stopNext": "clrWizardPreventDefaultNext"; "stopCancel": "clrWizardPreventDefaultCancel"; "stopNavigation": "clrWizardPreventNavigation"; "disableStepnav": "clrWizardDisableStepnav"; "_stopModalAnimations": "clrWizardPreventModalAnimation"; }, { "_openChanged": "clrWizardOpenChange"; "onCancel": "clrWizardOnCancel"; "wizardFinished": "clrWizardOnFinish"; "onReset": "clrWizardOnReset"; "currentPageChanged": "clrWizardCurrentPageChanged"; "onMoveNext": "clrWizardOnNext"; "onMovePrevious": "clrWizardOnPrevious"; }, ["pages", "headerActions"], ["clr-wizard-title", "clr-wizard-header-action", "*", "clr-wizard-button"], false, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ClrWizard, "clr-wizard", never, { "size": "clrWizardSize"; "closable": "clrWizardClosable"; "forceForward": "clrWizardForceForwardNavigation"; "clrWizardOpen": "clrWizardOpen"; "stopNext": "clrWizardPreventDefaultNext"; "stopCancel": "clrWizardPreventDefaultCancel"; "stopNavigation": "clrWizardPreventNavigation"; "disableStepnav": "clrWizardDisableStepnav"; }, { "_openChanged": "clrWizardOpenChange"; "onCancel": "clrWizardOnCancel"; "wizardFinished": "clrWizardOnFinish"; "onReset": "clrWizardOnReset"; "currentPageChanged": "clrWizardCurrentPageChanged"; "onMoveNext": "clrWizardOnNext"; "onMovePrevious": "clrWizardOnPrevious"; }, ["pages", "headerActions"], ["clr-wizard-title", "clr-wizard-header-action", "*", "clr-wizard-button"], false, never>;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration<ClrWizard, never>;
}
Expand Down
8 changes: 0 additions & 8 deletions projects/angular/src/deprecations.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { ClrDatagrid } from './data/datagrid/datagrid';
import { ClrDatagridColumnToggle } from './data/datagrid/datagrid-column-toggle';
import { ClrDatagridColumnToggleButton } from './data/datagrid/datagrid-column-toggle-button';
import { ClrDatagridColumnToggleTitle } from './data/datagrid/datagrid-column-toggle-title';
import { ClrWizard } from './wizard/wizard';

describe('Deprecations', () => {
// When we deprecate some code, we should write a test to verify it is still in the bundle
Expand All @@ -26,11 +25,4 @@ describe('Deprecations', () => {
expect(propTest.set).toBeDefined();
});
});

describe('3.0', () => {
it('should deprecate inline wizard inputs', () => {
const propTest = Object.getOwnPropertyDescriptor(ClrWizard.prototype, 'stopModalAnimations');
expect(propTest.get).toBeDefined();
});
});
});
4 changes: 1 addition & 3 deletions projects/angular/src/modal/modal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,6 @@ export class ClrModal implements OnChanges, OnDestroy {
@Input('clrModalStaticBackdrop') staticBackdrop = true;
@Input('clrModalSkipAnimation') skipAnimation = 'false';

// presently this is only used by wizards
@Input('clrModalOverrideScrollService') bypassScrollService = false;
@Input('clrModalPreventClose') stopClose = false;
@Output('clrModalAlternateClose') altClose: EventEmitter<boolean> = new EventEmitter<boolean>(false);

Expand All @@ -75,7 +73,7 @@ export class ClrModal implements OnChanges, OnDestroy {

// Detect when _open is set to true and set no-scrolling to true
ngOnChanges(changes: { [propName: string]: SimpleChange }): void {
if (!this.bypassScrollService && changes && Object.prototype.hasOwnProperty.call(changes, '_open')) {
if (changes && Object.prototype.hasOwnProperty.call(changes, '_open')) {
if (changes._open.currentValue) {
this._scrollingService.stopScrolling();
} else {
Expand Down
83 changes: 0 additions & 83 deletions projects/angular/src/wizard/_wizard.clarity.scss
Original file line number Diff line number Diff line change
Expand Up @@ -456,89 +456,6 @@
}
}

/** @deprecated since 3.0, inline wizard style should be removed in 4.0 */
.clr-wizard--inline {
display: block;
width: 100%;
// you will want to set a fixed width and height for these static wizards
// otherwise, you'll get some minor jumping along the right edge when it is
// closed...

& > clr-modal > .modal:focus {
// need to remove the outline style or trap-focus directive will make
// outline appear in Safari and Microsoft browsers
outline-style: none;
outline-color: transparent;
}

clr-modal {
@include equilateral(100%);
display: block;
}

.modal {
padding: 0;
position: static;
height: 100%;
max-height: 100%;

.content-container {
height: 100%;

.nav-panel {
@include equilateral(99%);
}
}

.modal-content {
box-shadow: none;
}

.modal-dialog {
min-height: 100%;
@include equilateral(100%);
z-index: auto;
}
}

.modal-body-wrapper {
height: 100%;
}

.modal-header .close {
display: none;
}

.nav.navList {
padding-top: 0;
}

.modal-dialog .modal-content .modal-body .content-area {
overflow-y: auto;
}

.modal-backdrop {
@include equilateral(0);
display: none;
}

.modal-content-wrapper {
align-items: stretch;
height: 100%;
}

.clr-wizard-stepnav-wrapper,
&.clr-wizard .modal-content {
min-height: 100%;
height: auto;
max-height: 100%;

.clr-wizard-stepnav {
height: 100%;
}
}
}

.clr-wizard--no-shadow {
.modal-content-wrapper,
.modal-dialog {
Expand Down
2 changes: 0 additions & 2 deletions projects/angular/src/wizard/wizard.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
[clrModalSize]="size"
[clrModalClosable]="closable"
[clrModalStaticBackdrop]="true"
[clrModalSkipAnimation]="stopModalAnimations"
[clrModalOverrideScrollService]="isStatic"
[clrModalPreventClose]="true"
(clrModalAlternateClose)="modalCancel()"
[clrModalLabelledById]="wizardId"
Expand Down
24 changes: 0 additions & 24 deletions projects/angular/src/wizard/wizard.ts
Original file line number Diff line number Diff line change
Expand Up @@ -152,17 +152,6 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
}
private _disableStepnav = false;

/**
* Used to communicate to the underlying modal that animations are not
* wanted. Primary use is for the display of static/inline wizards.
* Set using `[clrWizardPreventModalAnimation]` input.
*/
/** @deprecated since 3.0, input should be removed in 4.0 because is only related to inline wizards */
@Input('clrWizardPreventModalAnimation') _stopModalAnimations = false;
get stopModalAnimations(): string {
return this._stopModalAnimations ? 'true' : 'false';
}

/**
* Emits when the wizard is opened or closed.
* Listen via `(clrWizardOpenChange)` event.
Expand Down Expand Up @@ -229,10 +218,6 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
return this.navService.currentPageIsFirst;
}

get isStatic(): boolean {
return (this.elementRef.nativeElement as HTMLElement).classList.contains('clr-wizard--inline');
}

wizardId = uniqueIdFactory();

private differ: any; // for marking when the collection of wizard pages has been added to or deleted from
Expand All @@ -244,7 +229,6 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
public pageCollection: PageCollectionService,
public buttonService: ButtonHubService,
public headerActionService: HeaderActionService,
private elementRef: ElementRef,
differs: IterableDiffers
) {
this.subscriptions.push(
Expand All @@ -261,7 +245,6 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
ngAfterContentInit(): void {
this.pageCollection.pages = this.pages;
this.headerActionService.wizardHeaderActions = this.headerActions;
this.initializeButtons();
}

ngDoCheck(): void {
Expand Down Expand Up @@ -490,13 +473,6 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
}
}

private initializeButtons(): void {
// Only trigger buttons ready if default is open (inlined)
if (this._open) {
this.buttonService.buttonsReady = true;
}
}

private emitWizardFinished(): void {
if (!this.stopNext) {
this.forceFinish();
Expand Down
64 changes: 0 additions & 64 deletions projects/demo/src/app/wizard/wizard-inline.demo.html

This file was deleted.

19 changes: 0 additions & 19 deletions projects/demo/src/app/wizard/wizard-inline.demo.ts

This file was deleted.

4 changes: 0 additions & 4 deletions projects/demo/src/app/wizard/wizard.demo.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ import { WizardCustomButtonsDemo } from './wizard-custom-buttons.demo';
import { WizardForceForwardDemo } from './wizard-force-forward.demo';
import { WizardFormValidation } from './wizard-form-validation.demo';
import { WizardHeaderActionsDemo } from './wizard-header-actions.demo';
/** @deprecated since 3.0, inline wizard should be removed in 4.0 */
import { WizardInlineDemo } from './wizard-inline.demo';
import { WizardJumpToDemo } from './wizard-jump-to.demo';
import { WizardNotClosableDemo } from './wizard-not-closable.demo';
import { WizardResetDemo } from './wizard-reset.demo';
Expand All @@ -41,7 +39,6 @@ import { ROUTING } from './wizard.demo.routing';
WizardResetDemo,
WizardHeaderActionsDemo,
WizardAltCancelDemo,
WizardInlineDemo,
WizardJumpToDemo,
WizardAltNextDemo,
WizardForceForwardDemo,
Expand All @@ -58,7 +55,6 @@ import { ROUTING } from './wizard.demo.routing';
WizardCustomButtonsDemo,
WizardHeaderActionsDemo,
WizardAltCancelDemo,
WizardInlineDemo,
WizardResetDemo,
WizardJumpToDemo,
WizardAltNextDemo,
Expand Down
3 changes: 0 additions & 3 deletions projects/demo/src/app/wizard/wizard.demo.routing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import { WizardCustomButtonsDemo } from './wizard-custom-buttons.demo';
import { WizardForceForwardDemo } from './wizard-force-forward.demo';
import { WizardFormValidation } from './wizard-form-validation.demo';
import { WizardHeaderActionsDemo } from './wizard-header-actions.demo';
/** @deprecated since 3.0, inlie wizard should be removed in 4.0 */
import { WizardInlineDemo } from './wizard-inline.demo';
import { WizardJumpToDemo } from './wizard-jump-to.demo';
import { WizardNotClosableDemo } from './wizard-not-closable.demo';
import { WizardResetDemo } from './wizard-reset.demo';
Expand All @@ -39,7 +37,6 @@ const ROUTES: Routes = [
{ path: 'custom-buttons', component: WizardCustomButtonsDemo },
{ path: 'header-actions', component: WizardHeaderActionsDemo },
{ path: 'alt-cancel', component: WizardAltCancelDemo },
{ path: 'inline', component: WizardInlineDemo },
{ path: 'jump-to', component: WizardJumpToDemo },
{ path: 'reset', component: WizardResetDemo },
{ path: 'alt-next', component: WizardAltNextDemo },
Expand Down
1 change: 0 additions & 1 deletion projects/demo/src/app/wizard/wizard.demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
<li><a [routerLink]="['./header-actions']">Header actions</a></li>
<li><a [routerLink]="['./alt-cancel']">Alt cancel</a></li>
<li><a [routerLink]="['./alt-next']">Alt next</a></li>
<li><a [routerLink]="['./inline']">Inline/static wizard</a></li>
<li><a [routerLink]="['./force-forward']">Force forward</a></li>
<li><a [routerLink]="['./stop-navigation']">Stop navigation</a></li>
</ul>
Expand Down