playbook_ui 14.13.0.pre.alpha.play1754pbtagprogressradio6121 → 14.13.0.pre.alpha.play1834depupdatesass6024

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 (51) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -3
  3. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
  4. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +1 -4
  5. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -2
  6. data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -2
  7. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -7
  8. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +3 -6
  9. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +2 -1
  10. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +3 -1
  11. data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_icon_button/icon_button.rb +0 -3
  13. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +6 -1
  14. data/app/pb_kits/playbook/pb_nav/item.html.erb +19 -7
  15. data/app/pb_kits/playbook/pb_nav/nav.html.erb +8 -3
  16. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +6 -1
  17. data/app/pb_kits/playbook/pb_popover/popover.html.erb +6 -1
  18. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +6 -1
  19. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +11 -4
  20. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +5 -1
  21. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +5 -1
  22. data/app/pb_kits/playbook/pb_radio/radio.html.erb +11 -5
  23. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -4
  24. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -3
  25. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +2 -29
  26. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +3 -31
  27. data/app/pb_kits/playbook/pb_table/table_body.html.erb +7 -13
  28. data/app/pb_kits/playbook/pb_table/table_body.rb +0 -2
  29. data/app/pb_kits/playbook/pb_table/table_row.html.erb +7 -13
  30. data/app/pb_kits/playbook/pb_table/table_row.rb +0 -4
  31. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +0 -14
  32. data/app/pb_kits/playbook/pb_text_input/index.js +0 -9
  33. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -5
  34. data/dist/chunks/{_typeahead-C_q1qAtC.js → _typeahead-DQTwAd_2.js} +4 -4
  35. data/dist/chunks/_weekday_stacked-CnPEqV7l.js +45 -0
  36. data/dist/chunks/vendor.js +1 -1
  37. data/dist/playbook-doc.js +1 -1
  38. data/dist/playbook-rails-react-bindings.js +1 -1
  39. data/dist/playbook-rails.js +1 -1
  40. data/lib/playbook/version.rb +1 -1
  41. metadata +4 -13
  42. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +0 -90
  43. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +0 -5
  44. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +0 -27
  45. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +0 -47
  46. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +0 -88
  47. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +0 -1
  48. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +0 -96
  49. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +0 -101
  50. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +0 -1
  51. data/dist/chunks/_weekday_stacked-DCeouuO3.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1c21dbfb6605e0f1e9947150f111aac37a361d907d16537db92a431a0fcf5a24
4
- data.tar.gz: 8d833425594b4a6b3798110999483a49404c105cb5d6bdafd597964352ed481a
3
+ metadata.gz: eaae4c0710eed5f130a25be20f2b53abeb9c0e8411e98a2fea634d1d36ab4441
4
+ data.tar.gz: fcd82b79aec1f5f402e1818c53d747e91e488ec3ee7b41cb35708ccf7a6a82de
5
5
  SHA512:
6
- metadata.gz: 39634b93286ba5ea739dd301829bdfc939577d3218bc8e29b1184045947409cbc3483a4ec2d2ef6a68e0751175e4a003faaaadd790ed4b389e27f121a7df3af3
7
- data.tar.gz: 17bef6dab27d279f189f768919d101ae5fca3970fa67bc8629f661f90d8580325dee7ac8be4b8533b3b8f3161a257fe8f58aa1f0756174c291b3c869d1799f8d
6
+ metadata.gz: f1b38fee7ad7e12b3d352caf206eb0bfa06d70f61b4822c87065910e4afa8aa0b449d34057115af2ad36fb49041f95ed5e4fc929078ac0f65f696e51076e6fc2
7
+ data.tar.gz: 8c92d4019299e686dbeb55e880f75907ceca98eb5e285ab441e29a9984de5528f46dd0b525c61e580ed3e9605b085017a1be8aedc198800e4004fa76f3b1d133
@@ -29,7 +29,6 @@ type DatePickerProps = {
29
29
  hideLabel?: boolean,
30
30
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
31
31
  id?: string,
32
- initializeOnce?: boolean,
33
32
  inLine?: boolean,
34
33
  inputAria?: { [key: string]: string },
35
34
  inputData?: { [key: string]: string },
@@ -74,7 +73,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
74
73
  hideLabel = false,
75
74
  htmlOptions = {},
76
75
  id,
77
- initializeOnce = false,
78
76
  inLine = false,
79
77
  inputAria = {},
80
78
  inputData = {},
@@ -136,7 +134,7 @@ useEffect(() => {
136
134
  yearRange,
137
135
  required: false,
138
136
  }, scrollContainer)
139
- }, initializeOnce ? [] : undefined)
137
+ })
140
138
  const filteredProps = {...props}
