playbook_ui 16.1.0 → 16.2.0.pre.rc.1

data/lib/playbook/align_content.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = align_content_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         align_content = send(k)
         if align_content.is_a?(Hash)
-          align_content.map do |media_size, align_value|
-            "align_content_#{media_size}_#{align_value.underscore}" if align_content_values.include? align_value
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "align_content_#{align_content[:default].underscore}" if align_content.key?(:default) && align_content_values.include?(align_content[:default])
+
+          # Handle responsive sizes (generates classes with size prefix)
+          align_content.each do |media_size, align_value|
+            class_result << "align_content_#{media_size}_#{align_value.underscore}" if screen_size_values.include?(media_size.to_s) && align_content_values.include?(align_value)
           end
+
+          class_result
         else
           "align_content_#{align_content.underscore}" if align_content_values.include? align_content
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/align_items.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = align_items_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         align_items_value = send(k)
         if align_items_value.is_a?(Hash)
-          align_items_value.map do |media_size, align_value|
-            "align_items_#{media_size}_#{align_value.underscore}" if align_items_values.include? align_value.to_s
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "align_items_#{align_items_value[:default].underscore}" if align_items_value.key?(:default) && align_items_values.include?(align_items_value[:default].to_s)
+
+          # Handle responsive sizes (generates classes with size prefix)
+          align_items_value.each do |media_size, align_value|
+            class_result << "align_items_#{media_size}_#{align_value.underscore}" if screen_size_values.include?(media_size.to_s) && align_items_values.include?(align_value.to_s)
           end
+
+          class_result
         else
           "align_items_#{align_items_value.underscore}" if align_items_values.include? align_items_value
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/align_self.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = align_self_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         align_self_value = send(k)
         if align_self_value.is_a?(Hash)
-          align_self_value.map do |media_size, align_value|
-            "align_self_#{media_size}_#{align_value}" if align_self_values.include? align_value
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "align_self_#{align_self_value[:default]}" if align_self_value.key?(:default) && align_self_values.include?(align_self_value[:default])
+
+          # Handle responsive sizes (generates classes with size prefix)
+          align_self_value.each do |media_size, align_value|
+            class_result << "align_self_#{media_size}_#{align_value}" if screen_size_values.include?(media_size.to_s) && align_self_values.include?(align_value)
           end
+
+          class_result
         else
           "align_self_#{align_self_value}" if align_self_values.include? align_self_value
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
       # rubocop:enable Style/IfInsideElse
     end
 

data/lib/playbook/display.rb

@@ -12,6 +12,11 @@ module Playbook
       css = ""
       if responsive
         display_value = send(:display)
+
+        # Handle default value separately (generates base class without size prefix)
+        css += "display_#{display_value[:default]} " if display_value.key?(:default) && display_values.include?(display_value[:default].to_s)
+
+        # Handle responsive sizes (generates classes with size prefix)
         display_value.each do |key, value|
           css += "display_#{key}_#{value} " if display_size_values.include?(key.to_s) && display_values.include?(value.to_s)
         end

data/lib/playbook/flex.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = flex_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         flex_value = send(k)
         if flex_value.is_a?(Hash)
-          flex_value.map do |media_size, value|
-            "flex_#{media_size}_#{value}" if flex_values.include? value.to_s
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "flex_#{flex_value[:default]}" if flex_value.key?(:default) && flex_values.include?(flex_value[:default].to_s)
+
+          # Handle responsive sizes (generates classes with size prefix)
+          flex_value.each do |media_size, value|
+            class_result << "flex_#{media_size}_#{value}" if screen_size_values.include?(media_size.to_s) && flex_values.include?(value.to_s)
           end
+
+          class_result
         else
           "flex_#{flex_value}" if flex_values.include? flex_value.to_s
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/flex_direction.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = flex_direction_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         flex_direction_value = send(k)
         if flex_direction_value.is_a?(Hash)
