Skip to content

Commit 3637b93

Browse files
crisbetojelbourn
crisbeto
authored and
jelbourn
committed
refactor: convert dash-case inputs to camelCase (#2244)
* 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`). * Fix tabs CSS issue and switch mdDynamicHeight to dynamicHeight. * Rename [md-tooltip] to [mdTooltip]. * Rename md-menu-trigger-for to mdMenuTriggerFor. * Use public property for dynamic height binding. * Proper method name. * Fix isRoundButton naming. * make menu-trigger and md-tooltip backwards compatible
1 parent e436775 commit 3637b93

32 files changed

+238
-165
lines changed

‎src/demo-app/menu/menu-demo.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<p>You clicked on: {{ selected }}</p>
44

55
<md-toolbar>
6-
<button md-icon-button [md-menu-trigger-for]="menu" aria-label="Open basic menu">
6+
<button md-icon-button [mdMenuTriggerFor]="menu" aria-label="Open basic menu">
77
<md-icon>more_vert</md-icon>
88
</button>
99
</md-toolbar>
@@ -17,7 +17,7 @@
1717
<div class="menu-section">
1818
<p> Clicking these will navigate:</p>
1919
<md-toolbar>
20-
<button md-icon-button [md-menu-trigger-for]="anchorMenu" aria-label="Open anchor menu">
20+
<button md-icon-button [mdMenuTriggerFor]="anchorMenu" aria-label="Open anchor menu">
2121
<md-icon>more_vert</md-icon>
2222
</button>
2323
</md-toolbar>
@@ -33,7 +33,7 @@
3333
Position x: before
3434
</p>
3535
<md-toolbar class="end-icon">
36-
<button md-icon-button [md-menu-trigger-for]="posXMenu" aria-label="Open x-positioned menu">
36+
<button md-icon-button [mdMenuTriggerFor]="posXMenu" aria-label="Open x-positioned menu">
3737
<md-icon>more_vert</md-icon>
3838
</button>
3939
</md-toolbar>
@@ -50,7 +50,7 @@
5050
Position y: above
5151
</p>
5252
<md-toolbar>
53-
<button md-icon-button [md-menu-trigger-for]="posYMenu" aria-label="Open y-positioned menu">
53+
<button md-icon-button [mdMenuTriggerFor]="posYMenu" aria-label="Open y-positioned menu">
5454
<md-icon>more_vert</md-icon>
5555
</button>
5656
</md-toolbar>

‎src/demo-app/ripple/ripple-demo.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@
4848
[class.demo-ripple-disabled]="disabled"
4949
[class.demo-ripple-rounded]="rounded"
5050
md-ripple
51-
[md-ripple-centered]="centered"
52-
[md-ripple-disabled]="disabled"
53-
[md-ripple-unbounded]="unbounded"
54-
[md-ripple-max-radius]="maxRadius"
55-
[md-ripple-color]="rippleColor"
56-
[md-ripple-background-color]="rippleBackgroundColor"
57-
[md-ripple-speed-factor]="rippleSpeed">
51+
[mdRippleCentered]="centered"
52+
[mdRippleDisabled]="disabled"
53+
[mdRippleUnbounded]="unbounded"
54+
[mdRippleMaxRadius]="maxRadius"
55+
[mdRippleColor]="rippleColor"
56+
[mdRippleBackgroundColor]="rippleBackgroundColor"
57+
[mdRippleSpeedFactor]="rippleSpeed">
5858
Click me
5959
</div>
6060
</section>

‎src/demo-app/slider/slider-demo.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ <h1>Default Slider</h1>
44

55
<h1>Slider with Min and Max</h1>
66
<input [(ngModel)]="min">
7-
<md-slider [min]="min" [max]="max" tick-interval="5" #slider2></md-slider>
7+
<md-slider [min]="min" [max]="max" tickInterval="5" #slider2></md-slider>
88
{{slider2.value}}
99
<input [(ngModel)]="max">
1010

@@ -20,11 +20,11 @@ <h1>Slider with step defined</h1>
2020
{{slider5.value}}
2121

2222
<h1>Slider with set tick interval</h1>
23-
<md-slider tick-interval="auto"></md-slider>
24-
<md-slider tick-interval="9"></md-slider>
23+
<md-slider tickInterval="auto"></md-slider>
24+
<md-slider tickInterval="9"></md-slider>
2525

2626
<h1>Slider with Thumb Label</h1>
27-
<md-slider thumb-label></md-slider>
27+
<md-slider thumbLabel></md-slider>
2828

2929
<h1>Slider with one-way binding</h1>
3030
<md-slider [value]="val" step="40"></md-slider>
@@ -35,13 +35,13 @@ <h1>Slider with two-way binding</h1>
3535
<input [(ngModel)]="demo">
3636

3737
<h1>Inverted slider</h1>
38-
<md-slider invert value="50" tick-interval="5"></md-slider>
38+
<md-slider invert value="50" tickInterval="5"></md-slider>
3939

4040
<h1>Vertical slider</h1>
41-
<md-slider vertical thumb-label tick-interval="auto" value="50"></md-slider>
41+
<md-slider vertical thumbLabel tickInterval="auto" value="50"></md-slider>
4242

4343
<h1>Inverted vertical slider</h1>
44-
<md-slider vertical invert thumb-label tick-interval="auto" value="50"></md-slider>
44+
<md-slider vertical invert thumbLabel tickInterval="auto" value="50"></md-slider>
4545

4646
<md-tab-group>
4747
<md-tab label="One">

‎src/demo-app/tabs/tabs-demo.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,7 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
4242
</md-card-content>
4343
</md-card>
4444

45-
<md-tab-group class="demo-tab-group"
46-
md-dynamic-height
47-
[(selectedIndex)]="activeTabIndex">
45+
<md-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
4846
<md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
4947
<template md-tab-label>{{tab.label}}</template>
5048
{{tab.content}}
@@ -92,7 +90,7 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
9290

9391
<h1>Tab Group Demo - Dynamic Height</h1>
9492

95-
<md-tab-group class="demo-tab-group" md-dynamic-height>
93+
<md-tab-group class="demo-tab-group" dynamicHeight>
9694
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
9795
<template md-tab-label>{{tab.label}}</template>
9896
{{tab.content}}

‎src/demo-app/tooltip/tooltip-demo.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ <h1>Tooltip Demo</h1>
55
<button #tooltip="mdTooltip"
66
md-raised-button
77
color="primary"
8-
[md-tooltip]="message"
9-
[tooltip-position]="position"
10-
[tooltipShowDelay]="showDelay"
11-
[tooltipHideDelay]="hideDelay">
8+
[mdTooltip]="message"
9+
[mdTooltipPosition]="position"
10+
[mdTooltipShowDelay]="showDelay"
11+
[mdTooltipHideDelay]="hideDelay">
1212
Mouse over to see the tooltip
1313
</button>
1414
</p>

‎src/e2e-app/menu/menu-e2e.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<div style="float:left">
33
<div id="text">{{ selected }}</div>
44
<button id="start">START</button>
5-
<button [md-menu-trigger-for]="menu" id="trigger">TRIGGER</button>
6-
<button [md-menu-trigger-for]="menu" id="trigger-two">TRIGGER 2</button>
5+
<button [mdMenuTriggerFor]="menu" id="trigger">TRIGGER</button>
6+
<button [mdMenuTriggerFor]="menu" id="trigger-two">TRIGGER 2</button>
77

88
<md-menu #menu="mdMenu" y-position="below" class="custom">
99
<button md-menu-item (click)="selected='one'">One</button>
@@ -12,20 +12,20 @@
1212
<button md-menu-item>Four</button>
1313
</md-menu>
1414

15-
<button [md-menu-trigger-for]="beforeMenu" id="before-t">
15+
<button [mdMenuTriggerFor]="beforeMenu" id="before-t">
1616
BEFORE
1717
</button>
1818
<md-menu x-position="before" y-position="below" class="before" #beforeMenu="mdMenu">
1919
<button md-menu-item>Item</button>
2020
</md-menu>
2121

2222
<div class="bottom-row">
23-
<button [md-menu-trigger-for]="aboveMenu" id="above-t">ABOVE</button>
23+
<button [mdMenuTriggerFor]="aboveMenu" id="above-t">ABOVE</button>
2424
<md-menu y-position="above" class="above" #aboveMenu="mdMenu">
2525
<button md-menu-item>Item</button>
2626
</md-menu>
2727

28-
<button [md-menu-trigger-for]="combined" id="combined-t">
28+
<button [mdMenuTriggerFor]="combined" id="combined-t">
2929
BOTH
3030
</button>
3131
<md-menu x-position="before" y-position="above" class="combined" #combined="mdMenu">

‎src/lib/button/button.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<span class="md-button-wrapper"><ng-content></ng-content></span>
22
<div md-ripple *ngIf="!_isRippleDisabled()" class="md-button-ripple"
33
[class.md-button-ripple-round]="_isRoundButton()"
4-
[md-ripple-trigger]="_getHostElement()"
5-
[md-ripple-color]="_isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
6-
md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
4+
[mdRippleTrigger]="_getHostElement()"
5+
[mdRippleColor]="_isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
6+
mdRippleBackgroundColor="rgba(0, 0, 0, 0)"></div>
77
<!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
88
<div class="md-button-focus-overlay" (touchstart)="$event.preventDefault()"></div>

‎src/lib/button/button.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ describe('MdButton', () => {
168168
anchorElement = fixture.nativeElement.querySelector('a[md-button]');
169169
});
170170

171-
it('should remove ripple if md-ripple-disabled input is set', () => {
171+
it('should remove ripple if mdRippleDisabled input is set', () => {
172172
expect(buttonElement.querySelectorAll('[md-ripple]').length).toBe(1);
173173

174174
testComponent.rippleDisabled = true;

‎src/lib/checkbox/checkbox.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
(change)="_onInteractionEvent($event)"
1717
(click)="_onInputClick($event)">
1818
<div md-ripple *ngIf="!_isRippleDisabled()" class="md-checkbox-ripple"
19-
[md-ripple-trigger]="_getHostElement()"
20-
[md-ripple-centered]="true"
21-
[md-ripple-speed-factor]="0.3"
22-
md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
19+
[mdRippleTrigger]="_getHostElement()"
20+
[mdRippleCentered]="true"
21+
[mdRippleSpeedFactor]="0.3"
22+
mdRippleBackgroundColor="rgba(0, 0, 0, 0)"></div>
2323
<div class="md-checkbox-frame"></div>
2424
<div class="md-checkbox-background">
2525
<svg version="1.1"

‎src/lib/checkbox/checkbox.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -521,7 +521,7 @@ describe('MdCheckbox', () => {
521521
expect(inputElement.tabIndex).toBe(13);
522522
});
523523

524-
it('should remove ripple if md-ripple-disabled input is set', async(() => {
524+
it('should remove ripple if mdRippleDisabled input is set', async(() => {
525525
testComponent.disableRipple = true;
526526
fixture.detectChanges();
527527

‎src/lib/core/ripple/README.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# md-ripple
22

3-
`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 `<div md-ripple [md-ripple-color]="rippleColor">...</div>`.
3+
`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 `<div md-ripple [mdRippleColor]="rippleColor">...</div>`.
44

55
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.
66

@@ -17,11 +17,11 @@ Properties:
1717

1818
| Name | Type | Description |
1919
| --- | --- | --- |
20-
| `md-ripple-trigger` | Element | The DOM element that triggers the ripple when clicked. Defaults to the parent of the `md-ripple`.
21-
| `md-ripple-color` | string | Custom color for foreground ripples
22-
| `md-ripple-background-color` | string | Custom color for the ripple background
23-
| `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.
24-
| `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.
25-
| `md-ripple-unbounded` | boolean | If true, foreground ripples will be visible outside the component's bounds.
26-
| `md-ripple-focused` | boolean | If true, the background ripple is shown using the current theme's accent color to indicate focus.
27-
| `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.
20+
| `mdRippleTrigger` | Element | The DOM element that triggers the ripple when clicked. Defaults to the parent of the `md-ripple`.
21+
| `mdRippleColor` | string | Custom color for foreground ripples
22+
| `mdRippleBackgroundColor` | string | Custom color for the ripple background
23+
| `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.
24+
| `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.
25+
| `mdRippleUnbounded` | boolean | If true, foreground ripples will be visible outside the component's bounds.
26+
| `mdRippleFocused` | boolean | If true, the background ripple is shown using the current theme's accent color to indicate focus.
27+
| `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.

‎src/lib/core/ripple/_ripple.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../theming/theming';
22

33

4-
$md-ripple-focused-opacity: 0.1;
4+
$mdRippleFocused-opacity: 0.1;
55
$md-ripple-background-fade-duration: 300ms;
66
$md-ripple-background-default-color: rgba(0, 0, 0, 0.0588);
77
$md-ripple-foreground-initial-opacity: 0.25;
@@ -15,7 +15,7 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
1515
overflow: hidden;
1616
}
1717

18-
[md-ripple].md-ripple-unbounded {
18+
[md-ripple].mdRippleUnbounded {
1919
overflow: visible;
2020
}
2121

@@ -30,15 +30,15 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
3030
bottom: 0;
3131
}
3232

33-
.md-ripple-unbounded .md-ripple-background {
33+
.mdRippleUnbounded .md-ripple-background {
3434
display: none;
3535
}
3636

3737
.md-ripple-background.md-ripple-active {
3838
opacity: 1;
3939
}
4040

41-
.md-ripple-focused .md-ripple-background {
41+
.mdRippleFocused .md-ripple-background {
4242
opacity: 1;
4343
}
4444

@@ -64,8 +64,8 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
6464
@mixin md-ripple-theme($theme) {
6565
$accent: map-get($theme, accent);
6666

67-
.md-ripple-focused .md-ripple-background {
68-
background-color: md-color($accent, $md-ripple-focused-opacity);
67+
.mdRippleFocused .md-ripple-background {
68+
background-color: md-color($accent, $mdRippleFocused-opacity);
6969
}
7070
}
7171

‎src/lib/core/ripple/ripple.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -438,12 +438,12 @@ class BasicRippleContainer {
438438
template: `
439439
<div id="container" style="position: relative; width:300px; height:200px;"
440440
md-ripple
441-
[md-ripple-trigger]="trigger"
442-
[md-ripple-centered]="centered"
443-
[md-ripple-max-radius]="maxRadius"
444-
[md-ripple-disabled]="disabled"
445-
[md-ripple-color]="color"
446-
[md-ripple-background-color]="backgroundColor">
441+
[mdRippleTrigger]="trigger"
442+
[mdRippleCentered]="centered"
443+
[mdRippleMaxRadius]="maxRadius"
444+
[mdRippleDisabled]="disabled"
445+
[mdRippleColor]="color"
446+
[mdRippleBackgroundColor]="backgroundColor">
447447
</div>
448448
<div class="alternateTrigger"></div>
449449
`,

0 commit comments

Comments
 (0)