playbook_ui 14.24.0 → 14.25.0.pre.alpha.PLAY2413togglefocusstate9789
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/Components/RegularTableView.tsx +8 -2
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +34 -0
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +56 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +43 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx +60 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +10 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +2 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb +24 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md +3 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_date/_date.tsx +5 -3
- data/app/pb_kits/playbook/pb_date/date.html.erb +6 -6
- data/app/pb_kits/playbook/pb_date/date.rb +2 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx +17 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +19 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -0
- data/app/pb_kits/playbook/pb_dropdown/index.js +3 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +2 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb +22 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx +43 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js +6 -0
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +9 -6
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb +12 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +26 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md +11 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md +11 -0
- data/app/pb_kits/playbook/pb_flex/flex.rb +6 -12
- data/app/pb_kits/playbook/pb_icon/_icon.scss +4 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.test.jsx +212 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +8 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx +112 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md +3 -0
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +11 -1
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +49 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +15 -0
- data/app/pb_kits/playbook/pb_toggle/_toggle.scss +20 -2
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +3 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb +4 -2
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +2 -1
- data/app/pb_kits/playbook/utilities/_gap.scss +12 -24
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +2 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +28 -4
- data/dist/chunks/{_line_graph-BLS62QjW.js → _line_graph-CiVc-Cod.js} +1 -1
- data/dist/chunks/_typeahead-BQnvz-Ks.js +6 -0
- data/dist/chunks/{_weekday_stacked-Cv8-Sf6X.js → _weekday_stacked-2gKd1RZJ.js} +3 -3
- data/dist/chunks/{lib-DgtxnJqa.js → lib-CY5ZPzic.js} +2 -2
- data/dist/chunks/{pb_form_validation-_NsOWfBS.js → pb_form_validation-D3b0JKHH.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +2 -2
- 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/classnames.rb +2 -0
- data/lib/playbook/spacing.rb +53 -1
- data/lib/playbook/version.rb +2 -2
- metadata +26 -8
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md +0 -9
- data/dist/chunks/_typeahead-CZL6rvfn.js +0 -6
data/lib/playbook/classnames.rb
CHANGED
data/lib/playbook/spacing.rb
CHANGED
@@ -4,6 +4,8 @@ module Playbook
|
|
4
4
|
module Spacing
|
5
5
|
def self.included(base)
|
6
6
|
base.prop :gap
|
7
|
+
base.prop :column_gap
|
8
|
+
base.prop :row_gap
|
7
9
|
base.prop :margin
|
8
10
|
base.prop :margin_bottom
|
9
11
|
base.prop :margin_left
|
@@ -63,6 +65,18 @@ module Playbook
|
|
63
65
|
}
|
64
66
|
end
|
65
67
|
|
68
|
+
def column_gap_options
|
69
|
+
{
|
70
|
+
column_gap: "column_gap",
|
71
|
+
}
|
72
|
+
end
|
73
|
+
|
74
|
+
def row_gap_options
|
75
|
+
{
|
76
|
+
row_gap: "row_gap",
|
77
|
+
}
|
78
|
+
end
|
79
|
+
|
66
80
|
def spacing_options
|
67
81
|
{
|
68
82
|
margin: "m",
|
@@ -164,7 +178,45 @@ module Playbook
|
|
164
178
|
|
165
179
|
selected_gap_props.map do |k|
|
166
180
|
gap_value = send(k)
|
167
|
-
|
181
|
+
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
|
+
end
|
185
|
+
elsif gap_values.include?(gap_value.to_s)
|
186
|
+
"gap_#{gap_value.underscore}"
|
187
|
+
end
|
188
|
+
end.compact.join(" ")
|
189
|
+
end
|
190
|
+
|
191
|
+
def column_gap_props
|
192
|
+
selected_column_gap_props = column_gap_options.keys.select { |sk| try(sk) }
|
193
|
+
return nil unless selected_column_gap_props.present?
|
194
|
+
|
195
|
+
selected_column_gap_props.map do |k|
|
196
|
+
column_gap_value = send(k)
|
197
|
+
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)
|
200
|
+
end
|
201
|
+
elsif gap_values.include?(column_gap_value.to_s)
|
202
|
+
"column_gap_#{column_gap_value.underscore}"
|
203
|
+
end
|
204
|
+
end.compact.join(" ")
|
205
|
+
end
|
206
|
+
|
207
|
+
def row_gap_props
|
208
|
+
selected_row_gap_props = row_gap_options.keys.select { |sk| try(sk) }
|
209
|
+
return nil unless selected_row_gap_props.present?
|
210
|
+
|
211
|
+
selected_row_gap_props.map do |k|
|
212
|
+
row_gap_value = send(k)
|
213
|
+
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)
|
216
|
+
end
|
217
|
+
elsif gap_values.include?(row_gap_value.to_s)
|
218
|
+
"row_gap_#{row_gap_value.underscore}"
|
219
|
+
end
|
168
220
|
end.compact.join(" ")
|
169
221
|
end
|
170
222
|
end
|
data/lib/playbook/version.rb
CHANGED
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: 14.
|
4
|
+
version: 14.25.0.pre.alpha.PLAY2413togglefocusstate9789
|
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: 2025-08-
|
12
|
+
date: 2025-08-21 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -308,6 +308,8 @@ files:
|
|
308
308
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
|
309
309
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
|
310
310
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
|
311
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb
|
312
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
|
311
313
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
|
312
314
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
|
313
315
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
|
@@ -350,6 +352,10 @@ files:
|
|
350
352
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_react.md
|
351
353
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.html.erb
|
352
354
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx
|
355
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx
|
356
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md
|
357
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx
|
358
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md
|
353
359
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx
|
354
360
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
|
355
361
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
|
@@ -810,6 +816,8 @@ files:
|
|
810
816
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx
|
811
817
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb
|
812
818
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
|
819
|
+
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb
|
820
|
+
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md
|
813
821
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb
|
814
822
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx
|
815
823
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md
|
@@ -980,6 +988,9 @@ files:
|
|
980
988
|
- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
|
981
989
|
- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
|
982
990
|
- app/pb_kits/playbook/pb_date/docs/_date_variants_swift.md
|
991
|
+
- app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb
|
992
|
+
- app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx
|
993
|
+
- app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md
|
983
994
|
- app/pb_kits/playbook/pb_date/docs/_description.md
|
984
995
|
- app/pb_kits/playbook/pb_date/docs/example.yml
|
985
996
|
- app/pb_kits/playbook/pb_date/docs/index.js
|
@@ -1568,6 +1579,9 @@ files:
|
|
1568
1579
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
|
1569
1580
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
|
1570
1581
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
|
1582
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb
|
1583
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx
|
1584
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md
|
1571
1585
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb
|
1572
1586
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
|
1573
1587
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md
|
@@ -1591,7 +1605,8 @@ files:
|
|
1591
1605
|
- app/pb_kits/playbook/pb_flex/docs/_flex_default.md
|
1592
1606
|
- app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb
|
1593
1607
|
- app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
|
1594
|
-
- app/pb_kits/playbook/pb_flex/docs/
|
1608
|
+
- app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md
|
1609
|
+
- app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md
|
1595
1610
|
- app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb
|
1596
1611
|
- app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
|
1597
1612
|
- app/pb_kits/playbook/pb_flex/docs/_flex_inline.md
|
@@ -2383,11 +2398,14 @@ files:
|
|
2383
2398
|
- app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_percentage.tsx
|
2384
2399
|
- app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx
|
2385
2400
|
- app/pb_kits/playbook/pb_pagination/_pagination.scss
|
2401
|
+
- app/pb_kits/playbook/pb_pagination/_pagination.test.jsx
|
2386
2402
|
- app/pb_kits/playbook/pb_pagination/_pagination.tsx
|
2387
2403
|
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
|
2388
2404
|
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
|
2389
2405
|
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md
|
2390
2406
|
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
|
2407
|
+
- app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx
|
2408
|
+
- app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md
|
2391
2409
|
- app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
|
2392
2410
|
- app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
|
2393
2411
|
- app/pb_kits/playbook/pb_pagination/docs/data.js
|
@@ -3630,12 +3648,12 @@ files:
|
|
3630
3648
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3631
3649
|
- app/pb_kits/playbook/utilities/text.ts
|
3632
3650
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3633
|
-
- dist/chunks/_line_graph-
|
3634
|
-
- dist/chunks/_typeahead-
|
3635
|
-
- dist/chunks/_weekday_stacked-
|
3651
|
+
- dist/chunks/_line_graph-CiVc-Cod.js
|
3652
|
+
- dist/chunks/_typeahead-BQnvz-Ks.js
|
3653
|
+
- dist/chunks/_weekday_stacked-2gKd1RZJ.js
|
3636
3654
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3637
|
-
- dist/chunks/lib-
|
3638
|
-
- dist/chunks/pb_form_validation-
|
3655
|
+
- dist/chunks/lib-CY5ZPzic.js
|
3656
|
+
- dist/chunks/pb_form_validation-D3b0JKHH.js
|
3639
3657
|
- dist/chunks/vendor.js
|
3640
3658
|
- dist/menu.yml
|
3641
3659
|
- dist/playbook-doc.js
|
@@ -1,9 +0,0 @@
|
|
1
|
-
##### Prop
|
2
|
-
|
3
|
-
* `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xxs | xs | sm | md | lg | xl | none
|
4
|
-
|
5
|
-
- Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
|
6
|
-
|
7
|
-
- Setting the row_gap || rowGap prop creates space between rows in a flex container.
|
8
|
-
|
9
|
-
- Setting the column_gap || columnGap prop creates space between columns in a flex container.
|