-          flex_direction_value.map do |media_size, flex_value|
-            "flex_direction_#{media_size}_#{flex_value.underscore}" if flex_direction_values.include? flex_value
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "flex_direction_#{flex_direction_value[:default].underscore}" if flex_direction_value.key?(:default) && flex_direction_values.include?(flex_direction_value[:default])
+
+          # Handle responsive sizes (generates classes with size prefix)
+          flex_direction_value.each do |media_size, flex_value|
+            class_result << "flex_direction_#{media_size}_#{flex_value.underscore}" if screen_size_values.include?(media_size.to_s) && flex_direction_values.include?(flex_value)
           end
+
+          class_result
         else
           "flex_direction_#{flex_direction_value.underscore}" if flex_direction_values.include? flex_direction_value
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/flex_grow.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = flex_grow_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         flex_grow_value = send(k)
         if flex_grow_value.is_a?(Hash)
-          flex_grow_value.map do |media_size, grow_value|
-            "flex_grow_#{media_size}_#{grow_value}" if flex_grow_values.include? grow_value.to_s
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "flex_grow_#{flex_grow_value[:default]}" if flex_grow_value.key?(:default) && flex_grow_values.include?(flex_grow_value[:default].to_s)
+
+          # Handle responsive sizes (generates classes with size prefix)
+          flex_grow_value.each do |media_size, grow_value|
+            class_result << "flex_grow_#{media_size}_#{grow_value}" if screen_size_values.include?(media_size.to_s) && flex_grow_values.include?(grow_value.to_s)
           end
+
+          class_result
         else
           "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value.to_s
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/flex_shrink.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = flex_shrink_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         flex_shrink_value = send(k)
         if flex_shrink_value.is_a?(Hash)
-          flex_shrink_value.map do |media_size, shrink_value|
-            "flex_shrink_#{media_size}_#{shrink_value}" if flex_shrink_values.include? shrink_value.to_s
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "flex_shrink_#{flex_shrink_value[:default]}" if flex_shrink_value.key?(:default) && flex_shrink_values.include?(flex_shrink_value[:default].to_s)
+
+          # Handle responsive sizes (generates classes with size prefix)
+          flex_shrink_value.each do |media_size, shrink_value|
+            class_result << "flex_shrink_#{media_size}_#{shrink_value}" if screen_size_values.include?(media_size.to_s) && flex_shrink_values.include?(shrink_value.to_s)
           end
+
+          class_result
         else
           "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value.to_s
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/flex_wrap.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = flex_wrap_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         flex_wrap_value = send(k)
         if flex_wrap_value.is_a?(Hash)
-          flex_wrap_value.map do |media_size, wrap_value|
-            "flex_wrap_#{media_size}_#{wrap_value.underscore}" if flex_wrap_values.include? wrap_value
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "flex_wrap_#{flex_wrap_value[:default].underscore}" if flex_wrap_value.key?(:default) && flex_wrap_values.include?(flex_wrap_value[:default])
+
+          # Handle responsive sizes (generates classes with size prefix)
+          flex_wrap_value.each do |media_size, wrap_value|
+            class_result << "flex_wrap_#{media_size}_#{wrap_value.underscore}" if screen_size_values.include?(media_size.to_s) && flex_wrap_values.include?(wrap_value)
           end
+
+          class_result
         else
           "flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/forms/builder/phone_number_field.rb

@@ -5,6 +5,15 @@ module Playbook
     class Builder
       def phone_number_field(name, props: {})
         props[:name] = name
+
+        if props[:label] == true && props[:required_indicator]
+          props[:label] = if @object && @object.class.respond_to?(:human_attribute_name)
+                            @object.class.human_attribute_name(name)
+                          else
+                            name.to_s.humanize
+                          end
+        end
+
         @template.pb_rails("phone_number_input", props: props)
       end
     end

data/lib/playbook/justify_content.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = justify_content_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         justify_content_value = send(k)
         if justify_content_value.is_a?(Hash)
-          justify_content_value.map do |media_size, justify_value|
-            "justify_content_#{media_size}_#{justify_value.underscore}" if justify_content_values.include? justify_value
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "justify_content_#{justify_content_value[:default].underscore}" if justify_content_value.key?(:default) && justify_content_values.include?(justify_content_value[:default])
+
+          # Handle responsive sizes (generates classes with size prefix)
+          justify_content_value.each do |media_size, justify_value|
+            class_result << "justify_content_#{media_size}_#{justify_value.underscore}" if screen_size_values.include?(media_size.to_s) && justify_content_values.include?(justify_value)
           end
