From 76871148e9ee8a41e6affdf7db4990fede876929 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 15 Dec 2016 23:27:18 +0100 Subject: [PATCH 1/8] refactor: convert dash-case inputs to camelCase Converts any dash-cased `@Input` properties into camelCase and adds a deprecated proxy property with the old naming. The following properties have been renamed: * `md-ripple-trigger` * `md-ripple-centered` * `md-ripple-disabled` * `md-ripple-max-radius` * `md-ripple-speed-factor` * `md-ripple-color` * `md-ripple-background-color` * `md-ripple-focused` * `md-ripple-unbounded` * `thumb-label` * `tick-interval` * `md-dynamic-height` * `tooltip-position` The following properties were skipped: * `md-menu-trigger-for` - Is currently used also as a selector for the menu trigger. * Any properties that a native equivalent (e.g. `aria-label`, `aria-labeledby`). --- src/demo-app/ripple/ripple-demo.html | 14 +++--- src/demo-app/slider/slider-demo.html | 14 +++--- src/demo-app/tabs/tabs-demo.html | 4 +- src/demo-app/tooltip/tooltip-demo.html | 2 +- src/lib/button/button.html | 6 +-- src/lib/button/button.spec.ts | 2 +- src/lib/checkbox/checkbox.html | 8 +-- src/lib/checkbox/checkbox.spec.ts | 2 +- src/lib/core/ripple/README.md | 18 +++---- src/lib/core/ripple/_ripple.scss | 12 ++--- src/lib/core/ripple/ripple.spec.ts | 12 ++--- src/lib/core/ripple/ripple.ts | 70 ++++++++++++++++++++++---- src/lib/grid-list/grid-list.ts | 20 ++------ src/lib/menu/menu-item.html | 4 +- src/lib/radio/radio.html | 8 +-- src/lib/radio/radio.spec.ts | 2 +- src/lib/select/option.html | 4 +- src/lib/slider/README.md | 24 ++++----- src/lib/slider/slider.spec.ts | 8 +-- src/lib/slider/slider.ts | 14 +++++- src/lib/tabs/tab-group.scss | 12 +++-- src/lib/tabs/tab-group.ts | 7 ++- src/lib/tabs/tab-header.html | 6 +-- src/lib/tooltip/README.md | 4 +- src/lib/tooltip/tooltip.spec.ts | 2 +- src/lib/tooltip/tooltip.ts | 7 ++- 26 files changed, 175 insertions(+), 111 deletions(-) diff --git a/src/demo-app/ripple/ripple-demo.html b/src/demo-app/ripple/ripple-demo.html index 75ddda95e698..dc156317bb0b 100644 --- a/src/demo-app/ripple/ripple-demo.html +++ b/src/demo-app/ripple/ripple-demo.html @@ -48,13 +48,13 @@ [class.demo-ripple-disabled]="disabled" [class.demo-ripple-rounded]="rounded" md-ripple - [md-ripple-centered]="centered" - [md-ripple-disabled]="disabled" - [md-ripple-unbounded]="unbounded" - [md-ripple-max-radius]="maxRadius" - [md-ripple-color]="rippleColor" - [md-ripple-background-color]="rippleBackgroundColor" - [md-ripple-speed-factor]="rippleSpeed"> + [mdRippleCentered]="centered" + [mdRippleDisabled]="disabled" + [mdRippleUnbounded]="unbounded" + [mdRippleMaxRadius]="maxRadius" + [mdRippleColor]="rippleColor" + [mdRippleBackgroundColor]="rippleBackgroundColor" + [mdRippleSpeedFactor]="rippleSpeed"> Click me diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html index aba8619d3c68..160231e67072 100644 --- a/src/demo-app/slider/slider-demo.html +++ b/src/demo-app/slider/slider-demo.html @@ -4,7 +4,7 @@

Default Slider

Slider with Min and Max

- + {{slider2.value}} @@ -20,11 +20,11 @@

Slider with step defined

{{slider5.value}}

Slider with set tick interval

- - + +

Slider with Thumb Label

- +

Slider with one-way binding

@@ -35,13 +35,13 @@

Slider with two-way binding

Inverted slider

- +

Vertical slider

- +

Inverted vertical slider

- + diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html index fb9826927a7f..7366de72e4fd 100644 --- a/src/demo-app/tabs/tabs-demo.html +++ b/src/demo-app/tabs/tabs-demo.html @@ -43,7 +43,7 @@

Tab Group Demo - Dynamic Tabs

@@ -92,7 +92,7 @@

Tab Group Demo - Dynamic Tabs

Tab Group Demo - Dynamic Height

- + {{tab.content}} diff --git a/src/demo-app/tooltip/tooltip-demo.html b/src/demo-app/tooltip/tooltip-demo.html index 82858ca89835..84c0e3d1baee 100644 --- a/src/demo-app/tooltip/tooltip-demo.html +++ b/src/demo-app/tooltip/tooltip-demo.html @@ -6,7 +6,7 @@

Tooltip Demo

