playbook_ui 16.1.0 → 16.2.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +8 -6
  3. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +6 -0
  4. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +37 -2
  5. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md +3 -0
  6. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md +3 -0
  7. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb +52 -0
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx +72 -0
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md +5 -0
  10. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx +33 -0
  11. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb +20 -0
  12. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md +8 -0
  13. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md +8 -0
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb +9 -0
  15. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx +33 -0
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md +3 -0
  17. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -0
  18. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +4 -1
  19. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +2 -2
  20. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +6 -0
  21. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +94 -0
  22. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +5 -1
  23. data/app/pb_kits/playbook/pb_dropdown/index.js +59 -4
  24. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +3 -0
  25. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -1
  26. data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx +1 -1
  27. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -2
  28. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +16 -9
  29. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -2
  30. data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -0
  31. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +5 -5
  32. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +4 -4
  33. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
  34. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +20 -5
  35. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +1 -0
  36. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb +7 -0
  37. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx +24 -0
  38. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md +3 -0
  39. data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +2 -0
  40. data/app/pb_kits/playbook/pb_passphrase/docs/index.js +1 -0
  41. data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +2 -0
  42. data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx +30 -1
  43. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -0
  44. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb +5 -0
  45. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx +14 -0
  46. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md +3 -0
  47. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  48. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  49. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  50. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +34 -3
  51. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +24 -1
  52. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +2 -1
  53. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +4 -1
  54. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +4 -0
  57. data/dist/chunks/{_pb_line_graph-ERhTGrxH.js → _pb_line_graph-BgKF_zz1.js} +1 -1
  58. data/dist/chunks/_typeahead-Bfy-4mll.js +1 -0
  59. data/dist/chunks/{globalProps-C5qTX7aJ.js → globalProps-BhVYCqRf.js} +1 -1
  60. data/dist/chunks/{lib-B7ivt23s.js → lib-DD34ZrWL.js} +2 -2
  61. data/dist/chunks/vendor.js +3 -3
  62. data/dist/playbook-rails-react-bindings.js +1 -1
  63. data/dist/playbook-rails.js +1 -1
  64. data/dist/playbook.css +1 -1
  65. data/lib/playbook/align_content.rb +13 -3
  66. data/lib/playbook/align_items.rb +13 -3
  67. data/lib/playbook/align_self.rb +13 -3
  68. data/lib/playbook/display.rb +5 -0
  69. data/lib/playbook/flex.rb +13 -3
  70. data/lib/playbook/flex_direction.rb +13 -3
  71. data/lib/playbook/flex_grow.rb +13 -3
  72. data/lib/playbook/flex_shrink.rb +13 -3
  73. data/lib/playbook/flex_wrap.rb +13 -3
  74. data/lib/playbook/forms/builder/phone_number_field.rb +9 -0
  75. data/lib/playbook/justify_content.rb +13 -3
  76. data/lib/playbook/justify_self.rb +13 -3
  77. data/lib/playbook/order.rb +13 -3
  78. data/lib/playbook/spacing.rb +39 -9
  79. data/lib/playbook/text_align.rb +13 -3
  80. data/lib/playbook/truncate.rb +1 -1
  81. data/lib/playbook/version.rb +2 -2
  82. data/lib/playbook/vertical_align.rb +13 -3
  83. data/lib/playbook/z_index.rb +5 -0
  84. metadata +24 -6
  85. data/dist/chunks/_typeahead-DmWq2Utd.js +0 -1
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = align_content_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  align_content = send(k)
16
18
  if align_content.is_a?(Hash)
17
- align_content.map do |media_size, align_value|
18
- "align_content_#{media_size}_#{align_value.underscore}" if align_content_values.include? align_value
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "align_content_#{align_content[:default].underscore}" if align_content.key?(:default) && align_content_values.include?(align_content[:default])
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ align_content.each do |media_size, align_value|
26
+ class_result << "align_content_#{media_size}_#{align_value.underscore}" if screen_size_values.include?(media_size.to_s) && align_content_values.include?(align_value)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "align_content_#{align_content.underscore}" if align_content_values.include? align_content
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = align_items_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  align_items_value = send(k)
16
18
  if align_items_value.is_a?(Hash)
