🚀 Release v2.0.0 #113

ncoden · 2018-05-21T01:53:59Z

Motion UI v2.0.0

We're happy to release Motion UI 2.0 with a better support of macOS Safari, API improvements, some bug fixes and various maintanance stuff. Warning: this release includes breaking changes, please read the migration notes below before upgrading.

🚀 Forward/backward defaults for transitions & effects

We changed the default direction of all transition and effect mixins so it depends on the in or out state. Calling the same mixin with in and out states now results in the same animation playing forward and backward.

⚠️ Breaking changes

We changed the effects and transitions API the following way:

All direction-related options now have opposite values as defaults according to the in or out state.
The slide effect defaults are now left and right (according to $state) for consistency with the slide transition.
The zoom transition and effect defaults are now 0 and 1 (according to $state) for consistency with others transitions defaults.

How to migrate

For the hinge, slide, spin, zoom effect functions and mui-fade, mui-hinge, mui-slide, mui-spin, mui-zoom transition mixins: if $state: out is used and no direction parameters are given, manually pass the "forward" parameters to keep them playing forward.

// Before
@include mui-fade($state: out);
// After
@include mui-fade($state: out, $from: 0, $to: 1);

For the slide effect function: if no $direction is given, manually pass $direction: up to keep the effect sliding to top instead of the new default left/right.

// Before
$effect: slide();
// After
$effect: slide($direction: up);

For the mui-zoom transition mixin: if no $from or $to are given, manually pass $from: 1.5 and $to: 1 to keep the previous behavior.

// Before
@include mui-zoom();
// After
@include mui-zoom($from: 1.5, $to: 1);

🚀 New pausing behavior for `mui-queue` for Safari support

With the previous mui-series behavior, the serie was paused until the .is-animating class was added. Unfortately, the implementation behind this did not work on all macOS Safari versions and was even breaking the whole animation. In order to fully support macOS Safari, we changed the mui-series paused
behavior and introduced .is-paused.

⚠️ Breaking changes

When .is-animating is removed from .mui-series, the queue is now reset instead of paused. Setting .is-animating back will start the queue from its begining.

From now you can:

Start the queue by adding .is-animating
Pause the queue by adding .is-paused
Continue the queue by removing .is-paused
Reset the queue by removing .is-animating

How to migrate

If you need an animation to pause midway, add .is-paused instead of removing .is-animating. For example in jQuery:

// Before
function play($elem) {
  $elem.addClass('is-animating');
}
function pause($elem) {
  $elem.removeClass('is-animating');
}

// After
function play($elem) {
  $elem.addClass('is-animating').removeClass('is-paused');
}
function pause($elem) {
  $elem.addClass('is-paused');
}
function reset($elem) {
  $elem.removeClass('is-animating is-paused');
}

As a side-effect of this, standard animation names are not supported anymore as mui-series queue names. Make sure you use unique names for your mui-series queues.

// Before
@include mui-series {
  .shake          { @include mui-queue(3s, 0s, shake); }
  .spin           { @include mui-queue(3s, 0s, spin); }
}

// After
@include mui-series {
  .my-serie-shake { @include mui-queue(3s, 0s, shake); }
  .my-serie-spin  { @include mui-queue(3s, 0s, spin); }
}

🐛 Safer animation keyframe names for CSS

Fixes a bug when using decimal values for the zoom effect and transition arguments would generate an invalid CSS Keyframes name and break the animation.

We changed the way we validate arguments and generate keyframes in such a way that they will always have a valid CSS name for all effects, transitions and arguments passed in.

🐛 Improved support for new Sass first-hand functions alongside function name strings

In order to improve modular namespacing, Sass 4 will only accepts first-class functions as argument for call() so functions will be called in their own context. This allow developers to make their Sass packages more modular while still being able to call functions given by the user. As a first step, Sass 3.5 added get-function() to get a first-hand function from its name and throw a warning if a function name string is passed to call(). Developers are now encouraged to use get-function(), but this would make their package incompatible to older Sass versions.

We added a set of helpers to support both first-hand function and function name strings in all our functions and mixins in all Sass versions. If you are using Motion UI with Sass >= 3.5, we recommend you to use pass your functions to Motion UI with get-function(...). Otherwise, we may not be able to find them as their were defined in a context we not may have access to.