md-raised-button color="primary" [md-tooltip]="message" - [tooltip-position]="position" + [tooltipPosition]="position" [tooltipShowDelay]="showDelay" [tooltipHideDelay]="hideDelay"> Mouse over to see the tooltip diff --git a/src/lib/button/button.html b/src/lib/button/button.html index 281f5f5101e1..486fe19e07b5 100644 --- a/src/lib/button/button.html +++ b/src/lib/button/button.html @@ -1,8 +1,8 @@
+ [mdRippleTrigger]="getHostElement()" + [mdRippleColor]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" + mdRippleBackgroundColor="rgba(0, 0, 0, 0)">
diff --git a/src/lib/button/button.spec.ts b/src/lib/button/button.spec.ts index a0556c2f3781..b0bfaf3c7697 100644 --- a/src/lib/button/button.spec.ts +++ b/src/lib/button/button.spec.ts @@ -168,7 +168,7 @@ describe('MdButton', () => { anchorElement = fixture.nativeElement.querySelector('a[md-button]'); }); - it('should remove ripple if md-ripple-disabled input is set', () => { + it('should remove ripple if mdRippleDisabled input is set', () => { expect(buttonElement.querySelectorAll('[md-ripple]').length).toBe(1); testComponent.rippleDisabled = true; diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html index b67f3aae244a..5fcbe07bd9cf 100644 --- a/src/lib/checkbox/checkbox.html +++ b/src/lib/checkbox/checkbox.html @@ -16,10 +16,10 @@ (change)="_onInteractionEvent($event)" (click)="_onInputClick($event)">
+ [mdRippleTrigger]="_getHostElement()" + [mdRippleCentered]="true" + [mdRippleSpeedFactor]="0.3" + mdRippleBackgroundColor="rgba(0, 0, 0, 0)">
{ expect(inputElement.tabIndex).toBe(13); }); - it('should remove ripple if md-ripple-disabled input is set', async(() => { + it('should remove ripple if mdRippleDisabled input is set', async(() => { testComponent.disableRipple = true; fixture.detectChanges(); diff --git a/src/lib/core/ripple/README.md b/src/lib/core/ripple/README.md index 48f6dd628268..1f964a9b252b 100644 --- a/src/lib/core/ripple/README.md +++ b/src/lib/core/ripple/README.md @@ -1,6 +1,6 @@ # md-ripple -`md-ripple` defines an area in which a ripple animates, usually in response to user action. It is used as an attribute directive, for example `
...
`. +`md-ripple` defines an area in which a ripple animates, usually in response to user action. It is used as an attribute directive, for example `
...
`. By default, a ripple is activated when the host element of the `md-ripple` directive receives mouse or touch events. On a mousedown or touch start, the ripple background fades in. When the click event completes, a circular foreground ripple fades in and expands from the event location to cover the host element bounds. @@ -17,11 +17,11 @@ Properties: | Name | Type | Description | | --- | --- | --- | -| `md-ripple-trigger` | Element | The DOM element that triggers the ripple when clicked. Defaults to the parent of the `md-ripple`. -| `md-ripple-color` | string | Custom color for foreground ripples -| `md-ripple-background-color` | string | Custom color for the ripple background -| `md-ripple-centered` | boolean | If true, the ripple animation originates from the center of the `md-ripple` bounds rather than from the location of the click event. -| `md-ripple-max-radius` | number | Optional fixed radius of foreground ripples when fully expanded. Mainly used in conjunction with `unbounded` attribute. If not set, ripples will expand from their origin to the most distant corner of the component's bounding rectangle. -| `md-ripple-unbounded` | boolean | If true, foreground ripples will be visible outside the component's bounds. -| `md-ripple-focused` | boolean | If true, the background ripple is shown using the current theme's accent color to indicate focus. -| `md-ripple-disabled` | boolean | If true, click events on the trigger element will not activate ripples. The `start` and `end` methods can still be called to programmatically create ripples. +| `mdRippleTrigger` | Element | The DOM element that triggers the ripple when clicked. Defaults to the parent of the `md-ripple`. +| `mdRippleColor` | string | Custom color for foreground ripples +| `mdRippleBackgroundColor` | string | Custom color for the ripple background +| `mdRippleCentered` | boolean | If true, the ripple animation originates from the center of the `md-ripple` bounds rather than from the location of the click event. +| `mdRippleMaxRadius` | number | Optional fixed radius of foreground ripples when fully expanded. Mainly used in conjunction with `unbounded` attribute. If not set, ripples will expand from their origin to the most distant corner of the component's bounding rectangle. +| `mdRippleUnbounded` | boolean | If true, foreground ripples will be visible outside the component's bounds. +| `mdRippleFocused` | boolean | If true, the background ripple is shown using the current theme's accent color to indicate focus. +| `mdRippleDisabled` | boolean | If true, click events on the trigger element will not activate ripples. The `start` and `end` methods can still be called to programmatically create ripples. diff --git a/src/lib/core/ripple/_ripple.scss b/src/lib/core/ripple/_ripple.scss index d5f520d222b9..4f4c77d078c0 100644 --- a/src/lib/core/ripple/_ripple.scss +++ b/src/lib/core/ripple/_ripple.scss @@ -1,7 +1,7 @@ @import '../theming/theming'; -$md-ripple-focused-opacity: 0.1; +$mdRippleFocused-opacity: 0.1; $md-ripple-background-fade-duration: 300ms; $md-ripple-background-default-color: rgba(0, 0, 0, 0.0588); $md-ripple-foreground-initial-opacity: 0.25; @@ -15,7 +15,7 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588); overflow: hidden; } - [md-ripple].md-ripple-unbounded { + [md-ripple].mdRippleUnbounded { overflow: visible; } @@ -30,7 +30,7 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588); bottom: 0; } - .md-ripple-unbounded .md-ripple-background { + .mdRippleUnbounded .md-ripple-background { display: none; } @@ -38,7 +38,7 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588); opacity: 1; } - .md-ripple-focused .md-ripple-background { + .mdRippleFocused .md-ripple-background { opacity: 1; } @@ -64,8 +64,8 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588); @mixin md-ripple-theme($theme) { $accent: map-get($theme, accent); - .md-ripple-focused .md-ripple-background { - background-color: md-color($accent, $md-ripple-focused-opacity); + .mdRippleFocused .md-ripple-background { + background-color: md-color($accent, $mdRippleFocused-opacity); } } diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index 91b86f436bf9..df174107ebbf 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -438,12 +438,12 @@ class BasicRippleContainer { template: `
+ [mdRippleTrigger]="trigger" + [mdRippleCentered]="centered" + [mdRippleMaxRadius]="maxRadius" + [mdRippleDisabled]="disabled" + [mdRippleColor]="color" + [mdRippleBackgroundColor]="backgroundColor">
`, diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts index d542f3522c85..f85a4cab4fb9 100644 --- a/src/lib/core/ripple/ripple.ts +++ b/src/lib/core/ripple/ripple.ts @@ -30,37 +30,89 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges { */ // Prevent TS metadata emit from referencing HTMLElement in ripple.js // That breaks tests running in node that load material components. - @Input('md-ripple-trigger') trigger: HTMLElement|HTMLElement; + @Input('mdRippleTrigger') trigger: HTMLElement|HTMLElement; + + /** @deprecated */ + @Input('md-ripple-trigger') + get _triggerDeprecated() { return this.trigger; } + set _triggerDeprecated(value: HTMLElement|HTMLElement) { this.trigger = value; }; + /** * Whether the ripple always originates from the center of the host element's bounds, rather * than originating from the location of the click event. */ - @Input('md-ripple-centered') centered: boolean; + @Input('mdRippleCentered') centered: boolean; + + /** @deprecated */ + @Input('md-ripple-centered') + get _centeredDeprecated() { return this.centered; } + set _centeredDeprecated(value: boolean) { this.centered = value; }; + /** * Whether click events will not trigger the ripple. It can still be triggered by manually * calling start() and end(). */ - @Input('md-ripple-disabled') disabled: boolean; + @Input('mdRippleDisabled') disabled: boolean; + + /** @deprecated */ + @Input('md-ripple-disabled') + get _disabledDeprecated() { return this.disabled; } + set _disabledDeprecated(value: boolean) { this.disabled = value; }; + /** * If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius * will be the distance from the center of the ripple to the furthest corner of the host element's * bounding rectangle. */ - @Input('md-ripple-max-radius') maxRadius: number = 0; + @Input('mdRippleMaxRadius') maxRadius: number = 0; + + /** @deprecated */ + @Input('md-ripple-max-radius') + get _maxRadiusDeprecated() { return this.maxRadius; } + set _maxRadiusDeprecated(value: number) { this.maxRadius = value; }; + /** * If set, the normal duration of ripple animations is divided by this value. For example, * setting it to 0.5 will cause the animations to take twice as long. */ - @Input('md-ripple-speed-factor') speedFactor: number = 1; + @Input('mdRippleSpeedFactor') speedFactor: number = 1; + + /** @deprecated */ + @Input('md-ripple-speed-factor') + get _speedFactorDeprecated() { return this.speedFactor; } + set _speedFactorDeprecated(value: number) { this.speedFactor = value; }; + /** Custom color for ripples. */ - @Input('md-ripple-color') color: string; + @Input('mdRippleColor') color: string; + + /** @deprecated */ + @Input('md-ripple-color') + get _colorDeprecated() { return this.color; } + set _colorDeprecated(value: string) { this.color = value; }; + /** Custom color for the ripple background. */ - @Input('md-ripple-background-color') backgroundColor: string; + @Input('mdRippleBackgroundColor') backgroundColor: string; + + /** @deprecated */ + @Input('md-ripple-background-color') + get _backgroundColorDeprecated() { return this.backgroundColor; } + set _backgroundColorDeprecated(value: string) { this.backgroundColor = value; }; /** Whether the ripple background will be highlighted to indicated a focused state. */ - @HostBinding('class.md-ripple-focused') @Input('md-ripple-focused') focused: boolean; + @HostBinding('class.md-ripple-focused') @Input('mdRippleFocused') focused: boolean; + + /** @deprecated */ + @Input('md-ripple-focused') + get _focusedDeprecated(): boolean { return this.focused; } + set _focusedDeprecated(value: boolean) { this.focused = value; }; + /** Whether foreground ripples should be visible outside the component's bounds. */ - @HostBinding('class.md-ripple-unbounded') @Input('md-ripple-unbounded') unbounded: boolean; + @HostBinding('class.md-ripple-unbounded') @Input('mdRippleUnbounded') unbounded: boolean; + + /** @deprecated */ + @Input('md-ripple-unbounded') + get _unboundedDeprecated(): boolean { return this.unbounded; } + set _unboundedDeprecated(value: boolean) { this.unbounded = value; }; private _rippleRenderer: RippleRenderer; _ruler: ViewportRuler; diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts index 34d6bc9d6f55..b1b0fd5ccff4 100644 --- a/src/lib/grid-list/grid-list.ts +++ b/src/lib/grid-list/grid-list.ts @@ -66,22 +66,12 @@ export class MdGridList implements OnInit, AfterContentChecked { @Optional() private _dir: Dir) {} @Input() - get cols() { - return this._cols; - } - - set cols(value: any) { - this._cols = coerceToNumber(value); - } + get cols() { return this._cols; } + set cols(value: any) { this._cols = coerceToNumber(value); } - @Input('gutterSize') - get gutterSize() { - return this._gutter; - } - - set gutterSize(value: any) { - this._gutter = coerceToString(value); - } + @Input() + get gutterSize() { return this._gutter; } + set gutterSize(value: any) { this._gutter = coerceToString(value); } /** Set internal representation of row height from the user-provided value. */ @Input() diff --git a/src/lib/menu/menu-item.html b/src/lib/menu/menu-item.html index 864f582d74c1..6b8fd4445968 100644 --- a/src/lib/menu/menu-item.html +++ b/src/lib/menu/menu-item.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html index 567896528cc2..b304f6e9ae91 100644 --- a/src/lib/radio/radio.html +++ b/src/lib/radio/radio.html @@ -6,10 +6,10 @@
+ [mdRippleTrigger]="_getHostElement()" + [mdRippleCentered]="true" + [mdRippleSpeedFactor]="0.3" + mdRippleBackgroundColor="rgba(0, 0, 0, 0)">
{ expect(rippleElement).toBeFalsy('Expected a disabled radio button not to have a ripple'); }); - it('should remove ripple if md-ripple-disabled input is set', async(() => { + it('should remove ripple if mdRippleDisabled input is set', async(() => { fixture.detectChanges(); for (let radioNativeElement of radioNativeElements) { diff --git a/src/lib/select/option.html b/src/lib/select/option.html index 90659d08fbd9..0ced3b05a018 100644 --- a/src/lib/select/option.html +++ b/src/lib/select/option.html @@ -1,3 +1,3 @@ -
\ No newline at end of file +
diff --git a/src/lib/slider/README.md b/src/lib/slider/README.md index 87e422e90396..781d9d0613a3 100644 --- a/src/lib/slider/README.md +++ b/src/lib/slider/README.md @@ -43,40 +43,40 @@ value on bottom. ### Adding a thumb label By default the exact selected value of a slider is not visible to the user. However, this value can -be added to the thumb by adding the `thumb-label` attribute. +be added to the thumb by adding the `thumbLabel` attribute. The [material design spec](https://material.google.com/components/sliders.html) recommends using the -`thumb-label` attribute (along with `tick-interval="1"`) only for sliders that are used to display a +`thumbLabel` attribute (along with `tickInterval="1"`) only for sliders that are used to display a discrete value (such as a 1-5 rating). ```html - + ``` ### Adding ticks By default a sliders do not show tick marks along the thumb track. They can be enabled using the -`tick-interval` attribute. The value of `tick-interval` should be a number representing the number -of steps between between ticks. For example a `tick-interval` of `3` with a `step` of `4` will draw +`tickInterval` attribute. The value of `tickInterval` should be a number representing the number +of steps between between ticks. For example a `tickInterval` of `3` with a `step` of `4` will draw tick marks at every `3` steps, which is the same as every `12` values. ```html - + ``` -The `tick-interval` can also be set to `auto` which will automatically choose the number of steps +The `tickInterval` can also be set to `auto` which will automatically choose the number of steps such that there is at least `30px` of space between ticks. ```html - + ``` - + The slider will always show a tick at the beginning and end of the track. If the remaining space doesn't add up perfectly the last interval will be shortened or lengthened so that the tick can be shown at the end of the track. The [material design spec](https://material.google.com/components/sliders.html) recommends using the -`tick-interval` attribute (set to `1` along with the `thumb-label` attribute) only for sliders that +`tickInterval` attribute (set to `1` along with the `thumbLabel` attribute) only for sliders that are used to display a discrete value (such as a 1-5 rating). ### Disabling the slider @@ -91,7 +91,7 @@ value. ### Value binding `md-slider` supports both 1-way binding and 2-way binding via `ngModel`. It also emits a `change` -event when the value changes due to user interaction. +event when the value changes due to user interaction. ```html @@ -132,7 +132,7 @@ right-to-left languages. | `max` | number | Optional, the maximum number for the slider. Default = `100`. | | `step` | number | Optional, declares where the thumb will snap to. Default = `1`. | | `value` | number | Optional, the value to start the slider at. | -| `tick-interval` | `"auto"` \| number | Optional, how many steps between tick marks. | +| `tickInterval` | `"auto"` \| number | Optional, how many steps between tick marks. | | `invert` | boolean | Optional, whether to invert the axis the thumb moves along. | | `vertical` | boolean | Optional, whether the slider should be oriented vertically. | | `disabled` | boolean | Optional, whether or not the slider is disabled. Default = `false`. | diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts index 951562e71017..46367d801331 100644 --- a/src/lib/slider/slider.spec.ts +++ b/src/lib/slider/slider.spec.ts @@ -1041,7 +1041,7 @@ class StandardSlider { } class DisabledSlider { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithMinAndMax { @@ -1062,19 +1062,19 @@ class SliderWithValue { } class SliderWithStep { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithAutoTickInterval { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithSetTickInterval { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithThumbLabel { } diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 5be17ccd817a..f9906be8f78f 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -103,10 +103,15 @@ export class MdSlider implements ControlValueAccessor { /** Whether or not to show the thumb label. */ private _thumbLabel: boolean = false; - @Input('thumb-label') + @Input('thumbLabel') get thumbLabel(): boolean { return this._thumbLabel; } set thumbLabel(value) { this._thumbLabel = coerceBooleanProperty(value); } + /** @deprecated */ + @Input('thumb-label') + get _thumbLabelDeprecated(): boolean { return this._thumbLabel; } + set _thumbLabelDeprecated(value) { this._thumbLabel = value; } + private _controlValueAccessorChangeFn: (value: any) => void = () => {}; /** The last value for which a change event was emitted. */ @@ -140,12 +145,17 @@ export class MdSlider implements ControlValueAccessor { */ private _tickInterval: 'auto' | number = 0; - @Input('tick-interval') + @Input() get tickInterval() { return this._tickInterval; } set tickInterval(v) { this._tickInterval = (v == 'auto') ? v : coerceNumberProperty(v, this._tickInterval); } + /** @deprecated */ + @Input('tick-interval') + get _tickIntervalDeprecated() { return this.tickInterval; } + set _tickIntervalDeprecated(v) { this.tickInterval = v; } + /** The size of a tick interval as a percentage of the size of the track. */ private _tickIntervalPercent: number = 0; diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss index 62a89f2e8f6e..ed3c66f93582 100644 --- a/src/lib/tabs/tab-group.scss +++ b/src/lib/tabs/tab-group.scss @@ -25,7 +25,7 @@ flex-grow: 1; } -// The bottom section of the view; contains the tab bodies +// The bottom section of the view; contains the tab bodies .md-tab-body-wrapper { position: relative; overflow: hidden; @@ -33,7 +33,7 @@ transition: height $md-tab-animation-duration $ease-in-out-curve-function; } -// Wraps each tab body +// Wraps each tab body md-tab-body { @include md-fill; display: block; @@ -45,8 +45,10 @@ md-tab-body { z-index: 1; flex-grow: 1; } - :host[md-dynamic-height] &.md-tab-body-active { - overflow-y: hidden; + :host[mdDynamicHeight], :host[md-dynamic-height] { + &.md-tab-body-active { + overflow-y: hidden; + } } } @@ -54,4 +56,4 @@ md-tab-body { .md-tab-disabled { cursor: default; pointer-events: none; -} \ No newline at end of file +} diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index 0f46849eeb90..a33d6814236c 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -65,10 +65,15 @@ export class MdTabGroup { /** Whether the tab group should grow to the size of the active tab */ private _dynamicHeight: boolean = false; - @Input('md-dynamic-height') set dynamicHeight(value: boolean) { + @Input('mdDynamicHeight') set dynamicHeight(value: boolean) { this._dynamicHeight = coerceBooleanProperty(value); } + /** @deprecated */ + @Input('md-dynamic-height') + get _dynamicHeightDeprecated(): boolean { return this._dynamicHeight; } + set _dynamicHeightDeprecated(value: boolean) { this._dynamicHeight = value; } + /** The index of the active tab. */ private _selectedIndex: number = null; @Input() set selectedIndex(value: number) { diff --git a/src/lib/tabs/tab-header.html b/src/lib/tabs/tab-header.html index a73c284021f2..238c98f7d8e1 100644 --- a/src/lib/tabs/tab-header.html +++ b/src/lib/tabs/tab-header.html @@ -1,6 +1,6 @@ diff --git a/src/lib/tooltip/README.md b/src/lib/tooltip/README.md index 65a7857d4d01..3d0728cdfee1 100644 --- a/src/lib/tooltip/README.md +++ b/src/lib/tooltip/README.md @@ -6,7 +6,7 @@ The positions `before` and `after` should be used instead of `left` and `right` ### Examples A button with a tooltip ```html - + ``` @@ -17,7 +17,7 @@ A button with a tooltip | Name | Type | Description | | --- | --- | --- | | `md-tooltip` | `string` | The message to be displayed. | -| `tooltip-position` | `"before"|"after"|"above"|"below"|"left"|"right"` | The position of the tooltip. | +| `tooltipPosition` | `"before"|"after"|"above"|"below"|"left"|"right"` | The position of the tooltip. | ### Methods diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 97481e8bbf80..8ab2ea8601b1 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -303,7 +303,7 @@ describe('MdTooltip', () => { template: ` ` }) diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index c14536da593d..e8ff8eaec926 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -58,10 +58,15 @@ export class MdTooltip { /** Allows the user to define the position of the tooltip relative to the parent element */ private _position: TooltipPosition = 'below'; - @Input('tooltip-position') get position(): TooltipPosition { + @Input('tooltipPosition') get position(): TooltipPosition { return this._position; } + /** @deprecated */ + @Input('tooltip-position') + get _positionDeprecated(): TooltipPosition { return this._position; } + set _positionDeprecated(value: TooltipPosition) { this._position = value; } + set position(value: TooltipPosition) { if (value !== this._position) { this._position = value; From ec5cbb1af8f1799d4b3266a77c11599b1d92bd21 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 16 Dec 2016 21:46:14 +0100 Subject: [PATCH 2/8] Fix tabs CSS issue and switch mdDynamicHeight to dynamicHeight. --- src/lib/tabs/tab-group.scss | 8 ++++---- src/lib/tabs/tab-group.ts | 5 ++++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss index ed3c66f93582..0cc31e4050b6 100644 --- a/src/lib/tabs/tab-group.scss +++ b/src/lib/tabs/tab-group.scss @@ -38,6 +38,7 @@ md-tab-body { @include md-fill; display: block; overflow: hidden; + &.md-tab-body-active { position: relative; overflow-x: hidden; @@ -45,10 +46,9 @@ md-tab-body { z-index: 1; flex-grow: 1; } - :host[mdDynamicHeight], :host[md-dynamic-height] { - &.md-tab-body-active { - overflow-y: hidden; - } + + :host.md-tab-group-dynamic-height &.md-tab-body-active { + overflow-y: hidden; } } diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index a33d6814236c..7568946d18bd 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -48,6 +48,9 @@ export class MdTabChangeEvent { selector: 'md-tab-group', templateUrl: 'tab-group.html', styleUrls: ['tab-group.css'], + host: { + '[class.md-tab-group-dynamic-height]': '_dynamicHeight' + } }) export class MdTabGroup { @ContentChildren(MdTab) _tabs: QueryList; @@ -65,7 +68,7 @@ export class MdTabGroup { /** Whether the tab group should grow to the size of the active tab */ private _dynamicHeight: boolean = false; - @Input('mdDynamicHeight') set dynamicHeight(value: boolean) { + @Input() set dynamicHeight(value: boolean) { this._dynamicHeight = coerceBooleanProperty(value); } From 1d4dceb367d9c7d0e2e18ab89ded69d863a5645b Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 16 Dec 2016 22:03:24 +0100 Subject: [PATCH 3/8] Rename [md-tooltip] to [mdTooltip]. --- src/demo-app/tabs/tabs-demo.html | 6 ++---- src/demo-app/tooltip/tooltip-demo.html | 8 ++++---- src/lib/tooltip/README.md | 8 ++++---- src/lib/tooltip/tooltip.spec.ts | 4 ++-- src/lib/tooltip/tooltip.ts | 10 +++++----- 5 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html index 7366de72e4fd..26f9455ab1a1 100644 --- a/src/demo-app/tabs/tabs-demo.html +++ b/src/demo-app/tabs/tabs-demo.html @@ -42,9 +42,7 @@

Tab Group Demo - Dynamic Tabs

- + {{tab.content}} @@ -92,7 +90,7 @@

Tab Group Demo - Dynamic Tabs

Tab Group Demo - Dynamic Height

- + {{tab.content}} diff --git a/src/demo-app/tooltip/tooltip-demo.html b/src/demo-app/tooltip/tooltip-demo.html index 84c0e3d1baee..13031ea41301 100644 --- a/src/demo-app/tooltip/tooltip-demo.html +++ b/src/demo-app/tooltip/tooltip-demo.html @@ -5,10 +5,10 @@

Tooltip Demo

diff --git a/src/lib/tooltip/README.md b/src/lib/tooltip/README.md index 3d0728cdfee1..7d79fa18d2f4 100644 --- a/src/lib/tooltip/README.md +++ b/src/lib/tooltip/README.md @@ -6,18 +6,18 @@ The positions `before` and `after` should be used instead of `left` and `right` ### Examples A button with a tooltip ```html - + ``` -## `[md-tooltip]` +## `[mdTooltip]` ### Properties | Name | Type | Description | | --- | --- | --- | -| `md-tooltip` | `string` | The message to be displayed. | -| `tooltipPosition` | `"before"|"after"|"above"|"below"|"left"|"right"` | The position of the tooltip. | +| `mdTooltip` | `string` | The message to be displayed. | +| `mdTooltipPosition` | `"before"|"after"|"above"|"below"|"left"|"right"` | The position of the tooltip. | ### Methods diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 8ab2ea8601b1..83c9ac5a1657 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -302,8 +302,8 @@ describe('MdTooltip', () => { selector: 'app', template: ` ` }) diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index e8ff8eaec926..be423da68049 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -43,7 +43,7 @@ export const TOUCHEND_HIDE_DELAY = 1500; * https://material.google.com/components/tooltips.html */ @Directive({ - selector: '[md-tooltip], [mat-tooltip]', + selector: '[md-tooltip], [mat-tooltip], [mdTooltip]', host: { '(longpress)': 'show()', '(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')', @@ -58,7 +58,7 @@ export class MdTooltip { /** Allows the user to define the position of the tooltip relative to the parent element */ private _position: TooltipPosition = 'below'; - @Input('tooltipPosition') get position(): TooltipPosition { + @Input('mdTooltipPosition') get position(): TooltipPosition { return this._position; } @@ -80,14 +80,14 @@ export class MdTooltip { } /** The default delay in ms before showing the tooltip after show is called */ - @Input('tooltipShowDelay') showDelay = 0; + @Input('mdTooltipShowDelay') showDelay = 0; /** The default delay in ms before hiding the tooltip after hide is called */ - @Input('tooltipHideDelay') hideDelay = 0; + @Input('mdTooltipHideDelay') hideDelay = 0; /** The message to be displayed in the tooltip */ private _message: string; - @Input('md-tooltip') get message() { + @Input('mdTooltip') get message() { return this._message; } set message(value: string) { From a4675e61af1aaa50bbb932ce5e64f44da6a8a485 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 16 Dec 2016 22:11:54 +0100 Subject: [PATCH 4/8] Rename md-menu-trigger-for to mdMenuTriggerFor. --- src/demo-app/menu/menu-demo.html | 8 ++--- src/e2e-app/menu/menu-e2e.html | 10 +++---- src/lib/menu/README.md | 50 ++++++++++++++++---------------- src/lib/menu/menu-errors.ts | 2 +- src/lib/menu/menu-trigger.ts | 6 ++-- src/lib/menu/menu.spec.ts | 6 ++-- 6 files changed, 41 insertions(+), 41 deletions(-) diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html index 423b31d086ec..1d818adf3e7f 100644 --- a/src/demo-app/menu/menu-demo.html +++ b/src/demo-app/menu/menu-demo.html @@ -3,7 +3,7 @@

You clicked on: {{ selected }}

- @@ -17,7 +17,7 @@

Clicking these will navigate:

- @@ -33,7 +33,7 @@ Position x: before

- @@ -50,7 +50,7 @@ Position y: above

- diff --git a/src/e2e-app/menu/menu-e2e.html b/src/e2e-app/menu/menu-e2e.html index ad1c2f86c817..d9c8040161d8 100644 --- a/src/e2e-app/menu/menu-e2e.html +++ b/src/e2e-app/menu/menu-e2e.html @@ -2,8 +2,8 @@
{{ selected }}
- - + + @@ -12,7 +12,7 @@ - @@ -20,12 +20,12 @@
- + - diff --git a/src/lib/menu/README.md b/src/lib/menu/README.md index b3fe5cef0b6c..f6d8f210395e 100644 --- a/src/lib/menu/README.md +++ b/src/lib/menu/README.md @@ -1,6 +1,6 @@ # md-menu -`md-menu` is a list of options that displays when triggered. You can read more about menus in the +`md-menu` is a list of options that displays when triggered. You can read more about menus in the [Material Design spec](https://material.google.com/components/menus.html). ### Not yet implemented @@ -13,8 +13,8 @@ ### Simple menu -In your template, create an `md-menu` element. You can use either ` @@ -55,10 +55,10 @@ Output: ### Toggling the menu programmatically -You can also use the menu's API to open or close the menu programmatically from your class. Please -note that in this case, an `md-menu-trigger-for` attribute is still necessary to connect +You can also use the menu's API to open or close the menu programmatically from your class. Please +note that in this case, an `mdMenuTriggerFor` attribute is still necessary to connect the menu to its trigger element in the DOM. - + *my-comp.component.ts* ```ts class MyComp { @@ -72,7 +72,7 @@ class MyComp { *my-comp.html* ```html - @@ -91,15 +91,15 @@ Menus also support displaying `md-icon` elements before the menu item text. *my-comp.html* ```html - - - @@ -114,8 +114,8 @@ Output: ### Customizing menu position -By default, the menu will display after and below its trigger. You can change this display position -using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes. +By default, the menu will display after and below its trigger. You can change this display position +using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes. *my-comp.html* ```html @@ -134,7 +134,7 @@ Output: ### Accessibility -The menu adds `role="menu"` to the main menu element and `role="menuitem"` to each menu item. It +The menu adds `role="menu"` to the main menu element and `role="menuitem"` to each menu item. It also adds `aria-hasPopup="true"` to the trigger element. #### Keyboard events: @@ -146,18 +146,18 @@ also adds `aria-hasPopup="true"` to the trigger element. | Signature | Values | Description | | --- | --- | --- | -| `x-position` | `before | after` | The horizontal position of the menu in relation to the trigger. Defaults to `after`. | +| `x-position` | `before | after` | The horizontal position of the menu in relation to the trigger. Defaults to `after`. | | `y-position` | `above | below` | The vertical position of the menu in relation to the trigger. Defaults to `below`. | - + ### Trigger Programmatic API **Properties** | Name | Type | Description | | --- | --- | --- | -| `menuOpen` | `Boolean` | Property that is true when the menu is open. It is not settable (use methods below). | -| `onMenuOpen` | `Observable` | Observable that emits when the menu opens. | -| `onMenuClose` | `Observable` | Observable that emits when the menu closes. | +| `menuOpen` | `Boolean` | Property that is true when the menu is open. It is not settable (use methods below). | +| `onMenuOpen` | `Observable` | Observable that emits when the menu opens. | +| `onMenuClose` | `Observable` | Observable that emits when the menu closes. | **Methods** @@ -165,7 +165,7 @@ also adds `aria-hasPopup="true"` to the trigger element. | --- | --- | --- | | `openMenu()` | `Promise` | Opens the menu. Returns a promise that will resolve when the menu has opened. | | `closeMenu()` | `Promise` | Closes the menu. Returns a promise that will resolve when the menu has closed. | -| `toggleMenu()` | `Promise` | Toggles the menu. Returns a promise that will resolve when the menu has completed opening or closing. | -| `destroyMenu()` | `Promise` | Destroys the menu overlay completely. - +| `toggleMenu()` | `Promise` | Toggles the menu. Returns a promise that will resolve when the menu has completed opening or closing. | +| `destroyMenu()` | `Promise` | Destroys the menu overlay completely. + diff --git a/src/lib/menu/menu-errors.ts b/src/lib/menu/menu-errors.ts index ae634699a661..069dfabd5333 100644 --- a/src/lib/menu/menu-errors.ts +++ b/src/lib/menu/menu-errors.ts @@ -10,7 +10,7 @@ export class MdMenuMissingError extends MdError { Example: - + `); } } diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index cece81c27e69..a61952960827 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -32,7 +32,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions'; * responsible for toggling the display of the provided menu instance. */ @Directive({ - selector: '[md-menu-trigger-for], [mat-menu-trigger-for]', + selector: '[md-menu-trigger-for], [mat-menu-trigger-for], [mdMenuTriggerFor]', host: { 'aria-haspopup': 'true', '(mousedown)': '_handleMousedown($event)', @@ -51,7 +51,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { // the first item of the list when the menu is opened via the keyboard private _openedByMouse: boolean = false; - @Input('md-menu-trigger-for') menu: MdMenuPanel; + @Input('mdMenuTriggerFor') menu: MdMenuPanel; @Output() onMenuOpen = new EventEmitter(); @Output() onMenuClose = new EventEmitter(); @@ -157,7 +157,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { /** * This method checks that a valid instance of MdMenu has been passed into - * md-menu-trigger-for. If not, an exception is thrown. + * mdMenuTriggerFor. If not, an exception is thrown. */ private _checkMenu() { if (!this.menu) { diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index 091de361bc90..a4e82efacc74 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -284,7 +284,7 @@ describe('MdMenu', () => { @Component({ template: ` - + @@ -298,7 +298,7 @@ class SimpleMenu { @Component({ template: ` - + @@ -332,7 +332,7 @@ class CustomMenuPanel implements MdMenuPanel { @Component({ template: ` - + From fb5abcd81e6478e9178dae1ede4fc9a37e3107d1 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sat, 17 Dec 2016 01:03:10 +0100 Subject: [PATCH 5/8] Use public property for dynamic height binding. --- src/lib/tabs/tab-group.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index 7568946d18bd..91f919b4450d 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -48,9 +48,7 @@ export class MdTabChangeEvent { selector: 'md-tab-group', templateUrl: 'tab-group.html', styleUrls: ['tab-group.css'], - host: { - '[class.md-tab-group-dynamic-height]': '_dynamicHeight' - } + host: { '[class.md-tab-group-dynamic-height]': 'dynamicHeight' } }) export class MdTabGroup { @ContentChildren(MdTab) _tabs: QueryList; @@ -68,9 +66,9 @@ export class MdTabGroup { /** Whether the tab group should grow to the size of the active tab */ private _dynamicHeight: boolean = false; - @Input() set dynamicHeight(value: boolean) { - this._dynamicHeight = coerceBooleanProperty(value); - } + @Input() + get dynamicHeight(): boolean { return this._dynamicHeight; } + set dynamicHeight(value: boolean) { this._dynamicHeight = coerceBooleanProperty(value); } /** @deprecated */ @Input('md-dynamic-height') From 71d29056bfa21b2e4d323573911b92028907524d Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sat, 17 Dec 2016 01:08:47 +0100 Subject: [PATCH 6/8] Proper method name. --- src/lib/button/button.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/button/button.html b/src/lib/button/button.html index 486fe19e07b5..3c307dfd2c91 100644 --- a/src/lib/button/button.html +++ b/src/lib/button/button.html @@ -1,7 +1,7 @@
From 3e2c3e31d6ebcfb62c07e9b9474c165639075deb Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sat, 17 Dec 2016 01:12:28 +0100 Subject: [PATCH 7/8] Fix isRoundButton naming. --- src/lib/button/button.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/button/button.html b/src/lib/button/button.html index 3c307dfd2c91..a182e2ebc366 100644 --- a/src/lib/button/button.html +++ b/src/lib/button/button.html @@ -2,7 +2,7 @@
From 8bbcf479d84507885dc2f90916a2232f3b0dd23b Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Fri, 16 Dec 2016 17:08:22 -0800 Subject: [PATCH 8/8] make menu-trigger and md-tooltip backwards compatible --- src/lib/menu/menu-trigger.ts | 5 +++++ src/lib/tooltip/tooltip.ts | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index a61952960827..0243aa248f1b 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -51,6 +51,11 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { // the first item of the list when the menu is opened via the keyboard private _openedByMouse: boolean = false; + /** @deprecated */ + @Input('md-menu-trigger-for') + get _deprecatedMenuTriggerFor(): MdMenuPanel { return this.menu; } + set _deprecatedMenuTriggerFor(v: MdMenuPanel) { this.menu = v; } + @Input('mdMenuTriggerFor') menu: MdMenuPanel; @Output() onMenuOpen = new EventEmitter(); @Output() onMenuClose = new EventEmitter(); diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index be423da68049..b8c1f9e003bd 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -97,6 +97,11 @@ export class MdTooltip { } } + /** @deprecated */ + @Input('md-tooltip') + get _deprecatedMessage(): string { return this.message; } + set _deprecatedMessage(v: string) { this.message = v; } + constructor(private _overlay: Overlay, private _elementRef: ElementRef, private _viewContainerRef: ViewContainerRef, private _ngZone: NgZone, @Optional() private _dir: Dir) {}