feat(api): allow adding custom classes to header, content, footer, etc.

src/instanceMethods/_main.js

@@ -377,6 +377,9 @@ export function _main (userParams) {
       if (innerParams.inputClass) {
         dom.addClass(inputContainer, innerParams.inputClass)
       }
+      if (innerParams.customClass) {
+        dom.addClass(inputContainer, innerParams.customClass.input)
+      }
 
       dom.hide(inputContainer)
     }

src/staticMethods/dom.js

@@ -12,6 +12,7 @@ export {
   getActions,
   getConfirmButton,
   getCancelButton,
+  getHeader,
   getFooter,
   getFocusableElements,
   getValidationMessage,

src/utils/dom/getters.js

@@ -36,6 +36,8 @@ export const getCancelButton = () => elementBySelector('.' + swalClasses.actions
 
 export const getActions = () => elementByClass(swalClasses.actions)
 
+export const getHeader = () => elementByClass(swalClasses.header)
+
 export const getFooter = () => elementByClass(swalClasses.footer)
 
 export const getCloseButton = () => elementByClass(swalClasses.close)

src/utils/dom/renderers/renderActions.js

@@ -38,8 +38,14 @@ export const renderActions = (params) => {
   // Add buttons custom classes
   confirmButton.className = swalClasses.confirm
   dom.addClass(confirmButton, params.confirmButtonClass)
+  if (params.customClass) {
+    dom.addClass(confirmButton, params.customClass.confirmButton)
+  }
   cancelButton.className = swalClasses.cancel
   dom.addClass(cancelButton, params.cancelButtonClass)
+  if (params.customClass) {
+    dom.addClass(cancelButton, params.customClass.cancelButton)
+  }
 
   // Buttons styling
   if (params.buttonsStyling) {

src/utils/dom/renderers/renderImage.js

@@ -25,6 +25,9 @@ export const renderImage = (params) => {
     if (params.imageClass) {
       dom.addClass(image, params.imageClass)
     }
+    if (params.customClass) {
+      dom.addClass(image, params.customClass.image)
+    }
   } else {
     dom.hide(image)
   }

src/utils/params.js

@@ -67,7 +67,13 @@ const defaultParams = {
   scrollbarPadding: true
 }
 
-export const deprecatedParams = []
+export const deprecatedParams = {
+  customContainerClass: 'customClass',
+  confirmButtonClass: 'customClass',
+  cancelButtonClass: 'customClass',
+  imageClass: 'customClass',
+  inputClass: 'customClass'
+}
 
 const toastIncompatibleParams = [
   'allowOutsideClick',
@@ -125,7 +131,7 @@ export const isUpdatableParameter = (paramName) => {
  * @param {String} paramName
  */
 export const isDeprecatedParameter = (paramName) => {
-  return deprecatedParams.includes(paramName)
+  return deprecatedParams[paramName]
 }
 
 /**
@@ -142,7 +148,7 @@ export const showWarningsForParams = (params) => {
       warn(`The parameter "${param}" is incompatible with toasts`)
     }
     if (isDeprecatedParameter(param)) {
-      warnOnce(`The parameter "${param}" is deprecated and will be removed in the next major release.`)
+      warnOnce(`The parameter "${param}" is deprecated and will be removed in the next major release. Please use "${isDeprecatedParameter(param)}" instead.`)
     }
   }
 }

src/utils/setParameters.js

@@ -66,6 +66,10 @@ export default function setParameters (params) {
 
   const container = dom.getContainer()
   const closeButton = dom.getCloseButton()
+  const header = dom.getHeader()
+  const title = dom.getTitle()
+  const content = dom.getContent()
+  const actions = dom.getActions()
   const footer = dom.getFooter()
 
   // Title
@@ -117,9 +121,16 @@ export default function setParameters (params) {
     dom.addClass(popup, swalClasses.modal)
   }
 
-  // Custom Class
+  // Custom classes
   if (params.customClass) {
-    dom.addClass(popup, params.customClass)
+    dom.addClass(container, params.customClass.container)
+    dom.addClass(popup, typeof params.customClass === 'string' ? params.customClass : params.customClass.popup)
+    dom.addClass(header, params.customClass.header)
+    dom.addClass(title, params.customClass.title)
+    dom.addClass(closeButton, params.customClass.closeButton)
+    dom.addClass(content, params.customClass.content)
+    dom.addClass(actions, params.customClass.actions)
+    dom.addClass(footer, params.customClass.footer)
   }
 
   if (params.customContainerClass) {

sweetalert2.d.ts

@@ -323,6 +323,21 @@ declare module 'sweetalert2' {
         dismiss?: Swal.DismissReason;
     }
 
+    export interface SweetAlertCustomClass {
+        container?: string;
+        popup?: string;
+        header?: string;
+        title?: string;
+        closeButton?: string;
+        image?: string;
+        content?: string;
+        input?: string;
+        actions?: string;
+        confirmButton?: string;
+        cancelButton?: string;
+        footer?: string;
+    }
+
     type SyncOrAsync<T> = T | Promise<T>;
 
     type ValueOrThunk<T> = T | (() => T);
@@ -452,12 +467,33 @@ declare module 'sweetalert2' {
 
         /**
          * A custom CSS class for the modal.
+         * If a string value is provided, the classname will be applied to the popup.
+         * If an object is provided, the classnames will be applied to the corresponding fields:
+         *
+         * ex.
+         *   Swal.fire({
+         *     customClass: {
+         *       container: 'container-class',
+         *       popup: 'popup-class',
+         *       header: 'header-class',
+         *       title: 'title-class',
+         *       closeButton: 'close-button-class',
+         *       image: 'image-class',
+         *       content: 'content-class',
+         *       input: 'input-class',
+         *       actions: 'actions-class',
+         *       confirmButton: 'confirm-button-class',
+         *       cancelButton: 'cancel-button-class',
+         *       footer: 'footer-class'
+         *     }
+         *   })
          *
          * @default ''
          */
-        customClass?: string;
+        customClass?: string | SweetAlertCustomClass;
 
         /**
+         * @deprecated
          * A custom CSS class for the container.
          *
          * @default ''
@@ -574,13 +610,15 @@ declare module 'sweetalert2' {
         cancelButtonColor?: string;
 
         /**
+         * @deprecated
          * A custom CSS class for the "Confirm"-button.
          *
          * @default ''
          */
         confirmButtonClass?: string;
 
         /**
+         * @deprecated
          * A custom CSS class for the "Cancel"-button.
          *
          * @default ''
@@ -700,6 +738,7 @@ declare module 'sweetalert2' {
         imageAlt?: string;
 
         /**
+         * @deprecated
          * A custom CSS class for the customized icon.
          *
          * @default ''
@@ -778,6 +817,7 @@ declare module 'sweetalert2' {
         validationMessage?: string;
 
         /**
+         * @deprecated
          * A custom CSS class for the input field.
          *
          * @default ''
@@ -832,9 +872,9 @@ declare module 'sweetalert2' {
          * @default null
          */
         onClose?: (modalElement: HTMLElement) => void;
-        
+
         /**
-         * Set to false to disable body padding adjustment when scrollbar is present. 
+         * Set to false to disable body padding adjustment when scrollbar is present.
          *
          * @default true
          */

test/qunit/params/customClass.js

@@ -0,0 +1,49 @@
+const { Swal } = require('../helpers')
+
+QUnit.test('customClass as a string', (assert) => {
+  Swal.fire({ customClass: 'custom-class' })
+  assert.ok(Swal.getPopup().classList.contains('custom-class'))
+})
+
+QUnit.test('customClass as an object', (assert) => {
+  Swal.fire({
+    input: 'text',
+    imageUrl: '/assets/swal2-logo.png',
+    customClass: {
+      container: 'container-class',
+      popup: 'popup-class',
+      header: 'header-class',
+      title: 'title-class',
+      closeButton: 'close-button-class',
+      image: 'image-class',
+      content: 'content-class',
+      input: 'input-class',
+      actions: 'actions-class',
+      confirmButton: 'confirm-button-class',
+      cancelButton: 'cancel-button-class',
+      footer: 'footer-class'
+    }
+  })
+  assert.ok(Swal.getContainer().classList.contains('container-class'))
+  assert.ok(Swal.getPopup().classList.contains('popup-class'))
+  assert.ok(Swal.getHeader().classList.contains('header-class'))
+  assert.ok(Swal.getTitle().classList.contains('title-class'))
+  assert.ok(Swal.getCloseButton().classList.contains('close-button-class'))
+  assert.ok(Swal.getImage().classList.contains('image-class'))
+  assert.ok(Swal.getContent().classList.contains('content-class'))
+  assert.ok(Swal.getInput().classList.contains('input-class'))
+  assert.ok(Swal.getActions().classList.contains('actions-class'))
+  assert.ok(Swal.getConfirmButton().classList.contains('confirm-button-class'))
+  assert.ok(Swal.getCancelButton().classList.contains('cancel-button-class'))
+  assert.ok(Swal.getFooter().classList.contains('footer-class'))
+})
+
+QUnit.test('customClass as an object with the only one key', (assert) => {
+  Swal.fire({
+    title: 'I should have a custom classname',
+    customClass: {
+      title: 'title-class',
+    }
+  })
+  assert.ok(Swal.getTitle().classList.contains('title-class'))
+})

test/qunit/tests.js

@@ -139,11 +139,6 @@ QUnit.test('heightAuto', (assert) => {
   assert.ok(document.documentElement.classList.contains('swal2-height-auto'))
 })
 
-QUnit.test('custom class', (assert) => {
-  Swal.fire({ customClass: 'custom-class' })
-  assert.ok(Swal.getPopup().classList.contains('custom-class'))
-})
-
 QUnit.test('custom container class', (assert) => {
   Swal.fire({ customContainerClass: 'custom-class' })
   assert.ok(Swal.getContainer().classList.contains('custom-class'))