sweetalert2

• respect the initial body padding (fix #781)

New Fetaures

• pass extraParams to default validators, use extraParams.validationMessage for l10n of default validators (#1084)

Swal({
  input: 'email',
  extraParams: {
    validationMessage: 'Adresse e-mail invalide'
  }
})

Fixes

• throw console errors in case of invalid arguments (close #1080)
• introduce 100ms delay before focusing the previous active element (fix #900)

Restore Android 4.4 support 🎉 (#1071)

New features

• Swal.getPopup() getter method

React integration

• Awesome sweetalert2-react-content by @zenflow has been released and added to the list of official packages in README 🎉

swal.mixin(params) 🎉 thanks to @zenflow

Returns a wrapped instance of swal containing params as defaults.

Useful for reusing swal configuration.

Before:

const textPromptOptions = { input: 'text', showCancelButton: true }
const {value: firstName} = await swal({ ...textPromptOptions, title: 'What is your first name?' })
const {value: lastName} = await swal({ ...textPromptOptions, title: 'What is your last name?' })

After:

const myTextPrompt = swal.mixin({ input: 'text', showCancelButton: true })
const {value: firstName} = await myTextPrompt('What is your first name?')
const {value: lastName} = await myTextPrompt('What is your last name?')

New features

• inputValue now could be a Promise (#1025) thanks to @gverni
• onAfterClose parameter (#1030) thanks to @Baune8D

Refactor

• All "static methods" ("static" in the sense of methods of the "constructor", but excluding the ones depending on our "current instance" or currentContext) are moved into modules in src/staticMethods/ (#1026) thanks to @zenflow

swal.setDefaults({
  animate: () => !swal.isVisible()
})

Implementation credits: @acupajoe

Thanks to @dchekanov who raised the issue https://github.com/sweetalert2/sweetalert2/issues/896, now it's possible to prevent a dialog from being closed by returning false in the preConfirm parameter function.

Example:

preConfirm: function() {
  if (!confirm('Are you sure?')) {
    return false;
  }
  // proceed otherwise
}

or even shorter with ES6:

preConfirm: () => confirm('Are you sure?')

jsfiddle: https://jsfiddle.net/ad3quksn/386/

Thanks to @toverux and his idea, now we have improved the way of handling dismissals:

Legacy, still works:

if (dismiss == 'overlay') {
    //
}

NEW RECOMMENDED WAY 🎉 🎉 🎉

if (dismiss == swal.DismissReason.backdrop) {
    //
}

⚠️ ⚠️ ⚠️ DEPRECATION WARNING ⚠️ ⚠️ ⚠️

'overlay' is DEPRECATED and replaced by DismissReason.backdrop, it will stop work in the next major release.

🚀 New features

Custom backdrop (#873)

Now it's possible to pass a string to the backdrop parameter which will be assigned to the CSS background property of a backdrop element.

Nyan Cat as a backdrop: https://jsfiddle.net/ad3quksn/370/ 🎉

Implementation credits: @acupajoe 😎

🔧 Workflow

Automated release process (#857) 🎉 🎉 🎉

Now the releasing is as easy as npm run release

Implementation credits: @zenflow 😎

🚀 New features

• FOOTER (#852), live: example: https://jsfiddle.net/ad3quksn/345/
• Maps support for the inputOptions parameter (#853), live example: https://jsfiddle.net/ad3quksn/347/

🔧 Workflow

• speed up active development by not performing heavy tasks (like minification) in gulp watch (#844)
• support IE11 in the sandbox.html (#854)
• auto-reload browser on changes in test/qunit/*.js

🍻 Thanks to @zenflow, @toverux, @acupajoe for participating in discussions about new features implementation!

🎨 Themability

• set default font-family to inherit for making popups more coherent with the rest of the apps.
• make all SASS variables overridable by adding !default

🔧 Workflow (many thanks to @zenflow)

• add all common scripts in package.scripts (#841)
• fix gulp watch task to run the build upon initialization (#845)

@acurrieclark's suggestion from https://github.com/sweetalert2/sweetalert2/issues/25#issuecomment-359161812

A better option here might have been to use em with a higher element given an rem factor. This way it is easy to override the base value with one css setting.

There's only one CSS setting (SCSS var) now 🎉

$swal2-font-size: 1rem;

Why rems? Because of a11y. Different browsers/devices can have different base font-size. Now SweetAlert2 scales perfectly depends on user/device settings:

Well, almost perfectly :) The only one thing to finish is the animated icons (success/error). Stay tuned, the perfection is upcoming!

• fix scrolling to the top of the page (#781)
• improve the DOM structure of popup (#806)
• make header flex column to be able to reorder its children (#805)
• fix disabling backdrop when supplied with target element (#811)

Convert font-family to variable (#792), thanks to @niftylettuce 🍻

Add the swal.isLoading() getter

allowOutsideClick now can accept a function, e.g.

swal({
  ...
  allowOutsideClick: () => swal.isLoading()
})

To protect the plugin from similar mistakes in future, these actions were taken:

• the simple AdoNuxt project with SweetAlert2: https://github.com/limonte/sweetalert2-adonisjs-nuxtjs
• set up the Greenkeeper to test against every new version
• proved the issue exists: https://travis-ci.org/limonte/sweetalert2-adonisjs-nuxtjs/builds/321709229
• the automated PR by GreenKeeper proving this version works with SSR: https://github.com/limonte/sweetalert2-adonisjs-nuxtjs/pull/3

Added ability to define global defaults before the plugin invocation:

<script>window._swalDefaults = { ... };</script>
<script src="//some.com/path/to/sweetalert2.js"></script>

• fix throwing exceptions in Node env (#454) 🚀
• add aria-live: "assertive" for modals, "polite" for toasts (#746)
• add .swal2-toast-shown to ignore list for default overflow rules (#738)
• use arrow functions for demo examples (#744)
• add bundlesize (#734) 📦