Skip to content

Commit 4702d60

Browse files
lukemelialukemelia
authored
Merge pull request #344 from rwwagner90/angle-bracket
Update to angle bracket components
2 parents 24ceb66 + 132f02e commit 4702d60

File tree

12 files changed

+137
-354
lines changed

12 files changed

+137
-354
lines changed

‎.template-lintrc.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
'use strict';
22

33
module.exports = {
4-
extends: 'recommended'
4+
extends: 'octane',
5+
rules: {
6+
'no-action': false,
7+
'no-curly-component-invocation': false,
8+
'no-implicit-this': false,
9+
'require-button-type': false
10+
}
511
};

‎addon/templates/components/basic-dialog.hbs

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{{#ember-wormhole to=this.destinationElementId}}
1+
<EmberWormhole @to={{this.destinationElementId}}>
22
{{#if this.isOverlaySibling}}
33
<div class="{{this.wrapperClassNamesString}} {{this.wrapperClass}}">
44
{{#if this.hasOverlay}}
@@ -10,13 +10,9 @@
1010
>
1111
</div>
1212
{{/if}}
13-
{{#ember-modal-dialog-positioned-container
14-
class=this.containerClassNamesString
15-
targetAttachment=this.targetAttachment
16-
target=this.legacyTarget
17-
}}
13+
<EmberModalDialogPositionedContainer @class={{this.containerClassNamesString}} @targetAttachment={{this.targetAttachment}} @target={{this.legacyTarget}}>
1814
{{yield}}
19-
{{/ember-modal-dialog-positioned-container}}
15+
</EmberModalDialogPositionedContainer>
2016
</div>
2117
{{else}}
2218
<div class="{{this.wrapperClassNamesString}} {{this.wrapperClass}}">
@@ -27,23 +23,15 @@
2723
tabindex="-1"
2824
data-emd-overlay
2925
>
30-
{{#ember-modal-dialog-positioned-container
31-
class=this.containerClassNamesString
32-
targetAttachment=this.targetAttachment
33-
target=this.legacyTarget
34-
}}
26+
<EmberModalDialogPositionedContainer @class={{this.containerClassNamesString}} @targetAttachment={{this.targetAttachment}} @target={{this.legacyTarget}}>
3527
{{yield}}
36-
{{/ember-modal-dialog-positioned-container}}
28+
</EmberModalDialogPositionedContainer>
3729
</div>
3830
{{else}}
39-
{{#ember-modal-dialog-positioned-container
40-
class=this.containerClassNamesString
41-
targetAttachment=this.targetAttachment
42-
target=this.legacyTarget
43-
}}
31+
<EmberModalDialogPositionedContainer @class={{this.containerClassNamesString}} @targetAttachment={{this.targetAttachment}} @target={{this.legacyTarget}}>
4432
{{yield}}
45-
{{/ember-modal-dialog-positioned-container}}
33+
</EmberModalDialogPositionedContainer>
4634
{{/if}}
4735
</div>
4836
{{/if}}
49-
{{/ember-wormhole}}
37+
</EmberWormhole>

‎addon/templates/components/liquid-dialog.hbs

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
{{#if this.isOverlaySibling}}
2-
{{#liquid-wormhole
3-
stack=this.stack
4-
value=this.value
5-
class=(concat "liquid-dialog-container " this.wrapperClassNamesString " " this.wrapperClass)
6-
}}
2+
<LiquidWormhole @stack={{this.stack}} @value={{this.value}} @class={{concat "liquid-dialog-container " this.wrapperClassNamesString " " this.wrapperClass}}>
73
<div class="{{this.wrapperClassNamesString}} {{this.wrapperClass}}">
84
{{#if this.hasOverlay}}
95
<div
@@ -18,13 +14,9 @@
1814
{{yield}}
1915
</div>
2016
</div>
21-
{{/liquid-wormhole}}
17+
</LiquidWormhole>
2218
{{else}}
23-
{{#liquid-wormhole
24-
stack=this.stack
25-
value=this.value
26-
class=(concat "liquid-dialog-container " this.wrapperClassNamesString " " this.wrapperClass)
27-
}}
19+
<LiquidWormhole @stack={{this.stack}} @value={{this.value}} @class={{concat "liquid-dialog-container " this.wrapperClassNamesString " " this.wrapperClass}}>
2820
{{#if this.hasOverlay}}
2921
<div
3022
class={{this.overlayClassNamesString}}
@@ -41,5 +33,5 @@
4133
{{yield}}
4234
</div>
4335
{{/if}}
44-
{{/liquid-wormhole}}
36+
</LiquidWormhole>
4537
{{/if}}

‎addon/templates/components/liquid-tether-dialog.hbs

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,14 @@
11
{{#if this.hasOverlay}}
2-
{{#liquid-wormhole
3-
stack="modal-overlay"
4-
class="liquid-dialog-container"
5-
}}
2+
<LiquidWormhole @stack="modal-overlay" @class="liquid-dialog-container">
63
<div
74
class={{this.overlayClassNamesString}}
85
onclick={{action this.onClickOverlay}}
96
tabindex="-1"
107
data-emd-overlay
118
>
129
</div>
13-
{{/liquid-wormhole}}
10+
</LiquidWormhole>
1411
{{/if}}
15-
{{#liquid-tether
16-
class=this.containerClassNamesString
17-
target=this.tetherTarget
18-
attachment=this.attachment
19-
targetAttachment=this.targetAttachment
20-
targetModifier=this.targetModifier
21-
classPrefix=this.tetherClassPrefix
22-
offset=this.offset
23-
targetOffset=this.targetOffset
24-
constraints=this.constraints
25-
stack=this.stack
26-
value=this.value
27-
}}
12+
<LiquidTether @class={{this.containerClassNamesString}} @target={{this.tetherTarget}} @attachment={{this.attachment}} @targetAttachment={{this.targetAttachment}} @targetModifier={{this.targetModifier}} @classPrefix={{this.tetherClassPrefix}} @offset={{this.offset}} @targetOffset={{this.targetOffset}} @constraints={{this.constraints}} @stack={{this.stack}} @value={{this.value}}>
2813
{{yield}}
29-
{{/liquid-tether}}
14+
</LiquidTether>

‎addon/templates/components/tether-dialog.hbs

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
{{#if this.hasOverlay}}
2-
{{#ember-wormhole to=this.destinationElementId}}
2+
<EmberWormhole @to={{this.destinationElementId}}>
33
<div
44
class={{this.overlayClassNamesString}}
55
onclick={{action this.onClickOverlay}}
66
tabindex="-1"
77
data-emd-overlay
88
>
99
</div>
10-
{{/ember-wormhole}}
10+
</EmberWormhole>
1111
{{/if}}
12-
{{#ember-tether
13-
class=this.containerClassNamesString
14-
target=this.tetherTarget
15-
attachment=this.attachment
16-
targetAttachment=this.targetAttachment
17-
targetModifier=this.targetModifier
18-
classPrefix=this.tetherClassPrefix
19-
offset=this.offset
20-
targetOffset=this.targetOffset
21-
constraints=this.constraints
22-
}}
12+
<EmberTether @class={{this.containerClassNamesString}} @target={{this.tetherTarget}} @attachment={{this.attachment}} @targetAttachment={{this.targetAttachment}} @targetModifier={{this.targetModifier}} @classPrefix={{this.tetherClassPrefix}} @offset={{this.offset}} @targetOffset={{this.targetOffset}} @constraints={{this.constraints}}>
2313
{{yield}}
24-
{{/ember-tether}}
14+
</EmberTether>

‎codemods.log

Whitespace-only changes.

‎tests/dummy/app/templates/animatable.hbs

Lines changed: 26 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -8,65 +8,50 @@
88

99
<div class="example">
1010
<h3>app/transitions.js for these examples</h3>
11-
{{code-snippet name="animated-transitions.js"}}
11+
<CodeSnippet @name="animated-transitions.js" />
1212
</div>
1313

1414
<div class="example" id="example-basic">
1515
<h2>Basic</h2>
1616
<button {{action "toggleBasic"}}>Do It</button>
17-
{{code-snippet name="basic-modal-dialog-animatable.hbs"}}
17+
<CodeSnippet @name="basic-modal-dialog-animatable.hbs" />
1818
{{#if isShowingBasic}}
1919
{{!-- BEGIN-SNIPPET basic-modal-dialog-animatable --}}
20-
{{#modal-dialog
21-
onClose=(action "toggleBasic")
22-
overlayPosition="sibling"
23-
clickOutsideToClose=true
24-
animatable=true
25-
}}
20+
<ModalDialog @onClose={{action "toggleBasic"}} @overlayPosition="sibling" @clickOutsideToClose={{true}} @animatable={{true}}>
2621
<h1>Stop! Modal Time!</h1>
2722
<p>Basic</p>
2823
<button {{action "toggleBasic"}}>Close</button>
29-
{{/modal-dialog}}
24+
</ModalDialog>
3025
{{!-- END-SNIPPET --}}
3126
{{/if}}
3227
</div>
3328

3429
<div class="example" id="example-translucent">
3530
<h2>With Translucent Overlay</h2>
3631
<button {{action "toggleTranslucent"}}>Do It</button>
37-
{{code-snippet name="translucent-modal-dialog-animatable.hbs"}}
32+
<CodeSnippet @name="translucent-modal-dialog-animatable.hbs" />
3833
{{#if isShowingTranslucent}}
3934
{{!-- BEGIN-SNIPPET translucent-modal-dialog-animatable --}}
40-
{{#modal-dialog
41-
onClose=(action "toggleTranslucent")
42-
translucentOverlay=true
43-
overlayPosition="sibling"
44-
clickOutsideToClose=true
45-
animatable=true
46-
}}
35+
<ModalDialog @onClose={{action "toggleTranslucent"}} @translucentOverlay={{true}} @overlayPosition="sibling" @clickOutsideToClose={{true}} @animatable={{true}}>
4736
<h1>Stop! Modal Time!</h1>
4837
<p>With Translucent Overlay</p>
4938
<button {{action "toggleTranslucent"}}>Close</button>
50-
{{/modal-dialog}}
39+
</ModalDialog>
5140
{{!-- END-SNIPPET --}}
5241
{{/if}}
5342
</div>
5443

5544
<div class="example" id="example-without-overlay">
5645
<h2>Without Overlay</h2>
5746
<button {{action "toggleWithoutOverlay"}}>Do It</button>
58-
{{code-snippet name="without-overlay-modal-dialog-animatable.hbs"}}
47+
<CodeSnippet @name="without-overlay-modal-dialog-animatable.hbs" />
5948
{{#if isShowingWithoutOverlay}}
6049
{{!-- BEGIN-SNIPPET without-overlay-modal-dialog-animatable --}}
61-
{{#modal-dialog
62-
onClose=(action "toggleWithoutOverlay")
63-
hasOverlay=false
64-
animatable=true
65-
}}
50+
<ModalDialog @onClose={{action "toggleWithoutOverlay"}} @hasOverlay={{false}} @animatable={{true}}>
6651
<h1>Stop! Modal Time!</h1>
6752
<p>Without Overlay</p>
6853
<button {{action "toggleWithoutOverlay"}}>Close</button>
69-
{{/modal-dialog}}
54+
</ModalDialog>
7055
{{!-- END-SNIPPET --}}
7156
{{/if}}
7257
</div>
@@ -80,80 +65,55 @@
8065
>
8166
Another one
8267
</button>
83-
{{code-snippet
84-
name="without-overlay-click-outside-to-close-modal-dialog-animatable.hbs"
85-
}}
68+
<CodeSnippet @name="without-overlay-click-outside-to-close-modal-dialog-animatable.hbs" />
8669
{{#if isShowingWithoutOverlayClickOutsideToClose}}
8770
{{!-- BEGIN-SNIPPET without-overlay-click-outside-to-close-modal-dialog-animatable --}}
88-
{{#modal-dialog
89-
onClose=(action "toggleWithoutOverlayClickOutsideToClose")
90-
hasOverlay=false
91-
clickOutsideToClose=true
92-
animatable=true
93-
}}
71+
<ModalDialog @onClose={{action "toggleWithoutOverlayClickOutsideToClose"}} @hasOverlay={{false}} @clickOutsideToClose={{true}} @animatable={{true}}>
9472
<h1>Stop! Modal Time!</h1>
9573
<p>Without Overlay - Click Outside to Close</p>
9674
<button {{action "toggleWithoutOverlayClickOutsideToClose"}}>Close</button>
97-
{{/modal-dialog}}
75+
</ModalDialog>
9876
{{!-- END-SNIPPET --}}
9977
{{/if}}
10078
{{#if isShowingWithoutOverlayClickOutsideToCloseAnotherOne}}
101-
{{#modal-dialog
102-
onClose=(action "toggleWithoutOverlayClickOutsideToCloseAnotherOne")
103-
hasOverlay=false
104-
clickOutsideToClose=true
105-
offset="100px 0"
106-
animatable=true
107-
}}
79+
<ModalDialog @onClose={{action "toggleWithoutOverlayClickOutsideToCloseAnotherOne"}} @hasOverlay={{false}} @clickOutsideToClose={{true}} @offset="100px 0" @animatable={{true}}>
10880
<h1>Stop! Another modal!</h1>
10981
<p>Without Overlay Another One - Click Outside to Close</p>
11082
<button {{action "toggleWithoutOverlayClickOutsideToCloseAnotherOne"}}>Close</button>
111-
{{/modal-dialog}}
83+
</ModalDialog>
11284
{{/if}}
11385

11486
</div>
11587

11688
<div class="example" id="example-custom-styles">
11789
<h2>Custom Styles</h2>
118-
<button onclick={{action (mut isShowingCustomStyles true)}}>Do It</button>
119-
{{code-snippet name="custom-styles-modal-dialog-animatable.hbs"}}
120-
{{code-snippet name="custom-styles.scss"}}
90+
<button onclick={{action (mut isShowingCustomStyles) true}}>Do It</button>
91+
<CodeSnippet @name="custom-styles-modal-dialog-animatable.hbs" />
92+
<CodeSnippet @name="custom-styles.scss" />
12193
{{#if isShowingCustomStyles}}
12294
{{!-- BEGIN-SNIPPET custom-styles-modal-dialog-animatable --}}
123-
{{#modal-dialog
124-
onClose=(action (mut isShowingCustomStyles false))
125-
containerClass="custom-styles-modal-container"
126-
overlayClass="custom-styles-overlay"
127-
wrapperClass="custom-styles-wrapper"
128-
overlayPosition="sibling"
129-
clickOutsideToClose=true
130-
targetAttachment="none"
131-
animatable=true
132-
}}
95+
<ModalDialog @onClose={{action (mut isShowingCustomStyles) false}} @containerClass="custom-styles-modal-container" @overlayClass="custom-styles-overlay" @wrapperClass="custom-styles-wrapper" @overlayPosition="sibling" @clickOutsideToClose={{true}} @targetAttachment="none" @animatable={{true}}>
13396
<h1>Stop! Modal Time!</h1>
13497
<p>Custom Styles</p>
135-
<button {{action (action (mut isShowingCustomStyles false))}}>Close</button>
136-
{{/modal-dialog}}
98+
<button {{action (action (mut isShowingCustomStyles) false)}}>Close</button>
99+
</ModalDialog>
137100
{{!-- END-SNIPPET --}}
138101
{{/if}}
139102
</div>
140103

141104
<div class="example" id="example-subclass">
142105
<h2>Via Subclass</h2>
143106
<button {{action "toggleSubclassed"}}>Do It</button>
144-
{{code-snippet name="subclass.js"}}
145-
{{code-snippet name="subclass-modal-dialog-animatable.hbs"}}
146-
{{code-snippet name="subclass-styles.scss"}}
107+
<CodeSnippet @name="subclass.js" />
108+
<CodeSnippet @name="subclass-modal-dialog-animatable.hbs" />
109+
<CodeSnippet @name="subclass-styles.scss" />
147110
{{#if isShowingSubclassed}}
148111
{{!-- BEGIN-SNIPPET subclass-modal-dialog-animatable --}}
149-
{{#my-cool-modal-dialog
150-
onClose=(action "toggleSubclassed")
151-
animatable=true
152-
}}
112+
<MyCoolModalDialog @onClose={{action "toggleSubclassed"}} @animatable={{true}}>
153113
<h1>Stop! Modal Time!</h1>
154114
<p>Via Subclass</p>
155115
<button {{action "toggleSubclassed"}}>Close</button>
156-
{{/my-cool-modal-dialog}}
116+
</MyCoolModalDialog>
157117
{{!-- END-SNIPPET --}}
158118
{{/if}}
159119
</div>

‎tests/dummy/app/templates/application.hbs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
The modal-dialog component can behave in four different ways.
44
</p>
55
<ul class="ApplicationRoute-nav">
6-
<li>{{#link-to "index"}}css-positioned, not animatable{{/link-to}}</li>
7-
<li>{{#link-to "animatable"}}css-positioned, animatable{{/link-to}}</li>
8-
<li>{{#link-to "tethered"}}tethered, not animatable{{/link-to}}</li>
9-
<li>{{#link-to "tethered-animatable"}}tethered, animatable{{/link-to}}</li>
6+
<li><LinkTo @route="index">css-positioned, not animatable</LinkTo></li>
7+
<li><LinkTo @route="animatable">css-positioned, animatable</LinkTo></li>
8+
<li><LinkTo @route="tethered">tethered, not animatable</LinkTo></li>
9+
<li><LinkTo @route="tethered-animatable">tethered, animatable</LinkTo></li>
1010
</ul>
1111

1212
{{outlet}}

‎tests/dummy/app/templates/components/component-that-uses-modal-dialog.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{{#if isShowingModalDialog}}
2-
{{#modal-dialog}}
2+
<ModalDialog>
33
<h1>Stop! Modal Time!</h1>
44
<button class="close" {{action "closeModalDialog"}}>Close</button>
5-
{{/modal-dialog}}
5+
</ModalDialog>
66
{{/if}}
77

88
<h1>A component that has a modal dialog</h1>

0 commit comments

Comments
 (0)