+
+          class_result
         else
           "justify_content_#{justify_content_value.underscore}" if justify_content_values.include? justify_content_value
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/justify_self.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = justify_self_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         justify_self_value = send(k)
         if justify_self_value.is_a?(Hash)
-          justify_self_value.map do |media_size, self_value|
-            "justify_self_#{media_size}_#{self_value}" if justify_self_values.include? self_value
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "justify_self_#{justify_self_value[:default]}" if justify_self_value.key?(:default) && justify_self_values.include?(justify_self_value[:default])
+
+          # Handle responsive sizes (generates classes with size prefix)
+          justify_self_value.each do |media_size, self_value|
+            class_result << "justify_self_#{media_size}_#{self_value}" if screen_size_values.include?(media_size.to_s) && justify_self_values.include?(self_value)
           end
+
+          class_result
         else
           "justify_self_#{justify_self_value}" if justify_self_values.include? justify_self_value
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/order.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = order_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         order_value = send(k)
         if order_value.is_a?(Hash)
-          order_value.map do |media_size, order_size_value|
-            "flex_order_#{media_size}_#{order_size_value}" if order_values.include? order_size_value.to_s
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "flex_order_#{order_value[:default]}" if order_value.key?(:default) && order_values.include?(order_value[:default].to_s)
+
+          # Handle responsive sizes (generates classes with size prefix)
+          order_value.each do |media_size, order_size_value|
+            class_result << "flex_order_#{media_size}_#{order_size_value}" if screen_size_values.include?(media_size.to_s) && order_values.include?(order_size_value.to_s)
           end
+
+          class_result
         else
           "flex_order_#{order_value}" if order_values.include? order_value.to_s
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/spacing.rb

@@ -176,48 +176,78 @@ module Playbook
       selected_gap_props = gap_options.keys.select { |sk| try(sk) }
       return nil unless selected_gap_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_gap_props.map do |k|
         gap_value = send(k)
         if gap_value.is_a?(Hash)
-          gap_value.map do |media_size, gap_spacing_value|
-            "gap_#{media_size}_#{gap_spacing_value.underscore}" if gap_values.include?(gap_spacing_value.to_s)
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "gap_#{gap_value[:default].underscore}" if gap_value.key?(:default) && gap_values.include?(gap_value[:default].to_s)
+
+          # Handle responsive sizes (generates classes with size prefix)
+          gap_value.each do |media_size, gap_spacing_value|
+            class_result << "gap_#{media_size}_#{gap_spacing_value.underscore}" if screen_size_values.include?(media_size.to_s) && gap_values.include?(gap_spacing_value.to_s)
           end
+
+          class_result
         elsif gap_values.include?(gap_value.to_s)
           "gap_#{gap_value.underscore}"
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
 
     def column_gap_props
       selected_column_gap_props = column_gap_options.keys.select { |sk| try(sk) }
       return nil unless selected_column_gap_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_column_gap_props.map do |k|
         column_gap_value = send(k)
         if column_gap_value.is_a?(Hash)
-          column_gap_value.map do |media_size, column_gap_spacing_value|
-            "column_gap_#{media_size}_#{column_gap_spacing_value.underscore}" if gap_values.include?(column_gap_spacing_value.to_s)
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "column_gap_#{column_gap_value[:default].underscore}" if column_gap_value.key?(:default) && gap_values.include?(column_gap_value[:default].to_s)
+
+          # Handle responsive sizes (generates classes with size prefix)
+          column_gap_value.each do |media_size, column_gap_spacing_value|
+            class_result << "column_gap_#{media_size}_#{column_gap_spacing_value.underscore}" if screen_size_values.include?(media_size.to_s) && gap_values.include?(column_gap_spacing_value.to_s)
           end
+
+          class_result
         elsif gap_values.include?(column_gap_value.to_s)
           "column_gap_#{column_gap_value.underscore}"
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
 
     def row_gap_props
       selected_row_gap_props = row_gap_options.keys.select { |sk| try(sk) }
       return nil unless selected_row_gap_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_row_gap_props.map do |k|
         row_gap_value = send(k)
         if row_gap_value.is_a?(Hash)