For more informations, see Making Function Calls Across Sass Versions and Making sense out of Sass 3.5 first-class functions.

📦 jQuery is now a peerDependency

We think that like for most browser packages, you will want to only have one jQuery version installed and to choose its version by yourself. For this reason, jQuery cannot be considered as an internal dependency (like implementation detail) and should be exposed to you as a peerDependency.

We did not include jQuery in the Motion UI JavaScript library before. If you use it, you should already have jQuery imported so Motion UI will work the same way as before.

Note for npm users: you may now have a warning message asking you to install the jquery npm package if you did not have it already. Please do so with a jQuery version that we support: jquery@>=2.2.0.

📄 All changes

📖 Update transitions.md #94 - Fix parameter name for zoom animation (@cmarchena)
🐛 Resolves Passing a string to call() deprecation warning for Sass 4.0 #100 - Fix deprecation warning for Sass 4.0 (@rediris, closes multiple DEPRECATION warnings: Passing a string to call() is deprecated and will be illegal in Sass 4.0 #99)
🐛 fix: make all keyframe names safe in CSS #102 - Make animation keyframes names safe for CSS (@ncoden, closes Change formatting of zoom animation name #96)
🚀 feat: make transitions/effects directions depending on in/out state #83 #103 - Make transitions/effects directions depending on in/out state (@ncoden, closes Explictly stating 'from' and 'to' parameters for fade-out #83)
🚀 feat: change mui-series pause behavior & add .is-paused for Safari support #97 #108 - Change mui-series paused behavior for better Safari support (@ncoden, closes Mui-Series Safari 11 Compatibility #97)
🐛 fix: ensure -mui-keyframe-pct returns a strintg instead of a list #109 - Ensure -mui-keyframe-pct returns a strintg instead of a list (@ncoden, closes fix: ensure -mui-keyframe-pct returns a strintg instead of a list #109)
📦 chore: update dependencies #110 - Update development dependencies to latest versions (@ncoden)
💻 chore: add TravisCI #111 - Add Travis to run tests on node-sass 3/4/latest (@ncoden)
💻 chore: update browser compatibility #112 - Ensure support of iOS Safari 7 and drop support for Android browser 2.3 (@ncoden)
📖 docs: add CHANGELOG.md #114 - Add a CHANGELOG file (@ncoden)
📖 docs: improve README.md design and installation section #115 - Improve README design and installation instructions (@ncoden)
📦 chore: update browser compatibility #112 - Move jQuery to peerDependencies (@ncoden)
🐛 fix: fix support for function name strings for Sass < 3.5 #117 - Fix support for function name strings for Sass < 3.5 (@ncoden, introduced in Resolves Passing a string to call() deprecation warning for Sass 4.0 #100)

👩‍💻 Contributors

Thank you to the amazing people who contributed to this release:

Carlos Marchena (@cmarchena)
Kevin Ball (@kball)
Nicolas Coden (@ncoden)
Roman Edirisinghe (@rediris)

Release Checklist

Bump versions
Update documentation
Update dist files
Update CHANGELOG.md

`-mui-keyframe-pct` should return a String. The current implementation may return a list in some Sass versions.

Changes: * `gulp-rename`: `^1.2.2` -> `^1.2.3` * `gulp-sass`: `3.1.0` -> `^4.0.1` * `gulp-scss-lint`: `^0.3.6` -> `^0.6.1` * `gulp-uglify`: `^1.4.1` -> `^3.0.0` * `gulp-umd`: `^0.2.0` -> `^2.0.0` * `mocha`: `^2.3.3`, -> `^5.2.0` * `run-sequence`: `^1.1.4` -> `^2.2.1` * `sass-true`: `^2.0.2`, -> `^2.2.1` According to the dependencies changelogs, no migration is required.

…ring fix: ensure `-mui-keyframe-pct` returns a strintg instead of a list

chore: update dependencies

Run tests across multiple node-sass versions on travis-ci.

Update Autoprefixer browser compatibility table to be consistent with `foundation-sites` and remove support for very old browsers.

…mpatibility chore: update browser compatibility

chore: add TravisCI

ncoden · 2018-05-21T02:01:08Z

Poke @DanielRuf @SassNinja

docs: add CHANGELOG.md

