Skip to content

Commit

Permalink
Merge pull request #88 from josemarluedke/chore/upgrade-css-transitions
Browse files Browse the repository at this point in the history 
Upgrade ember-css-transitions to v2
  • Loading branch information
@josemarluedke
josemarluedke committed Aug 18, 2020
2 parents c0380fc + a6031bb commit ac67987
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 61 deletions.
46 changes: 14 additions & 32 deletions packages/overlays/addon/components/overlay.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,11 @@
>
{{!-- template-lint-disable no-invalid-interactive --}}
{{#if this.isBackdropVisible}}
{{#if @disableTransitions}}
<div
class="overlay__backdrop"
{{on "click" this.handleOverlayClick}}
></div>
{{else}}
<div
class="overlay__backdrop"
{{on "click" this.handleOverlayClick}}
{{css-transition (if @backdropTransitionName @backdropTransitionName "overlay--transition--fade")}}
></div>
{{/if}}
<div
class="overlay__backdrop"
{{on "click" this.handleOverlayClick}}
{{css-transition (if @backdropTransitionName @backdropTransitionName "overlay--transition--fade") isEnabled=this.isAnimationEnabled}}
></div>
{{/if}}

{{!--
Expand All @@ -41,26 +34,15 @@
<span data-is-visible={{this.isVisible}}></span>

{{#if @isOpen}}
{{#if @disableTransitions}}
<div
class="overlay__content"
{{on "click" this.handleContentClick}}
{{did-insert this.setup}}
{{will-destroy this.teardown}}
>
{{yield}}
</div>
{{else}}
<div
class="overlay__content"
{{on "click" this.handleContentClick}}
{{did-insert this.setup}}
{{will-destroy this.teardown}}
{{css-transition (if @contentTransitionName @contentTransitionName "overlay--transition--fade")}}
>
{{yield}}
</div>
{{/if}}
<div
class="overlay__content"
{{on "click" this.handleContentClick}}
{{did-insert this.setup}}
{{will-destroy this.teardown}}
{{css-transition (if @contentTransitionName @contentTransitionName "overlay--transition--fade") isEnabled=this.isAnimationEnabled}}
>
{{yield}}
</div>
{{/if}}
{{!-- template-lint-enable no-invalid-interactive --}}
</div>
Expand Down
4 changes: 4 additions & 0 deletions packages/overlays/addon/components/overlay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,10 @@ export default class Overlay extends Component<OverlayArgs> {
return this.args.isOpen === true && this.args.disableBackdrop !== true;
}

get isAnimationEnabled(): boolean {
return !(this.args.disableTransitions === true);
}

@action handleOverlayClick(): void {
if (this.args.closeOnOutsideClick !== false) {
this.handleClose();
Expand Down
6 changes: 0 additions & 6 deletions packages/overlays/addon/tailwind/default-options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,12 @@ function defaultOptions({ config }) {
opacity: 0
},
enterActive: {
opacity: 1,
transition: 'opacity 0.2s linear'
},
leave: {
opacity: 1
},
leaveActive: {
opacity: 0,
transition: 'opacity 0.2s linear'
}
},
Expand All @@ -142,17 +140,13 @@ function defaultOptions({ config }) {
transform: 'scale(0.8)'
},
enterActive: {
opacity: 1,
transform: 'scale(1)',
transition: 'all 0.2s ease-in-out'
},
leave: {
opacity: 1,
transform: 'scale(1)'
},
leaveActive: {
opacity: 0,
transform: 'scale(0.8)',
transition: 'all 0.2s ease-in-out'
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/overlays/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"ember-cli-babel": "^7.21.0",
"ember-cli-htmlbars": "^5.2.0",
"ember-cli-typescript": "^3.1.4",
"ember-css-transitions": "^1.0.1",
"ember-css-transitions": "^2.1.0",
"ember-focus-trap": "^0.4.0",
"ember-maybe-in-element": "^2.0.1"
},
Expand Down
7 changes: 5 additions & 2 deletions packages/overlays/tailwind.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,12 @@ module.exports = plugin.withOptions(function (userConfig) {

name = `.overlay--transition--${name}`;

addComponents({ [`${name}-enter`]: enter });
addComponents({
[`${name}-enter`]: enter,
[`${name}-leave-to`]: enter
});
addComponents({ [`${name}-enter-active`]: enterActive });
addComponents({ [`${name}-leave`]: leave });
addComponents({ [`${name}-leave`]: leave, [`${name}-enter-to`]: leave });
addComponents({ [`${name}-leave-active`]: leaveActive });
}

Expand Down
2 changes: 1 addition & 1 deletion packages/overlays/tests/integration/components/overlay-test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ module('Integration | Component | Overlay', function (hooks) {
data-test-id="overlay"
>
My Content
<button>Something focusable</button>
<button type="button">Something focusable</button>
</Overlay>
`;

Expand Down
47 changes: 28 additions & 19 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6770,9 +6770,9 @@ ee-first@1.1.1:
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=

electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.523:
version "1.3.535"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.535.tgz#e31ee048de6f9c8d92bd25d4e3d1a92bedbe5cb2"
integrity sha512-5k7WGdl1ZnbcU97acUnY/UXu6bCMDnKCAnEc1N0xNToPvMCp99PEvh5K3xNr4ZUVCf2FuratM++NgOxCtbtXzA==
version "1.3.536"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.536.tgz#78a4ff753111283489f3b6ad19664902245ab876"
integrity sha512-aU16nvH8/zNNeFIQ7H2SKRQlJ/srw7mCn/JDj2ImWUA7Lk2+3zJFpDGJNP2qRxPAZsC+qgnlgNTYIvT6EOdJFQ==

elliptic@^6.5.3:
version "6.5.3"
Expand Down Expand Up @@ -7213,7 +7213,7 @@ ember-cli-htmlbars@^4.0.5, ember-cli-htmlbars@^4.2.3, ember-cli-htmlbars@^4.3.1:
strip-bom "^4.0.0"
walk-sync "^2.0.2"

ember-cli-htmlbars@^5.1.2, ember-cli-htmlbars@^5.2.0:
ember-cli-htmlbars@^5.2.0:
version "5.3.1"
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-5.3.1.tgz#61793964fc2599ce750db9e972ab55c6dd177c48"
integrity sha512-ZjQTt44euDoqLvUkWbt1svgNCXgLzOztEbc2qqYMQvhQig416LMrWK7l3SSbNU+BtLD5UIxmwvLfF1tsO2CVyA==
Expand Down Expand Up @@ -7636,15 +7636,15 @@ ember-concurrency-decorators@^2.0.0:
ember-compatibility-helpers "^1.2.0"
ember-maybe-import-regenerator "^0.1.6"

ember-css-transitions@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/ember-css-transitions/-/ember-css-transitions-1.1.0.tgz#2cf32644788ca0b8f44ed617c870451d66034355"
integrity sha512-p+PNPmeMniNe7xIGCSfOyp0iOjZPDwM+pACN9+JTNswHSf3ecgo7UrzzYs21q3y0ic1vTVJQjjzIVNvXeInfXQ==
ember-css-transitions@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/ember-css-transitions/-/ember-css-transitions-2.1.0.tgz#146d08a9d667c6432a00184319bc788e62b71ef7"
integrity sha512-llIXF46cAOCk6kJiXdFVwoEnax621bbAgPfnkOQgAAXOIC9IrQbYkyj2NDjKyynmLAFUUEkeZbCA8UtajkkN3Q==
dependencies:
ember-cli-babel "^7.20.5"
ember-cli-htmlbars "^5.1.2"
ember-cli-babel "^7.22.1"
ember-cli-htmlbars "^5.2.0"
ember-cli-requestanimationframe-polyfill "^0.0.1"
ember-modifier "^1.0.3"
ember-modifier "^2.1.0"

"ember-data@2.x - 3.x":
version "3.20.0"
Expand All @@ -7666,6 +7666,15 @@ ember-css-transitions@^1.0.1:
ember-cli-typescript "^3.1.3"
ember-inflector "^3.0.1"

ember-destroyable-polyfill@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/ember-destroyable-polyfill/-/ember-destroyable-polyfill-2.0.1.tgz#391cd95a99debaf24148ce953054008d00f151a6"
integrity sha512-hyK+/GPWOIxM1vxnlVMknNl9E5CAFVbcxi8zPiM0vCRwHiFS8Wuj7PfthZ1/OFitNNv7ITTeU8hxqvOZVsrbnQ==
dependencies:
ember-cli-babel "^7.22.1"
ember-cli-version-checker "^5.1.1"
ember-compatibility-helpers "^1.2.1"

ember-disable-prototype-extensions@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/ember-disable-prototype-extensions/-/ember-disable-prototype-extensions-1.1.3.tgz#1969135217654b5e278f9fe2d9d4e49b5720329e"
Expand Down Expand Up @@ -7808,16 +7817,16 @@ ember-modifier-manager-polyfill@^1.1.0, ember-modifier-manager-polyfill@^1.2.0:
ember-cli-version-checker "^2.1.2"
ember-compatibility-helpers "^1.2.0"

ember-modifier@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-1.0.4.tgz#9ad1e16f83d4d315daf7a0b828fe96cbd67925f5"
integrity sha512-AkflmmMn1iLEwCNvavdtoyuZGLPtujypAyNW/0+aN9uCGqOEtpIxaLqz5E9SII8OVGuFTHJ8a6GwpLNGfuauYA==
ember-modifier@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-2.1.0.tgz#99d85995caad8789220dc3208fb5ded45647dccf"
integrity sha512-tVmRcEloYg8AZHheEMhBhzX64r7n6AFLXG69L/jiHePvQzet9mjV18YiIPStQf+fdjTAO25S6yzNPDP3zQjWtQ==
dependencies:
ember-cli-babel "^7.11.1"
ember-cli-is-package-missing "^1.0.0"
ember-cli-babel "^7.22.1"
ember-cli-normalize-entity-name "^1.0.0"
ember-cli-string-utils "^1.1.0"
ember-compatibility-helpers "^1.2.1"
ember-cli-typescript "^3.1.3"
ember-destroyable-polyfill "^2.0.1"
ember-modifier-manager-polyfill "^1.2.0"

ember-named-arguments-polyfill@^1.0.0:
Expand Down Expand Up @@ -8355,7 +8364,7 @@ esdoc-ecmascript-proposal-plugin@^1.0.0:
resolved "https://registry.yarnpkg.com/esdoc-ecmascript-proposal-plugin/-/esdoc-ecmascript-proposal-plugin-1.0.0.tgz#390dc5656ba8a2830e39dba3570d79138df2ffd9"
integrity sha1-OQ3FZWuoooMOOdujVw15E43y/9k=

esdoc@pzuraq/esdoc#015a342:
"esdoc@github:pzuraq/esdoc#015a342":
version "1.0.4"
resolved "https://codeload.github.com/pzuraq/esdoc/tar.gz/015a3426b2e53b2b0270a9c00133780db3f1d144"
dependencies:
Expand Down

0 comments on commit ac67987

Please sign in to comment.