#2601 fix issue where popups with variations will not correctly recieve class names if pre-existing content

RELEASE-NOTES.md

@@ -63,6 +63,7 @@
 - **Menu** - Fixed `(x) column` nested grid with alignment stacking vertically (wrong flex-direction) #2810
 - **Modal** - Fix autofocus setting in modal not working due to improper selector #2737
 - **Modal** - Increased `close` specificity, modal will now only close on `> .close` #2736
+- **Popup** - Fixes issue where variation would not be added to a pre-existing popup even if specified in javascript #26011
 - **Transition** - Transition callbacks now all have the correct `this` set. #2758
 - **Search** - Calling `show results` programmatically no longer fails when input is not focused #2842
 

src/definitions/modules/popup.js

@@ -124,6 +124,9 @@ $.fn.popup = function(parameters) {
             module.debug('Setting page as offset parent');
             $offsetParent = $body;
           }
+          if( module.get.variation() ) {
+            module.set.variation();
+          }
         },
 
         reposition: function() {
@@ -194,7 +197,6 @@ $.fn.popup = function(parameters) {
         create: function() {
           var
             html      = module.get.html(),
-            variation = module.get.variation(),
             title     = module.get.title(),
             content   = module.get.content()
           ;
@@ -209,15 +211,9 @@ $.fn.popup = function(parameters) {
             }
             $popup = $('<div/>')
               .addClass(className.popup)
-              .addClass(variation)
               .data(metadata.activator, $module)
               .html(html)
             ;
-            if(variation) {
-              $popup
-                .addClass(variation)
-              ;
-            }
             if(settings.inline) {
               module.verbose('Inserting popup element inline', $popup);
               $popup
@@ -231,6 +227,8 @@ $.fn.popup = function(parameters) {
               ;
             }
             module.refresh();
+            module.set.variation();
+
             if(settings.hoverable) {
               module.bind.popup();
             }
@@ -853,6 +851,14 @@ $.fn.popup = function(parameters) {
             $popup.css('width', calculations.container.width);
           },
 
+          variation: function(variation) {
+            variation = variation || module.get.variation();
+            if(variation && module.has.popup() ) {
+              module.verbose('Adding variation to popup', variation);
+              $popup.addClass(variation);
+            }
+          },
+
           visible: function() {
             $module.addClass(className.visible);
           }
@@ -862,6 +868,13 @@ $.fn.popup = function(parameters) {
           loading: function() {
             $popup.removeClass(className.loading);
           },
+          variation: function(variation) {
+            variation = variation || module.get.variation();
+            if(variation) {
+              module.verbose('Removing variation', variation);
+              $popup.removeClass(variation);
+            }
+          },
           visible: function() {
             $module.removeClass(className.visible);
           },