141
139
  if (filteredProps.marginBottom === undefined) {
142
140
  filteredProps.marginBottom = "sm"
@@ -43,9 +43,9 @@
43
43
  <% end %>
44
44
  <% end %>
45
45
 
46
- <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
46
+ <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
47
47
  <% initial_items.each do |item| %>
48
- <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
48
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
49
49
  <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
50
50
  <%= pb_rails("table/table_cell") do %>
51
51
  <%= pb_rails("flex", props:{align:"center"}) do %>
@@ -1,4 +1 @@
1
- The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
2
-
3
- - use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
4
- - use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here.
1
+ The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here.
@@ -4,9 +4,7 @@ examples:
4
4
  - draggable_with_list: Draggable with List Kit
5
5
  - draggable_with_selectable_list: Draggable with SelectableList Kit
6
6
  - draggable_with_cards: Draggable with Cards
7
- - draggable_with_table_react: Draggable with Table
8
7
  - draggable_multiple_containers: Dragging Across Multiple Containers
9
-
10
8
  rails:
11
9
  - draggable_default_rails: Default
12
10
  - draggable_with_list_rails: Draggable with List Kit
@@ -2,5 +2,4 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
2
2
  export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
3
3
  export { default as DraggableWithList } from './_draggable_with_list.jsx'
4
4
  export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
5
- export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
6
- export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
5
+ export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
@@ -17,11 +17,10 @@ type DraggableContainerProps = {
17
17
  data?: { [key: string]: string };
18
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string;
20
- tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
21
20
  };
22
21
 
23
22
  const DraggableContainer = (props: DraggableContainerProps) => {
24
- const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
23
+ const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
25
24
 
26
25
  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
27
26
 
@@ -29,8 +28,6 @@ const DraggableContainer = (props: DraggableContainerProps) => {
29
28
  const dataProps = buildDataProps(data);
30
29
  const htmlProps = buildHtmlProps(htmlOptions);
31
30
 
32
- const Tag: React.ReactElement | any = `${tag}`;
33
-
34
31
  const classes = classnames(
35
32
  buildCss("pb_draggable_container"),
36
33
  `${activeContainer === container ? "active" : ""}`,
@@ -39,18 +36,18 @@ const DraggableContainer = (props: DraggableContainerProps) => {
39
36
  );
40
37
 
41
38
  return (
42
- <Tag
39
+ <div
43
40
  {...ariaProps}
44
41
  {...dataProps}
45
42
  {...htmlProps}
46
43
  className={classes}
47
44
  id={id}
48
45
  key={container}
49
- onDragOver={(e: Event) => handleDragOver(e, container)}
46
+ onDragOver={(e) => handleDragOver(e, container)}
50
47
  onDrop={() => handleDrop(container)}
51
48
  >
52
49
  {children}
53
- </Tag>
50
+ </div>
54
51
  );
55
52
  };
56
53
 
@@ -18,11 +18,10 @@ type DraggableItemProps = {
18
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string;
20
20
  dragId?: string;
21
- tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
22
21
  };
23
22
 
24
23
  const DraggableItem = (props: DraggableItemProps) => {
25
- const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, dragId, tag="div" } = props;
24
+ const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, dragId } = props;
26
25
 
27
26
  const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
28
27
  DraggableContext();
@@ -31,8 +30,6 @@ const DraggableItem = (props: DraggableItemProps) => {
31
30
  const dataProps = buildDataProps(data);
32
31
  const htmlProps = buildHtmlProps(htmlOptions);
33
32
 
34
- const Tag: React.ReactElement | any = `${tag}`;
35
-
36
33
  const classes = classnames(
37
34
  buildCss("pb_draggable_item"),
38
35
  `${isDragging === dragId ? "is_dragging" : ""}`,
@@ -41,7 +38,7 @@ const DraggableItem = (props: DraggableItemProps) => {
41
38
  );
42
39
 
43
40
  return (
44
- <Tag
41
+ <div
45
42
  {...ariaProps}
46
43
  {...dataProps}
47
44
  {...htmlProps}
@@ -54,7 +51,7 @@ const DraggableItem = (props: DraggableItemProps) => {
54
51
  onDragStart={() => handleDragStart(dragId, container)}
55
52
  >
56
53
  {children}
57
- </Tag>
54
+ </div>
58
55
  );
59
56
  };
60
57
 
@@ -1,2 +1,3 @@
1
1
  <%= pb_rails("icon_button") %>
2
- <%= pb_rails("icon_button", props: {variant: "link", margin_top: "md" }) %>
2
+ </br>
3
+ <%= pb_rails("icon_button", props: {variant: "link"}) %>
@@ -2,4 +2,6 @@ examples:
2
2
 
3
3
  rails:
4
4
  - icon_button_default: Default
5
- - icon_button_sizes: Sizes
5
+
6
+
7
+
@@ -8,7 +8,7 @@
8
8
  <%= pb_rails("icon", props: { icon: object.icon,
9
9
  fixed_width: true,
10
10
  dark: object.dark,
11
- size: object.size,
11
+ size: "2x",
12
12
  color: "text_lt_default",
13
13
  classname: "icon_button_icon",
14
14
  padding_x: "xxs", padding_y: "xs" }) %>
@@ -14,9 +14,6 @@ module Playbook
14
14
  prop :variant, type: Playbook::Props::Enum,
15
15
  values: %w[default link],
16
16
  default: "default"
17
- prop :size, type: Playbook::Props::Enum,
18
- values: %w[1x 2x 3x 4x 5x 6x 7x 8x 9x 10x xs sm lg],
19
- default: "2x"
20
17
  def classname
21
18
  generate_classname("pb_icon_button_kit", variant)
22
19
  end
@@ -1,3 +1,8 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ data: object.data,
4
+ id: object.id,
5
+ class: object.classname,
6
+ **combined_html_options) do %>
2
7
  <%= react_component("MultiLevelSelect", object.multi_level_select_options) %>
3
8
  <% end %>
@@ -1,9 +1,15 @@
1
1
  <% if object.collapsible %>
2
2
  <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
3
3
  <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
4
- <%= pb_content_tag( object.tag,
5
- href: object.link && object.link,
6
- target: object.link && object.target
4
+ <%= content_tag(object.tag,
5
+ aria: object.aria,
6
+ class: object.classname,
7
+ data: object.data,
8
+ dark: object.dark,
9
+ id: object.id,
10
+ href: object.link && object.link,
11
+ target: object.link && object.target,
12
+ **combined_html_options
7
13
  ) do %>
8
14
  <% if object.image_url %>
9
15
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -14,16 +20,22 @@
14
20
  <span class="pb_nav_list_item_text_collapsible">
15
21
  <%= object.text %>
16
22
  </span>
17
- <% end %>
23
+ <% end %>
18
24
  <% end %>
19
25
  <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
20
26
  <%= content.presence %>
21
27
  <% end %>
22
28
  <% end %>
23
29
  <% else %>
24
- <%= pb_content_tag( object.tag,
25
- href: object.link && object.link,
26
- target: object.link && object.target
30
+ <%= content_tag(object.tag,
31
+ aria: object.aria,
32
+ class: object.classname,
33
+ **combined_html_options,
34
+ data: object.data,
35
+ dark: object.dark,
36
+ id: object.id,
37
+ href: object.link && object.link,
38
+ target: object.link && object.target
27
39
  ) do %>
28
40
  <% if object.image_url %>
29
41
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
@@ -1,7 +1,12 @@
1
- <%= pb_content_tag(:nav) do %>
1
+ <%= content_tag(:nav,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id,
6
+ **combined_html_options) do %>
2
7
  <% if object.title %>
3
- <%= pb_content_tag do %>
4
- <%= pb_content_tag(:a) do %>
8
+ <%= content_tag(:div, class: "pb_nav_list_title") do %>
9
+ <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
5
10
  <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
6
11
  <% end %>
7
12
  <% end %>
@@ -1,2 +1,7 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria.merge!(label: object.status),
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id,
6
+ **combined_html_options) do %>
2
7
  <% end %>
@@ -1,4 +1,9 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id,
6
+ **combined_html_options) do %>
2
7
  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
3
8
  <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
4
9
  <%= content.presence %>
@@ -1,4 +1,9 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria_attributes,
3
+ id: object.id,
4
+ data: object.data,
5
+ class: object.classname,
6
+ **combined_html_options) do %>
2
7
 
3
8
  <div class="progress_pills_status">
4
9
  <% object.with_status do |status| %>
@@ -1,6 +1,13 @@
1
- <%= pb_content_tag do %>
2
- <%= pb_content_tag do %>
3
- <%= pb_content_tag(:div, class: "progress_simple_value", style: object.value_style) do %>
4
- <% end %>
1
+ <%= content_tag(:div,
2
+ class: object.wrapper_classname,
3
+ style: object.style) do %>
4
+ <%= content_tag(:div,
5
+ id: object.id,
6
+ data: object.data_values,
7
+ class: object.classname,
8
+ **combined_html_options) do %>
9
+ <%= content_tag(:div, "",
10
+ class: "progress_simple_value",
11
+ style: object.value_style) %>
5
12
  <% end %>
6
13
  <% end %>
@@ -1,3 +1,7 @@
1
- <%= pb_content_tag(:ul) do %>
1
+ <%= content_tag(:ul,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname,
5
+ **combined_html_options) do %>
2
6
  <%= content.presence %>
3
7
  <% end %>
@@ -1,4 +1,8 @@
1
- <%= pb_content_tag(:li) do %>
1
+ <%= content_tag(:li,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname,
5
+ **combined_html_options) do %>
2
6
  <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
3
7
  <div class="circle">
4
8
  <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
@@ -7,20 +7,26 @@
7
7
  data: object.data,
8
8
  **combined_html_options
9
9
  }) do %>