peerDependencies is for dependencies that are exposed to (and expected to be used by) the consuming code, as opposed to "private" dependencies that are not exposed, and are only an implementation detail. We still need `jQuery` in peerDependencies instead of dependencies because we actually expect the user to install it. We cannot simply remove it because we still need the package managers to check for versions compatibilities and warn the user if it is missing. See foundation/foundation-sites#11290

docs: improve README.md design and installation section

…er-dependencies chore: move jQuery to peerDependencies

ncoden · 2018-05-25T16:29:44Z

Poke @gakimball @kball @DanielRuf. Could you review this ? Thanks !

DanielRuf · 2018-05-26T15:35:53Z

breaking change

breaking changes

values as defauls

values as defaults

standard animations names are not supported anymore as mui-series queues names

standard animation names are not supported anymore as mui-series queue names

keyframes names for CSS

keyframe names for CSS

Fixes a bug when using decimals values

Fixes a bug when using decimal values

arguments and generate keyframe in such

arguments and generate keyframes in such

as an internal dependency (like implementation detail)and should

as an internal dependency (like implementation detail) and should

We did not included jQuery in the Motion UI Javascript library before.

We did not include jQuery in the Motion UI JavaScript library before.

Rest is good 👍

ncoden · 2018-05-26T20:39:19Z

@DanielRuf Fixed. Thank you!

ncoden · 2018-05-26T20:39:50Z

Poke @gakimball. Are you ok with this release ?

gakimball · 2018-05-27T00:44:38Z

Looks good to me, great work! 👌

…ass 4 In order to improve modular namespacing, LibSass 4 only accepts first-class functions as argument so functions are called in their own context. In most case, `get-function()` must only be used by the user in its own context. End developer must be encouraged to use first-class functions. In this library, we need to use it to keep support of function name strings in Sass > 3.5. Changes: * Add `-mui-is-function` and `-mui-safe-call` to test and call function in a safe way for all Sass versions. * Use `-mui-is-function` instead of a simple `string` type check as functions can now be first-hand functions with a `function` type * Use `-mui-safe-call` to handle both first-hand functions and function string names the same way. A warning is thrown for function string names with Sass >= 3.5

…ents

`function-exists()` can only take strings and cannot be called for first-class functions.

…not found Instead of warning about the usage of function name strings in Sass >= 3.5, check for function arguments and throw the appropriate error if invalid or not found.

rediris · 2018-06-05T18:54:06Z

Are we ready to merge this?

ncoden · 2018-06-05T19:15:40Z

@rediris Almost. I still need to merge #117. We introduced an incompatibility with Sass < 3.5 at #100.

rediris · 2018-06-05T19:27:22Z

@ncoden sounds good. Sorry I didn't account for that!

…-compatibility fix: fix support for function name strings for Sass < 3.5

ncoden · 2018-06-05T21:52:54Z

Sorry I didn't account for that!

Don't worry.

