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.
Files changed (189) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +3 -23
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +3 -67
  4. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +2 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +19 -29
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +143 -365
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +1 -14
  8. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +1 -6
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +2 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +2 -6
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +2 -6
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -10
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -6
  17. data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -7
  18. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  20. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  21. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  22. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  23. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  24. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  26. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  27. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  28. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +3 -2
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -2
  36. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +1 -39
  37. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +0 -4
  38. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +1 -9
  39. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +0 -14
  40. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +0 -2
  41. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +0 -1
  42. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +45 -19
  43. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +0 -2
  44. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +1 -2
  45. data/app/pb_kits/playbook/pb_copy_button/index.js +20 -46
  46. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +0 -12
  47. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -12
  48. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -50
  49. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +1 -4
  50. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -4
  51. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  52. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +1 -5
  53. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
  54. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -1
  55. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -10
  56. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -10
  57. data/app/pb_kits/playbook/pb_dialog/dialog.rb +0 -2
  58. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -1
  59. data/app/pb_kits/playbook/pb_dialog/index.js +14 -106
  60. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -3
  61. data/app/pb_kits/playbook/pb_draggable/draggable.rb +1 -9
  62. data/app/pb_kits/playbook/pb_draggable/index.js +142 -139
  63. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +1 -4
  65. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  66. data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -1
  67. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +3 -23
  68. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +5 -15
  69. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +6 -39
  70. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -1
  71. data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -1
  72. data/app/pb_kits/playbook/pb_layout/_layout.scss +1 -70
  73. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -29
  74. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +118 -322
  75. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  76. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +43 -74
  77. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +4 -21
  78. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +0 -1
  79. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +0 -1
  80. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +22 -83
  81. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +7 -39
  82. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +7 -1
  83. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +0 -5
  84. data/app/pb_kits/playbook/pb_overlay/docs/index.js +0 -5
  85. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +1 -39
  86. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -13
  87. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +1 -3
  88. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +1 -8
  89. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +0 -2
  90. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
  91. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -3
  92. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +0 -19
  93. data/app/pb_kits/playbook/pb_popover/docs/example.yml +0 -1
  94. data/app/pb_kits/playbook/pb_popover/index.ts +1 -13
  95. data/app/pb_kits/playbook/pb_popover/popover.rb +0 -2
  96. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +2 -7
  97. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  98. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +1 -3
  99. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +1 -3
  100. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -3
  101. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -3
  102. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  103. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -13
  104. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +1 -9
  105. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -2
  106. data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
  107. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +1 -8
  108. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +1 -7
  109. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +2 -6
  110. data/dist/chunks/_typeahead-C2GOKWtm.js +22 -0
  111. data/dist/chunks/_weekday_stacked-CFGTPT0O.js +45 -0
  112. data/dist/chunks/lib-BGzBzFZX.js +29 -0
  113. data/dist/chunks/{pb_form_validation-BWjy4bFn.js → pb_form_validation-BvNy9Bd6.js} +1 -1
  114. data/dist/chunks/vendor.js +1 -1
  115. data/dist/menu.yml +2 -2
  116. data/dist/playbook-doc.js +1 -19
  117. data/dist/playbook-rails-react-bindings.js +1 -1
  118. data/dist/playbook-rails.js +1 -1
  119. data/dist/playbook.css +1 -1
  120. data/lib/playbook/version.rb +2 -2
  121. metadata +8 -71
  122. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +0 -80
  123. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +0 -3
  124. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +0 -58
  125. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +0 -3
  126. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +0 -66
  127. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +0 -10
  128. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +0 -58
  129. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +0 -6
  130. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +0 -64
  131. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +0 -8
  132. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +0 -55
  133. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +0 -3
  134. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +0 -33
  135. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +0 -3
  136. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +0 -97
  137. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +0 -53
  138. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  139. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  140. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +0 -28
  141. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +0 -42
  142. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +0 -1
  143. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +0 -54
  144. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +0 -3
  145. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +0 -14
  146. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +0 -3
  147. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +0 -45
  148. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +0 -34
  149. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +0 -14
  150. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +0 -20
  151. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +0 -14
  152. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +0 -117
  153. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +0 -9
  154. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +0 -43
  155. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +0 -55
  156. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +0 -1
  157. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +0 -42
  158. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +0 -1
  159. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +0 -41
  160. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +0 -1
  161. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -30
  162. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +0 -1
  163. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +0 -85
  164. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +0 -79
  165. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +0 -52
  166. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +0 -1
  167. data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +0 -110
  168. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +0 -63
  169. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +0 -3
  170. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +0 -49
  171. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +0 -1
  172. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +0 -81
  173. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +0 -1
  174. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +0 -39
  175. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +0 -1
  176. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +0 -40
  177. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +0 -5
  178. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +0 -10
  179. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +0 -20
  180. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +0 -1
  181. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +0 -46
  182. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +0 -1
  183. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +0 -94
  184. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +0 -1
  185. data/dist/chunks/_typeahead-D8CsVBZO.js +0 -22
  186. data/dist/chunks/_weekday_stacked-D3oLTSkH.js +0 -45
  187. data/dist/chunks/lib-BmTAc7Nc.js +0 -29
  188. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_react.md → _draggable_drop_zones.md} +0 -0
  189. /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
