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.
Files changed (60) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +1 -1
  4. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +0 -1
  5. data/app/pb_kits/playbook/pb_background/docs/_background_light.md +1 -0
  6. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -2
  7. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  8. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +0 -1
  10. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +0 -3
  11. data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb +33 -0
  12. data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx +46 -0
  13. data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md +2 -0
  14. data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md +2 -0
  15. data/app/pb_kits/playbook/pb_contact/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_contact/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +31 -0
  18. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +1 -1
  19. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx +180 -0
  20. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md +22 -0
  21. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +3 -2
  22. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  23. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb +1 -1
  24. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +42 -0
  25. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -0
  26. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +1 -0
  27. data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +34 -4
  29. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +16 -7
  30. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md +1 -1
  31. data/app/pb_kits/playbook/pb_select/docs/_select_error.md +1 -1
  32. data/app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb +16 -0
  33. data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx +30 -0
  34. data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md +1 -0
  35. data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
  36. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  37. data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx +134 -0
  38. data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md +34 -0
  39. data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.html.erb +101 -0
  40. data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md +33 -0
  41. data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.jsx +180 -0
  42. data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md +3 -0
  43. data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb +122 -0
  44. data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md +3 -0
  45. data/app/pb_kits/playbook/pb_table/docs/example.yml +4 -0
  46. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
  47. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md +1 -1
  48. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md +1 -1
  49. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb +60 -0
  50. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx +118 -0
  51. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md +1 -0
  52. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md +1 -1
  53. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -0
  54. data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
  55. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb +30 -0
  56. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx +37 -0
  57. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md +3 -0
  58. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  59. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +2 -1
  60. metadata +28 -2
@@ -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 radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
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 radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
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. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.
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
@@ -0,0 +1,3 @@
1
+ Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default.
2
+
3
+ **NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.
@@ -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.5.0
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-11-21 00:00:00.000000000 Z
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