playbook_ui_docs 14.11.1.pre.alpha.PBNTR440enableglobalpropspbformwith5624 → 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +0 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +2 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -5
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -6
  7. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +12 -1
  8. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -1
  10. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +9 -3
  11. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -1
  12. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +45 -3
  13. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +1 -0
  14. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +16 -9
  15. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +19 -44
  16. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md +3 -21
  17. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +21 -16
  18. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +19 -2
  19. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -2
  20. data/app/pb_kits/playbook/pb_drawer/docs/index.js +0 -1
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -1
  22. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
  23. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
  24. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +3 -8
  25. data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx +1 -4
  26. data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx +1 -4
  27. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
  28. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -3
  29. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -2
  30. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
  31. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
  32. data/dist/playbook-doc.js +1 -1
  33. metadata +3 -36
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx +0 -50
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx +0 -60
  36. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.md +0 -5
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +0 -78
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.md +0 -1
  39. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx +0 -53
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.md +0 -1
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx +0 -52
  42. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.md +0 -1
  43. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_no_subrows.json +0 -42
  44. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_with_id.json +0 -299
  45. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames.html.erb +0 -13
  46. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames_rails.md +0 -3
  47. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +0 -5
  48. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb +0 -38
  49. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +0 -3
  50. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx +0 -38
  51. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +0 -3
  52. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +0 -7
  53. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb +0 -15
  54. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +0 -24
  55. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md +0 -1
  56. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +0 -74
  57. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +0 -3
  58. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +0 -74
  59. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +0 -3
  60. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb +0 -47
  61. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md +0 -2
  62. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +0 -46
  63. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md +0 -3
  64. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +0 -19
  65. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +0 -27
  66. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md +0 -1
  67. /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_react.md → _table_with_collapsible.md} +0 -0
@@ -1,47 +0,0 @@
1
- <% content = capture do %>
2
- <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
3
- <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
4
- <% end %>
5
- <% end %>
6
-
7
- <%= pb_rails("table", props: { size: "sm" }) do %>
8
- <%= pb_rails("table/table_head") do %>
9
- <%= pb_rails("table/table_row") do %>
10
- <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
11
- <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
12
- <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
13
- <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
14
- <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
15
- <%= pb_rails("table/table_header", props: { text: ""}) %>
16
- <% end %>
17
- <% end %>
18
- <%= pb_rails("table/table_body") do %>
19
- <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "1" }) do %>
20
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
21
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
22
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
23
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
24
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
25
- <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
26
- <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
27
- <% end %>
28
- <% end %>
29
- <%= pb_rails("table/table_row") do %>
30
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
31
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
32
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
33
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
34
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
35
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
36
- <% end %>
37
- <%= pb_rails("table/table_row") do %>
38
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
39
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
40
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
41
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
42
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
43
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
44
- <% end %>
45
- <% end %>
46
- <% end %>
47
-
@@ -1,2 +0,0 @@
1
- The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
2
- Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
@@ -1,46 +0,0 @@
1
- <%= pb_rails("text_input", props: {
2
- label: "Currency",
3
- mask: "currency",
4
- margin_bottom: "md",
5
- name: "currency_name",
6
- placeholder:"$0.00"
7
- }) %>
8
-
9
- <%= pb_rails("text_input", props: {
10
- label: "ZIP Code",
11
- mask: "zip_code",
12
- margin_bottom: "md",
13
- placeholder: "12345"
14
- }) %>
15
-
16
- <%= pb_rails("text_input", props: {
17
- label: "Postal Code",
18
- mask: "postal_code",
19
- placeholder: "12345-6789",
20
- margin_bottom: "md",
21
- }) %>
22
-
23
- <%= pb_rails("text_input", props: {
24
- label: "SSN",
25
- mask: "ssn",
26
- margin_bottom: "md",
27
- placeholder: "123-45-6789"
28
- }) %>
29
-
30
- <%= pb_rails("title" , props: {
31
- text: "Hidden Input Under The Hood",
32
- padding_bottom: "sm"
33
- })%>
34
-
35
- <%= pb_rails("text_input", props: {
36
- label: "Currency",
37
- mask: "currency",
38
- margin_bottom: "md",
39
- name: "currency_name",
40
- id: "example-currency",
41
- placeholder: "$0.00",
42
- }) %>
43
-
44
- <style>
45
- #example-currency-sanitized {display: flex !important;}
46
- </style>
@@ -1,3 +0,0 @@
1
- The mask prop lets you style your inputs while maintaining the value that the user typed in.
2
-
3
- It uses a hidden input field to submit the unformatted value as it will have the proper `name` attribute. It will also copy the id field with a `"#{your-id-sanitized}"`
@@ -1,19 +0,0 @@
1
- <%
2
- names = [
3
- { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
4
- { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
5
- { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
6
- { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
7
- { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
8
- ]
9
- %>
10
-
11
- <%= pb_rails("typeahead", props: {
12
- html_options: { style: { maxWidth: "240px" }},
13
- id: "typeahead-form-pill",
14
- is_multi: true,
15
- options: names,
16
- label: "Truncation Within Typeahead",
17
- pills: true,
18
- truncate: 1,
19
- }) %>
@@ -1,27 +0,0 @@
1
- import React from 'react'
2
- import { Typeahead } from 'playbook-ui'
3
-
4
- const names = [
5
- { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
6
- { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
7
- { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
8
- { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
9
- { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
10
- ]
11
-
12
- const TypeaheadTruncatedText = (props) => {
13
- return (
14
- <>
15
- <Typeahead
16
- htmlOptions={{ style: { maxWidth: "240px" }}}
17
- isMulti
18
- label="Truncation Within Typeahead"
19
- options={names}
20
- truncate={1}
21
- {...props}
22
- />
23
- </>
24
- )
25
- }
26
-
27
- export default TypeaheadTruncatedText
@@ -1 +0,0 @@
1
- For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.