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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -6
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +12 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +9 -3
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +45 -3
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +16 -9
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +19 -44
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md +3 -21
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +21 -16
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +19 -2
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_drawer/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +3 -8
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx +1 -4
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx +1 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
- data/dist/playbook-doc.js +1 -1
- metadata +3 -36
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx +0 -50
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx +0 -60
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.md +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +0 -78
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx +0 -53
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx +0 -52
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_no_subrows.json +0 -42
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_with_id.json +0 -299
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames.html.erb +0 -13
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames_rails.md +0 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +0 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb +0 -38
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +0 -3
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx +0 -38
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +0 -3
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb +0 -15
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +0 -24
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +0 -74
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +0 -74
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb +0 -47
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md +0 -2
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +0 -46
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md +0 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +0 -19
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +0 -27
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md +0 -1
- /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,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.
|
File without changes
|