playbook_ui 16.1.0.pre.alpha.play264213818 → 16.1.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_advanced_table/advanced_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +1 -51
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -34
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +0 -19
- data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb +3 -35
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -3
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -6
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +33 -35
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +7 -51
- data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +6 -33
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +0 -5
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js +18 -33
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +11 -29
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -4
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_textarea/index.ts +5 -12
- data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +10 -10
- data/app/pb_kits/playbook/pb_textarea/textarea.rb +0 -30
- data/app/pb_kits/playbook/pb_textarea/textarea.test.js +1 -18
- data/dist/chunks/{_pb_line_graph-BgKF_zz1.js → _pb_line_graph-hxi01lk7.js} +1 -1
- data/dist/chunks/{_typeahead-B9a6ZsEP.js → _typeahead-BgLnlhzP.js} +1 -1
- data/dist/chunks/{globalProps-BhVYCqRf.js → globalProps-DgYwLYNx.js} +1 -1
- data/dist/chunks/{lib-DD34ZrWL.js → lib-NLxTo8OB.js} +1 -1
- data/dist/chunks/vendor.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/align_content.rb +3 -13
- data/lib/playbook/align_items.rb +3 -13
- data/lib/playbook/align_self.rb +3 -13
- data/lib/playbook/display.rb +0 -5
- data/lib/playbook/flex.rb +3 -13
- data/lib/playbook/flex_direction.rb +3 -13
- data/lib/playbook/flex_grow.rb +3 -13
- data/lib/playbook/flex_shrink.rb +3 -13
- data/lib/playbook/flex_wrap.rb +3 -13
- data/lib/playbook/justify_content.rb +3 -13
- data/lib/playbook/justify_self.rb +3 -13
- data/lib/playbook/order.rb +3 -13
- data/lib/playbook/spacing.rb +9 -39
- data/lib/playbook/text_align.rb +3 -13
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook/vertical_align.rb +3 -13
- data/lib/playbook/z_index.rb +0 -5
- metadata +6 -47
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb +0 -64
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md +0 -18
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx +0 -30
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb +0 -74
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx +0 -87
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md +0 -3
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb +0 -30
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +0 -35
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -21
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_sections.yml +0 -68
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb +0 -39
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md +0 -3
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb +0 -5
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx +0 -25
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md +0 -3
- data/app/pb_kits/playbook/utilities/test/globalProps/borderRadius.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/bottom.test.js +0 -60
- data/app/pb_kits/playbook/utilities/test/globalProps/cursor.test.js +0 -42
- data/app/pb_kits/playbook/utilities/test/globalProps/dark.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/gap.test.js +0 -87
- data/app/pb_kits/playbook/utilities/test/globalProps/globalProps.integration.test.js +0 -936
- data/app/pb_kits/playbook/utilities/test/globalProps/height.test.js +0 -68
- data/app/pb_kits/playbook/utilities/test/globalProps/htmlOptions.test.js +0 -510
- data/app/pb_kits/playbook/utilities/test/globalProps/left.test.js +0 -60
- data/app/pb_kits/playbook/utilities/test/globalProps/lineHeight.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/margin.test.js +0 -95
- data/app/pb_kits/playbook/utilities/test/globalProps/numberSpacing.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/overflow.test.js +0 -68
- data/app/pb_kits/playbook/utilities/test/globalProps/padding.test.js +0 -95
- data/app/pb_kits/playbook/utilities/test/globalProps/position.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/right.test.js +0 -60
- data/app/pb_kits/playbook/utilities/test/globalProps/shadow.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/textAlign.test.js +0 -41
- data/app/pb_kits/playbook/utilities/test/globalProps/top.test.js +0 -60
- data/app/pb_kits/playbook/utilities/test/globalProps/verticalAlign.test.js +0 -40
- data/app/pb_kits/playbook/utilities/test/globalProps/width.test.js +0 -66
- data/app/pb_kits/playbook/utilities/test/globalProps/zIndex.test.js +0 -50
data/lib/playbook/flex_shrink.rb
CHANGED
|
@@ -11,26 +11,16 @@ 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
|
-
|
|
16
14
|
selected_props.map do |k|
|
|
17
15
|
flex_shrink_value = send(k)
|
|
18
16
|
if flex_shrink_value.is_a?(Hash)
|
|
19
|
-
|
|
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)
|
|
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
|
|
27
19
|
end
|
|
28
|
-
|
|
29
|
-
class_result
|
|
30
20
|
else
|
|
31
21
|
"flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value.to_s
|
|
32
22
|
end
|
|
33
|
-
end.
|
|
23
|
+
end.compact.join(" ")
|
|
34
24
|
end
|
|
35
25
|
# rubocop:enable Style/IfInsideElse
|
|
36
26
|
|
data/lib/playbook/flex_wrap.rb
CHANGED
|
@@ -11,26 +11,16 @@ 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
|
-
|
|
16
14
|
selected_props.map do |k|
|
|
17
15
|
flex_wrap_value = send(k)
|
|
18
16
|
if flex_wrap_value.is_a?(Hash)
|
|
19
|
-
|
|
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)
|
|
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
|
|
27
19
|
end
|
|
28
|
-
|
|
29
|
-
class_result
|
|
30
20
|
else
|
|
31
21
|
"flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
|
|
32
22
|
end
|
|
33
|
-
end.
|
|
23
|
+
end.compact.join(" ")
|
|
34
24
|
end
|
|
35
25
|
# rubocop:enable Style/IfInsideElse
|
|
36
26
|
|
|
@@ -11,26 +11,16 @@ 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
|
-
|
|
16
14
|
selected_props.map do |k|
|
|
17
15
|
justify_content_value = send(k)
|
|
18
16
|
if justify_content_value.is_a?(Hash)
|
|
19
|
-
|
|
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)
|
|
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
|
|
27
19
|
end
|
|
28
|
-
|
|
29
|
-
class_result
|
|
30
20
|
else
|
|
31
21
|
"justify_content_#{justify_content_value.underscore}" if justify_content_values.include? justify_content_value
|
|
32
22
|
end
|
|
33
|
-
end.
|
|
23
|
+
end.compact.join(" ")
|
|
34
24
|
end
|
|
35
25
|
# rubocop:enable Style/IfInsideElse
|
|
36
26
|
|
|
@@ -11,26 +11,16 @@ 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
|
-
|
|
16
14
|
selected_props.map do |k|
|
|
17
15
|
justify_self_value = send(k)
|
|
18
16
|
if justify_self_value.is_a?(Hash)
|
|
19
|
-
|
|
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)
|
|
17
|
+
justify_self_value.map do |media_size, self_value|
|
|
18
|
+
"justify_self_#{media_size}_#{self_value}" if justify_self_values.include? self_value
|
|
27
19
|
end
|
|
28
|
-
|
|
29
|
-
class_result
|
|
30
20
|
else
|
|
31
21
|
"justify_self_#{justify_self_value}" if justify_self_values.include? justify_self_value
|
|
32
22
|
end
|
|
33
|
-
end.
|
|
23
|
+
end.compact.join(" ")
|
|
34
24
|
end
|
|
35
25
|
# rubocop:enable Style/IfInsideElse
|
|
36
26
|
|
data/lib/playbook/order.rb
CHANGED
|
@@ -11,26 +11,16 @@ 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
|
-
|
|
16
14
|
selected_props.map do |k|
|
|
17
15
|
order_value = send(k)
|
|
18
16
|
if order_value.is_a?(Hash)
|
|
19
|
-
|
|
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)
|
|
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
|
|
27
19
|
end
|
|
28
|
-
|
|
29
|
-
class_result
|
|
30
20
|
else
|
|
31
21
|
"flex_order_#{order_value}" if order_values.include? order_value.to_s
|
|
32
22
|
end
|
|
33
|
-
end.
|
|
23
|
+
end.compact.join(" ")
|
|
34
24
|
end
|
|
35
25
|
# rubocop:enable Style/IfInsideElse
|
|
36
26
|
|
data/lib/playbook/spacing.rb
CHANGED
|
@@ -176,78 +176,48 @@ 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
|
-
|
|
181
179
|
selected_gap_props.map do |k|
|
|
182
180
|
gap_value = send(k)
|
|
183
181
|
if gap_value.is_a?(Hash)
|
|
184
|
-
|
|
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)
|
|
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)
|
|
192
184
|
end
|
|
193
|
-
|
|
194
|
-
class_result
|
|
195
185
|
elsif gap_values.include?(gap_value.to_s)
|
|
196
186
|
"gap_#{gap_value.underscore}"
|
|
197
187
|
end
|
|
198
|
-
end.
|
|
188
|
+
end.compact.join(" ")
|
|
199
189
|
end
|
|
200
190
|
|
|
201
191
|
def column_gap_props
|
|
202
192
|
selected_column_gap_props = column_gap_options.keys.select { |sk| try(sk) }
|
|
203
193
|
return nil unless selected_column_gap_props.present?
|
|
204
194
|
|
|
205
|
-
screen_size_values = %w[xs sm md lg xl]
|
|
206
|
-
|
|
207
195
|
selected_column_gap_props.map do |k|
|
|
208
196
|
column_gap_value = send(k)
|
|
209
197
|
if column_gap_value.is_a?(Hash)
|
|
210
|
-
|
|
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)
|
|
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)
|
|
218
200
|
end
|
|
219
|
-
|
|
220
|
-
class_result
|
|
221
201
|
elsif gap_values.include?(column_gap_value.to_s)
|
|
222
202
|
"column_gap_#{column_gap_value.underscore}"
|
|
223
203
|
end
|
|
224
|
-
end.
|
|
204
|
+
end.compact.join(" ")
|
|
225
205
|
end
|
|
226
206
|
|
|
227
207
|
def row_gap_props
|
|
228
208
|
selected_row_gap_props = row_gap_options.keys.select { |sk| try(sk) }
|
|
229
209
|
return nil unless selected_row_gap_props.present?
|
|
230
210
|
|
|
231
|
-
screen_size_values = %w[xs sm md lg xl]
|
|
232
|
-
|
|
233
211
|
selected_row_gap_props.map do |k|
|
|
234
212
|
row_gap_value = send(k)
|
|
235
213
|
if row_gap_value.is_a?(Hash)
|
|
236
|
-
|
|
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)
|
|
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)
|
|
244
216
|
end
|
|
245
|
-
|
|
246
|
-
class_result
|
|
247
217
|
elsif gap_values.include?(row_gap_value.to_s)
|
|
248
218
|
"row_gap_#{row_gap_value.underscore}"
|
|
249
219
|
end
|
|
250
|
-
end.
|
|
220
|
+
end.compact.join(" ")
|
|
251
221
|
end
|
|
252
222
|
end
|
|
253
223
|
end
|
data/lib/playbook/text_align.rb
CHANGED
|
@@ -11,26 +11,16 @@ 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
|
-
|
|
16
14
|
selected_props.map do |k|
|
|
17
15
|
text_align_value = send(k)
|
|
18
16
|
if text_align_value.is_a?(Hash)
|
|
19
|
-
|
|
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)
|
|
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
|
|
27
19
|
end
|
|
28
|
-
|
|
29
|
-
class_result
|
|
30
20
|
else
|
|
31
21
|
"text_align_#{text_align_value.underscore}" if text_align_values.include? text_align_value
|
|
32
22
|
end
|
|
33
|
-
end.
|
|
23
|
+
end.compact.join(" ")
|
|
34
24
|
end
|
|
35
25
|
# rubocop:enable Style/IfInsideElse
|
|
36
26
|
|
data/lib/playbook/version.rb
CHANGED
|
@@ -11,26 +11,16 @@ 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
|
-
|
|
16
14
|
selected_props.map do |k|
|
|
17
15
|
vertical_align_value = send(k)
|
|
18
16
|
if vertical_align_value.is_a?(Hash)
|
|
19
|
-
|
|
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)
|
|
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
|
|
27
19
|
end
|
|
28
|
-
|
|
29
|
-
class_result
|
|
30
20
|
else
|
|
31
21
|
"vertical_align_#{vertical_align_value.underscore}" if vertical_align_values.include? vertical_align_value
|
|
32
22
|
end
|
|
33
|
-
end.
|
|
23
|
+
end.compact.join(" ")
|
|
34
24
|
end
|
|
35
25
|
# rubocop:enable Style/IfInsideElse
|
|
36
26
|
|
data/lib/playbook/z_index.rb
CHANGED
|
@@ -28,11 +28,6 @@ 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)
|
|
36
31
|
z_index_value.each do |key, value|
|
|
37
32
|
css += "z_index_#{key}_#{value} " if screen_size_values.include?(key.to_s) && z_index_values.include?(value.to_s)
|
|
38
33
|
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.pre.
|
|
4
|
+
version: 16.1.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-12 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -340,8 +340,6 @@ files:
|
|
|
340
340
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
|
|
341
341
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
|
|
342
342
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
|
|
343
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb
|
|
344
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md
|
|
345
343
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
|
|
346
344
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
|
|
347
345
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md
|
|
@@ -498,8 +496,6 @@ files:
|
|
|
498
496
|
- app/pb_kits/playbook/pb_background/docs/_background_light.md
|
|
499
497
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
|
|
500
498
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
|
|
501
|
-
- app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx
|
|
502
|
-
- app/pb_kits/playbook/pb_background/docs/_background_responsive.md
|
|
503
499
|
- app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
|
|
504
500
|
- app/pb_kits/playbook/pb_background/docs/_background_size.jsx
|
|
505
501
|
- app/pb_kits/playbook/pb_background/docs/_background_size.md
|
|
@@ -2096,9 +2092,6 @@ files:
|
|
|
2096
2092
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md
|
|
2097
2093
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb
|
|
2098
2094
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx
|
|
2099
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb
|
|
2100
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx
|
|
2101
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
|
|
2102
2095
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
2103
2096
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
2104
2097
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
@@ -2150,7 +2143,6 @@ files:
|
|
|
2150
2143
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
|
|
2151
2144
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
|
|
2152
2145
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
|
|
2153
|
-
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb
|
|
2154
2146
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
|
|
2155
2147
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
|
|
2156
2148
|
- app/pb_kits/playbook/pb_multiple_users/docs/example.yml
|
|
@@ -2742,8 +2734,6 @@ files:
|
|
|
2742
2734
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
|
|
2743
2735
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
|
|
2744
2736
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
|
|
2745
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx
|
|
2746
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md
|
|
2747
2737
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
|
|
2748
2738
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
|
|
2749
2739
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
|
|
@@ -2761,9 +2751,6 @@ files:
|
|
|
2761
2751
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
2762
2752
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
|
2763
2753
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
|
|
2764
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
|
|
2765
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
|
|
2766
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
|
|
2767
2754
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
|
|
2768
2755
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
|
|
2769
2756
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
|
|
@@ -3043,7 +3030,6 @@ files:
|
|
|
3043
3030
|
- app/pb_kits/playbook/pb_table/_table.scss
|
|
3044
3031
|
- app/pb_kits/playbook/pb_table/_table.tsx
|
|
3045
3032
|
- app/pb_kits/playbook/pb_table/docs/_description.md
|
|
3046
|
-
- app/pb_kits/playbook/pb_table/docs/_sections.yml
|
|
3047
3033
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
|
|
3048
3034
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
|
|
3049
3035
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
|
|
@@ -3299,12 +3285,7 @@ files:
|
|
|
3299
3285
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md
|
|
3300
3286
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
|
|
3301
3287
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
|
|
3302
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
|
|
3303
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
|
|
3304
3288
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
|
|
3305
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb
|
|
3306
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx
|
|
3307
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md
|
|
3308
3289
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
|
|
3309
3290
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
|
3310
3291
|
- app/pb_kits/playbook/pb_textarea/docs/example.yml
|
|
@@ -3822,48 +3803,26 @@ files:
|
|
|
3822
3803
|
- app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
|
|
3823
3804
|
- app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js
|
|
3824
3805
|
- app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js
|
|
3825
|
-
- app/pb_kits/playbook/utilities/test/globalProps/borderRadius.test.js
|
|
3826
|
-
- app/pb_kits/playbook/utilities/test/globalProps/bottom.test.js
|
|
3827
|
-
- app/pb_kits/playbook/utilities/test/globalProps/cursor.test.js
|
|
3828
|
-
- app/pb_kits/playbook/utilities/test/globalProps/dark.test.js
|
|
3829
3806
|
- app/pb_kits/playbook/utilities/test/globalProps/display.test.js
|
|
3830
3807
|
- app/pb_kits/playbook/utilities/test/globalProps/flex.test.js
|
|
3831
3808
|
- app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js
|
|
3832
3809
|
- app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js
|
|
3833
3810
|
- app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js
|
|
3834
3811
|
- app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js
|
|
3835
|
-
- app/pb_kits/playbook/utilities/test/globalProps/gap.test.js
|
|
3836
|
-
- app/pb_kits/playbook/utilities/test/globalProps/globalProps.integration.test.js
|
|
3837
3812
|
- app/pb_kits/playbook/utilities/test/globalProps/globalPropsTestHelper.js
|
|
3838
|
-
- app/pb_kits/playbook/utilities/test/globalProps/height.test.js
|
|
3839
3813
|
- app/pb_kits/playbook/utilities/test/globalProps/hover.test.js
|
|
3840
|
-
- app/pb_kits/playbook/utilities/test/globalProps/htmlOptions.test.js
|
|
3841
3814
|
- app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js
|
|
3842
3815
|
- app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
|
|
3843
|
-
- app/pb_kits/playbook/utilities/test/globalProps/left.test.js
|
|
3844
|
-
- app/pb_kits/playbook/utilities/test/globalProps/lineHeight.test.js
|
|
3845
|
-
- app/pb_kits/playbook/utilities/test/globalProps/margin.test.js
|
|
3846
|
-
- app/pb_kits/playbook/utilities/test/globalProps/numberSpacing.test.js
|
|
3847
3816
|
- app/pb_kits/playbook/utilities/test/globalProps/order.test.js
|
|
3848
|
-
- app/pb_kits/playbook/utilities/test/globalProps/overflow.test.js
|
|
3849
|
-
- app/pb_kits/playbook/utilities/test/globalProps/padding.test.js
|
|
3850
|
-
- app/pb_kits/playbook/utilities/test/globalProps/position.test.js
|
|
3851
|
-
- app/pb_kits/playbook/utilities/test/globalProps/right.test.js
|
|
3852
|
-
- app/pb_kits/playbook/utilities/test/globalProps/shadow.test.js
|
|
3853
|
-
- app/pb_kits/playbook/utilities/test/globalProps/textAlign.test.js
|
|
3854
|
-
- app/pb_kits/playbook/utilities/test/globalProps/top.test.js
|
|
3855
3817
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
|
3856
|
-
- app/pb_kits/playbook/utilities/test/globalProps/verticalAlign.test.js
|
|
3857
|
-
- app/pb_kits/playbook/utilities/test/globalProps/width.test.js
|
|
3858
|
-
- app/pb_kits/playbook/utilities/test/globalProps/zIndex.test.js
|
|
3859
3818
|
- app/pb_kits/playbook/utilities/text.ts
|
|
3860
3819
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
|
3861
|
-
- dist/chunks/_pb_line_graph-
|
|
3862
|
-
- dist/chunks/_typeahead-
|
|
3820
|
+
- dist/chunks/_pb_line_graph-hxi01lk7.js
|
|
3821
|
+
- dist/chunks/_typeahead-BgLnlhzP.js
|
|
3863
3822
|
- dist/chunks/componentRegistry-DzmmLR2x.js
|
|
3864
|
-
- dist/chunks/globalProps-
|
|
3823
|
+
- dist/chunks/globalProps-DgYwLYNx.js
|
|
3865
3824
|
- dist/chunks/lazysizes-B7xYodB-.js
|
|
3866
|
-
- dist/chunks/lib-
|
|
3825
|
+
- dist/chunks/lib-NLxTo8OB.js
|
|
3867
3826
|
- dist/chunks/vendor.js
|
|
3868
3827
|
- dist/menu.yml
|
|
3869
3828
|
- dist/playbook-rails-react-bindings.js
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
<% column_definitions = [
|
|
2
|
-
{
|
|
3
|
-
accessor: "year",
|
|
4
|
-
label: "Year",
|
|
5
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
-
},
|
|
7
|
-
{
|
|
8
|
-
accessor: "newEnrollments",
|
|
9
|
-
label: "New Enrollments",
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
accessor: "scheduledMeetings",
|
|
13
|
-
label: "Scheduled Meetings",
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
accessor: "attendanceRate",
|
|
17
|
-
label: "Attendance Rate",
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
accessor: "completedClasses",
|
|
21
|
-
label: "Completed Classes",
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
accessor: "classCompletionRate",
|
|
25
|
-
label: "Class Completion Rate",
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
accessor: "graduatedStudents",
|
|
29
|
-
label: "Graduated Students",
|
|
30
|
-
}
|
|
31
|
-
] %>
|
|
32
|
-
|
|
33
|
-
<%= pb_rails("caption", props: { text: "Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" }) %>
|
|
34
|
-
|
|
35
|
-
<%= pb_rails("advanced_table", props: {
|
|
36
|
-
id: "inline-loading-table-1",
|
|
37
|
-
table_data: @table_data_inline_loading,
|
|
38
|
-
column_definitions: column_definitions,
|
|
39
|
-
enable_toggle_expansion: "all",
|
|
40
|
-
inline_row_loading: true,
|
|
41
|
-
margin_bottom: "md"
|
|
42
|
-
}) %>
|
|
43
|
-
|
|
44
|
-
<%= pb_rails("caption", props: { text: "Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" }) %>
|
|
45
|
-
|
|
46
|
-
<%= pb_rails("advanced_table", props: {
|
|
47
|
-
id: "inline-loading-table-2",
|
|
48
|
-
table_data: @table_data_inline_loading_empty_children,
|
|
49
|
-
column_definitions: column_definitions,
|
|
50
|
-
enable_toggle_expansion: "all",
|
|
51
|
-
inline_row_loading: true,
|
|
52
|
-
margin_bottom: "md"
|
|
53
|
-
}) %>
|
|
54
|
-
|
|
55
|
-
<%= pb_rails("caption", props: { text: "Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" }) %>
|
|
56
|
-
|
|
57
|
-
<%= pb_rails("advanced_table", props: {
|
|
58
|
-
id: "inline-loading-table-3",
|
|
59
|
-
table_data: @table_data_inline_loading_empty_children,
|
|
60
|
-
column_definitions: column_definitions,
|
|
61
|
-
enable_toggle_expansion: "all",
|
|
62
|
-
inline_row_loading: true,
|
|
63
|
-
persist_toggle_expansion_button: true
|
|
64
|
-
}) %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
### inline_row_loading
|
|
2
|
-
By default, the kit assumes that the initial dataset is complete, rendering expansion controls only when children are present. If, however, you want to implement lazy-loading patterns where children are fetched only when a parent is expanded, use the `inline_row_loading` prop.
|
|
3
|
-
|
|
4
|
-
When `inline_row_loading` is set to `true`:
|
|
5
|
-
- Expansion controls are rendered for rows with empty `children` arrays (you must pass `children: []` to any row that will have children loaded later)
|
|
6
|
-
- When such a row is expanded, an inline loading indicator appears until the child data is loaded
|
|
7
|
-
- This enables lazy-loading patterns without one-off hacks
|
|
8
|
-
|
|
9
|
-
In the first table above, row "2021" has an empty `children` array. Click to expand it and see the inline loading state. Rows 2 and 3 have actual child data.
|
|
10
|
-
|
|
11
|
-
This prop is set to `false` by default.
|
|
12
|
-
|
|
13
|
-
### persist_toggle_expansion_button
|
|
14
|
-
The `persist_toggle_expansion_button` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
|
|
15
|
-
|
|
16
|
-
In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persist_toggle_expansion_button` in place. The third Advanced Table shows the toggle all button due to `persist_toggle_expansion_button`.
|
|
17
|
-
|
|
18
|
-
This prop is set to `false` by default and should only be used in conjunction with `inline_row_loading`.
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Background from '../../pb_background/_background'
|
|
3
|
-
|
|
4
|
-
const BackgroundResponsive = (props) => (
|
|
5
|
-
<>
|
|
6
|
-
<Background
|
|
7
|
-
alt="colorful background"
|
|
8
|
-
backgroundColor={{ xs: "primary", sm: "warning", md: "success", lg: "error", xl: "category_1" }}
|
|
9
|
-
className="background lazyload"
|
|
10
|
-
padding="xl"
|
|
11
|
-
{...props}
|
|
12
|
-
/>
|
|
13
|
-
<br/>
|
|
14
|
-
<Background
|
|
15
|
-
alt="colorful background"
|
|
16
|
-
className="background lazyload"
|
|
17
|
-
imageUrl={{
|
|
18
|
-
xs: "https://unsplash.it/500/400/?image=633",
|
|
19
|
-
sm: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
|
|
20
|
-
md: "https://unsplash.it/500/400/?image=633",
|
|
21
|
-
lg: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
|
|
22
|
-
xl: "https://unsplash.it/500/400/?image=633"
|
|
23
|
-
}}
|
|
24
|
-
padding="xl"
|
|
25
|
-
{...props}
|
|
26
|
-
/>
|
|
27
|
-
</>
|
|
28
|
-
)
|
|
29
|
-
|
|
30
|
-
export default BackgroundResponsive
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
The `backgroundColor`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`, and `imageUrl` props support responsive sizes. To use them, pass an object to the prop containing your values relative to responsive break points. To test this here, resize your browser window to responsively change these Backgrounds' `backgroundColor` and `imageUrl`.
|