playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490
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 +23 -3
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +365 -143
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +14 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +10 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
- data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
- data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +68 -0
- data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +22 -18
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
- data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- 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 +19 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
- data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
- data/app/pb_kits/playbook/pb_table/table.rb +13 -1
- data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
- data/dist/chunks/_typeahead-D8CsVBZO.js +22 -0
- data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/lib-BmTAc7Nc.js +29 -0
- data/dist/chunks/{pb_form_validation-BiHyZedy.js → pb_form_validation-BWjy4bFn.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +19 -1
- 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/version.rb +2 -2
- metadata +92 -21
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
- data/dist/chunks/_typeahead-CPM091Hj.js +0 -22
- data/dist/chunks/_weekday_stacked-BzIANIYX.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- data/dist/chunks/lib-Bg2KFzpz.js +0 -29
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -0,0 +1,34 @@
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
|
2
|
+
<thead>
|
3
|
+
<tr>
|
4
|
+
<th>Column 1</th>
|
5
|
+
<th>Column 2</th>
|
6
|
+
<th>Column 3</th>
|
7
|
+
<th>Column 4</th>
|
8
|
+
<th>Column 5</th>
|
9
|
+
</tr>
|
10
|
+
</thead>
|
11
|
+
<tbody>
|
12
|
+
<tr>
|
13
|
+
<td>Value 1</td>
|
14
|
+
<td>Value 2</td>
|
15
|
+
<td>Value 3</td>
|
16
|
+
<td>Value 4</td>
|
17
|
+
<td>Value 5</td>
|
18
|
+
</tr>
|
19
|
+
<tr>
|
20
|
+
<td>Value 1</td>
|
21
|
+
<td>Value 2</td>
|
22
|
+
<td>Value 3</td>
|
23
|
+
<td>Value 4</td>
|
24
|
+
<td>Value 5</td>
|
25
|
+
</tr>
|
26
|
+
<tr>
|
27
|
+
<td>Value 1</td>
|
28
|
+
<td>Value 2</td>
|
29
|
+
<td>Value 3</td>
|
30
|
+
<td>Value 4</td>
|
31
|
+
<td>Value 5</td>
|
32
|
+
</tr>
|
33
|
+
</tbody>
|
34
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
Customize your header by removing the header borders with the `header_style: "borderless"` prop.
|
@@ -0,0 +1,36 @@
|
|
1
|
+
<%= pb_rails("card", props: { background: "light" }) do %>
|
2
|
+
<%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
|
3
|
+
<%= pb_rails("table/table_head") do %>
|
4
|
+
<%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
9
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
<%= pb_rails("table/table_body") do %>
|
13
|
+
<%= pb_rails("table/table_row") do %>
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
18
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
19
|
+
<% end %>
|
20
|
+
<%= pb_rails("table/table_row") do %>
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
25
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
26
|
+
<% end %>
|
27
|
+
<%= pb_rails("table/table_row") do %>
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
32
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
33
|
+
<% end %>
|
34
|
+
<% end %>
|
35
|
+
<% end %>
|
36
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/rails#table-with-background-kit) logic to give your table header a custom background color. Use the `header_style: "floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `background_color` passed to Background kit should match the `background` or `background_color` for the element in which it is nested).
|
@@ -1 +1 @@
|
|
1
|
-
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).
|
1
|
+
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `background` or `backgroundColor` for the element in which it is nested).
|
@@ -37,6 +37,8 @@ examples:
|
|
37
37
|
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
|
38
38
|
- table_with_clickable_rows: Table with Clickable Rows
|
39
39
|
- table_with_selectable_rows: Table with Selectable Rows
|
40
|
+
- table_with_header_style_borderless: Header Style Borderless
|
41
|
+
- table_with_header_style_floating: Header Style Floating
|
40
42
|
|
41
43
|
react:
|
42
44
|
- table_sm: Small
|
@@ -6,8 +6,20 @@
|
|
6
6
|
&.table-lg {
|
7
7
|
thead, .pb_table_thead {
|
8
8
|
tr, .pb_table_tr {
|
9
|
-
th
|
9
|
+
th:not(:has(
|
10
|
+
[class*="pb_body_kit"],
|
11
|
+
[class*="pb_detail_kit"],
|
12
|
+
[class*="pb_title_kit"]
|
13
|
+
)),
|
14
|
+
.pb_table_th:not(:has(
|
15
|
+
[class*="pb_body_kit"],
|
16
|
+
[class*="pb_detail_kit"],
|
17
|
+
[class*="pb_title_kit"]
|
18
|
+
)) {
|
10
19
|
@include caption;
|
20
|
+
}
|
21
|
+
|
22
|
+
th, .pb_table_th {
|
11
23
|
border-bottom: 1px solid $border_light;
|
12
24
|
}
|
13
25
|
}
|
@@ -83,10 +95,10 @@
|
|
83
95
|
|
84
96
|
// flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
|
85
97
|
.header-floating > thead > tr:first-child > th:first-child,
|
86
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
|
87
|
-
border-top-left-radius: 0 !important;
|
88
|
-
}
|
89
|
-
.header-floating > thead > tr:first-child > th:last-child,
|
90
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
|
91
|
-
border-top-right-radius: 0 !important;
|
98
|
+
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
|
99
|
+
border-top-left-radius: 0 !important;
|
100
|
+
}
|
101
|
+
.header-floating > thead > tr:first-child > th:last-child,
|
102
|
+
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
|
103
|
+
border-top-right-radius: 0 !important;
|
92
104
|
}
|
@@ -37,13 +37,16 @@ module Playbook
|
|
37
37
|
prop :outer_padding, type: Playbook::Props::Enum,
|
38
38
|
values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
|
39
39
|
default: nil
|
40
|
+
prop :header_style, type: Playbook::Props::Enum,
|
41
|
+
values: %w[default borderless floating],
|
42
|
+
default: "default"
|
40
43
|
|
41
44
|
def classname
|
42
45
|
generate_classname(
|
43
46
|
"pb_table", "table-#{size}", single_line_class, dark_class,
|
44
47
|
disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
|
45
48
|
sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
|
46
|
-
"table-responsive-#{responsive}", separator: " "
|
49
|
+
"table-responsive-#{responsive}", header_style_class, separator: " "
|
47
50
|
)
|
48
51
|
end
|
49
52
|
|
@@ -123,6 +126,15 @@ module Playbook
|
|
123
126
|
outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
|
124
127
|
end
|
125
128
|
end
|
129
|
+
|
130
|
+
def header_style_class
|
131
|
+
case header_style
|
132
|
+
when "borderless"
|
133
|
+
"header-borderless"
|
134
|
+
when "floating"
|
135
|
+
"header-floating"
|
136
|
+
end
|
137
|
+
end
|
126
138
|
end
|
127
139
|
end
|
128
140
|
end
|
@@ -26,9 +26,12 @@ module Playbook
|
|
26
26
|
prop :tag, type: Playbook::Props::Enum,
|
27
27
|
values: %w[table div],
|
28
28
|
default: "table"
|
29
|
+
prop :header_style, type: Playbook::Props::Enum,
|
30
|
+
values: %w[default borderless floating],
|
31
|
+
default: "default"
|
29
32
|
|
30
33
|
def classname
|
31
|
-
generate_classname("pb_table_header_kit", align_class) + tag_class
|
34
|
+
generate_classname("pb_table_header_kit", align_class, header_style_class) + tag_class
|
32
35
|
end
|
33
36
|
|
34
37
|
def tag_class
|
@@ -106,6 +109,15 @@ module Playbook
|
|
106
109
|
end
|
107
110
|
active_item
|
108
111
|
end
|
112
|
+
|
113
|
+
def header_style_class
|
114
|
+
case header_style
|
115
|
+
when "borderless"
|
116
|
+
"header-borderless"
|
117
|
+
when "floating"
|
118
|
+
"header-floating"
|
119
|
+
end
|
120
|
+
end
|
109
121
|
end
|
110
122
|
end
|
111
123
|
end
|
@@ -25,7 +25,7 @@ type TextInputProps = {
|
|
25
25
|
name: string,
|
26
26
|
label: string,
|
27
27
|
mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
|
28
|
-
onChange: (e: React.FormEvent<HTMLInputElement
|
28
|
+
onChange: (e: React.FormEvent<HTMLInputElement>, sanitizedValue?: string) => void,
|
29
29
|
placeholder: string,
|
30
30
|
required?: boolean,
|
31
31
|
type: string,
|
@@ -102,10 +102,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
102
102
|
|
103
103
|
let cursorPosition = e.target.selectionStart;
|
104
104
|
const isAtEnd = cursorPosition === inputValue.length;
|
105
|
-
|
105
|
+
|
106
106
|
const formattedValue = INPUTMASKS[mask].format(inputValue)
|
107
|
+
|
108
|
+
let sanitizedValue = formattedValue;
|
109
|
+
if (INPUTMASKS[mask].sanitize) {
|
110
|
+
sanitizedValue = INPUTMASKS[mask].sanitize(formattedValue)
|
111
|
+
}
|
112
|
+
|
107
113
|
e.target.value = formattedValue
|
108
|
-
|
114
|
+
|
109
115
|
// Keep cursor position
|
110
116
|
if (!isAtEnd) {
|
111
117
|
// Account for extra characters (e.g., commas added/removed in currency)
|
@@ -116,9 +122,11 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
116
122
|
}
|
117
123
|
e.target.selectionStart = e.target.selectionEnd = cursorPosition
|
118
124
|
}
|
125
|
+
|
126
|
+
onChange(e, sanitizedValue);
|
127
|
+
} else {
|
128
|
+
onChange(e)
|
119
129
|
}
|
120
|
-
|
121
|
-
onChange(e)
|
122
130
|
}
|
123
131
|
|
124
132
|
const childInput = children ? children.type === "input" : undefined
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
2
|
|
3
3
|
import TextInput from '../_text_input'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const TextInputError = (props) => {
|
6
7
|
const [email, setEmail] = useState('')
|
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
|
|
8
9
|
const handleUpdateEmail = ({ target }) => {
|
9
10
|
setEmail(target.value)
|
10
11
|
}
|
12
|
+
|
13
|
+
const error = (
|
14
|
+
<>
|
15
|
+
<Icon icon="warning" /> Please enter a valid email address
|
16
|
+
</>
|
17
|
+
)
|
18
|
+
|
11
19
|
return (
|
12
20
|
<div>
|
13
21
|
<TextInput
|
14
22
|
addOn={{ icon: 'user', alignment: 'left', border: true }}
|
15
|
-
error=
|
23
|
+
error={error}
|
16
24
|
label="Email Address"
|
17
25
|
onChange={handleUpdateEmail}
|
18
26
|
placeholder="Enter email address"
|
@@ -0,0 +1,94 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
|
3
|
+
import TextInput from '../../pb_text_input/_text_input'
|
4
|
+
|
5
|
+
const TextInputSanitize = (props) => {
|
6
|
+
const ref = React.createRef()
|
7
|
+
|
8
|
+
const [currency, setCurrency] = useState('')
|
9
|
+
const [sanitizedCurrency, setSanitizedCurrency] = useState('')
|
10
|
+
const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
|
11
|
+
setCurrency(target.value)
|
12
|
+
setSanitizedCurrency(sanitizedValue);
|
13
|
+
}
|
14
|
+
|
15
|
+
const [creditCard, setCreditCard] = useState('')
|
16
|
+
const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
|
17
|
+
const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
|
18
|
+
setCreditCard(target.value)
|
19
|
+
setSanitizedCreditCard(sanitizedValue);
|
20
|
+
}
|
21
|
+
|
22
|
+
const [ssn, setSSN] = useState('')
|
23
|
+
const [sanitizedSSN, setSanitizedSSN] = useState('')
|
24
|
+
const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
|
25
|
+
setSSN(target.value)
|
26
|
+
setSanitizedSSN(sanitizedValue);
|
27
|
+
}
|
28
|
+
|
29
|
+
return (
|
30
|
+
<div>
|
31
|
+
<TextInput
|
32
|
+
label="Currency"
|
33
|
+
mask="currency"
|
34
|
+
onChange={handleOnChangeSanitizeCurrency}
|
35
|
+
placeholder="Enter Amount"
|
36
|
+
ref={ref}
|
37
|
+
value={currency}
|
38
|
+
{...props}
|
39
|
+
/>
|
40
|
+
|
41
|
+
{currency !== "" && (
|
42
|
+
<React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
|
43
|
+
)}
|
44
|
+
<br />
|
45
|
+
{sanitizedCurrency !== "" && (
|
46
|
+
<React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
|
47
|
+
)}
|
48
|
+
|
49
|
+
<br />
|
50
|
+
<br />
|
51
|
+
|
52
|
+
<TextInput
|
53
|
+
label="Credit Card"
|
54
|
+
mask="creditCard"
|
55
|
+
onChange={handleOnChangeSanitizeCC}
|
56
|
+
placeholder="Enter Card"
|
57
|
+
ref={ref}
|
58
|
+
value={creditCard}
|
59
|
+
{...props}
|
60
|
+
/>
|
61
|
+
|
62
|
+
{creditCard !== "" && (
|
63
|
+
<React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
|
64
|
+
)}
|
65
|
+
<br />
|
66
|
+
{sanitizedCreditCard !== "" && (
|
67
|
+
<React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
|
68
|
+
)}
|
69
|
+
|
70
|
+
<br />
|
71
|
+
<br />
|
72
|
+
|
73
|
+
<TextInput
|
74
|
+
label="SSN"
|
75
|
+
mask="ssn"
|
76
|
+
onChange={handleOnChangeSanitizeSSN}
|
77
|
+
placeholder="Enter Amount"
|
78
|
+
ref={ref}
|
79
|
+
value={ssn}
|
80
|
+
{...props}
|
81
|
+
/>
|
82
|
+
|
83
|
+
{ssn !== "" && (
|
84
|
+
<React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
|
85
|
+
)}
|
86
|
+
<br />
|
87
|
+
{sanitizedSSN !== "" && (
|
88
|
+
<React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
|
89
|
+
)}
|
90
|
+
</div>
|
91
|
+
)
|
92
|
+
}
|
93
|
+
|
94
|
+
export default TextInputSanitize
|
@@ -0,0 +1 @@
|
|
1
|
+
When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.
|
@@ -6,3 +6,4 @@ export { default as TextInputAddOn } from './_text_input_add_on.jsx'
|
|
6
6
|
export { default as TextInputInline } from './_text_input_inline.jsx'
|
7
7
|
export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
|
8
8
|
export { default as TextInputMask } from './_text_input_mask.jsx'
|
9
|
+
export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
|
@@ -3,6 +3,7 @@ type InputMask = {
|
|
3
3
|
formatDefaultValue: (value: string) => string
|
4
4
|
pattern: string
|
5
5
|
placeholder: string
|
6
|
+
sanitize?: (value: string) => string;
|
6
7
|
}
|
7
8
|
|
8
9
|
type InputMaskDictionary = {
|
@@ -73,35 +74,41 @@ export const INPUTMASKS: InputMaskDictionary = {
|
|
73
74
|
// eslint-disable-next-line no-useless-escape
|
74
75
|
pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
|
75
76
|
placeholder: '$0.00',
|
77
|
+
sanitize: (value: string) => value.replace(/[$,]/g, ''),
|
76
78
|
},
|
77
79
|
zipCode: {
|
78
80
|
format: formatBasicPostal,
|
79
81
|
formatDefaultValue: formatBasicPostal,
|
80
82
|
pattern: '\\d{5}',
|
81
83
|
placeholder: '12345',
|
84
|
+
sanitize: (value: string) => value,
|
82
85
|
},
|
83
86
|
postalCode: {
|
84
87
|
format: formatExtendedPostal,
|
85
88
|
formatDefaultValue: formatExtendedPostal,
|
86
89
|
pattern: '\\d{5}-\\d{4}',
|
87
90
|
placeholder: '12345-6789',
|
91
|
+
sanitize: (value: string) => value.replace(/-/g, ''),
|
88
92
|
},
|
89
93
|
ssn: {
|
90
94
|
format: formatSSN,
|
91
95
|
formatDefaultValue: formatSSN,
|
92
96
|
pattern: '\\d{3}-\\d{2}-\\d{4}',
|
93
97
|
placeholder: '123-45-6789',
|
98
|
+
sanitize: (value: string) => value.replace(/-/g, ''),
|
94
99
|
},
|
95
100
|
creditCard: {
|
96
101
|
format: formatCreditCard,
|
97
102
|
formatDefaultValue: formatCreditCard,
|
98
103
|
pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
|
99
104
|
placeholder: '1234 5678 9012 3456',
|
105
|
+
sanitize: (value: string) => value.replace(/\s/g, ''),
|
100
106
|
},
|
101
107
|
cvv: {
|
102
108
|
format: formatCVV,
|
103
109
|
formatDefaultValue: formatCVV,
|
104
110
|
pattern: '\\d{3,4}',
|
105
111
|
placeholder: '123',
|
112
|
+
sanitize: (value: string) => value,
|
106
113
|
},
|
107
|
-
}
|
114
|
+
}
|
@@ -1,15 +1,21 @@
|
|
1
1
|
import React, {useState} from 'react'
|
2
2
|
import Textarea from '../../pb_textarea/_textarea'
|
3
|
+
import Icon from '../../pb_icon/_icon'
|
3
4
|
|
4
5
|
const TextareaError = (props) => {
|
5
6
|
const [value, setValue] = useState('default value text')
|
6
7
|
const handleChange = (event) => {
|
7
8
|
setValue(event.target.value)
|
8
9
|
}
|
10
|
+
const error = (
|
11
|
+
<>
|
12
|
+
<Icon icon="warning" /> This field has an error!
|
13
|
+
</>
|
14
|
+
)
|
9
15
|
return (
|
10
16
|
<div>
|
11
17
|
<Textarea
|
12
|
-
error=
|
18
|
+
error={error}
|
13
19
|
label="Label"
|
14
20
|
name="comment"
|
15
21
|
onChange={(e)=> handleChange(e)}
|
@@ -8,7 +8,14 @@
|
|
8
8
|
|
9
9
|
%>
|
10
10
|
|
11
|
-
<%= pb_rails("typeahead", props: {
|
11
|
+
<%= pb_rails("typeahead", props: {
|
12
|
+
id: "typeahead-error-example",
|
13
|
+
options: options,
|
14
|
+
error: "Please make a valid selection",
|
15
|
+
label: "Products",
|
16
|
+
name: :foo,
|
17
|
+
is_multi: false
|
18
|
+
}) %>
|
12
19
|
|
13
20
|
<!-- This section is an example of the available JavaScript event hooks -->
|
14
21
|
<%= javascript_tag defer: "defer" do %>
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState, useEffect } from 'react'
|
2
2
|
|
3
3
|
import Typeahead from '../_typeahead'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const options = [
|
6
7
|
{ label: 'Orange', value: '#FFA500' },
|
@@ -10,7 +11,10 @@ const options = [
|
|
10
11
|
]
|
11
12
|
|
12
13
|
const TypeaheadErrorState = (props) => {
|
13
|
-
const
|
14
|
+
const error = (<>
|
15
|
+
<Icon icon="warning" /> Please make a valid selection
|
16
|
+
</>)
|
17
|
+
const [errorState, setErrorState] = useState(error);
|
14
18
|
const [searchValue, setSearchValue] = useState(null);
|
15
19
|
|
16
20
|
const handleOnChange = (value) => setSearchValue(value)
|
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
|
|
19
23
|
if(searchValue) {
|
20
24
|
setErrorState("")
|
21
25
|
} else {
|
22
|
-
setErrorState(
|
26
|
+
setErrorState(error)
|
23
27
|
}
|
24
28
|
}, [searchValue])
|
25
29
|
|