17
- align_items_value.map do |media_size, align_value|
18
- "align_items_#{media_size}_#{align_value.underscore}" if align_items_values.include? align_value.to_s
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ 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)
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ align_items_value.each do |media_size, align_value|
26
+ 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)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "align_items_#{align_items_value.underscore}" if align_items_values.include? align_items_value
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = align_self_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  align_self_value = send(k)
16
18
  if align_self_value.is_a?(Hash)
17
- align_self_value.map do |media_size, align_value|
18
- "align_self_#{media_size}_#{align_value}" if align_self_values.include? align_value
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "align_self_#{align_self_value[:default]}" if align_self_value.key?(:default) && align_self_values.include?(align_self_value[:default])
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ align_self_value.each do |media_size, align_value|
26
+ class_result << "align_self_#{media_size}_#{align_value}" if screen_size_values.include?(media_size.to_s) && align_self_values.include?(align_value)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "align_self_#{align_self_value}" if align_self_values.include? align_self_value
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  # rubocop:enable Style/IfInsideElse
25
35
  end
26
36
 
@@ -12,6 +12,11 @@ module Playbook
12
12
  css = ""
13
13
  if responsive
14
14
  display_value = send(:display)
15
+
16
+ # Handle default value separately (generates base class without size prefix)
17
+ css += "display_#{display_value[:default]} " if display_value.key?(:default) && display_values.include?(display_value[:default].to_s)
18
+
19
+ # Handle responsive sizes (generates classes with size prefix)
15
20
  display_value.each do |key, value|
16
21
  css += "display_#{key}_#{value} " if display_size_values.include?(key.to_s) && display_values.include?(value.to_s)
17
22
  end
data/lib/playbook/flex.rb CHANGED
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = flex_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  flex_value = send(k)
16
18
  if flex_value.is_a?(Hash)
17
- flex_value.map do |media_size, value|
18
- "flex_#{media_size}_#{value}" if flex_values.include? value.to_s
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "flex_#{flex_value[:default]}" if flex_value.key?(:default) && flex_values.include?(flex_value[:default].to_s)
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ flex_value.each do |media_size, value|
26
+ class_result << "flex_#{media_size}_#{value}" if screen_size_values.include?(media_size.to_s) && flex_values.include?(value.to_s)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "flex_#{flex_value}" if flex_values.include? flex_value.to_s
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = flex_direction_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  flex_direction_value = send(k)
16
18
  if flex_direction_value.is_a?(Hash)
17
- flex_direction_value.map do |media_size, flex_value|
18
- "flex_direction_#{media_size}_#{flex_value.underscore}" if flex_direction_values.include? flex_value
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "flex_direction_#{flex_direction_value[:default].underscore}" if flex_direction_value.key?(:default) && flex_direction_values.include?(flex_direction_value[:default])
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ flex_direction_value.each do |media_size, flex_value|
26
+ class_result << "flex_direction_#{media_size}_#{flex_value.underscore}" if screen_size_values.include?(media_size.to_s) && flex_direction_values.include?(flex_value)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "flex_direction_#{flex_direction_value.underscore}" if flex_direction_values.include? flex_direction_value
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = flex_grow_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  flex_grow_value = send(k)
16
18
  if flex_grow_value.is_a?(Hash)
17
- flex_grow_value.map do |media_size, grow_value|
18
- "flex_grow_#{media_size}_#{grow_value}" if flex_grow_values.include? grow_value.to_s
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "flex_grow_#{flex_grow_value[:default]}" if flex_grow_value.key?(:default) && flex_grow_values.include?(flex_grow_value[:default].to_s)
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ flex_grow_value.each do |media_size, grow_value|
26
+ 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)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value.to_s
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = flex_shrink_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  flex_shrink_value = send(k)
16
18
  if flex_shrink_value.is_a?(Hash)
17
- flex_shrink_value.map do |media_size, shrink_value|
18
- "flex_shrink_#{media_size}_#{shrink_value}" if flex_shrink_values.include? shrink_value.to_s
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "flex_shrink_#{flex_shrink_value[:default]}" if flex_shrink_value.key?(:default) && flex_shrink_values.include?(flex_shrink_value[:default].to_s)
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ flex_shrink_value.each do |media_size, shrink_value|
26
+ 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)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value.to_s
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = flex_wrap_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  flex_wrap_value = send(k)
16
18
  if flex_wrap_value.is_a?(Hash)