I merged the latest changes (#117), updated the documentation and the changelog (see above). I think everything is ready 🎉

ncoden added 12 commits May 19, 2018 23:15

chore: update to standalone autoprefixer

9098ebd

fix: ensure -mui-keyframe-pct returns a strintg instead of a list

8d3b9c6

`-mui-keyframe-pct` should return a String. The current implementation may return a list in some Sass versions.

chore: update Lockfiles

c6b2c7a

Merge pull request foundation#109 from ncoden/fix/mui-keyframe-pct-st…

45afc5b

…ring fix: ensure `-mui-keyframe-pct` returns a strintg instead of a list

chore: add Travis badges

1247b92

Merge pull request foundation#110 from ncoden/chore/update-dependencies

a2dbb64

chore: update dependencies

chore: add TravisCI

d2238cb

Run tests across multiple node-sass versions on travis-ci.

chore: add Travis badge for build status

1384801

chore: update browser compatibility

790ab13

Update Autoprefixer browser compatibility table to be consistent with `foundation-sites` and remove support for very old browsers.

Merge pull request foundation#112 from ncoden/chore/update-browser-co…

a99a8fe

…mpatibility chore: update browser compatibility

Merge pull request foundation#111 from ncoden/chore/travis

30dadbf

chore: add TravisCI

ncoden changed the title ~~Release/v2.0.0~~ Release v2.0.0 May 21, 2018

ncoden changed the title ~~Release v2.0.0~~ 🚀 Release v2.0.0 May 21, 2018

ncoden changed the title ~~🚀 Release v2.0.0~~ 🚀 Release v2.0.0 May 21, 2018

ncoden added 10 commits May 21, 2018 16:13

docs: add CHANGELOG.md

c0a8bcb

docs: improve README.md design and installation section

1a2fbb8

Merge pull request foundation#114 from ncoden/docs/changelog

5bd0efa

docs: add CHANGELOG.md

Merge pull request foundation#115 from ncoden/docs/improve-readme

1a1c846

docs: improve README.md design and installation section

Merge pull request foundation#116 from ncoden/chore/move-jquery-to-pe…

a347e4d

…er-dependencies chore: move jQuery to peerDependencies

chore: bump version to v2.0.0

70c35b3

chore: build v2.0.0 dist files

25ae64f

chore: build v2.0.0 documentation

0147637

chore: add v2.0.0 to changelog

959b45a

ncoden force-pushed the release/v2.0.0 branch from 4698cc0 to 959b45a Compare May 25, 2018 16:27

ncoden requested review from gakimball and kball May 25, 2018 16:28

docs: fix typo in v2.0.0 changelog

798bcd2

ncoden added 8 commits May 27, 2018 21:20

chore: update lockfiles for v2.0.0 release

7f6f46b

docs: add missing support of function name strings for function argum…

15353d9

…ents

fix: fix check -mui-is-function check for first-class functions

152dcf2

`function-exists()` can only take strings and cannot be called for first-class functions.

fix: add missing util/function import

54ad939

refactor: replace function string deprecation warning by an error if …

2eb8d33

…not found Instead of warning about the usage of function name strings in Sass >= 3.5, check for function arguments and throw the appropriate error if invalid or not found.

refactor: simplify and remove hacks from function helpers

b69a83c

docs: use SassDoc "Arglist" type for argument lists

fb3fc61

ncoden added 4 commits June 5, 2018 23:15

Merge pull request foundation#117 from ncoden/fix/sass-3-get-function…

716be70

…-compatibility fix: fix support for function name strings for Sass < 3.5

Merge branch 'develop' into release/v2.0.0

63911fc

chore: update v2.0.0 documentation

56c7293

docs: update v2.0.0 changelog

fc70f40

ncoden merged commit d6e0661 into foundation:master Jun 7, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🚀 Release v2.0.0 #113

🚀 Release v2.0.0 #113

ncoden commented May 21, 2018 •

edited

Loading

ncoden commented May 21, 2018 •

edited

Loading

ncoden commented May 25, 2018

DanielRuf commented May 26, 2018

ncoden commented May 26, 2018

ncoden commented May 26, 2018

gakimball commented May 27, 2018

rediris commented Jun 5, 2018

ncoden commented Jun 5, 2018

rediris commented Jun 5, 2018

ncoden commented Jun 5, 2018 •

edited

Loading

🚀 Release v2.0.0 #113

🚀 Release v2.0.0 #113

Conversation

ncoden commented May 21, 2018 • edited Loading

Motion UI v2.0.0

🚀 Forward/backward defaults for transitions & effects

⚠️ Breaking changes

How to migrate

🚀 New pausing behavior for mui-queue for Safari support

⚠️ Breaking changes

How to migrate

🐛 Safer animation keyframe names for CSS

🐛 Improved support for new Sass first-hand functions alongside function name strings

📦 jQuery is now a peerDependency

📄 All changes

👩‍💻 Contributors

Release Checklist

ncoden commented May 21, 2018 • edited Loading

ncoden commented May 25, 2018

DanielRuf commented May 26, 2018

ncoden commented May 26, 2018

ncoden commented May 26, 2018

gakimball commented May 27, 2018

rediris commented Jun 5, 2018

ncoden commented Jun 5, 2018

rediris commented Jun 5, 2018

ncoden commented Jun 5, 2018 • edited Loading

ncoden commented May 21, 2018 •

edited

Loading

🚀 New pausing behavior for `mui-queue` for Safari support

ncoden commented May 21, 2018 •

edited

Loading

ncoden commented Jun 5, 2018 •

edited

Loading