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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +8 -6
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +6 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +37 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx +72 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx +33 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md +8 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md +8 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx +33 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +2 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +6 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +94 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +5 -1
- data/app/pb_kits/playbook/pb_dropdown/index.js +59 -4
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +3 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -1
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +16 -9
- data/app/pb_kits/playbook/pb_filter/filter.rb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +5 -5
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +4 -4
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +20 -5
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +1 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb +7 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx +24 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md +3 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +2 -0
- data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx +30 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb +5 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx +14 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +34 -3
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +24 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +2 -1
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +4 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +4 -0
- data/dist/chunks/{_pb_line_graph-ERhTGrxH.js → _pb_line_graph-BgKF_zz1.js} +1 -1
- data/dist/chunks/_typeahead-Bfy-4mll.js +1 -0
- data/dist/chunks/{globalProps-C5qTX7aJ.js → globalProps-BhVYCqRf.js} +1 -1
- data/dist/chunks/{lib-B7ivt23s.js → lib-DD34ZrWL.js} +2 -2
- data/dist/chunks/vendor.js +3 -3
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/align_content.rb +13 -3
- data/lib/playbook/align_items.rb +13 -3
- data/lib/playbook/align_self.rb +13 -3
- data/lib/playbook/display.rb +5 -0
- data/lib/playbook/flex.rb +13 -3
- data/lib/playbook/flex_direction.rb +13 -3
- data/lib/playbook/flex_grow.rb +13 -3
- data/lib/playbook/flex_shrink.rb +13 -3
- data/lib/playbook/flex_wrap.rb +13 -3
- data/lib/playbook/forms/builder/phone_number_field.rb +9 -0
- data/lib/playbook/justify_content.rb +13 -3
- data/lib/playbook/justify_self.rb +13 -3
- data/lib/playbook/order.rb +13 -3
- data/lib/playbook/spacing.rb +39 -9
- data/lib/playbook/text_align.rb +13 -3
- data/lib/playbook/truncate.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook/vertical_align.rb +13 -3
- data/lib/playbook/z_index.rb +5 -0
- metadata +24 -6
- 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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/align_items.rb
CHANGED
|
@@ -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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/align_self.rb
CHANGED
|
@@ -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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/display.rb
CHANGED
|
@@ -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
|
-
|
|
18
|
-
|
|
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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/flex_grow.rb
CHANGED
|
@@ -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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/flex_shrink.rb
CHANGED
|
@@ -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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/flex_wrap.rb
CHANGED
|
@@ -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
|
-
|
|
18
|
-
|
|
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
|
-
|
|
18
|
-
|
|
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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/order.rb
CHANGED
|
@@ -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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/spacing.rb
CHANGED
|
@@ -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
|
-
|
|
183
|
-
|
|
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
|
-
|
|
199
|
-
|
|
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
|
-
|
|
215
|
-
|
|
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
|
data/lib/playbook/text_align.rb
CHANGED
|
@@ -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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/truncate.rb
CHANGED
|
@@ -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
|
data/lib/playbook/version.rb
CHANGED
|
@@ -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
|
-
|
|
18
|
-
|
|
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
|
|
data/lib/playbook/z_index.rb
CHANGED
|
@@ -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.
|
|
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-
|
|
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-
|
|
3862
|
-
- dist/chunks/_typeahead-
|
|
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-
|
|
3882
|
+
- dist/chunks/globalProps-BhVYCqRf.js
|
|
3865
3883
|
- dist/chunks/lazysizes-B7xYodB-.js
|
|
3866
|
-
- dist/chunks/lib-
|
|
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
|