10
- <%= pb_content_tag(:label,
10
+ <%= content_tag(:label,
11
11
  'data-pb-radio-children': 'true',
12
12
  checked: object.checked,
13
- ) do %>
13
+ class: object.classname,
14
+ id: object.id,
15
+ value: object.value) do %>
14
16
  <%= input %>
15
17
  <span class="pb_radio_button"></span>
16
18
  <% end %>
17
19
  <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
18
20
  <% end %>
19
21
  <% else %>
20
- <%= pb_content_tag(:label,
22
+ <%= content_tag(:label,
23
+ aria: object.aria,
21
24
  checked: object.checked,
25
+ class: object.classname,
26
+ data: object.data,
27
+ id: object.id,
22
28
  value: object.value,
23
- ) do %>
29
+ **combined_html_options) do %>
24
30
 
25
31
  <% if content.present? %>
26
32
  <%= content %>
@@ -31,4 +37,4 @@
31
37
  <span class="pb_radio_button"></span>
32
38
  <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
33
39
  <% end %>
34
- <% end %>
40
+ <% end %>
@@ -34,8 +34,6 @@ examples:
34
34
  - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
35
35
  - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
36
36
  - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
37
- - table_with_clickable_rows: Table with Clickable Rows
38
- - table_with_selectable_rows: Table with Selectable Rows
39
37
 