17
- flex_wrap_value.map do |media_size, wrap_value|
18
- "flex_wrap_#{media_size}_#{wrap_value.underscore}" if flex_wrap_values.include? wrap_value
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "flex_wrap_#{flex_wrap_value[:default].underscore}" if flex_wrap_value.key?(:default) && flex_wrap_values.include?(flex_wrap_value[:default])
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ flex_wrap_value.each do |media_size, wrap_value|
26
+ class_result << "flex_wrap_#{media_size}_#{wrap_value.underscore}" if screen_size_values.include?(media_size.to_s) && flex_wrap_values.include?(wrap_value)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -5,6 +5,15 @@ module Playbook
5
5
  class Builder
6
6
  def phone_number_field(name, props: {})
7
7
  props[:name] = name
8
+
9
+ if props[:label] == true && props[:required_indicator]
10
+ props[:label] = if @object && @object.class.respond_to?(:human_attribute_name)
11
+ @object.class.human_attribute_name(name)
12
+ else
13
+ name.to_s.humanize
14
+ end
15
+ end
16
+
8
17
  @template.pb_rails("phone_number_input", props: props)
9
18
  end
10
19
  end
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = justify_content_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  justify_content_value = send(k)
16
18
  if justify_content_value.is_a?(Hash)
17
- justify_content_value.map do |media_size, justify_value|
18
- "justify_content_#{media_size}_#{justify_value.underscore}" if justify_content_values.include? justify_value
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "justify_content_#{justify_content_value[:default].underscore}" if justify_content_value.key?(:default) && justify_content_values.include?(justify_content_value[:default])
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ justify_content_value.each do |media_size, justify_value|
26
+ class_result << "justify_content_#{media_size}_#{justify_value.underscore}" if screen_size_values.include?(media_size.to_s) && justify_content_values.include?(justify_value)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "justify_content_#{justify_content_value.underscore}" if justify_content_values.include? justify_content_value
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = justify_self_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  justify_self_value = send(k)
16
18
  if justify_self_value.is_a?(Hash)
17
- justify_self_value.map do |media_size, self_value|
18
- "justify_self_#{media_size}_#{self_value}" if justify_self_values.include? self_value
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "justify_self_#{justify_self_value[:default]}" if justify_self_value.key?(:default) && justify_self_values.include?(justify_self_value[:default])
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ justify_self_value.each do |media_size, self_value|
26
+ class_result << "justify_self_#{media_size}_#{self_value}" if screen_size_values.include?(media_size.to_s) && justify_self_values.include?(self_value)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "justify_self_#{justify_self_value}" if justify_self_values.include? justify_self_value
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = order_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  order_value = send(k)
16
18
  if order_value.is_a?(Hash)
17
- order_value.map do |media_size, order_size_value|
18
- "flex_order_#{media_size}_#{order_size_value}" if order_values.include? order_size_value.to_s
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "flex_order_#{order_value[:default]}" if order_value.key?(:default) && order_values.include?(order_value[:default].to_s)
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ order_value.each do |media_size, order_size_value|
26
+ 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)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "flex_order_#{order_value}" if order_values.include? order_value.to_s
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -176,48 +176,78 @@ module Playbook
176
176
  selected_gap_props = gap_options.keys.select { |sk| try(sk) }
177
177
  return nil unless selected_gap_props.present?
178
178
 
179
+ screen_size_values = %w[xs sm md lg xl]
180
+
179
181
  selected_gap_props.map do |k|
180
182
  gap_value = send(k)
181
183
  if gap_value.is_a?(Hash)
182
- gap_value.map do |media_size, gap_spacing_value|
183
- "gap_#{media_size}_#{gap_spacing_value.underscore}" if gap_values.include?(gap_spacing_value.to_s)
184
+ class_result = []
185
+
186
+ # Handle default value separately (generates base class without size prefix)
187
+ class_result << "gap_#{gap_value[:default].underscore}" if gap_value.key?(:default) && gap_values.include?(gap_value[:default].to_s)
188
+
189
+ # Handle responsive sizes (generates classes with size prefix)
190
+ gap_value.each do |media_size, gap_spacing_value|
191
+ 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)
184
192
  end
193
+
194
+ class_result
185
195
  elsif gap_values.include?(gap_value.to_s)
186
196
  "gap_#{gap_value.underscore}"
187
197
  end
188
- end.compact.join(" ")
198
+ end.flatten.compact.join(" ")
189
199
  end
190
200
 
191
201
  def column_gap_props
192
202
  selected_column_gap_props = column_gap_options.keys.select { |sk| try(sk) }
