playbook_ui_docs 15.6.0.pre.alpha.PLAY2611selectinputoptions12951 → 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_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_distribution_bar/docs/_distribution_bar_custom_colors.md +1 -1
- 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_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
- metadata +17 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: df8c1b66639787df5a081bd0af6a0940e8f7dd6266a5897f3644129ca6325a44
|
|
4
|
+
data.tar.gz: eb320160482e4aac99ff8bcdbb546ef1f114015a218e3611f5bf8a4ce7608710
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5dda7ea71552ef495a86f7ab8bf1b5a0eaeb77abd73a7459560becdf845488508e881da295c72380cdfbd83d88b49caf9df3e93554567c07fe351b26431f47d8
|
|
7
|
+
data.tar.gz: a58dfe70cfdf4b9a7676324da72caf29bc1801e1a4ab1d28d623219a0e99e5710cd942e0401e4ba61880a763da065e536d938cfaa083c9df0f9d49ea86aecc6e
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/
|
|
1
|
+
Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/
|
|
1
|
+
Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
|
|
@@ -22,7 +22,6 @@ const CollapsibleState = (props) => {
|
|
|
22
22
|
<Collapsible
|
|
23
23
|
collapsed={isCollapsed}
|
|
24
24
|
icon={["plus", "minus"]}
|
|
25
|
-
iconColor='white'
|
|
26
25
|
padding="none"
|
|
27
26
|
>
|
|
28
27
|
<Collapsible.Main padding="sm"
|
|
@@ -41,7 +40,6 @@ const CollapsibleState = (props) => {
|
|
|
41
40
|
<Collapsible
|
|
42
41
|
collapsed={isCollapsed}
|
|
43
42
|
icon={["plus", "minus"]}
|
|
44
|
-
iconColor='white'
|
|
45
43
|
padding="none"
|
|
46
44
|
>
|
|
47
45
|
<Collapsible.Main padding="sm"
|
|
@@ -60,7 +58,6 @@ const CollapsibleState = (props) => {
|
|
|
60
58
|
<Collapsible
|
|
61
59
|
collapsed={isCollapsed}
|
|
62
60
|
icon={["plus", "minus"]}
|
|
63
|
-
iconColor='white'
|
|
64
61
|
padding="none"
|
|
65
62
|
>
|
|
66
63
|
<Collapsible.Main padding="sm"
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<%= pb_rails("body", props: { color: "default" }) do %>
|
|
2
|
+
<%= pb_rails("contact", props: {
|
|
3
|
+
contact_value: "2125551234",
|
|
4
|
+
icon_enabled: false,
|
|
5
|
+
unstyled: true
|
|
6
|
+
}) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("body", props: { color: "light" }) do %>
|
|
10
|
+
<%= pb_rails("contact", props: {
|
|
11
|
+
contact_value: "12125551234",
|
|
12
|
+
icon_enabled: false,
|
|
13
|
+
unstyled: true
|
|
14
|
+
}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("body", props: { color: "lighter" }) do %>
|
|
18
|
+
<%= pb_rails("contact", props: {
|
|
19
|
+
contact_value: "4155551234",
|
|
20
|
+
icon_enabled: false,
|
|
21
|
+
unstyled: true
|
|
22
|
+
}) %>
|
|
23
|
+
<% end %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("body", props: { color: "default" }) do %>
|
|
26
|
+
<%= pb_rails("contact", props: {
|
|
27
|
+
contact_type: "extension",
|
|
28
|
+
contact_value: "1234",
|
|
29
|
+
icon_enabled: false,
|
|
30
|
+
unstyled: true
|
|
31
|
+
}) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Contact from "../../pb_contact/_contact"
|
|
3
|
+
import Body from "../../pb_body/_body"
|
|
4
|
+
|
|
5
|
+
const ContactUnstyled = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<div>
|
|
8
|
+
<Body color="default">
|
|
9
|
+
<Contact
|
|
10
|
+
contactValue="2125551234"
|
|
11
|
+
iconEnabled={false}
|
|
12
|
+
unstyled
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
</Body>
|
|
16
|
+
<Body color="light">
|
|
17
|
+
<Contact
|
|
18
|
+
contactValue="12125551234"
|
|
19
|
+
iconEnabled={false}
|
|
20
|
+
unstyled
|
|
21
|
+
{...props}
|
|
22
|
+
/>
|
|
23
|
+
</Body>
|
|
24
|
+
<Body color="lighter">
|
|
25
|
+
<Contact
|
|
26
|
+
contactValue="4155551234"
|
|
27
|
+
iconEnabled={false}
|
|
28
|
+
unstyled
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
</Body>
|
|
32
|
+
<Body color="default">
|
|
33
|
+
<Contact
|
|
34
|
+
contactType="extension"
|
|
35
|
+
contactValue="1234"
|
|
36
|
+
iconEnabled={false}
|
|
37
|
+
unstyled
|
|
38
|
+
{...props}
|
|
39
|
+
/>
|
|
40
|
+
</Body>
|
|
41
|
+
</div>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export default ContactUnstyled
|
|
46
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
Use the Contact kit with `icon_enabled: false` and `unstyled: true` to display phone numbers with full typography control. When `unstyled: true`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
|
|
2
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
Use the Contact kit with `iconEnabled={false}` and `unstyled` to display phone numbers with full typography control. With `unstyled`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
|
|
2
|
+
|
|
@@ -3,11 +3,13 @@ examples:
|
|
|
3
3
|
rails:
|
|
4
4
|
- contact_default: Default
|
|
5
5
|
- contact_with_detail: Detail Indicator
|
|
6
|
+
- contact_unstyled: Unstyled
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
react:
|
|
9
10
|
- contact_default: Default
|
|
10
11
|
- contact_with_detail: Detail Indicator
|
|
12
|
+
- contact_unstyled: Unstyled
|
|
11
13
|
|
|
12
14
|
|
|
13
15
|
swift:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/
|
|
1
|
+
You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/tokens/colors) for reference.
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import React, { useState } from "react"
|
|
2
|
+
import { Button, Date as DateKit, DatePicker, Dropdown, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
|
|
3
|
+
|
|
4
|
+
// Mock Data for Table
|
|
5
|
+
const users = [
|
|
6
|
+
{ id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
|
|
7
|
+
{ id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
|
|
8
|
+
{ id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
|
|
9
|
+
{ id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
|
|
10
|
+
{ id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
|
|
11
|
+
{ id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
|
|
12
|
+
{ id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
|
|
13
|
+
{ id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
|
|
14
|
+
{ id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
|
|
15
|
+
]
|
|
16
|
+
|
|
17
|
+
const TableWithFilterVariant = () => {
|
|
18
|
+
const [territory, setTerritory] = useState("")
|
|
19
|
+
|
|
20
|
+
// --------Filter content example ------
|
|
21
|
+
const filterContent = ({ closePopover }) => (
|
|
22
|
+
<>
|
|
23
|
+
<TextInput
|
|
24
|
+
label="Territory ID"
|
|
25
|
+
onChange={event => setTerritory(event.target.value)}
|
|
26
|
+
value={territory}
|
|
27
|
+
/>
|
|
28
|
+
|
|
29
|
+
<Typeahead
|
|
30
|
+
label="Title"
|
|
31
|
+
options={[
|
|
32
|
+
{ key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
|
|
33
|
+
{ key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
|
|
34
|
+
{ key: "ux-designer", label: "UX Designer", value: "ux-designer" }
|
|
35
|
+
]}
|
|
36
|
+
/>
|
|
37
|
+
|
|
38
|
+
<Select
|
|
39
|
+
blankSelection="All Departments"
|
|
40
|
+
label="Department"
|
|
41
|
+
options={[
|
|
42
|
+
{ value: "Business Technology", label: "Business Technology", key: "business-technology" },
|
|
43
|
+
{ value: "Customer Development", label: "Customer Development", key: "customer-development" },
|
|
44
|
+
{ value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
|
|
45
|
+
]}
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
<Dropdown
|
|
49
|
+
label="Branch"
|
|
50
|
+
options={[
|
|
51
|
+
{ key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
|
|
52
|
+
{ key: "New York", label: "New York", value: "new-york" },
|
|
53
|
+
{ key: "Austin", label: "Austin", value: "austin" }
|
|
54
|
+
]}
|
|
55
|
+
/>
|
|
56
|
+
|
|
57
|
+
<DatePicker
|
|
58
|
+
label="Start Date"
|
|
59
|
+
paddingY="sm"
|
|
60
|
+
pickerId="startedOn"
|
|
61
|
+
/>
|
|
62
|
+
<Flex spacing="between">
|
|
63
|
+
<Button
|
|
64
|
+
onClick={() => {
|
|
65
|
+
alert("No filtering functionality - just a pattern demo!")
|
|
66
|
+
closePopover()
|
|
67
|
+
}}
|
|
68
|
+
text="Filter"
|
|
69
|
+
/>
|
|
70
|
+
<Button
|
|
71
|
+
text="Defaults"
|
|
72
|
+
variant="secondary"
|
|
73
|
+
/>
|
|
74
|
+
</Flex>
|
|
75
|
+
</>
|
|
76
|
+
)
|
|
77
|
+
// -------End Filter content example ------
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<Table
|
|
81
|
+
filterContent={filterContent}
|
|
82
|
+
filterProps={{
|
|
83
|
+
results: 50,
|
|
84
|
+
sortOptions: {
|
|
85
|
+
territory_id: "Territory ID",
|
|
86
|
+
first_name: "Name",
|
|
87
|
+
started_on: "Start Date",
|
|
88
|
+
department_name: "Department",
|
|
89
|
+
title_name: "Title",
|
|
90
|
+
branch_branch_name: "Branch",
|
|
91
|
+
},
|
|
92
|
+
sortValue: [{ name: 'started_on', dir: 'asc' }],
|
|
93
|
+
}}
|
|
94
|
+
title="Table Title Here"
|
|
95
|
+
variant="withFilter"
|
|
96
|
+
>
|
|
97
|
+
<Table.Head>
|
|
98
|
+
<Table.Row>
|
|
99
|
+
<Table.Header>{'Territory ID'}</Table.Header>
|
|
100
|
+
<Table.Header>{'Name'}</Table.Header>
|
|
101
|
+
<Table.Header>{'Title'}</Table.Header>
|
|
102
|
+
<Table.Header>{'Department'}</Table.Header>
|
|
103
|
+
<Table.Header>{'Branch'}</Table.Header>
|
|
104
|
+
<Table.Header textAlign="right">{'Start Date'}</Table.Header>
|
|
105
|
+
</Table.Row>
|
|
106
|
+
</Table.Head>
|
|
107
|
+
<Table.Body>
|
|
108
|
+
{users.map((user) => (
|
|
109
|
+
<Table.Row key={user.id}>
|
|
110
|
+
<Table.Cell
|
|
111
|
+
marginX={{ xs: "sm" }}
|
|
112
|
+
numberSpacing="tabular"
|
|
113
|
+
>
|
|
114
|
+
{user.id}
|
|
115
|
+
</Table.Cell>
|
|
116
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
|
|
117
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
|
|
118
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
|
|
119
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
|
|
120
|
+
<Table.Cell marginX={{ xs: "sm" }}>
|
|
121
|
+
<DateKit
|
|
122
|
+
alignment="right"
|
|
123
|
+
showCurrentYear
|
|
124
|
+
value={user.startDate}
|
|
125
|
+
/>
|
|
126
|
+
</Table.Cell>
|
|
127
|
+
</Table.Row>
|
|
128
|
+
))}
|
|
129
|
+
</Table.Body>
|
|
130
|
+
</Table>
|
|
131
|
+
)
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
export default TableWithFilterVariant
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
Set the `variant` prop to `withFilter` to render a Table with a filter. The variant automatically handles:
|
|
2
|
+
|
|
3
|
+
- Card wrapper with standard responsive margins
|
|
4
|
+
- Optional `title` prop to render title above the card
|
|
5
|
+
- Filter component rendering with Design defaults
|
|
6
|
+
- SectionSeparator between filter and table
|
|
7
|
+
- Flex layout for proper alignment
|
|
8
|
+
|
|
9
|
+
#### Required Props
|
|
10
|
+
|
|
11
|
+
- `variant="withFilter"`: Enables the filter variant
|
|
12
|
+
- `filterContent`: A function that receives `{ closePopover }` and returns the filter's body content (inputs, buttons, etc.). Use this to pass in all input kits, etc needed inside the Filter itself.
|
|
13
|
+
- `filterProps`: An object containing Filter-specific props like `results`, `sortOptions`, `sortValue`, etc.
|
|
14
|
+
|
|
15
|
+
#### Optional Props
|
|
16
|
+
|
|
17
|
+
- `title`: Displays a title above the card
|
|
18
|
+
- All standard Table props (`size`, `collapse`, etc.) can be used, but defaults are already set to match Design guidelines
|
|
19
|
+
- All standard Filter props can be used, but defaults are already set to match Design guidelines.
|
|
20
|
+
|
|
21
|
+
#### Default Filter Props
|
|
22
|
+
|
|
23
|
+
The Table kit automatically sets these Filter defaults (which you can override via `filterProps`):
|
|
24
|
+
|
|
25
|
+
- `background={false}`
|
|
26
|
+
- `maxHeight="50vh"`
|
|
27
|
+
- `minWidth="xs"`
|
|
28
|
+
- `popoverProps={{ width: "350px" }}`
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
**IMPORTANT NOTE**:
|
|
32
|
+
The purpose of this variant is to provide an easy way to set up a Table with a Filter with Design standards applied by default.
|
|
33
|
+
|
|
34
|
+
If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrated in our Table Filter Card Building Block [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/react).
|
|
@@ -0,0 +1,101 @@
|
|
|
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
|
+
] %>
|
|
12
|
+
|
|
13
|
+
<% filter_content =
|
|
14
|
+
pb_rails("text_input", props: {
|
|
15
|
+
label: "Territory ID",
|
|
16
|
+
placeholder: "Enter Territory ID"
|
|
17
|
+
}) +
|
|
18
|
+
pb_rails("typeahead", props: {
|
|
19
|
+
label: "Title",
|
|
20
|
+
options: [
|
|
21
|
+
{ label: "Senior UX Engineer", value: "senior-ux-engineer" },
|
|
22
|
+
{ label: "UX Engineer", value: "ux-engineer" },
|
|
23
|
+
{ label: "UX Designer", value: "ux-designer" }
|
|
24
|
+
]
|
|
25
|
+
}) +
|
|
26
|
+
pb_rails("select", props: {
|
|
27
|
+
blank_selection: "All Departments",
|
|
28
|
+
label: "Department",
|
|
29
|
+
options: [
|
|
30
|
+
{ value: "Business Technology", text: "Business Technology" },
|
|
31
|
+
{ value: "Customer Development", text: "Customer Development" },
|
|
32
|
+
{ value: "Talent Acquisition", text: "Talent Acquisition" }
|
|
33
|
+
]
|
|
34
|
+
}) +
|
|
35
|
+
pb_rails("dropdown", props: {
|
|
36
|
+
label: "Branch",
|
|
37
|
+
options: [
|
|
38
|
+
{ label: "Philadelphia", value: "philadelphia" },
|
|
39
|
+
{ label: "New York", value: "new-york" },
|
|
40
|
+
{ label: "Austin", value: "austin" }
|
|
41
|
+
]
|
|
42
|
+
}) +
|
|
43
|
+
pb_rails("date_picker", props: {
|
|
44
|
+
label: "Start Date",
|
|
45
|
+
padding_y: "sm",
|
|
46
|
+
picker_id: "startedOn"
|
|
47
|
+
}) +
|
|
48
|
+
pb_rails("flex", props: { spacing: "between" }) do
|
|
49
|
+
pb_rails("button", props: {
|
|
50
|
+
text: "Filter",
|
|
51
|
+
}) +
|
|
52
|
+
pb_rails("button", props: {
|
|
53
|
+
text: "Defaults",
|
|
54
|
+
variant: "secondary"
|
|
55
|
+
})
|
|
56
|
+
end
|
|
57
|
+
%>
|
|
58
|
+
|
|
59
|
+
<%= pb_rails("table", props: {
|
|
60
|
+
variant: "with_filter",
|
|
61
|
+
title: "Table Title Here",
|
|
62
|
+
filter_content: filter_content,
|
|
63
|
+
filter_props: {
|
|
64
|
+
id: "user-table-filters-1",
|
|
65
|
+
results: 9,
|
|
66
|
+
sort_menu: [
|
|
67
|
+
{ item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
|
|
68
|
+
{ item: "First Name", link: "?q[sorts]=name+asc", active: false },
|
|
69
|
+
{ item: "Title", link: "?q[sorts]=title+asc", active: false },
|
|
70
|
+
{ item: "Department", link: "?q[sorts]=department+asc", active: false },
|
|
71
|
+
{ item: "Branch", link: "?q[sorts]=branch+asc", active: false },
|
|
72
|
+
{ item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
|
|
73
|
+
],
|
|
74
|
+
}
|
|
75
|
+
}) do %>
|
|
76
|
+
<%= pb_rails("table/table_head") do %>
|
|
77
|
+
<%= pb_rails("table/table_row") do %>
|
|
78
|
+
<%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
|
|
79
|
+
<%= pb_rails("table/table_header", props: { text: "Name" }) %>
|
|
80
|
+
<%= pb_rails("table/table_header", props: { text: "Title" }) %>
|
|
81
|
+
<%= pb_rails("table/table_header", props: { text: "Department" }) %>
|
|
82
|
+
<%= pb_rails("table/table_header", props: { text: "Branch" }) %>
|
|
83
|
+
<%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
|
|
84
|
+
<% end %>
|
|
85
|
+
<% end %>
|
|
86
|
+
|
|
87
|
+
<%= pb_rails("table/table_body") do %>
|
|
88
|
+
<% users.each do |user| %>
|
|
89
|
+
<%= pb_rails("table/table_row") do %>
|
|
90
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
|
|
91
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
|
|
92
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
|
|
93
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
|
|
94
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
|
|
95
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
|
|
96
|
+
<%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>
|
|
97
|
+
<% end %>
|
|
98
|
+
<% end %>
|
|
99
|
+
<% end %>
|
|
100
|
+
<% end %>
|
|
101
|
+
<% end %>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
Set the `variant` prop to `with_filter` to render a Table with a filter. The variant automatically handles:
|
|
2
|
+
|
|
3
|
+
- Card wrapper with standard responsive margins
|
|
4
|
+
- Optional `title` prop to render title above the card
|
|
5
|
+
- Filter component rendering with Design defaults
|
|
6
|
+
- SectionSeparator between filter and table
|
|
7
|
+
- Flex layout for proper alignment
|
|
8
|
+
|
|
9
|
+
#### Required Props
|
|
10
|
+
|
|
11
|
+
- `variant: "with_filter"`: Enables the filter variant
|
|
12
|
+
- `filter_content`: The filter's body content (inputs, buttons, etc.) built with `pb_rails` string concatenation
|
|
13
|
+
- `filter_props`: A hash containing Filter-specific props like `results`, `sort_menu`, etc.
|
|
14
|
+
|
|
15
|
+
#### Optional Props
|
|
16
|
+
|
|
17
|
+
- `title`: Displays a title above the card
|
|
18
|
+
- All standard Table props (`size`, `collapse`, etc.) can be used, but defaults are already set to match Design guidelines
|
|
19
|
+
|
|
20
|
+
#### Default Filter Props
|
|
21
|
+
|
|
22
|
+
The Table kit automatically sets these Filter defaults (which you can override via `filter_props`):
|
|
23
|
+
|
|
24
|
+
- `background: false`
|
|
25
|
+
- `max_height: "50vh"`
|
|
26
|
+
- `min_width: "xs"`
|
|
27
|
+
- `popover_props: { width: "350px" }`
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
**IMPORTANT NOTE**:
|
|
31
|
+
The purpose of this variant is to provide an easy way to set up a Table with a Filter with Design standards applied by default.
|
|
32
|
+
|
|
33
|
+
If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrating in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import React, { useState } from "react"
|
|
2
|
+
import { Button, Date as DateKit, DatePicker, Dropdown, Pagination, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
// Mock Data for Table
|
|
6
|
+
const users = [
|
|
7
|
+
{ id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
|
|
8
|
+
{ id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
|
|
9
|
+
{ id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
|
|
10
|
+
{ id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
|
|
11
|
+
{ id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
|
|
12
|
+
{ id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
|
|
13
|
+
{ id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
|
|
14
|
+
{ id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
|
|
15
|
+
{ id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
|
|
16
|
+
{ id: 10, name: "Sarah", title: "Senior Product Manager", department: "Business Technology", branch: "New York", startDate: "2025-01-10" },
|
|
17
|
+
{ id: 11, name: "Michael", title: "Software Engineer III", department: "Business Technology", branch: "Austin", startDate: "2025-01-11" },
|
|
18
|
+
{ id: 12, name: "Emma", title: "Data Analyst II", department: "Customer Development", branch: "Philadelphia", startDate: "2025-01-12" },
|
|
19
|
+
{ id: 13, name: "David", title: "QA Engineer", department: "Business Technology", branch: "New York", startDate: "2025-01-13" },
|
|
20
|
+
{ id: 14, name: "Lisa", title: "UX Researcher", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-14" },
|
|
21
|
+
{ id: 15, name: "James", title: "DevOps Engineer", department: "Business Technology", branch: "Austin", startDate: "2025-01-15" },
|
|
22
|
+
{ id: 16, name: "Anna", title: "Product Designer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-16" },
|
|
23
|
+
{ id: 17, name: "Robert", title: "Backend Engineer", department: "Business Technology", branch: "New York", startDate: "2025-01-17" },
|
|
24
|
+
{ id: 18, name: "Maria", title: "Frontend Developer", department: "Business Technology", branch: "Austin", startDate: "2025-01-18" },
|
|
25
|
+
{ id: 19, name: "William", title: "Tech Lead", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-19" },
|
|
26
|
+
{ id: 20, name: "Jessica", title: "Scrum Master", department: "Business Technology", branch: "New York", startDate: "2025-01-20" },
|
|
27
|
+
{ id: 21, name: "Daniel", title: "Software Architect", department: "Business Technology", branch: "Austin", startDate: "2025-01-21" },
|
|
28
|
+
{ id: 22, name: "Laura", title: "Business Analyst", department: "Customer Development", branch: "Philadelphia", startDate: "2025-01-22" },
|
|
29
|
+
{ id: 23, name: "Chris", title: "Security Engineer", department: "Business Technology", branch: "New York", startDate: "2025-01-23" },
|
|
30
|
+
{ id: 24, name: "Ashley", title: "UX Engineer III", department: "Business Technology", branch: "Austin", startDate: "2025-01-24" },
|
|
31
|
+
{ id: 25, name: "Kevin", title: "Platform Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-25" },
|
|
32
|
+
{ id: 26, name: "Michelle", title: "Content Designer", department: "Business Technology", branch: "New York", startDate: "2025-01-26" },
|
|
33
|
+
]
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
const TableWithFilterVariantWithPagination = () => {
|
|
37
|
+
const [territory, setTerritory] = useState("")
|
|
38
|
+
// ------Pagination-----
|
|
39
|
+
const [activePage, setActivePage] = useState(1)
|
|
40
|
+
// Calculate pagination
|
|
41
|
+
const itemsPerPage = 20
|
|
42
|
+
const totalPages = Math.ceil(users.length / itemsPerPage)
|
|
43
|
+
const startIndex = (activePage - 1) * itemsPerPage
|
|
44
|
+
const endIndex = startIndex + itemsPerPage
|
|
45
|
+
const currentData = users.slice(startIndex, endIndex)
|
|
46
|
+
|
|
47
|
+
const onPageChange = (page) => {
|
|
48
|
+
setActivePage(page)
|
|
49
|
+
}
|
|
50
|
+
// ------End Pagination-----
|
|
51
|
+
|
|
52
|
+
// -------Filter content example ------
|
|
53
|
+
const filterContent = ({ closePopover }) => (
|
|
54
|
+
<>
|
|
55
|
+
<TextInput
|
|
56
|
+
label="Territory ID"
|
|
57
|
+
onChange={event => setTerritory(event.target.value)}
|
|
58
|
+
value={territory}
|
|
59
|
+
/>
|
|
60
|
+
<Typeahead
|
|
61
|
+
label="Title"
|
|
62
|
+
options={[
|
|
63
|
+
{ key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
|
|
64
|
+
{ key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
|
|
65
|
+
{ key: "ux-designer", label: "UX Designer", value: "ux-designer" }
|
|
66
|
+
]}
|
|
67
|
+
/>
|
|
68
|
+
|
|
69
|
+
<Select
|
|
70
|
+
blankSelection="All Departments"
|
|
71
|
+
label="Department"
|
|
72
|
+
options={[
|
|
73
|
+
{ value: "Business Technology", label: "Business Technology", key: "business-technology" },
|
|
74
|
+
{ value: "Customer Development", label: "Customer Development", key: "customer-development" },
|
|
75
|
+
{ value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
|
|
76
|
+
]}
|
|
77
|
+
/>
|
|
78
|
+
|
|
79
|
+
<Dropdown
|
|
80
|
+
label="Branch"
|
|
81
|
+
options={[
|
|
82
|
+
{ key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
|
|
83
|
+
{ key: "New York", label: "New York", value: "new-york" },
|
|
84
|
+
{ key: "Austin", label: "Austin", value: "austin" }
|
|
85
|
+
]}
|
|
86
|
+
/>
|
|
87
|
+
|
|
88
|
+
<DatePicker
|
|
89
|
+
label="Start Date"
|
|
90
|
+
paddingY="sm"
|
|
91
|
+
pickerId="startedOn"
|
|
92
|
+
/>
|
|
93
|
+
<Flex spacing="between">
|
|
94
|
+
<Button
|
|
95
|
+
onClick={() => {
|
|
96
|
+
alert("No filtering functionality - just a pattern demo!")
|
|
97
|
+
closePopover()
|
|
98
|
+
}}
|
|
99
|
+
text="Filter"
|
|
100
|
+
/>
|
|
101
|
+
<Button
|
|
102
|
+
text="Defaults"
|
|
103
|
+
variant="secondary"
|
|
104
|
+
/>
|
|
105
|
+
</Flex>
|
|
106
|
+
</>
|
|
107
|
+
)
|
|
108
|
+
// -------End Filter content example ------
|
|
109
|
+
|
|
110
|
+
// -------Pagination element example ------
|
|
111
|
+
const paginationElement = (
|
|
112
|
+
<Pagination
|
|
113
|
+
current={activePage}
|
|
114
|
+
key={`pagination-${activePage}`}
|
|
115
|
+
marginLeft="lg"
|
|
116
|
+
onChange={onPageChange}
|
|
117
|
+
paddingY="xs"
|
|
118
|
+
range={5}
|
|
119
|
+
total={totalPages}
|
|
120
|
+
/>
|
|
121
|
+
)
|
|
122
|
+
// -------End Pagination element example ------
|
|
123
|
+
|
|
124
|
+
return (
|
|
125
|
+
<Table
|
|
126
|
+
filterContent={filterContent}
|
|
127
|
+
filterProps={{
|
|
128
|
+
results: 50,
|
|
129
|
+
sortOptions: {
|
|
130
|
+
territory_id: "Territory ID",
|
|
131
|
+
first_name: "Name",
|
|
132
|
+
started_on: "Start Date",
|
|
133
|
+
department_name: "Department",
|
|
134
|
+
title_name: "Title",
|
|
135
|
+
branch_branch_name: "Branch",
|
|
136
|
+
},
|
|
137
|
+
sortValue: [{ name: 'started_on', dir: 'asc' }],
|
|
138
|
+
}}
|
|
139
|
+
pagination={paginationElement}
|
|
140
|
+
title="Table Title Here"
|
|
141
|
+
variant="withFilter"
|
|
142
|
+
>
|
|
143
|
+
<Table.Head>
|
|
144
|
+
<Table.Row>
|
|
145
|
+
<Table.Header>{'Territory ID'}</Table.Header>
|
|
146
|
+
<Table.Header>{'Name'}</Table.Header>
|
|
147
|
+
<Table.Header>{'Title'}</Table.Header>
|
|
148
|
+
<Table.Header>{'Department'}</Table.Header>
|
|
149
|
+
<Table.Header>{'Branch'}</Table.Header>
|
|
150
|
+
<Table.Header textAlign="right">{'Start Date'}</Table.Header>
|
|
151
|
+
</Table.Row>
|
|
152
|
+
</Table.Head>
|
|
153
|
+
<Table.Body>
|
|
154
|
+
{currentData.map((user) => (
|
|
155
|
+
<Table.Row key={user.id}>
|
|
156
|
+
<Table.Cell
|
|
157
|
+
marginX={{ xs: "sm" }}
|
|
158
|
+
numberSpacing="tabular"
|
|
159
|
+
>
|
|
160
|
+
{user.id}
|
|
161
|
+
</Table.Cell>
|
|
162
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
|
|
163
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
|
|
164
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
|
|
165
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
|
|
166
|
+
<Table.Cell marginX={{ xs: "sm" }}>
|
|
167
|
+
<DateKit
|
|
168
|
+
alignment="right"
|
|
169
|
+
showCurrentYear
|
|
170
|
+
value={user.startDate}
|
|
171
|
+
/>
|
|
172
|
+
</Table.Cell>
|
|
173
|
+
</Table.Row>
|
|
174
|
+
))}
|
|
175
|
+
</Table.Body>
|
|
176
|
+
</Table>
|
|
177
|
+
)
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
export default TableWithFilterVariantWithPagination
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The `withFilter` 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
|
+
For more information on the Pagination Kit and how to use it, see the documentation [here](https://playbook.powerapp.cloud/kits/pagination/react)
|
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'
|
|
@@ -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
|
|
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.6.0.pre.alpha.
|
|
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-
|
|
12
|
+
date: 2025-12-12 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -528,6 +528,10 @@ files:
|
|
|
528
528
|
- app/pb_kits/playbook/pb_contact/docs/_contact_default.md
|
|
529
529
|
- app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md
|
|
530
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
|
|
531
535
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
|
|
532
536
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx
|
|
533
537
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail_swift.md
|
|
@@ -2307,6 +2311,14 @@ files:
|
|
|
2307
2311
|
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx
|
|
2308
2312
|
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md
|
|
2309
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
|
|
2310
2322
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
|
|
2311
2323
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
|
|
2312
2324
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
|
|
@@ -2411,6 +2423,9 @@ files:
|
|
|
2411
2423
|
- app/pb_kits/playbook/pb_timeline/docs/_description.md
|
|
2412
2424
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
|
|
2413
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
|
|
2414
2429
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
|
|
2415
2430
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
|
|
2416
2431
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
|