playbook_ui_docs 15.5.0 → 15.6.0.pre.alpha.PLAY2686contactkittextonly13049
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/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +0 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_light.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +0 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +0 -3
- data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb +33 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx +46 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md +2 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md +2 -0
- data/app/pb_kits/playbook/pb_contact/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_contact/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +31 -0
- data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx +180 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md +22 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +42 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +34 -4
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +16 -7
- data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.md +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb +16 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx +30 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx +134 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.html.erb +101 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md +33 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.jsx +180 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb +122 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md +1 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md +1 -1
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb +60 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx +118 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md +1 -1
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb +30 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx +37 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +2 -1
- metadata +28 -2
data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<% users = [
|
|
2
|
+
{ id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 1) },
|
|
3
|
+
{ id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 2) },
|
|
4
|
+
{ id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 3) },
|
|
5
|
+
{ id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 4) },
|
|
6
|
+
{ id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 5) },
|
|
7
|
+
{ id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 6) },
|
|
8
|
+
{ id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 7) },
|
|
9
|
+
{ id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 8) },
|
|
10
|
+
{ id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 9) },
|
|
11
|
+
{ id: 10, name: "Sarah", title: "Senior Product Manager", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 10) },
|
|
12
|
+
{ id: 11, name: "Michael", title: "Software Engineer III", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 11) },
|
|
13
|
+
{ id: 12, name: "Emma", title: "Data Analyst II", department: "Customer Development", branch: "Philadelphia", start_date: Date.new(2025, 1, 12) },
|
|
14
|
+
{ id: 13, name: "David", title: "QA Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 13) },
|
|
15
|
+
{ id: 14, name: "Lisa", title: "UX Researcher", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 14) },
|
|
16
|
+
{ id: 15, name: "James", title: "DevOps Engineer", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 15) },
|
|
17
|
+
{ id: 16, name: "Anna", title: "Product Designer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 16) },
|
|
18
|
+
{ id: 17, name: "Robert", title: "Backend Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 17) },
|
|
19
|
+
{ id: 18, name: "Maria", title: "Frontend Developer", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 18) },
|
|
20
|
+
{ id: 19, name: "William", title: "Tech Lead", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 19) },
|
|
21
|
+
{ id: 20, name: "Jessica", title: "Scrum Master", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 20) },
|
|
22
|
+
{ id: 21, name: "Daniel", title: "Software Architect", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 21) },
|
|
23
|
+
{ id: 22, name: "Laura", title: "Business Analyst", department: "Customer Development", branch: "Philadelphia", start_date: Date.new(2025, 1, 22) },
|
|
24
|
+
{ id: 23, name: "Chris", title: "Security Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 23) },
|
|
25
|
+
{ id: 24, name: "Ashley", title: "UX Engineer III", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 24) },
|
|
26
|
+
{ id: 25, name: "Kevin", title: "Platform Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 25) },
|
|
27
|
+
{ id: 26, name: "Michelle", title: "Content Designer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 26) },
|
|
28
|
+
] %>
|
|
29
|
+
|
|
30
|
+
<% filter_content =
|
|
31
|
+
pb_rails("text_input", props: {
|
|
32
|
+
label: "Territory ID",
|
|
33
|
+
placeholder: "Enter Territory ID"
|
|
34
|
+
}) +
|
|
35
|
+
pb_rails("typeahead", props: {
|
|
36
|
+
label: "Title",
|
|
37
|
+
options: [
|
|
38
|
+
{ label: "Senior UX Engineer", value: "senior-ux-engineer" },
|
|
39
|
+
{ label: "UX Engineer", value: "ux-engineer" },
|
|
40
|
+
{ label: "UX Designer", value: "ux-designer" }
|
|
41
|
+
]
|
|
42
|
+
}) +
|
|
43
|
+
pb_rails("select", props: {
|
|
44
|
+
blank_selection: "All Departments",
|
|
45
|
+
label: "Department",
|
|
46
|
+
options: [
|
|
47
|
+
{ value: "Business Technology", text: "Business Technology" },
|
|
48
|
+
{ value: "Customer Development", text: "Customer Development" },
|
|
49
|
+
{ value: "Talent Acquisition", text: "Talent Acquisition" }
|
|
50
|
+
]
|
|
51
|
+
}) +
|
|
52
|
+
pb_rails("dropdown", props: {
|
|
53
|
+
label: "Branch",
|
|
54
|
+
options: [
|
|
55
|
+
{ label: "Philadelphia", value: "philadelphia" },
|
|
56
|
+
{ label: "New York", value: "new-york" },
|
|
57
|
+
{ label: "Austin", value: "austin" }
|
|
58
|
+
]
|
|
59
|
+
}) +
|
|
60
|
+
pb_rails("date_picker", props: {
|
|
61
|
+
label: "Start Date",
|
|
62
|
+
padding_y: "sm",
|
|
63
|
+
picker_id: "startedOn"
|
|
64
|
+
}) +
|
|
65
|
+
pb_rails("flex", props: { spacing: "between" }) do
|
|
66
|
+
pb_rails("button", props: {
|
|
67
|
+
text: "Filter",
|
|
68
|
+
}) +
|
|
69
|
+
pb_rails("button", props: {
|
|
70
|
+
text: "Defaults",
|
|
71
|
+
variant: "secondary"
|
|
72
|
+
})
|
|
73
|
+
end
|
|
74
|
+
%>
|
|
75
|
+
|
|
76
|
+
<%# Replace "model" in pagination here with your specific data source %>
|
|
77
|
+
<% pagination_element = pb_rails("pagination", props: { model: @users, view: self, padding_y:"xs", margin_left:"lg" }) %>
|
|
78
|
+
|
|
79
|
+
<%= pb_rails("table", props: {
|
|
80
|
+
variant: "with_filter",
|
|
81
|
+
title: "Table Title Here",
|
|
82
|
+
filter_content: filter_content,
|
|
83
|
+
pagination: pagination_element,
|
|
84
|
+
filter_props: {
|
|
85
|
+
id: "user-table-filters-2",
|
|
86
|
+
results: users.length,
|
|
87
|
+
sort_menu: [
|
|
88
|
+
{ item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
|
|
89
|
+
{ item: "First Name", link: "?q[sorts]=name+asc", active: false },
|
|
90
|
+
{ item: "Title", link: "?q[sorts]=title+asc", active: false },
|
|
91
|
+
{ item: "Department", link: "?q[sorts]=department+asc", active: false },
|
|
92
|
+
{ item: "Branch", link: "?q[sorts]=branch+asc", active: false },
|
|
93
|
+
{ item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
|
|
94
|
+
],
|
|
95
|
+
}
|
|
96
|
+
}) do %>
|
|
97
|
+
<%= pb_rails("table/table_head") do %>
|
|
98
|
+
<%= pb_rails("table/table_row") do %>
|
|
99
|
+
<%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
|
|
100
|
+
<%= pb_rails("table/table_header", props: { text: "Name" }) %>
|
|
101
|
+
<%= pb_rails("table/table_header", props: { text: "Title" }) %>
|
|
102
|
+
<%= pb_rails("table/table_header", props: { text: "Department" }) %>
|
|
103
|
+
<%= pb_rails("table/table_header", props: { text: "Branch" }) %>
|
|
104
|
+
<%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
|
|
105
|
+
<% end %>
|
|
106
|
+
<% end %>
|
|
107
|
+
|
|
108
|
+
<%= pb_rails("table/table_body") do %>
|
|
109
|
+
<% users.each do |user| %>
|
|
110
|
+
<%= pb_rails("table/table_row") do %>
|
|
111
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
|
|
112
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
|
|
113
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
|
|
114
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
|
|
115
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
|
|
116
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
|
|
117
|
+
<%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>
|
|
118
|
+
<% end %>
|
|
119
|
+
<% end %>
|
|
120
|
+
<% end %>
|
|
121
|
+
<% end %>
|
|
122
|
+
<% end %>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The `with_filter` variant can also be used with the Pagination kit as shown here. Simply set up your Pagination as normal, and pass the Pagination kit to the prop `pagination` as shown.
|
|
2
|
+
|
|
3
|
+
**IMPORTANT NOTE**: This is NOT a working example of pagination, please set up your use case with the relevant data in your controller. For more information on the Pagination Kit and how to use it, see the documentation [here](https://playbook.powerapp.cloud/kits/pagination/rails)
|
|
@@ -40,6 +40,8 @@ examples:
|
|
|
40
40
|
- table_with_selectable_rows: Table with Selectable Rows
|
|
41
41
|
- table_with_header_style_borderless: Header Style Borderless
|
|
42
42
|
- table_with_header_style_floating: Header Style Floating
|
|
43
|
+
- table_with_filter_variant_rails: Variant with Filter
|
|
44
|
+
- table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
|
|
43
45
|
|
|
44
46
|
react:
|
|
45
47
|
- table_sm: Small
|
|
@@ -81,3 +83,5 @@ examples:
|
|
|
81
83
|
- table_with_selectable_rows: Table with Selectable Rows
|
|
82
84
|
- table_with_header_style_borderless: Header Style Borderless
|
|
83
85
|
- table_with_header_style_floating: Header Style Floating
|
|
86
|
+
- table_with_filter_variant: Variant with Filter
|
|
87
|
+
- table_with_filter_variant_with_pagination: Variant with Filter and Pagination
|
|
@@ -38,3 +38,5 @@ export { default as TableWithSelectableRows } from './_table_with_selectable_row
|
|
|
38
38
|
export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
|
|
39
39
|
export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
|
|
40
40
|
export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
|
|
41
|
+
export { default as TableWithFilterVariant } from './_table_with_filter_variant.jsx'
|
|
42
|
+
export { default as TableWithFilterVariantWithPagination } from './_table_with_filter_variant_with_pagination.jsx'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Text Input w/ Error shows that the
|
|
1
|
+
Text Input w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Textarea w/ Error shows that the
|
|
1
|
+
Textarea w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
|
|
2
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
|
|
3
|
+
<%= pb_rails("title_detail", props: {
|
|
4
|
+
title: "Jackson Heights",
|
|
5
|
+
detail: "37-27 74th Street"
|
|
6
|
+
}) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
|
|
9
|
+
<%= pb_rails("title_detail", props: {
|
|
10
|
+
title: "Greenpoint",
|
|
11
|
+
detail: "81 Gate St Brooklyn"
|
|
12
|
+
}) %>
|
|
13
|
+
<% end %>
|
|
14
|
+
<%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
|
|
15
|
+
<% item.label do %>
|
|
16
|
+
<%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<% item.step do %>
|
|
19
|
+
<%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
|
|
20
|
+
<% end %>
|
|
21
|
+
<% item.detail do %>
|
|
22
|
+
<%= pb_rails("title_detail", props: {
|
|
23
|
+
title: "Society Hill",
|
|
24
|
+
detail: "72 E St Astoria"
|
|
25
|
+
}) %>
|
|
26
|
+
<% end %>
|
|
27
|
+
<% end %>
|
|
28
|
+
<% end %>
|
|
29
|
+
|
|
30
|
+
<br /><br /><br />
|
|
31
|
+
|
|
32
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
|
|
33
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
|
|
34
|
+
<%= pb_rails("title_detail", props: {
|
|
35
|
+
title: "Jackson Heights",
|
|
36
|
+
detail: "37-27 74th Street"
|
|
37
|
+
}) %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
|
|
40
|
+
<%= pb_rails("title_detail", props: {
|
|
41
|
+
title: "Greenpoint",
|
|
42
|
+
detail: "81 Gate St Brooklyn"
|
|
43
|
+
}) %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
|
|
46
|
+
<% item.label do %>
|
|
47
|
+
<%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
|
|
48
|
+
<% end %>
|
|
49
|
+
<% item.step do %>
|
|
50
|
+
<%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% item.detail do %>
|
|
53
|
+
<%= pb_rails("title_detail", props: {
|
|
54
|
+
title: "Society Hill",
|
|
55
|
+
detail: "72 E St Astoria"
|
|
56
|
+
}) %>
|
|
57
|
+
<% end %>
|
|
58
|
+
<% end %>
|
|
59
|
+
<% end %>
|
|
60
|
+
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Timeline from '../_timeline'
|
|
4
|
+
import TitleDetail from '../../pb_title_detail/_title_detail'
|
|
5
|
+
|
|
6
|
+
const TimelineShowCurrentYear = (props) => (
|
|
7
|
+
<div>
|
|
8
|
+
<Timeline
|
|
9
|
+
orientation="horizontal"
|
|
10
|
+
showDate
|
|
11
|
+
{...props}
|
|
12
|
+
>
|
|
13
|
+
<Timeline.Item
|
|
14
|
+
date={new Date()}
|
|
15
|
+
icon="user"
|
|
16
|
+
iconColor="royal"
|
|
17
|
+
showCurrentYear
|
|
18
|
+
{...props}
|
|
19
|
+
>
|
|
20
|
+
<TitleDetail
|
|
21
|
+
detail="37-27 74th Street"
|
|
22
|
+
title="Jackson Heights"
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
</Timeline.Item>
|
|
26
|
+
<Timeline.Item
|
|
27
|
+
icon="check"
|
|
28
|
+
iconColor="teal"
|
|
29
|
+
lineStyle="dotted"
|
|
30
|
+
{...props}
|
|
31
|
+
>
|
|
32
|
+
<TitleDetail
|
|
33
|
+
detail="81 Gate St Brooklyn"
|
|
34
|
+
title="Greenpoint"
|
|
35
|
+
{...props}
|
|
36
|
+
/>
|
|
37
|
+
</Timeline.Item>
|
|
38
|
+
<Timeline.Item
|
|
39
|
+
lineStyle="solid"
|
|
40
|
+
{...props}
|
|
41
|
+
>
|
|
42
|
+
<Timeline.Label
|
|
43
|
+
date={new Date()}
|
|
44
|
+
showCurrentYear
|
|
45
|
+
/>
|
|
46
|
+
<Timeline.Step
|
|
47
|
+
icon="map-marker-alt"
|
|
48
|
+
iconColor="purple"
|
|
49
|
+
/>
|
|
50
|
+
<Timeline.Detail>
|
|
51
|
+
<TitleDetail
|
|
52
|
+
detail="72 E St Astoria"
|
|
53
|
+
title="Society Hill"
|
|
54
|
+
{...props}
|
|
55
|
+
/>
|
|
56
|
+
</Timeline.Detail>
|
|
57
|
+
</Timeline.Item>
|
|
58
|
+
</Timeline>
|
|
59
|
+
|
|
60
|
+
<br />
|
|
61
|
+
<br />
|
|
62
|
+
<br />
|
|
63
|
+
|
|
64
|
+
<Timeline
|
|
65
|
+
orientation="vertical"
|
|
66
|
+
showDate
|
|
67
|
+
{...props}
|
|
68
|
+
>
|
|
69
|
+
<Timeline.Item
|
|
70
|
+
date={new Date()}
|
|
71
|
+
icon="user"
|
|
72
|
+
iconColor="royal"
|
|
73
|
+
showCurrentYear
|
|
74
|
+
{...props}
|
|
75
|
+
>
|
|
76
|
+
<TitleDetail
|
|
77
|
+
detail="37-27 74th Street"
|
|
78
|
+
title="Jackson Heights"
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
</Timeline.Item>
|
|
82
|
+
<Timeline.Item
|
|
83
|
+
icon="check"
|
|
84
|
+
iconColor="teal"
|
|
85
|
+
lineStyle="dotted"
|
|
86
|
+
{...props}
|
|
87
|
+
>
|
|
88
|
+
<TitleDetail
|
|
89
|
+
detail="81 Gate St Brooklyn"
|
|
90
|
+
title="Greenpoint"
|
|
91
|
+
{...props}
|
|
92
|
+
/>
|
|
93
|
+
</Timeline.Item>
|
|
94
|
+
<Timeline.Item
|
|
95
|
+
lineStyle="solid"
|
|
96
|
+
{...props}
|
|
97
|
+
>
|
|
98
|
+
<Timeline.Label
|
|
99
|
+
date={new Date()}
|
|
100
|
+
showCurrentYear
|
|
101
|
+
/>
|
|
102
|
+
<Timeline.Step
|
|
103
|
+
icon="map-marker-alt"
|
|
104
|
+
iconColor="purple"
|
|
105
|
+
/>
|
|
106
|
+
<Timeline.Detail>
|
|
107
|
+
<TitleDetail
|
|
108
|
+
detail="72 E St Astoria"
|
|
109
|
+
title="Society Hill"
|
|
110
|
+
{...props}
|
|
111
|
+
/>
|
|
112
|
+
</Timeline.Detail>
|
|
113
|
+
</Timeline.Item>
|
|
114
|
+
</Timeline>
|
|
115
|
+
</div>
|
|
116
|
+
)
|
|
117
|
+
|
|
118
|
+
export default TimelineShowCurrentYear
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
By default, the Timeline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true. Pass it to `Timeline.Item`/`timeline/item` when using its `date` prop, or to `Timeline.Label`/`timeline/label` if following the "With Children" pattern.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use the optional `showDate` prop to render the timeline kit with a visible date.
|
|
1
|
+
Use the optional `showDate` prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.
|
|
@@ -5,6 +5,7 @@ examples:
|
|
|
5
5
|
- timeline_vertical: Vertical
|
|
6
6
|
- timeline_with_date: With Date
|
|
7
7
|
- timeline_with_children: With Children
|
|
8
|
+
- timeline_show_current_year: Show Current Year
|
|
8
9
|
- timeline_with_gap: With Gap
|
|
9
10
|
|
|
10
11
|
|
|
@@ -13,4 +14,5 @@ examples:
|
|
|
13
14
|
- timeline_vertical: Vertical
|
|
14
15
|
- timeline_with_date: With Date
|
|
15
16
|
- timeline_with_children: With Children
|
|
17
|
+
- timeline_show_current_year: Show Current Year
|
|
16
18
|
- timeline_with_gap: With Gap
|
|
@@ -3,4 +3,5 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
|
|
|
3
3
|
export { default as TimelineWithDate } from './_timeline_with_date.jsx'
|
|
4
4
|
export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
|
|
5
5
|
export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
|
|
6
|
+
export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'
|
|
6
7
|
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
4
|
+
{ label: 'Red', value: '#FF0000' },
|
|
5
|
+
{ label: 'Green', value: '#00FF00' },
|
|
6
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
7
|
+
{ label: 'Yellow', value: '#FFFF00' },
|
|
8
|
+
{ label: 'Purple', value: '#800080' },
|
|
9
|
+
{ label: 'Cyan', value: '#00FFFF' },
|
|
10
|
+
{ label: 'Magenta', value: '#FF00FF' }
|
|
11
|
+
]
|
|
12
|
+
%>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("typeahead", props: {
|
|
15
|
+
id: "typeahead-input-display-none",
|
|
16
|
+
label: "With Input Display None",
|
|
17
|
+
options: options,
|
|
18
|
+
name: :foo,
|
|
19
|
+
input_display: "none",
|
|
20
|
+
})
|
|
21
|
+
%>
|
|
22
|
+
<br/>
|
|
23
|
+
<%= pb_rails("typeahead", props: {
|
|
24
|
+
id: "typeahead-input-display-pills",
|
|
25
|
+
label: "With Input Display Pills (Default)",
|
|
26
|
+
options: options,
|
|
27
|
+
name: :foo,
|
|
28
|
+
pills: true,
|
|
29
|
+
})
|
|
30
|
+
%>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Typeahead from '../_typeahead'
|
|
4
|
+
|
|
5
|
+
const options = [
|
|
6
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
7
|
+
{ label: 'Red', value: '#FF0000' },
|
|
8
|
+
{ label: 'Green', value: '#00FF00' },
|
|
9
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
10
|
+
{ label: 'Yellow', value: '#FFFF00' },
|
|
11
|
+
{ label: 'Purple', value: '#800080' },
|
|
12
|
+
{ label: 'Cyan', value: '#00FFFF' },
|
|
13
|
+
{ label: 'Magenta', value: '#FF00FF' }
|
|
14
|
+
]
|
|
15
|
+
|
|
16
|
+
const TypeaheadInputDisplay = (props) => {
|
|
17
|
+
return (
|
|
18
|
+
<>
|
|
19
|
+
<Typeahead
|
|
20
|
+
inputDisplay="none"
|
|
21
|
+
isMulti
|
|
22
|
+
label="With Input Display None"
|
|
23
|
+
options={options}
|
|
24
|
+
{...props}
|
|
25
|
+
/>
|
|
26
|
+
<br/>
|
|
27
|
+
<Typeahead
|
|
28
|
+
isMulti
|
|
29
|
+
label="With Input Display Pills (Default)"
|
|
30
|
+
options={options}
|
|
31
|
+
{...props}
|
|
32
|
+
/>
|
|
33
|
+
</>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export default TypeaheadInputDisplay
|
|
@@ -5,6 +5,7 @@ examples:
|
|
|
5
5
|
- typeahead_default_options: With Default Options
|
|
6
6
|
- typeahead_with_context: With Context
|
|
7
7
|
- typeahead_with_pills: With Pills
|
|
8
|
+
- typeahead_input_display: Input Display
|
|
8
9
|
- typeahead_without_pills: Without Pills (Single Select)
|
|
9
10
|
- typeahead_with_pills_async: With Pills (Async Data)
|
|
10
11
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
|
@@ -26,6 +27,7 @@ examples:
|
|
|
26
27
|
- typeahead_react_hook: React Hook
|
|
27
28
|
- typeahead_with_highlight: With Highlight
|
|
28
29
|
- typeahead_with_pills: With Pills
|
|
30
|
+
- typeahead_input_display: Input Display
|
|
29
31
|
- typeahead_with_pills_async: With Pills (Async Data)
|
|
30
32
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
|
31
33
|
- typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
|
|
@@ -17,4 +17,5 @@ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
|
|
|
17
17
|
export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
|
|
18
18
|
export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
|
|
19
19
|
export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
|
|
20
|
-
export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
|
|
20
|
+
export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
|
|
21
|
+
export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 15.
|
|
4
|
+
version: 15.6.0.pre.alpha.PLAY2686contactkittextonly13049
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-
|
|
12
|
+
date: 2025-12-12 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -220,6 +220,7 @@ files:
|
|
|
220
220
|
- app/pb_kits/playbook/pb_background/docs/_background_image.md
|
|
221
221
|
- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
|
|
222
222
|
- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
|
|
223
|
+
- app/pb_kits/playbook/pb_background/docs/_background_light.md
|
|
223
224
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
|
|
224
225
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
|
|
225
226
|
- app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
|
|
@@ -527,6 +528,10 @@ files:
|
|
|
527
528
|
- app/pb_kits/playbook/pb_contact/docs/_contact_default.md
|
|
528
529
|
- app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md
|
|
529
530
|
- app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md
|
|
531
|
+
- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb
|
|
532
|
+
- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx
|
|
533
|
+
- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md
|
|
534
|
+
- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md
|
|
530
535
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
|
|
531
536
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx
|
|
532
537
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail_swift.md
|
|
@@ -855,6 +860,8 @@ files:
|
|
|
855
860
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
|
|
856
861
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
|
|
857
862
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
|
863
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx
|
|
864
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md
|
|
858
865
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
|
|
859
866
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
|
|
860
867
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
|
|
@@ -1524,6 +1531,8 @@ files:
|
|
|
1524
1531
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
|
|
1525
1532
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
|
|
1526
1533
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
|
|
1534
|
+
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
|
|
1535
|
+
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
|
|
1527
1536
|
- app/pb_kits/playbook/pb_multiple_users/docs/example.yml
|
|
1528
1537
|
- app/pb_kits/playbook/pb_multiple_users/docs/index.js
|
|
1529
1538
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md
|
|
@@ -2056,6 +2065,9 @@ files:
|
|
|
2056
2065
|
- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx
|
|
2057
2066
|
- app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb
|
|
2058
2067
|
- app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx
|
|
2068
|
+
- app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb
|
|
2069
|
+
- app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx
|
|
2070
|
+
- app/pb_kits/playbook/pb_select/docs/_select_input_options.md
|
|
2059
2071
|
- app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb
|
|
2060
2072
|
- app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx
|
|
2061
2073
|
- app/pb_kits/playbook/pb_select/docs/_select_multiple.md
|
|
@@ -2299,6 +2311,14 @@ files:
|
|
|
2299
2311
|
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx
|
|
2300
2312
|
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md
|
|
2301
2313
|
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md
|
|
2314
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx
|
|
2315
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md
|
|
2316
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.html.erb
|
|
2317
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md
|
|
2318
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.jsx
|
|
2319
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md
|
|
2320
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb
|
|
2321
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md
|
|
2302
2322
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
|
|
2303
2323
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
|
|
2304
2324
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
|
|
@@ -2403,6 +2423,9 @@ files:
|
|
|
2403
2423
|
- app/pb_kits/playbook/pb_timeline/docs/_description.md
|
|
2404
2424
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
|
|
2405
2425
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
|
|
2426
|
+
- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb
|
|
2427
|
+
- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx
|
|
2428
|
+
- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md
|
|
2406
2429
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
|
|
2407
2430
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
|
|
2408
2431
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
|
|
@@ -2574,6 +2597,9 @@ files:
|
|
|
2574
2597
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
|
|
2575
2598
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
|
|
2576
2599
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
|
|
2600
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb
|
|
2601
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx
|
|
2602
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md
|
|
2577
2603
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
|
|
2578
2604
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
|
|
2579
2605
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|