193
203
  return nil unless selected_column_gap_props.present?
194
204
 
205
+ screen_size_values = %w[xs sm md lg xl]
206
+
195
207
  selected_column_gap_props.map do |k|
196
208
  column_gap_value = send(k)
197
209
  if column_gap_value.is_a?(Hash)
198
- column_gap_value.map do |media_size, column_gap_spacing_value|
199
- "column_gap_#{media_size}_#{column_gap_spacing_value.underscore}" if gap_values.include?(column_gap_spacing_value.to_s)
210
+ class_result = []
211
+
212
+ # Handle default value separately (generates base class without size prefix)
213
+ class_result << "column_gap_#{column_gap_value[:default].underscore}" if column_gap_value.key?(:default) && gap_values.include?(column_gap_value[:default].to_s)
214
+
215
+ # Handle responsive sizes (generates classes with size prefix)
216
+ column_gap_value.each do |media_size, column_gap_spacing_value|
217
+ 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)
200
218
  end
219
+
220
+ class_result
201
221
  elsif gap_values.include?(column_gap_value.to_s)
202
222
  "column_gap_#{column_gap_value.underscore}"
203
223
  end
204
- end.compact.join(" ")
224
+ end.flatten.compact.join(" ")
205
225
  end
206
226
 
207
227
  def row_gap_props
208
228
  selected_row_gap_props = row_gap_options.keys.select { |sk| try(sk) }
209
229
  return nil unless selected_row_gap_props.present?
210
230
 
231
+ screen_size_values = %w[xs sm md lg xl]
232
+
211
233
  selected_row_gap_props.map do |k|
212
234
  row_gap_value = send(k)
213
235
  if row_gap_value.is_a?(Hash)
214
- row_gap_value.map do |media_size, row_gap_spacing_value|
215
- "row_gap_#{media_size}_#{row_gap_spacing_value.underscore}" if gap_values.include?(row_gap_spacing_value.to_s)
236
+ class_result = []
237
+
238
+ # Handle default value separately (generates base class without size prefix)
239
+ class_result << "row_gap_#{row_gap_value[:default].underscore}" if row_gap_value.key?(:default) && gap_values.include?(row_gap_value[:default].to_s)
240
+
241
+ # Handle responsive sizes (generates classes with size prefix)
242
+ row_gap_value.each do |media_size, row_gap_spacing_value|
243
+ 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)
216
244
  end
245
+
246
+ class_result
217
247
  elsif gap_values.include?(row_gap_value.to_s)
218
248
  "row_gap_#{row_gap_value.underscore}"
219
249
  end
220
- end.compact.join(" ")
250
+ end.flatten.compact.join(" ")
221
251
  end
222
252
  end
223
253
  end
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = text_align_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  text_align_value = send(k)
16
18
  if text_align_value.is_a?(Hash)
17
- text_align_value.map do |media_size, flex_value|
18
- "text_align_#{media_size}_#{flex_value.underscore}" if text_align_values.include? flex_value
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "text_align_#{text_align_value[:default].underscore}" if text_align_value.key?(:default) && text_align_values.include?(text_align_value[:default])
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ text_align_value.each do |media_size, flex_value|
26
+ class_result << "text_align_#{media_size}_#{flex_value.underscore}" if screen_size_values.include?(media_size.to_s) && text_align_values.include?(flex_value)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "text_align_#{text_align_value.underscore}" if text_align_values.include? text_align_value
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -11,7 +11,7 @@ module Playbook
11
11
  return nil unless selected_props.present?
12
12
 
13
13
  selected_props.map do |k|
14
- truncate_value = send(k)
14
+ truncate_value = send(k).to_s
15
15
  "truncate_#{truncate_value}" if truncate_values.include? truncate_value
16
16
  end.compact.join(" ")
17
17
  end
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "16.0.0"
5
- VERSION = "16.1.0"
4
+ PREVIOUS_VERSION = "16.1.0"
5
+ VERSION = "16.2.0.pre.rc.0"
6
6
  end
@@ -11,16 +11,26 @@ module Playbook
11
11
  selected_props = vertical_align_options.keys.select { |sk| try(sk) }
12
12
  return nil unless selected_props.present?
13
13
 
14
+ screen_size_values = %w[xs sm md lg xl]
15
+
14
16
  selected_props.map do |k|
15
17
  vertical_align_value = send(k)
