lib/playbook/z_index.rb in playbook_ui-12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638 vs lib/playbook/z_index.rb in playbook_ui-12.19.0.pre.alpha.PLAY699zindexresponsive650

@@ -14,18 +14,31 @@
       {
         z_index: "z-index",
       }
     end
 
-  private
+    def screen_size_values
+      %w[xs sm md lg xl]
+    end
 
     def z_index_props
-      selected_index_props = z_index_options.keys.select { |sk| try(sk) }
-      return nil unless selected_index_props.present?
+      selected_props = z_index_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
 
-      selected_index_props.map do |k|
-        index_value = send(k)
-        "z_index_#{index_value}" if z_index_values.include? index_value
-      end.compact.join(" ")
+      responsive = selected_props.present? && try(:z_index).is_a?(::Hash)
+      css = ""
+      if responsive
+        z_index_value = send(:z_index)
+        z_index_value.each do |key, value|
+          css += "z_index_#{key}_#{value} " if screen_size_values.include?(key.to_s) && z_index_values.include?(value.to_s)
+        end
+      else
+        selected_props.each do |k|
+          z_index_value = send(k)
+          css += "z_index_#{z_index_value} " if z_index_values.include? z_index_value
+        end
+      end
+
+      css unless css.blank?
     end
   end
 end