40
38
  react:
41
39
  - table_sm: Small
@@ -72,5 +70,3 @@ examples:
72
70
  - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
73
71
  - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
74
72
  - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
75
- - table_with_clickable_rows: Table with Clickable Rows
76
- - table_with_selectable_rows: Table with Selectable Rows
@@ -32,6 +32,4 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
32
32
  export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
33
33
  export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
34
34
  export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
35
- export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
36
- export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
37
- export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
35
+ export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
@@ -7,14 +7,11 @@ import {
7
7
  } from "../../utilities/props";
8
8
  import { globalProps } from "../../utilities/globalProps";
9
9
 
10
- import Draggable from "../../pb_draggable/_draggable"
11
-
12
10
  type TableBodyPropTypes = {
13
11
  aria?: { [key: string]: string };
14
12
  children: React.ReactNode[] | React.ReactNode;
15
13
  className: string;
16
14
  data?: { [key: string]: string };
17
- draggableContainer?: boolean;
18
15
  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
19
16
  id?: string;
20
17
  tag?: "table" | "div";
@@ -26,7 +23,6 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
26
23
  children,
27
24
  className,
28
25
  data = {},
29
- draggableContainer = false,
30
26
  htmlOptions = {},
31
27
  id,
32
28
  tag = "table",
@@ -41,30 +37,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
41
37
  return (
42
38
  <>
43
39
  {isTableTag ? (
44
- draggableContainer ? (
45
- <Draggable.Container
46
- {...ariaProps}
47
- {...dataProps}
48
- {...htmlProps}
49
- className={classes}
50
- id={id}
51
- tag="tbody"
52
- >
53
- {children}
54
- </Draggable.Container>
55
- ) : (
56
- <tbody
57
- {...ariaProps}
58
- {...dataProps}
59
- {...htmlProps}
60
- className={classes}
61
- id={id}
62
- >
63
- {children}
64
- </tbody>
65
- )
66
- ) : draggableContainer ? (
67
- <Draggable.Container
40
+ <tbody
68
41
  {...ariaProps}
69
42
  {...dataProps}
70
43
  {...htmlProps}
@@ -72,7 +45,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
72
45
  id={id}
73
46
  >
74
47
  {children}
75
- </Draggable.Container>
48
+ </tbody>
76
49
  ) : (
77
50
  <div
78
51
  {...ariaProps}
@@ -9,7 +9,6 @@ import {
9
9
  import { globalProps } from "../../utilities/globalProps";
10
10
  import Collapsible from "../../pb_collapsible/_collapsible";
11
11
  import useCollapsible from "../../pb_collapsible/useCollapsible";
12
- import Draggable from "../../pb_draggable/_draggable";
13
12
 
14
13
  type TableRowPropTypes = {
15
14
  aria?: { [key: string]: string };
@@ -20,8 +19,6 @@ type TableRowPropTypes = {
20
19
  collapsibleSideHighlight?: boolean;
21
20
  data?: { [key: string]: string };
22
21
  dark?: boolean;
23
- dragId?: string;
24
- draggableItem?: boolean;
25
22
  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
26
23
  id?: string;
27
24
  toggleCellId?: string;
@@ -39,8 +36,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
39
36
  className,
40
37
  data = {},
41
38
  dark = false,
42
- dragId,
43
- draggableItem = false,
44
39
  htmlOptions = {},
45
40
  id,
46
41
  toggleCellId,
@@ -157,38 +152,15 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
157
152
  </>
158
153
  )
159
154
  ) : isTableTag ? (
160
- draggableItem ? (
161
- <Draggable.Item
162
- {...ariaProps}
163
- {...dataProps}
164
- {...htmlProps}
165
- className={classes}
166
- dragId={dragId}
167
- tag="tr"
168
- >
169
- {children}
170
- </Draggable.Item>
171
- ) : (
172
- <tr
173
- {...ariaProps}
174
- {...dataProps}
175
- {...htmlProps}
176
- className={classes}
177
- id={id}
178
- >
179
- {children}
180
- </tr>
181
- )
182
- ) : draggableItem ? (
183
- <Draggable.Item
155
+ <tr
184
156
  {...ariaProps}
185
157
  {...dataProps}
186
158
  {...htmlProps}
187
159
  className={classes}
188
- dragId={dragId}
160
+ id={id}
189
161
  >
190
162
  {children}
191
- </Draggable.Item>
163
+ </tr>
192
164
  ) : (
193
165
  <div
194
166
  {...ariaProps}
@@ -1,17 +1,11 @@
1
1
  <% if object.tag == "table" %>
2
- <% if object.draggable_container %>
3
- <%= pb_rails("draggable/draggable_container", props: { tag: "tbody", classname: object.classname, data: object.data }) do %>
4
- <%= content.presence %>
5
- <% end %>
6
- <% else %>
7
- <%= content_tag(:tbody,
8
- aria: object.aria,
9
- class: object.classname,
10
- data: object.data,
11
- id: object.id,
12
- **combined_html_options) do %>
13
- <%= content.presence %>
14
- <% end %>
2
+ <%= content_tag(:tbody,
3
+ aria: object.aria,
4
+ class: object.classname,
5
+ data: object.data,
6
+ id: object.id,
7
+ **combined_html_options) do %>
8
+ <%= content.presence %>
15
9
  <% end %>
16
10
  <% else %>
17
11
  <%= content_tag(:div,
@@ -6,8 +6,6 @@ module Playbook
6
6
  prop :tag, type: Playbook::Props::Enum,
7
7
  values: %w[table div],
8
8
  default: "table"
9
- prop :draggable_container, type: Playbook::Props::Boolean,
10
- default: false
11
9
 
12
10
  def classname
13
11
  generate_classname("pb_table_tbody")
@@ -18,19 +18,13 @@
18
18
  <% end %>
19
19
  </tr>
20
20
  <% elsif object.tag == "table" %>
21
- <% if object.draggable_item %>
22
- <%= pb_rails("draggable/draggable_item", props:{ drag_id: object.drag_id, tag: "tr", classname: object.classname, data: object.data }) do %>
23
- <%= content.presence %>
24
- <% end %>
25
- <% else %>
26
- <%= content_tag(:tr,
27
- aria: object.aria,
28
- class: object.classname,
29
- data: object.data,
30
- id: object.id,
31
- **combined_html_options) do %>
32
- <%= content.presence %>
33
- <% end %>
21
+ <%= content_tag(:tr,
22
+ aria: object.aria,
23
+ class: object.classname,
24
+ data: object.data,
25
+ id: object.id,
26
+ **combined_html_options) do %>
27
+ <%= content.presence %>
34
28
  <% end %>
35
29
  <% else %>
36
30
  <%= content_tag(:div,
@@ -13,10 +13,6 @@ module Playbook
13
13
  prop :collapsible_content
14
14
  prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
15
15
  default: true
16
- prop :draggable_item, type: Playbook::Props::Boolean,
17
- default: false
18
- prop :drag_id, type: Playbook::Props::String,
19
- default: nil
20
16
 
21
17
  def classname
22
18
  generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
@@ -27,20 +27,6 @@
27
27
  placeholder: "123-45-6789"
28
28
  }) %>
29
29
 
30
- <%= pb_rails("text_input", props: {
31
- label: "Credit Card",
32
- mask: "credit_card",
33
- margin_bottom: "md",
34
- placeholder: "1234 5678 9012 3456"
35
- }) %>
36
-
37
- <%= pb_rails("text_input", props: {
38
- label: "CVV",
39
- mask: "cvv",
40
- margin_bottom: "md",
41
- placeholder: "123"
42
- }) %>
43
-
44
30
  <%= pb_rails("title" , props: {
45
31
  text: "Hidden Input Under The Hood",
46
32
  padding_bottom: "sm"