From 33810ce86915c6d1e948e426a6056500d88e6827 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Wed, 7 Jun 2017 14:23:23 -0700 Subject: [PATCH] feat(expansion-panel) and (steps): add `[disableRipple]` input. (#665) * feat(expansion-panel): add [disableRipple] input * feat(steps): add [disableRipple] input * fix(): lint error and hover on disable introduced bug * fix(expansion): polish scss rules when not disabled * fix(): move disabledRipple to the correct step in example --- .../expansion-panel.component.html | 6 +++--- .../components/steps/steps.component.html | 6 +++--- .../components/steps/steps.component.ts | 4 ++++ src/platform/core/expansion-panel/README.md | 3 ++- .../expansion-panel/_expansion-panel-theme.scss | 4 ++-- .../expansion-panel.component.html | 2 +- .../expansion-panel.component.scss | 8 ++------ .../expansion-panel/expansion-panel.component.ts | 15 ++++++++++++++- src/platform/core/steps/_steps-theme.scss | 4 ++-- .../steps/step-header/step-header.component.html | 2 +- .../steps/step-header/step-header.component.scss | 7 +------ .../steps/step-header/step-header.component.ts | 6 ++++++ src/platform/core/steps/step.component.ts | 15 ++++++++++++++- src/platform/core/steps/steps.component.html | 6 ++++-- 14 files changed, 59 insertions(+), 29 deletions(-) diff --git a/src/app/components/components/expansion-panel/expansion-panel.component.html b/src/app/components/components/expansion-panel/expansion-panel.component.html index a0a18b90bb..d7af2f304e 100644 --- a/src/app/components/components/expansion-panel/expansion-panel.component.html +++ b/src/app/components/components/expansion-panel/expansion-panel.component.html @@ -217,12 +217,12 @@

Headquarters

Expansion panel with header template - replace the entire header as needed + replace the entire header as needed and disable ripple Demo - + Custom td-expansion-panel-header @@ -270,7 +270,7 @@

1141e8e8-8d24-4956-93c2

HTML:

+ Custom td-expansion-panel-header diff --git a/src/app/components/components/steps/steps.component.html b/src/app/components/components/steps/steps.component.html index fdf1ea6571..5dfb34fc82 100644 --- a/src/app/components/components/steps/steps.component.html +++ b/src/app/components/components/steps/steps.component.html @@ -21,7 +21,7 @@

{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}

Basic Usage (template) Include any content you like for an active stepper - + This step is required! @@ -50,7 +50,7 @@

{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}

Basic Usage (template) Include any content you like for an active stepper
- + This step is required! @@ -195,7 +195,7 @@

Example:

HTML:

+ ... add label content (if not used, falls back to [label] input) diff --git a/src/app/components/components/steps/steps.component.ts b/src/app/components/components/steps/steps.component.ts index 6f5f806893..f1b9328b8b 100644 --- a/src/app/components/components/steps/steps.component.ts +++ b/src/app/components/components/steps/steps.component.ts @@ -46,6 +46,10 @@ export class StepsDemoComponent implements OnInit, OnDestroy { description: 'Sets state of [TdStepComponent] depending on value. Defaults to [StepState.None | "none"]', name: 'state?', type: 'StepState or ["none" | "required" | "complete"]', + }, { + description: ' Whether the ripple effect for this component is disabled', + name: 'disableRipple?', + type: 'boolean', }, { description: 'Event emitted when [TdStepComponent] is activated.', name: 'activated?', diff --git a/src/platform/core/expansion-panel/README.md b/src/platform/core/expansion-panel/README.md index 62ad04b9a1..de50729009 100644 --- a/src/platform/core/expansion-panel/README.md +++ b/src/platform/core/expansion-panel/README.md @@ -13,6 +13,7 @@ Properties: | `label?` | `string` | Sets label of component header. | `sublabel?` | `string` | Sets sublabel of component header. | `expand?` | `boolean` | Toggles component between expand/collapse state. +| `disableRipple?` | `boolean` | Whether the ripple effect for this component is disabled. | `expanded?` | `function` | Event emitted when component is expanded. | `collapsed?` | `function` | Event emitted when component is collapsed. | `toggle?` | `function` | Toggle state of component. Returns "true" if successful, else "false". @@ -40,7 +41,7 @@ export class MyModule {} Example for HTML usage: ```html - + ... add header content (overrides label and sublabel) diff --git a/src/platform/core/expansion-panel/_expansion-panel-theme.scss b/src/platform/core/expansion-panel/_expansion-panel-theme.scss index 609fd88fac..057baa4c9f 100644 --- a/src/platform/core/expansion-panel/_expansion-panel-theme.scss +++ b/src/platform/core/expansion-panel/_expansion-panel-theme.scss @@ -28,8 +28,8 @@ @include mat-elevation(1); background-color: mat-color($background, card); .td-expansion-panel-header { - &:focus, - &:hover { + &:focus:not(.mat-disabled), + &:hover:not(.mat-disabled) { background: mat-color($background, 'hover'); } .td-expansion-panel-header-content { diff --git a/src/platform/core/expansion-panel/expansion-panel.component.html b/src/platform/core/expansion-panel/expansion-panel.component.html index 20d0f27f31..6d48433d0b 100644 --- a/src/platform/core/expansion-panel/expansion-panel.component.html +++ b/src/platform/core/expansion-panel/expansion-panel.component.html @@ -1,7 +1,7 @@
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.scss b/src/platform/core/expansion-panel/expansion-panel.component.scss index 5393cb8db7..717659b151 100644 --- a/src/platform/core/expansion-panel/expansion-panel.component.scss +++ b/src/platform/core/expansion-panel/expansion-panel.component.scss @@ -3,14 +3,10 @@ .td-expansion-panel-header { position: relative; outline: none; - &:focus, - &:hover { + &:focus:not(.mat-disabled), + &:hover:not(.mat-disabled) { cursor: pointer; } - &.mat-disabled { - background: none; - cursor: auto; - } .td-expansion-panel-header-content { height: 48px; padding: 0 16px; diff --git a/src/platform/core/expansion-panel/expansion-panel.component.ts b/src/platform/core/expansion-panel/expansion-panel.component.ts index d1d6b515ca..ef91ea6c18 100644 --- a/src/platform/core/expansion-panel/expansion-panel.component.ts +++ b/src/platform/core/expansion-panel/expansion-panel.component.ts @@ -48,6 +48,7 @@ export class TdExpansionPanelSummaryComponent {} }) export class TdExpansionPanelComponent { + private _disableRipple: boolean = false; private _expand: boolean = false; private _disabled: boolean = false; @@ -68,13 +69,25 @@ export class TdExpansionPanelComponent { */ @Input() sublabel: string; + /** + * disableRipple?: string + * Whether the ripple effect for this component is disabled. + */ + @Input('disableRipple') + set disableRipple(disableRipple: boolean) { + this._disableRipple = disableRipple !== '' ? (disableRipple === 'true' || disableRipple === true) : true; + } + get disableRipple(): boolean { + return this._disableRipple; + } + /** * expand?: boolean * Toggles [TdExpansionPanelComponent] between expand/collapse. */ @Input('expand') set expand(expand: boolean) { - this._setExpand(expand); + this._setExpand(expand === 'true' || expand === true); } get expand(): boolean { return this._expand; diff --git a/src/platform/core/steps/_steps-theme.scss b/src/platform/core/steps/_steps-theme.scss index ac94c3c10b..34a1a953d4 100644 --- a/src/platform/core/steps/_steps-theme.scss +++ b/src/platform/core/steps/_steps-theme.scss @@ -25,8 +25,8 @@ } // header .td-step-header { - &:focus, - &:hover { + &:focus:not(.mat-disabled), + &:hover:not(.mat-disabled) { background: mat-color($background, 'hover'); } .td-step-label-wrapper { diff --git a/src/platform/core/steps/step-header/step-header.component.html b/src/platform/core/steps/step-header/step-header.component.html index 862019924a..b08bbcdbbf 100644 --- a/src/platform/core/steps/step-header/step-header.component.html +++ b/src/platform/core/steps/step-header/step-header.component.html @@ -1,7 +1,7 @@
disableRipple !== '' ? (disableRipple === 'true' || disableRipple === true) : true; + } + get disableRipple(): boolean { + return this._disableRipple; + } + /** * active?: boolean * Toggles [TdStepComponent] between active/deactive. */ @Input('active') set active(active: boolean) { - this._setActive(active); + this._setActive(active === 'true' || active === true); } get active(): boolean { return this._active; diff --git a/src/platform/core/steps/steps.component.html b/src/platform/core/steps/steps.component.html index 1ba2e40f14..26f72228a1 100644 --- a/src/platform/core/steps/steps.component.html +++ b/src/platform/core/steps/steps.component.html @@ -3,7 +3,8 @@ @@ -19,7 +20,8 @@ (keydown.enter)="step.toggle()" [number]="index + 1" [active]="step.active" - [disabled]="step.disabled" + [disabled]="step.disabled" + [disableRipple]="step.disableRipple" [state]="step.state" (click)="step.toggle()" *ngIf="isVertical()">