16
18
  if vertical_align_value.is_a?(Hash)
17
- vertical_align_value.map do |media_size, flex_value|
18
- "vertical_align_#{media_size}_#{flex_value.underscore}" if vertical_align_values.include? flex_value
19
+ class_result = []
20
+
21
+ # Handle default value separately (generates base class without size prefix)
22
+ class_result << "vertical_align_#{vertical_align_value[:default].underscore}" if vertical_align_value.key?(:default) && vertical_align_values.include?(vertical_align_value[:default])
23
+
24
+ # Handle responsive sizes (generates classes with size prefix)
25
+ vertical_align_value.each do |media_size, flex_value|
26
+ class_result << "vertical_align_#{media_size}_#{flex_value.underscore}" if screen_size_values.include?(media_size.to_s) && vertical_align_values.include?(flex_value)
19
27
  end
28
+
29
+ class_result
20
30
  else
21
31
  "vertical_align_#{vertical_align_value.underscore}" if vertical_align_values.include? vertical_align_value
22
32
  end
23
- end.compact.join(" ")
33
+ end.flatten.compact.join(" ")
24
34
  end
25
35
  # rubocop:enable Style/IfInsideElse
26
36
 
@@ -28,6 +28,11 @@ module Playbook
28
28
  css = ""
29
29
  if responsive
30
30
  z_index_value = send(:z_index)
31
+
32
+ # Handle default value separately (generates base class without size prefix)
33
+ css += "z_index_#{z_index_value[:default]} " if z_index_value.key?(:default) && z_index_values.include?(z_index_value[:default].to_s)
34
+
35
+ # Handle responsive sizes (generates classes with size prefix)
31
36
  z_index_value.each do |key, value|
32
37
  css += "z_index_#{key}_#{value} " if screen_size_values.include?(key.to_s) && z_index_values.include?(value.to_s)
33
38
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 16.1.0
4
+ version: 16.2.0.pre.rc.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2026-01-26 00:00:00.000000000 Z
12
+ date: 2026-01-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1310,6 +1310,8 @@ files:
1310
1310
  - app/pb_kits/playbook/pb_dropdown/context/index.tsx
1311
1311
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
1312
1312
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
1313
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md
1314
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
1313
1315
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
1314
1316
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
1315
1317
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
@@ -1371,6 +1373,13 @@ files:
1371
1373
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
1372
1374
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
1373
1375
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
1376
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb
1377
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx
1378
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md
1379
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx
1380
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb
1381
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md
1382
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md
1374
1383
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
1375
1384
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
1376
1385
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
@@ -1401,6 +1410,9 @@ files:
1401
1410
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
1402
1411
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
1403
1412
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
1413
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb
1414
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx
1415
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md
1404
1416
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
1405
1417
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
1406
1418
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
@@ -2352,6 +2364,9 @@ files:
2352
2364
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
2353
2365
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
2354
2366
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
2367
+ - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb
2368
+ - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx
2369
+ - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md
2355
2370
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
2356
2371
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
2357
2372
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
@@ -2554,6 +2569,9 @@ files:
2554
2569
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
2555
2570
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
2556
2571
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
2572
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb
2573
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx
2574
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md
2557
2575
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
2558
2576
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
2559
2577
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
@@ -3858,12 +3876,12 @@ files:
3858
3876
  - app/pb_kits/playbook/utilities/test/globalProps/zIndex.test.js
3859
3877
  - app/pb_kits/playbook/utilities/text.ts
3860
3878
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3861
- - dist/chunks/_pb_line_graph-ERhTGrxH.js
3862
- - dist/chunks/_typeahead-DmWq2Utd.js
3879
+ - dist/chunks/_pb_line_graph-BgKF_zz1.js
3880
+ - dist/chunks/_typeahead-Bfy-4mll.js
3863
3881
  - dist/chunks/componentRegistry-DzmmLR2x.js
3864
- - dist/chunks/globalProps-C5qTX7aJ.js
3882
+ - dist/chunks/globalProps-BhVYCqRf.js
3865
3883
  - dist/chunks/lazysizes-B7xYodB-.js
3866
- - dist/chunks/lib-B7ivt23s.js
3884
+ - dist/chunks/lib-DD34ZrWL.js
3867
3885
  - dist/chunks/vendor.js
3868
3886
  - dist/menu.yml
3869
3887
  - dist/playbook-rails-react-bindings.js