-          row_gap_value.map do |media_size, row_gap_spacing_value|
-            "row_gap_#{media_size}_#{row_gap_spacing_value.underscore}" if gap_values.include?(row_gap_spacing_value.to_s)
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "row_gap_#{row_gap_value[:default].underscore}" if row_gap_value.key?(:default) && gap_values.include?(row_gap_value[:default].to_s)
+
+          # Handle responsive sizes (generates classes with size prefix)
+          row_gap_value.each do |media_size, row_gap_spacing_value|
+            class_result << "row_gap_#{media_size}_#{row_gap_spacing_value.underscore}" if screen_size_values.include?(media_size.to_s) && gap_values.include?(row_gap_spacing_value.to_s)
           end
+
+          class_result
         elsif gap_values.include?(row_gap_value.to_s)
           "row_gap_#{row_gap_value.underscore}"
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
   end
 end

data/lib/playbook/text_align.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = text_align_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         text_align_value = send(k)
         if text_align_value.is_a?(Hash)
-          text_align_value.map do |media_size, flex_value|
-            "text_align_#{media_size}_#{flex_value.underscore}" if text_align_values.include? flex_value
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "text_align_#{text_align_value[:default].underscore}" if text_align_value.key?(:default) && text_align_values.include?(text_align_value[:default])
+
+          # Handle responsive sizes (generates classes with size prefix)
+          text_align_value.each do |media_size, flex_value|
+            class_result << "text_align_#{media_size}_#{flex_value.underscore}" if screen_size_values.include?(media_size.to_s) && text_align_values.include?(flex_value)
           end
+
+          class_result
         else
           "text_align_#{text_align_value.underscore}" if text_align_values.include? text_align_value
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/truncate.rb

@@ -11,7 +11,7 @@ module Playbook
       return nil unless selected_props.present?
 
       selected_props.map do |k|
-        truncate_value = send(k)
+        truncate_value = send(k).to_s
         "truncate_#{truncate_value}" if truncate_values.include? truncate_value
       end.compact.join(" ")
     end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "16.0.0"
-  VERSION = "16.1.0"
+  PREVIOUS_VERSION = "16.1.0"
+  VERSION = "16.2.0.pre.rc.1"
 end

data/lib/playbook/vertical_align.rb

@@ -11,16 +11,26 @@ module Playbook
       selected_props = vertical_align_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
+      screen_size_values = %w[xs sm md lg xl]
+
       selected_props.map do |k|
         vertical_align_value = send(k)
         if vertical_align_value.is_a?(Hash)
-          vertical_align_value.map do |media_size, flex_value|
-            "vertical_align_#{media_size}_#{flex_value.underscore}" if vertical_align_values.include? flex_value
+          class_result = []
+
+          # Handle default value separately (generates base class without size prefix)
+          class_result << "vertical_align_#{vertical_align_value[:default].underscore}" if vertical_align_value.key?(:default) && vertical_align_values.include?(vertical_align_value[:default])
+
+          # Handle responsive sizes (generates classes with size prefix)
+          vertical_align_value.each do |media_size, flex_value|
+            class_result << "vertical_align_#{media_size}_#{flex_value.underscore}" if screen_size_values.include?(media_size.to_s) && vertical_align_values.include?(flex_value)
           end
+
+          class_result
         else
           "vertical_align_#{vertical_align_value.underscore}" if vertical_align_values.include? vertical_align_value
         end
-      end.compact.join(" ")
+      end.flatten.compact.join(" ")
     end
     # rubocop:enable Style/IfInsideElse
 

data/lib/playbook/z_index.rb

@@ -28,6 +28,11 @@ module Playbook
       css = ""
       if responsive
         z_index_value = send(:z_index)
+
+        # Handle default value separately (generates base class without size prefix)
+        css += "z_index_#{z_index_value[:default]} " if z_index_value.key?(:default) && z_index_values.include?(z_index_value[:default].to_s)
+
+        # Handle responsive sizes (generates classes with size prefix)
         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