playbook_ui 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.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/Components/RegularTableView.tsx +3 -23
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +3 -67
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +19 -29
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +143 -365
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +1 -14
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +1 -6
- 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 +2 -1
- 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 +2 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +2 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -10
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -6
- data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -7
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- 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/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_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 +3 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +1 -39
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +0 -4
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +1 -9
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +0 -14
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +45 -19
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_copy_button/index.js +20 -46
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +0 -12
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -50
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +1 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -4
- 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 +1 -5
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -10
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -10
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +0 -2
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_dialog/index.js +14 -106
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_draggable/draggable.rb +1 -9
- data/app/pb_kits/playbook/pb_draggable/index.js +142 -139
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +1 -4
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +3 -23
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +5 -15
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +6 -39
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_layout/_layout.scss +1 -70
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -29
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +118 -322
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +43 -74
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +4 -21
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +22 -83
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +7 -39
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +7 -1
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +1 -39
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -13
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +1 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +1 -8
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -3
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +0 -19
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_popover/index.ts +1 -13
- data/app/pb_kits/playbook/pb_popover/popover.rb +0 -2
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +2 -7
- 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 +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -3
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -13
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +1 -9
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +1 -8
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +1 -7
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +2 -6
- data/dist/chunks/_typeahead-C2GOKWtm.js +22 -0
- data/dist/chunks/_weekday_stacked-CFGTPT0O.js +45 -0
- data/dist/chunks/lib-BGzBzFZX.js +29 -0
- data/dist/chunks/{pb_form_validation-BWjy4bFn.js → pb_form_validation-BvNy9Bd6.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +1 -19
- 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 +8 -71
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +0 -80
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +0 -58
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +0 -66
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +0 -10
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +0 -58
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +0 -64
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +0 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +0 -55
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +0 -33
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +0 -97
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +0 -53
- 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_circle_icon_button/docs/_circle_icon_button_size.html.erb +0 -28
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +0 -42
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +0 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +0 -54
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +0 -3
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +0 -14
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +0 -3
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +0 -45
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +0 -34
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +0 -14
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +0 -20
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +0 -14
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +0 -117
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +0 -9
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +0 -43
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +0 -55
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +0 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +0 -42
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +0 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +0 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +0 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -30
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +0 -85
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +0 -79
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +0 -52
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +0 -110
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +0 -63
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +0 -3
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +0 -49
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +0 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +0 -81
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +0 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +0 -39
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +0 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +0 -40
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +0 -5
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +0 -10
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +0 -20
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +0 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +0 -46
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +0 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +0 -94
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +0 -1
- data/dist/chunks/_typeahead-D8CsVBZO.js +0 -22
- data/dist/chunks/_weekday_stacked-D3oLTSkH.js +0 -45
- data/dist/chunks/lib-BmTAc7Nc.js +0 -29
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_react.md → _draggable_drop_zones.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors_react.md → _draggable_drop_zones_colors.md} +0 -0
@@ -34,13 +34,10 @@ type AdvancedTableProps = {
|
|
34
34
|
children?: React.ReactNode | React.ReactNode[]
|
35
35
|
className?: string
|
36
36
|
columnDefinitions: GenericObject[]
|
37
|
-
columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
|
38
37
|
dark?: boolean
|
39
38
|
data?: { [key: string]: string }
|
40
39
|
enableToggleExpansion?: "all" | "header" | "none"
|
41
40
|
expandedControl?: GenericObject
|
42
|
-
expandByDepth?: { [key: string]: string | number }
|
43
|
-
onExpandByDepthClick?: (arg: number, arg1: any) => void
|
44
41
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
45
42
|
id?: string
|
46
43
|
initialLoadingRowsCount?: number
|
@@ -72,13 +69,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
72
69
|
children,
|
73
70
|
className,
|
74
71
|
columnDefinitions,
|
75
|
-
columnGroupBorderColor,
|
76
72
|
dark = false,
|
77
73
|
data = {},
|
78
74
|
enableToggleExpansion = "header",
|
79
75
|
expandedControl,
|
80
|
-
expandByDepth,
|
81
|
-
onExpandByDepthClick,
|
82
76
|
htmlOptions = {},
|
83
77
|
id,
|
84
78
|
initialLoadingRowsCount = 10,
|
@@ -93,7 +87,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
93
87
|
showActionsBar = true,
|
94
88
|
selectableRows,
|
95
89
|
sortControl,
|
96
|
-
stickyLeftColumn,
|
97
90
|
tableData,
|
98
91
|
tableOptions,
|
99
92
|
tableProps,
|
@@ -240,8 +233,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
240
233
|
'advanced-table-fullscreen': isFullscreen,
|
241
234
|
'advanced-table-allow-fullscreen': allowFullScreen
|
242
235
|
},
|
243
|
-
{'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
|
244
|
-
columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
|
245
236
|
globalProps(props),
|
246
237
|
className
|
247
238
|
);
|
@@ -285,10 +276,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
285
276
|
{renderFullscreenHeader()}
|
286
277
|
<AdvancedTableProvider
|
287
278
|
columnDefinitions={columnDefinitions}
|
288
|
-
columnGroupBorderColor={columnGroupBorderColor}
|
289
279
|
enableToggleExpansion={enableToggleExpansion}
|
290
280
|
enableVirtualization={virtualizedRows}
|
291
|
-
expandByDepth={expandByDepth}
|
292
281
|
expanded={expanded}
|
293
282
|
expandedControl={expandedControl}
|
294
283
|
handleExpandOrCollapse={handleExpandOrCollapse}
|
@@ -297,13 +286,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
297
286
|
isActionBarVisible={isActionBarVisible}
|
298
287
|
isFullscreen={isFullscreen}
|
299
288
|
loading={loading}
|
300
|
-
onExpandByDepthClick={onExpandByDepthClick}
|
301
289
|
responsive={responsive}
|
302
290
|
selectableRows={selectableRows}
|
303
291
|
setExpanded={setExpanded}
|
304
292
|
showActionsBar={showActionsBar}
|
305
293
|
sortControl={sortControl}
|
306
|
-
stickyLeftColumn={stickyLeftColumn}
|
307
294
|
subRowHeaders={tableOptions?.subRowHeaders}
|
308
295
|
table={table}
|
309
296
|
tableContainerRef={tableWrapperRef}
|
@@ -338,7 +325,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
338
325
|
</Table>
|
339
326
|
</React.Fragment>
|
340
327
|
</AdvancedTableProvider>
|
341
|
-
|
328
|
+
|
342
329
|
</div>
|
343
330
|
{/* Bottom Pagination */}
|
344
331
|
{pagination && (
|
@@ -7,9 +7,6 @@ module Playbook
|
|
7
7
|
default: []
|
8
8
|
prop :column_definitions, type: Playbook::Props::Array,
|
9
9
|
default: []
|
10
|
-
prop :column_group_border_color, type: Playbook::Props::Enum,
|
11
|
-
values: %w[text_lt_default text_lt_light text_lt_lighter text_dk_default text_dk_light text_dk_lighter none],
|
12
|
-
default: "none"
|
13
10
|
prop :enable_toggle_expansion, type: Playbook::Props::Enum,
|
14
11
|
values: %w[all header none],
|
15
12
|
default: "header"
|
@@ -27,9 +24,7 @@ module Playbook
|
|
27
24
|
default: false
|
28
25
|
|
29
26
|
def classname
|
30
|
-
|
31
|
-
additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
|
32
|
-
generate_classname("pb_advanced_table", *additional_classes, separator: " ")
|
27
|
+
generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
|
33
28
|
end
|
34
29
|
|
35
30
|
def responsive_classname
|
@@ -30,4 +30,4 @@
|
|
30
30
|
}
|
31
31
|
] %>
|
32
32
|
|
33
|
-
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: {
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { container: false, sticky: true }}) %>
|
@@ -37,13 +37,14 @@ const AdvancedTableTableProps = (props) => {
|
|
37
37
|
|
38
38
|
const tableProps = {
|
39
39
|
container: false,
|
40
|
-
|
40
|
+
sticky: true
|
41
41
|
}
|
42
42
|
|
43
43
|
return (
|
44
44
|
<div>
|
45
45
|
<AdvancedTable
|
46
46
|
columnDefinitions={columnDefinitions}
|
47
|
+
responsive="none"
|
47
48
|
tableData={MOCK_DATA}
|
48
49
|
tableProps={tableProps}
|
49
50
|
{...props}
|
@@ -1,3 +1,3 @@
|
|
1
|
-
This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table
|
1
|
+
This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
|
2
2
|
|
3
|
-
This doc example showcases
|
3
|
+
This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#table-props-sticky-header) doc example below.
|
@@ -1,3 +1,3 @@
|
|
1
1
|
This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
|
2
2
|
|
3
|
-
This doc example showcases
|
3
|
+
This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props-sticky-header) doc example below.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
CHANGED
@@ -1,7 +1,3 @@
|
|
1
|
-
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop.
|
1
|
+
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
Expand the table above to see this in action.
|
6
|
-
|
7
|
-
A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.
|
3
|
+
A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table#table-props) doc example above.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
CHANGED
@@ -1,7 +1,3 @@
|
|
1
|
-
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop.
|
1
|
+
Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
Expand the table above to see this in action.
|
6
|
-
|
7
|
-
A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.
|
3
|
+
A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props) doc example above.
|
@@ -5,8 +5,7 @@ examples:
|
|
5
5
|
- advanced_table_beta_subrow_headers: SubRow Headers
|
6
6
|
- advanced_table_collapsible_trail_rails: Collapsible Trail
|
7
7
|
- advanced_table_table_props: Table Props
|
8
|
-
-
|
9
|
-
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
8
|
+
- advanced_table_table_props_sticky_header: Table Props Sticky Header
|
10
9
|
- advanced_table_beta_sort: Enable Sorting
|
11
10
|
- advanced_table_responsive: Responsive Tables
|
12
11
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
@@ -14,7 +13,6 @@ examples:
|
|
14
13
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
15
14
|
# - advanced_table_selectable_rows: Selectable Rows
|
16
15
|
# - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
|
17
|
-
- advanced_table_column_border_color_rails: Column Group Border Color
|
18
16
|
|
19
17
|
|
20
18
|
react:
|
@@ -23,15 +21,11 @@ examples:
|
|
23
21
|
- advanced_table_sort: Enable Sorting
|
24
22
|
- advanced_table_sort_control: Sort Control
|
25
23
|
- advanced_table_expanded_control: Expanded Control
|
26
|
-
- advanced_table_expand_by_depth: Expand by Depth
|
27
24
|
- advanced_table_subrow_headers: SubRow Headers
|
28
25
|
- advanced_table_collapsible_trail: Collapsible Trail
|
29
26
|
- advanced_table_table_options: Table Options
|
30
27
|
- advanced_table_table_props: Table Props
|
31
|
-
-
|
32
|
-
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
33
|
-
- advanced_table_sticky_columns: Sticky Columns
|
34
|
-
- advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
|
28
|
+
- advanced_table_table_props_sticky_header: Table Props Sticky Header
|
35
29
|
- advanced_table_inline_row_loading: Inline Row Loading
|
36
30
|
- advanced_table_responsive: Responsive Tables
|
37
31
|
- advanced_table_custom_cell: Custom Components for Cells
|
@@ -46,5 +40,4 @@ examples:
|
|
46
40
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
47
41
|
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
48
42
|
- advanced_table_inline_editing: Inline Cell Editing
|
49
|
-
- advanced_table_fullscreen: Fullscreen
|
50
|
-
- advanced_table_column_border_color: Column Group Border Color
|
43
|
+
- advanced_table_fullscreen: Fullscreen
|
@@ -22,9 +22,4 @@ export { default as AdvancedTableSelectableRowsActions } from './_advanced_table
|
|
22
22
|
export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
|
23
23
|
export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
|
24
24
|
export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
|
25
|
-
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
26
|
-
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
27
|
-
export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
|
28
|
-
export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
|
29
|
-
export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
|
30
|
-
export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
|
25
|
+
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
@@ -31,8 +31,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
31
31
|
this.toggleElement(this.target);
|
32
32
|
}
|
33
33
|
});
|
34
|
-
|
35
|
-
this.hideCloseIcon()
|
36
34
|
|
37
35
|
const nestedButtons = this.element
|
38
36
|
.closest("table")
|
@@ -51,11 +49,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
51
49
|
});
|
52
50
|
}
|
53
51
|
|
54
|
-
hideCloseIcon() {
|
55
|
-
const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
|
56
|
-
closeIcon.style.display = "none";
|
57
|
-
}
|
58
|
-
|
59
52
|
showElement(elements) {
|
60
53
|
elements.forEach((elem) => {
|
61
54
|
elem.style.display = "table-row";
|
@@ -30,7 +30,7 @@
|
|
30
30
|
class="gray-icon expand-toggle-icon"
|
31
31
|
data-advanced-table="true">
|
32
32
|
<%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
|
33
|
-
<%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
|
33
|
+
<%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
|
34
34
|
</button>
|
35
35
|
<% end %>
|
36
36
|
<% end %>
|
@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
|
|
10
10
|
import mapColors from "../pb_dashboard/pbChartsColorsHelper";
|
11
11
|
import { globalProps } from "../utilities/globalProps";
|
12
12
|
import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
|
13
|
-
import { merge } from '../utilities/object'
|
13
|
+
import { merge } from '../utilities/object'
|
14
14
|
|
15
15
|
type CircleChartProps = {
|
16
16
|
align?: "left" | "right" | "center";
|
@@ -28,7 +28,7 @@ test('uses exact classname', () => {
|
|
28
28
|
value: 49,
|
29
29
|
},
|
30
30
|
{
|
31
|
-
name: 'After
|
31
|
+
name: 'After call',
|
32
32
|
value: 10,
|
33
33
|
},
|
34
34
|
]
|
@@ -39,7 +39,7 @@ test('uses exact classname', () => {
|
|
39
39
|
id='circlechartid'
|
40
40
|
/>
|
41
41
|
);
|
42
|
-
|
42
|
+
|
43
43
|
const kit = screen.getByTestId(testId);
|
44
44
|
expect(kit).toHaveClass('pb_circle_chart');
|
45
45
|
});
|
@@ -7,7 +7,7 @@
|
|
7
7
|
value: 49,
|
8
8
|
},
|
9
9
|
{
|
10
|
-
name: 'After
|
10
|
+
name: 'After call',
|
11
11
|
value: 10,
|
12
12
|
}
|
13
13
|
] %>
|
@@ -18,7 +18,7 @@
|
|
18
18
|
chart_data: data_51,
|
19
19
|
id: "with-a-block-2",
|
20
20
|
rounded: true,
|
21
|
-
}) do %>
|
21
|
+
}) do %>
|
22
22
|
<%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
|
23
23
|
<% end %>
|
24
24
|
|
@@ -14,7 +14,7 @@ const CircleChartLiveData = (props) => {
|
|
14
14
|
value: 49,
|
15
15
|
},
|
16
16
|
{
|
17
|
-
name: 'After
|
17
|
+
name: 'After call',
|
18
18
|
value: 10,
|
19
19
|
},
|
20
20
|
])
|
@@ -29,7 +29,7 @@ const CircleChartLiveData = (props) => {
|
|
29
29
|
value: 12,
|
30
30
|
},
|
31
31
|
{
|
32
|
-
name: 'After
|
32
|
+
name: 'After call',
|
33
33
|
value: 140,
|
34
34
|
},
|
35
35
|
]
|
@@ -14,7 +14,6 @@ examples:
|
|
14
14
|
|
15
15
|
react:
|
16
16
|
- circle_chart_default: Default Style
|
17
|
-
- circle_chart_pb_styles: Playbook Styles
|
18
17
|
- circle_chart_live_data: Live Data
|
19
18
|
- circle_chart_rounded: Rounded Corners
|
20
19
|
- circle_chart_block: Accepts Any Block
|
@@ -23,5 +22,7 @@ examples:
|
|
23
22
|
- circle_chart_with_legend_kit: Legend
|
24
23
|
- circle_chart_legend_position: Legend Position
|
25
24
|
- circle_chart_with_title: Title
|
26
|
-
- circle_chart_inner_sizes: Inner Circle Size Options
|
25
|
+
- circle_chart_inner_sizes: Inner Circle Size Options
|
27
26
|
- circle_chart_custom_tooltip: Tooltip Customization
|
27
|
+
|
28
|
+
|
@@ -8,5 +8,4 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
|
|
8
8
|
export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
|
9
9
|
export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
|
10
10
|
export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
|
11
|
-
export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
|
12
|
-
export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"
|
11
|
+
export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
|
@@ -53,42 +53,4 @@ $pb_button_styles: (
|
|
53
53
|
}
|
54
54
|
}
|
55
55
|
}
|
56
|
-
|
57
|
-
@each $style in $pb_button_styles {
|
58
|
-
[class^=pb_button_kit][class*=_#{$style}] {
|
59
|
-
width: 20px;
|
60
|
-
height: 20px;
|
61
|
-
min-height: 20px;
|
62
|
-
border-radius: 10px;
|
63
|
-
line-height: 20px;
|
64
|
-
flex-basis: 20px;
|
65
|
-
min-width: 20px;
|
66
|
-
padding: 0;
|
67
|
-
}
|
68
|
-
}
|
69
|
-
// centering small icon svg
|
70
|
-
.pb_button_content {
|
71
|
-
display: flex;
|
72
|
-
align-items: center;
|
73
|
-
justify-content: center;
|
74
|
-
// rails
|
75
|
-
svg.pb_custom_icon {
|
76
|
-
height: 14px;
|
77
|
-
width: 14px;
|
78
|
-
vertical-align: middle;
|
79
|
-
}
|
80
|
-
// react (nested within an additional span)
|
81
|
-
> span {
|
82
|
-
display: flex;
|
83
|
-
align-items: center;
|
84
|
-
justify-content: center;
|
85
|
-
> svg.pb_custom_icon {
|
86
|
-
height: 14px;
|
87
|
-
width: 14px;
|
88
|
-
vertical-align: middle;
|
89
|
-
display: inline-block;
|
90
|
-
}
|
91
|
-
}
|
92
|
-
}
|
93
|
-
}
|
94
|
-
}
|
56
|
+
}
|
@@ -22,7 +22,6 @@ type CircleIconButtonProps = {
|
|
22
22
|
type?: 'button' | 'submit' | 'reset' | undefined,
|
23
23
|
target?: string
|
24
24
|
variant?: 'primary' | 'secondary' | 'link',
|
25
|
-
size?: 'default' | 'sm',
|
26
25
|
}
|
27
26
|
|
28
27
|
const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
|
@@ -42,16 +41,13 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
|
|
42
41
|
link,
|
43
42
|
newWindow,
|
44
43
|
variant,
|
45
|
-
size = 'default',
|
46
44
|
} = props
|
47
45
|
|
48
46
|
const ariaProps = buildAriaProps(aria)
|
49
47
|
const dataProps = buildDataProps(data)
|
50
48
|
const htmlProps = buildHtmlProps(htmlOptions)
|
51
|
-
const sizeClass = size === 'sm' ? 'size_small' : ''
|
52
49
|
const classes = classnames(
|
53
50
|
buildCss('pb_circle_icon_button_kit'),
|
54
|
-
sizeClass,
|
55
51
|
globalProps(props),
|
56
52
|
className
|
57
53
|
)
|
@@ -18,16 +18,8 @@ module Playbook
|
|
18
18
|
prop :new_window, type: Playbook::Props::Boolean,
|
19
19
|
default: false
|
20
20
|
prop :target
|
21
|
-
prop :size, type: Playbook::Props::Enum,
|
22
|
-
values: %w[default sm],
|
23
|
-
default: "default"
|
24
|
-
|
25
21
|
def classname
|
26
|
-
generate_classname("pb_circle_icon_button_kit")
|
27
|
-
end
|
28
|
-
|
29
|
-
def size_class
|
30
|
-
size == "sm" ? " size_small" : ""
|
22
|
+
generate_classname("pb_circle_icon_button_kit")
|
31
23
|
end
|
32
24
|
end
|
33
25
|
end
|
@@ -30,17 +30,3 @@ test('passes loading prop to button', () => {
|
|
30
30
|
|
31
31
|
expect(button).toBeInTheDocument()
|
32
32
|
})
|
33
|
-
|
34
|
-
test('adds size_small class when size is sm', () => {
|
35
|
-
render(
|
36
|
-
<CircleIconButton
|
37
|
-
data={{ testid: 'small-size-test' }}
|
38
|
-
icon="plus"
|
39
|
-
size="sm"
|
40
|
-
/>
|
41
|
-
)
|
42
|
-
|
43
|
-
const kit = screen.getByTestId('small-size-test')
|
44
|
-
|
45
|
-
expect(kit).toHaveClass('pb_circle_icon_button_kit size_small')
|
46
|
-
})
|
@@ -4,11 +4,9 @@ examples:
|
|
4
4
|
- circle_icon_button_default: Default
|
5
5
|
- circle_icon_button_link: Link
|
6
6
|
- circle_icon_button_loading: Loading
|
7
|
-
- circle_icon_button_size: Size
|
8
7
|
|
9
8
|
react:
|
10
9
|
- circle_icon_button_default: Default
|
11
10
|
- circle_icon_button_click: Click Handler
|
12
11
|
- circle_icon_button_link: Link
|
13
12
|
- circle_icon_button_loading: Loading
|
14
|
-
- circle_icon_button_size: Size
|
@@ -2,4 +2,3 @@ export { default as CircleIconButtonDefault } from './_circle_icon_button_defaul
|
|
2
2
|
export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
|
3
3
|
export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
|
4
4
|
export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'
|
5
|
-
export { default as CircleIconButtonSize } from './_circle_icon_button_size.jsx'
|