playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863
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/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +11 -9
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +20 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +25 -5
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +36 -16
- data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +18 -5
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +37 -17
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +32 -7
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +91 -40
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx +4 -1
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnStylingHelper.ts +15 -0
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/TableContainerStyles.ts +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +68 -6
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +42 -18
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +105 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js +36 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +51 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +77 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb +63 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +38 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +5 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +60 -84
- data/app/pb_kits/playbook/pb_advanced_table/index.js +125 -213
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +16 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_action_bar.html.erb +1 -1
- 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 +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +33 -0
- data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
- data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_contact/contact.test.js +2 -2
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -39
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -39
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +19 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +19 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +20 -11
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +8 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +23 -14
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx +99 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +47 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx +49 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx +69 -0
- data/app/pb_kits/playbook/pb_filter/Filter/index.tsx +13 -0
- data/app/pb_kits/playbook/pb_filter/_filter.scss +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx +224 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.test.js +2 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
- data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/index.ts +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +11 -0
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +4 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +34 -22
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx +25 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
- data/dist/chunks/_circle_chart-C56zcOHC.js +1 -0
- data/dist/chunks/_typeahead-Do6525vz.js +22 -0
- data/dist/chunks/_weekday_stacked-CrFm3XuJ.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/lib-DYpq0k8j.js +29 -0
- data/dist/chunks/{pb_form_validation-DyvJ8iPe.js → pb_form_validation-BUOKwfvW.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -9
- data/dist/playbook-doc.js +3 -3
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +48 -38
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss +0 -14
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +0 -119
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +0 -5
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +0 -2
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +0 -47
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +0 -79
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +0 -90
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +0 -54
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +0 -65
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -63
- data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +0 -48
- data/dist/chunks/_typeahead-BlPRej0F.js +0 -22
- data/dist/chunks/_weekday_stacked-CzxoxxCR.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- data/dist/chunks/lib-D4vXIZF5.js +0 -29
- /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
@@ -80,6 +80,20 @@ module Playbook
|
|
80
80
|
end
|
81
81
|
end
|
82
82
|
|
83
|
+
def justify_for(column, index)
|
84
|
+
if index.zero?
|
85
|
+
"start"
|
86
|
+
else
|
87
|
+
case cell_alignment_for(column)
|
88
|
+
when "left" then "start"
|
89
|
+
when "center" then "center"
|
90
|
+
when "right" then "end"
|
91
|
+
else
|
92
|
+
"end"
|
93
|
+
end
|
94
|
+
end
|
95
|
+
end
|
96
|
+
|
83
97
|
private
|
84
98
|
|
85
99
|
def custom_renderer_value(column, index)
|
@@ -103,6 +117,25 @@ module Playbook
|
|
103
117
|
def subrow_depth_classname
|
104
118
|
depth.positive? ? "depth-sub-row-#{depth}" : ""
|
105
119
|
end
|
120
|
+
|
121
|
+
def find_column_def_by_accessor(defs, target_accessor)
|
122
|
+
defs.each do |col|
|
123
|
+
return col if col[:accessor] == target_accessor
|
124
|
+
|
125
|
+
if col[:columns].is_a?(Array)
|
126
|
+
found = find_column_def_by_accessor(col[:columns], target_accessor)
|
127
|
+
return found if found
|
128
|
+
end
|
129
|
+
end
|
130
|
+
nil
|
131
|
+
end
|
132
|
+
|
133
|
+
def cell_alignment_for(column)
|
134
|
+
return nil unless column[:accessor]
|
135
|
+
|
136
|
+
orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
|
137
|
+
orig_def[:column_styling][:cell_alignment] if orig_def && orig_def[:column_styling].is_a?(Hash)
|
138
|
+
end
|
106
139
|
end
|
107
140
|
end
|
108
141
|
end
|
@@ -5,7 +5,7 @@
|
|
5
5
|
@import "../tokens/typography";
|
6
6
|
|
7
7
|
[class^=pb_badge_kit] {
|
8
|
-
$
|
8
|
+
$pb_badge_height_rounded: 16px;
|
9
9
|
|
10
10
|
display: inline-flex;
|
11
11
|
align-items: center;
|
@@ -13,7 +13,6 @@
|
|
13
13
|
border-radius: $border_rad_light;
|
14
14
|
padding: 0 $space_xs/2;
|
15
15
|
border-width: 1px;
|
16
|
-
border-style: solid;
|
17
16
|
border-color: $card_light;
|
18
17
|
white-space: nowrap;
|
19
18
|
|
@@ -31,10 +30,10 @@
|
|
31
30
|
}
|
32
31
|
|
33
32
|
&[class*=_rounded] {
|
34
|
-
height: $
|
35
|
-
min-height: $
|
36
|
-
min-width: $
|
37
|
-
border-radius: $
|
33
|
+
height: $pb_badge_height_rounded;
|
34
|
+
min-height: $pb_badge_height_rounded;
|
35
|
+
min-width: $pb_badge_height_rounded;
|
36
|
+
border-radius: $pb_badge_height_rounded / 2;
|
38
37
|
}
|
39
38
|
|
40
39
|
&[class*=_notification] {
|
@@ -0,0 +1,106 @@
|
|
1
|
+
import colors from '../tokens/exports/_colors.module.scss'
|
2
|
+
import typography from '../tokens/exports/_typography.module.scss'
|
3
|
+
|
4
|
+
const barGraphTheme = {
|
5
|
+
title: {
|
6
|
+
text: "",
|
7
|
+
style: {
|
8
|
+
color: colors.text_lt_default,
|
9
|
+
fontFamily: typography.font_family_base,
|
10
|
+
fontWeight: typography.bold,
|
11
|
+
fontSize: typography.heading_3,
|
12
|
+
},
|
13
|
+
},
|
14
|
+
subtitle: {
|
15
|
+
text: "",
|
16
|
+
style: {
|
17
|
+
fontFamily: typography.font_family_base,
|
18
|
+
color: colors.text_lt_light,
|
19
|
+
fontWeight: typography.regular,
|
20
|
+
fontSize: typography.text_base,
|
21
|
+
},
|
22
|
+
},
|
23
|
+
chart: {
|
24
|
+
type: "column",
|
25
|
+
},
|
26
|
+
tooltip: {
|
27
|
+
backgroundColor: {
|
28
|
+
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
29
|
+
stops: [
|
30
|
+
[0, colors.bg_dark],
|
31
|
+
[1, colors.bg_dark],
|
32
|
+
],
|
33
|
+
},
|
34
|
+
style: {
|
35
|
+
fontFamily: typography.font_family_base,
|
36
|
+
color: colors.text_dk_default,
|
37
|
+
fontWeight: typography.regular,
|
38
|
+
fontSize: typography.text_smaller,
|
39
|
+
},
|
40
|
+
},
|
41
|
+
colors: [
|
42
|
+
colors.data_1,
|
43
|
+
colors.data_2,
|
44
|
+
colors.data_3,
|
45
|
+
colors.data_4,
|
46
|
+
colors.data_5,
|
47
|
+
colors.data_6,
|
48
|
+
colors.data_7,
|
49
|
+
],
|
50
|
+
credits: { enabled: false },
|
51
|
+
legend: {
|
52
|
+
enabled: false,
|
53
|
+
itemStyle: {
|
54
|
+
color: colors.text_lt_light,
|
55
|
+
fill: colors.text_lt_light,
|
56
|
+
fontSize: typography.text_smaller,
|
57
|
+
},
|
58
|
+
},
|
59
|
+
xAxis: {
|
60
|
+
gridLineWidth: 0,
|
61
|
+
lineColor: colors.border_light,
|
62
|
+
tickColor: colors.border_light,
|
63
|
+
labels: {
|
64
|
+
style: {
|
65
|
+
fontFamily: typography.font_family_base,
|
66
|
+
color: colors.text_lt_lighter,
|
67
|
+
fontWeight: typography.bold,
|
68
|
+
fontSize: typography.text_smaller,
|
69
|
+
},
|
70
|
+
},
|
71
|
+
title: {
|
72
|
+
style: {
|
73
|
+
color: colors.text_lt_default,
|
74
|
+
fontFamily: typography.font_family_base,
|
75
|
+
fontWeight: typography.regular,
|
76
|
+
fontSize: typography.heading_4,
|
77
|
+
},
|
78
|
+
},
|
79
|
+
},
|
80
|
+
yAxis: {
|
81
|
+
alternateGridColor: undefined as string | undefined,
|
82
|
+
minorTickInterval: null as number | null,
|
83
|
+
gridLineColor: colors.border_light,
|
84
|
+
minorGridLineColor: colors.border_light,
|
85
|
+
lineWidth: 0,
|
86
|
+
tickWidth: 0,
|
87
|
+
labels: {
|
88
|
+
style: {
|
89
|
+
fontFamily: typography.font_family_base,
|
90
|
+
color: colors.text_lt_lighter,
|
91
|
+
fontWeight: typography.bold,
|
92
|
+
fontSize: typography.text_smaller,
|
93
|
+
},
|
94
|
+
},
|
95
|
+
title: {
|
96
|
+
style: {
|
97
|
+
fontFamily: typography.font_family_base,
|
98
|
+
color: colors.text_lt_lighter,
|
99
|
+
fontWeight: typography.bold,
|
100
|
+
fontSize: typography.text_smaller,
|
101
|
+
},
|
102
|
+
},
|
103
|
+
},
|
104
|
+
}
|
105
|
+
|
106
|
+
export default barGraphTheme;
|
@@ -1,6 +1,10 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import colors from '../../tokens/exports/_colors.module.scss'
|
3
|
+
import barGraphTheme from '../barGraphTheme';
|
4
|
+
import Highcharts from "highcharts";
|
5
|
+
import HighchartsReact from "highcharts-react-official";
|
6
|
+
|
2
7
|
|
3
|
-
import BarGraph from '../_bar_graph'
|
4
8
|
|
5
9
|
const chartData = [{
|
6
10
|
name: 'Installation',
|
@@ -19,19 +23,33 @@ const chartData = [{
|
|
19
23
|
data: [1111, 677, 3245, 500, 200],
|
20
24
|
}]
|
21
25
|
|
22
|
-
const
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
26
|
+
const chartOptions = {
|
27
|
+
series: chartData,
|
28
|
+
title: {
|
29
|
+
text: "Bar Graph with Custom Data Colors",
|
30
|
+
},
|
31
|
+
xAxis: {
|
32
|
+
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
33
|
+
},
|
34
|
+
yAxis: {
|
35
|
+
title: {
|
36
|
+
text: "Number of Employees",
|
37
|
+
},
|
38
|
+
},
|
39
|
+
colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
|
40
|
+
}
|
41
|
+
|
42
|
+
const BarGraphColors = () => {
|
43
|
+
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
44
|
+
|
45
|
+
return (
|
46
|
+
<div>
|
47
|
+
<HighchartsReact
|
48
|
+
highcharts={Highcharts}
|
49
|
+
options={options}
|
50
|
+
/>
|
51
|
+
</div>
|
52
|
+
)
|
53
|
+
}
|
36
54
|
|
37
55
|
export default BarGraphColors
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts";
|
4
|
+
import HighchartsReact from "highcharts-react-official";
|
2
5
|
|
3
|
-
import BarGraph from '../_bar_graph'
|
4
6
|
|
5
7
|
const chartData = [{
|
6
8
|
name: 'Installation',
|
@@ -19,19 +21,35 @@ const chartData = [{
|
|
19
21
|
data: [1111, 677, 3245, 500, 200],
|
20
22
|
}]
|
21
23
|
|
22
|
-
const
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
24
|
+
const chartOptions = {
|
25
|
+
series: chartData,
|
26
|
+
title: {
|
27
|
+
text: 'Solar Employment Growth by Sector, 2010-2016',
|
28
|
+
},
|
29
|
+
subtitle: {
|
30
|
+
text: 'Source: thesolarfoundation.com',
|
31
|
+
},
|
32
|
+
xAxis: {
|
33
|
+
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
34
|
+
},
|
35
|
+
yAxis: {
|
36
|
+
title: {
|
37
|
+
text: 'Number of Employees',
|
38
|
+
},
|
39
|
+
},
|
40
|
+
}
|
41
|
+
|
42
|
+
const BarGraphDefault = () => {
|
43
|
+
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
44
|
+
|
45
|
+
return (
|
46
|
+
<div>
|
47
|
+
<HighchartsReact
|
48
|
+
highcharts={Highcharts}
|
49
|
+
options={options}
|
50
|
+
/>
|
51
|
+
</div>
|
52
|
+
)
|
53
|
+
}
|
36
54
|
|
37
55
|
export default BarGraphDefault
|
@@ -1,39 +1,69 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts";
|
4
|
+
import HighchartsReact from "highcharts-react-official";
|
2
5
|
|
3
|
-
import BarGraph from '../_bar_graph'
|
4
6
|
|
5
7
|
const chartData = [{
|
6
8
|
name: 'Number of Installations',
|
7
9
|
data: [1475, 200, 3000, 654, 656],
|
8
10
|
}]
|
9
11
|
|
10
|
-
const
|
12
|
+
const pixelHeightChartOptions = {
|
13
|
+
chart: {
|
14
|
+
height: "300"
|
15
|
+
},
|
16
|
+
series: chartData,
|
17
|
+
title: {
|
18
|
+
text: "Fixed Height (300px)",
|
19
|
+
},
|
20
|
+
xAxis: {
|
21
|
+
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
22
|
+
},
|
23
|
+
yAxis: {
|
24
|
+
title: {
|
25
|
+
text: "Number of Employees",
|
26
|
+
},
|
27
|
+
},
|
28
|
+
};
|
29
|
+
|
30
|
+
const percentageHeightChartOptions = {
|
31
|
+
chart: {
|
32
|
+
height: "50%"
|
33
|
+
},
|
34
|
+
series: chartData,
|
35
|
+
title: {
|
36
|
+
text: "Percentage Height (50%)",
|
37
|
+
},
|
38
|
+
xAxis: {
|
39
|
+
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
40
|
+
},
|
41
|
+
yAxis: {
|
42
|
+
title: {
|
43
|
+
text: "Number of Employees",
|
44
|
+
},
|
45
|
+
},
|
46
|
+
};
|
47
|
+
|
48
|
+
const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
|
49
|
+
|
50
|
+
const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
|
51
|
+
|
52
|
+
const BarGraphHeight = () => (
|
11
53
|
<div>
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
id="bar-fixed-height"
|
17
|
-
title="Fixed Height (300px)"
|
18
|
-
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
19
|
-
yAxisMin={0}
|
20
|
-
{...props}
|
21
|
-
/>
|
54
|
+
<HighchartsReact
|
55
|
+
highcharts={Highcharts}
|
56
|
+
options={pixelOptions}
|
57
|
+
/>
|
22
58
|
|
23
59
|
<br />
|
24
60
|
<br />
|
25
61
|
|
26
|
-
<
|
27
|
-
|
28
|
-
|
29
|
-
height="50%"
|
30
|
-
id="bar-percentage-height"
|
31
|
-
title="Percentage Height (50%)"
|
32
|
-
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
33
|
-
yAxisMin={0}
|
34
|
-
{...props}
|
62
|
+
<HighchartsReact
|
63
|
+
highcharts={Highcharts}
|
64
|
+
options={percentageOptions}
|
35
65
|
/>
|
36
66
|
</div>
|
37
67
|
)
|
38
68
|
|
39
|
-
export default
|
69
|
+
export default BarGraphHeight
|
@@ -0,0 +1,3 @@
|
|
1
|
+
By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
|
2
|
+
|
3
|
+
Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.
|
@@ -1,9 +1,10 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts";
|
4
|
+
import HighchartsReact from "highcharts-react-official";
|
2
5
|
|
3
|
-
import BarGraph from '../_bar_graph'
|
4
6
|
|
5
|
-
|
6
|
-
const barGraphOptions = {
|
7
|
+
const chartOptions = {
|
7
8
|
chart: {
|
8
9
|
type: 'bar'
|
9
10
|
},
|
@@ -22,13 +23,8 @@ const barGraphOptions = {
|
|
22
23
|
lineWidth: 0
|
23
24
|
},
|
24
25
|
yAxis: {
|
25
|
-
min: 0,
|
26
26
|
title: {
|
27
|
-
text: '
|
28
|
-
align: 'high'
|
29
|
-
},
|
30
|
-
labels: {
|
31
|
-
overflow: 'justify'
|
27
|
+
text: '',
|
32
28
|
},
|
33
29
|
},
|
34
30
|
tooltip: {
|
@@ -51,16 +47,16 @@ const barGraphOptions = {
|
|
51
47
|
}, {
|
52
48
|
name: 'Year 2018',
|
53
49
|
data: [1276, 1007, 4561, 746]
|
54
|
-
}]
|
50
|
+
}],
|
55
51
|
}
|
56
52
|
|
57
|
-
const
|
53
|
+
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
54
|
+
|
55
|
+
const BarGraphHorizontal = () => (
|
58
56
|
<div>
|
59
|
-
<
|
60
|
-
|
61
|
-
|
62
|
-
yAxisMin={0}
|
63
|
-
{...props}
|
57
|
+
<HighchartsReact
|
58
|
+
highcharts={Highcharts}
|
59
|
+
options={options}
|
64
60
|
/>
|
65
61
|
</div>
|
66
62
|
)
|
@@ -1,24 +1,40 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts";
|
4
|
+
import HighchartsReact from "highcharts-react-official";
|
5
|
+
|
3
6
|
|
4
7
|
const chartData = [{
|
5
8
|
name: 'Number of Installations',
|
6
9
|
data: [1475, 200, 3000, 654, 656],
|
7
10
|
}]
|
8
11
|
|
9
|
-
const
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
12
|
+
const chartOptions = {
|
13
|
+
series: chartData,
|
14
|
+
title: {
|
15
|
+
text: 'Bar Graph with Legend',
|
16
|
+
},
|
17
|
+
xAxis: {
|
18
|
+
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
19
|
+
},
|
20
|
+
yAxis: {
|
21
|
+
title: {
|
22
|
+
text: 'Number of Employees',
|
23
|
+
},
|
24
|
+
},
|
25
|
+
legend: { enabled: true },
|
26
|
+
}
|
23
27
|
|
28
|
+
const BarGraphLegend = () => {
|
29
|
+
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
30
|
+
|
31
|
+
return (
|
32
|
+
<div>
|
33
|
+
<HighchartsReact
|
34
|
+
highcharts={Highcharts}
|
35
|
+
options={options}
|
36
|
+
/>
|
37
|
+
</div>
|
38
|
+
)
|
39
|
+
}
|
24
40
|
export default BarGraphLegend
|
@@ -1,25 +1,48 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts";
|
4
|
+
import HighchartsReact from "highcharts-react-official";
|
5
|
+
|
3
6
|
|
4
7
|
const chartData = [{
|
5
8
|
name: 'Number of Installations',
|
6
9
|
data: [1475, 200, 3000, 654, 656],
|
7
10
|
}]
|
8
11
|
|
9
|
-
const
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
12
|
+
const chartOptions = {
|
13
|
+
title: {
|
14
|
+
text: 'Bar Graph with Legend Non Clickable',
|
15
|
+
},
|
16
|
+
xAxis: {
|
17
|
+
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
18
|
+
},
|
19
|
+
yAxis: {
|
20
|
+
title: {
|
21
|
+
text: 'Number of Employees',
|
22
|
+
},
|
23
|
+
},
|
24
|
+
legend: {
|
25
|
+
enabled: true,
|
26
|
+
events: {
|
27
|
+
itemClick: function () {
|
28
|
+
return false;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
},
|
32
|
+
series: chartData
|
33
|
+
}
|
34
|
+
|
35
|
+
const BarGraphLegendNonClickable = () => {
|
36
|
+
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
37
|
+
|
38
|
+
return (
|
39
|
+
<div>
|
40
|
+
<HighchartsReact
|
41
|
+
highcharts={Highcharts}
|
42
|
+
options={options}
|
43
|
+
/>
|
44
|
+
</div>
|
45
|
+
)
|
46
|
+
}
|
24
47
|
|
25
48
|
export default BarGraphLegendNonClickable
|