- additional_classes = [responsive_classname, max_height_classname]
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: { vertical_border: true, container: false }}) %>
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
- verticalBorder: true
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/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 `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/react).
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 the use of two table props, including how to render the vertical borders between columns.
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 the use of two table props, including how to render the vertical borders between columns.
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.
@@ -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
- **NOTE**: 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.
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.
@@ -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
- **NOTE**: 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.
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
- - advanced_table_sticky_header_rails: Sticky Header
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
- - advanced_table_sticky_header: Sticky Header
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 Call',
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 Call',
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
 
@@ -13,7 +13,7 @@ const dataWithABlock = [
13
13
  value: 49,
14
14
  },
15
15
  {
16
- name: 'After Call',
16
+ name: 'After call',
17
17
  value: 10,
18
18
  },
19
19
  ]
@@ -7,7 +7,7 @@
7
7
  value: 49,
8
8
  },
9
9
  {
10
- name: 'After Call',
10
+ name: 'After call',
11
11
  value: 10,
12
12
  }
13
13
  ] %>
@@ -12,7 +12,7 @@ const dataWithColors = [
12
12
  value: 49,
13
13
  },
14
14
  {
15
- name: 'After Call',
15
+ name: 'After call',
16
16
  value: 10,
17
17
  },
18
18
  ]
@@ -7,7 +7,7 @@
7
7
  value: 49,
8
8
  },
9
9
  {
10
- name: 'After Call',
10
+ name: 'After call',
11
11
  value: 10,
12
12
  }
13
13
  ] %>
@@ -12,7 +12,7 @@ const data = [
12
12
  value: 49,
13
13
  },
14
14
  {
15
- name: 'After Call',
15
+ name: 'After call',
16
16
  value: 10,
17
17
  },
18
18
  ]
@@ -7,7 +7,7 @@
7
7
  value: 49,
8
8
  },
9
9
  {
10
- name: 'After Call',
10
+ name: 'After call',
11
11
  value: 10,
12
12
  }
13
13
  ] %>
@@ -12,7 +12,7 @@ const data = [
12
12
  value: 49,
13
13
  },
14
14
  {
15
- name: 'After Call',
15
+ name: 'After call',
16
16
  value: 10,
17
17
  },
18
18
  ]
@@ -7,7 +7,7 @@
7
7
  value: 49,
8
8
  },
9
9
  {
10
- name: 'After Call',
10
+ name: 'After call',
11
11
  value: 10,
12
12
  }
13
13
  ] %>
@@ -14,7 +14,7 @@ const data = [
14
14
  value: 49,
15
15
  },
16
16
  {
17
- name: 'After Call',
17
+ name: 'After call',
18
18
  value: 10,
19
19
  },
20
20
  ]
@@ -14,7 +14,7 @@ const CircleChartLiveData = (props) => {
14
14
  value: 49,
15
15
  },
16
16
  {
17
- name: 'After Call',
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 Call',
32
+ name: 'After call',
33
33
  value: 140,
34
34
  },
35
35
  ]
@@ -7,7 +7,7 @@
7
7
  value: 49,
8
8
  },
9
9
  {
10
- name: 'After Call',
10
+ name: 'After call',
11
11
  value: 10,
12
12
  }
13
13
  ] %>
@@ -12,7 +12,7 @@ const dataRounded = [
12
12
  value: 49,
13
13
  },
14
14
  {
15
- name: 'After Call',
15
+ name: 'After call',
16
16
  value: 10,
17
17
  },
18
18
  ]
@@ -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
- &.size_small {
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") + size_class
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'