playbook_ui_docs 16.2.0.pre.alpha.play280714580 → 16.2.0.pre.alpha.play284314641
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_multi_level_select/docs/_multi_level_select_react_reset_key.jsx +100 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.jsx +68 -0
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +9 -8
- metadata +5 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx +0 -152
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md +0 -17
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb +0 -121
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.md +0 -17
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1ccc10b11c7ad14fc388f067ee622cdc4d3349e89d8415cb329bae960a6e5989
|
|
4
|
+
data.tar.gz: fceccda28e2462d440608dd9e0ebede57fd347051bc38720f5728307d2a51a19
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e185949173ab9a558a31d7f0a80d04d9d845faf6554ede99e7f9ce8b8d18ab6e09e95c4de519a4c7dd941005b9fe2190fc213efb58db5a16ed53021a32b9e3ba
|
|
7
|
+
data.tar.gz: e91ed6f659a92c658c04b339cda1df3ae94a9826488720ca8fe81011112e8e2155c4de4295929467a1374a20e2e511d63f1921f8754649f971c1719c42f88e8c
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
import { Button } from "playbook-ui";
|
|
4
|
+
|
|
5
|
+
const treeData = [
|
|
6
|
+
{
|
|
7
|
+
label: "Power Home Remodeling",
|
|
8
|
+
value: "powerHomeRemodeling",
|
|
9
|
+
id: "100",
|
|
10
|
+
expanded: true,
|
|
11
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
label: "People",
|
|
14
|
+
value: "people",
|
|
15
|
+
id: "101",
|
|
16
|
+
expanded: true,
|
|
17
|
+
children: [
|
|
18
|
+
{
|
|
19
|
+
label: "Talent Acquisition",
|
|
20
|
+
value: "talentAcquisition",
|
|
21
|
+
id: "102",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Business Affairs",
|
|
25
|
+
value: "businessAffairs",
|
|
26
|
+
id: "103",
|
|
27
|
+
children: [
|
|
28
|
+
{
|
|
29
|
+
label: "Initiatives",
|
|
30
|
+
value: "initiatives",
|
|
31
|
+
id: "104",
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: "Learning & Development",
|
|
35
|
+
value: "learningAndDevelopment",
|
|
36
|
+
id: "105",
|
|
37
|
+
},
|
|
38
|
+
],
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: "People Experience",
|
|
42
|
+
value: "peopleExperience",
|
|
43
|
+
id: "106",
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: "Contact Center",
|
|
49
|
+
value: "contactCenter",
|
|
50
|
+
id: "107",
|
|
51
|
+
children: [
|
|
52
|
+
{
|
|
53
|
+
label: "Appointment Management",
|
|
54
|
+
value: "appointmentManagement",
|
|
55
|
+
id: "108",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Customer Service",
|
|
59
|
+
value: "customerService",
|
|
60
|
+
id: "109",
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
label: "Energy",
|
|
64
|
+
value: "energy",
|
|
65
|
+
id: "110",
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
},
|
|
71
|
+
];
|
|
72
|
+
|
|
73
|
+
const MultiLevelSelectReactResetKey = (props) => {
|
|
74
|
+
const [resetKey, setResetKey] = useState(0);
|
|
75
|
+
|
|
76
|
+
const handleReset = () => {
|
|
77
|
+
setResetKey((k) => k + 1);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<>
|
|
82
|
+
<MultiLevelSelect
|
|
83
|
+
{...props}
|
|
84
|
+
id="multi-level-select-reset-example"
|
|
85
|
+
key={`multi-level-select-reset-${resetKey}`}
|
|
86
|
+
name="my_array"
|
|
87
|
+
returnAllSelected
|
|
88
|
+
treeData={treeData}
|
|
89
|
+
/>
|
|
90
|
+
<Button
|
|
91
|
+
id="multilevelselect-reset-button"
|
|
92
|
+
marginTop="lg"
|
|
93
|
+
onClick={handleReset}
|
|
94
|
+
text="Reset"
|
|
95
|
+
/>
|
|
96
|
+
</>
|
|
97
|
+
);
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
export default MultiLevelSelectReactResetKey;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
When a parent resets a Multi Level Select (e.g., “Default” or “Clear”), the kit needs a `key` that changes with the selection because React uses the `key` to determine component identity and whether to preserve internal state. If the `key` doesn’t change, React reuses the existing instance and may keep showing the old selection instead of resetting to the new one.
|
|
@@ -39,3 +39,4 @@ examples:
|
|
|
39
39
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
40
40
|
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
41
41
|
- multi_level_select_required_indicator: Required Indicator
|
|
42
|
+
- multi_level_select_react_reset_key: Reset with Key (React)
|
|
@@ -17,3 +17,4 @@ export { default as MultiLevelSelectDisabledOptionsDefault } from "./_multi_leve
|
|
|
17
17
|
export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.jsx"
|
|
18
18
|
export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
|
|
19
19
|
export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
|
|
20
|
+
export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"
|
|
@@ -42,7 +42,6 @@ examples:
|
|
|
42
42
|
- table_with_header_style_floating: Header Style Floating
|
|
43
43
|
- table_with_filter_variant_rails: Variant with Filter
|
|
44
44
|
- table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
|
|
45
|
-
- table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
|
|
46
45
|
|
|
47
46
|
react:
|
|
48
47
|
- table_sm: Small
|
|
@@ -86,4 +85,3 @@ examples:
|
|
|
86
85
|
- table_with_header_style_floating: Header Style Floating
|
|
87
86
|
- table_with_filter_variant: Variant with Filter
|
|
88
87
|
- table_with_filter_variant_with_pagination: Variant with Filter and Pagination
|
|
89
|
-
- table_with_filter_with_card_title_props: Variant with Filter (with Card and Title Props)
|
|
@@ -40,4 +40,3 @@ export { default as TableWithHeaderStyleBorderless } from './_table_with_header_
|
|
|
40
40
|
export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
|
|
41
41
|
export { default as TableWithFilterVariant } from './_table_with_filter_variant.jsx'
|
|
42
42
|
export { default as TableWithFilterVariantWithPagination } from './_table_with_filter_variant_with_pagination.jsx'
|
|
43
|
-
export { default as TableWithFilterWithCardTitleProps } from './_table_with_filter_with_card_title_props.jsx'
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React, { useState } from "react"
|
|
2
|
+
|
|
3
|
+
import Textarea from "../_textarea"
|
|
4
|
+
|
|
5
|
+
const TextareaInputOptions = (props) => {
|
|
6
|
+
const [value1, setValue1] = useState("")
|
|
7
|
+
const [value2, setValue2] = useState("")
|
|
8
|
+
const [value3, setValue3] = useState("")
|
|
9
|
+
const [value4, setValue4] = useState("")
|
|
10
|
+
|
|
11
|
+
return (
|
|
12
|
+
<div>
|
|
13
|
+
<Textarea
|
|
14
|
+
id="container-id"
|
|
15
|
+
label="ID on Container"
|
|
16
|
+
name="comment"
|
|
17
|
+
onChange={(e) => setValue1(e.target.value)}
|
|
18
|
+
rows={4}
|
|
19
|
+
value={value1}
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
<br />
|
|
24
|
+
|
|
25
|
+
<Textarea
|
|
26
|
+
inputOptions={{ id: "textarea-id" }}
|
|
27
|
+
label="ID on Textarea via inputOptions"
|
|
28
|
+
name="comment"
|
|
29
|
+
onChange={(e) => setValue2(e.target.value)}
|
|
30
|
+
rows={4}
|
|
31
|
+
value={value2}
|
|
32
|
+
{...props}
|
|
33
|
+
/>
|
|
34
|
+
|
|
35
|
+
<br />
|
|
36
|
+
|
|
37
|
+
<Textarea
|
|
38
|
+
id="container-id-2"
|
|
39
|
+
inputOptions={{ id: "textarea-id-2" }}
|
|
40
|
+
label="Both Container and Textarea IDs"
|
|
41
|
+
name="comment"
|
|
42
|
+
onChange={(e) => setValue3(e.target.value)}
|
|
43
|
+
rows={4}
|
|
44
|
+
value={value3}
|
|
45
|
+
{...props}
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
<br />
|
|
49
|
+
|
|
50
|
+
<Textarea
|
|
51
|
+
inputOptions={{
|
|
52
|
+
"aria-label": "Enter description",
|
|
53
|
+
"aria-describedby": "help-text",
|
|
54
|
+
data: { controller: "textarea", action: "focus->handleFocus" },
|
|
55
|
+
id: "description-textarea"
|
|
56
|
+
}}
|
|
57
|
+
label="Data and ARIA Attributes"
|
|
58
|
+
name="description"
|
|
59
|
+
onChange={(e) => setValue4(e.target.value)}
|
|
60
|
+
rows={4}
|
|
61
|
+
value={value4}
|
|
62
|
+
{...props}
|
|
63
|
+
/>
|
|
64
|
+
</div>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export default TextareaInputOptions
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
export { default as TextareaDefault } from
|
|
1
|
+
export { default as TextareaDefault } from "./_textarea_default.jsx"
|
|
2
2
|
export { default as TextareaDisabled } from './_textarea_disabled.jsx'
|
|
3
|
-
export { default as TextareaResize } from
|
|
4
|
-
export { default as TextareaCustom } from
|
|
5
|
-
export { default as TextareaError } from
|
|
6
|
-
export { default as TextareaCharacterCounter } from
|
|
7
|
-
export { default as TextareaInline } from
|
|
8
|
-
export { default as TextareaEmojiMask } from
|
|
9
|
-
export { default as TextareaRequiredIndicator } from
|
|
3
|
+
export { default as TextareaResize } from "./_textarea_resize.jsx"
|
|
4
|
+
export { default as TextareaCustom } from "./_textarea_custom.jsx"
|
|
5
|
+
export { default as TextareaError } from "./_textarea_error.jsx"
|
|
6
|
+
export { default as TextareaCharacterCounter } from "./_textarea_character_counter.jsx"
|
|
7
|
+
export { default as TextareaInline } from "./_textarea_inline.jsx"
|
|
8
|
+
export { default as TextareaEmojiMask } from "./_textarea_emoji_mask.jsx"
|
|
9
|
+
export { default as TextareaRequiredIndicator } from "./_textarea_required_indicator.jsx"
|
|
10
|
+
export { default as TextareaInputOptions } from "./_textarea_input_options.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: 16.2.0.pre.alpha.
|
|
4
|
+
version: 16.2.0.pre.alpha.play284314641
|
|
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: 2026-02-
|
|
12
|
+
date: 2026-02-24 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -1449,6 +1449,8 @@ files:
|
|
|
1449
1449
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
|
|
1450
1450
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
1451
1451
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
|
1452
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx
|
|
1453
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.md
|
|
1452
1454
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.html.erb
|
|
1453
1455
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.jsx
|
|
1454
1456
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.md
|
|
@@ -2307,10 +2309,6 @@ files:
|
|
|
2307
2309
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md
|
|
2308
2310
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb
|
|
2309
2311
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md
|
|
2310
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx
|
|
2311
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md
|
|
2312
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb
|
|
2313
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.md
|
|
2314
2312
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
|
|
2315
2313
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
|
|
2316
2314
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
|
|
@@ -2393,6 +2391,7 @@ files:
|
|
|
2393
2391
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
|
|
2394
2392
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
|
|
2395
2393
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
|
|
2394
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.jsx
|
|
2396
2395
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
|
|
2397
2396
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
|
|
2398
2397
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb
|
|
@@ -1,152 +0,0 @@
|
|
|
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 TableWithFilterWithCardTitleProps = () => {
|
|
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
|
-
cardProps={{marginX: {
|
|
82
|
-
xs: "sm",
|
|
83
|
-
sm: "sm",
|
|
84
|
-
md: "xl",
|
|
85
|
-
lg: "xl",
|
|
86
|
-
xl: "xl",
|
|
87
|
-
default: "xl",
|
|
88
|
-
}}}
|
|
89
|
-
filterContent={filterContent}
|
|
90
|
-
filterProps={{
|
|
91
|
-
results: 50,
|
|
92
|
-
sortOptions: {
|
|
93
|
-
territory_id: "Territory ID",
|
|
94
|
-
first_name: "Name",
|
|
95
|
-
started_on: "Start Date",
|
|
96
|
-
department_name: "Department",
|
|
97
|
-
title_name: "Title",
|
|
98
|
-
branch_branch_name: "Branch",
|
|
99
|
-
},
|
|
100
|
-
sortValue: [{ name: 'started_on', dir: 'asc' }],
|
|
101
|
-
}}
|
|
102
|
-
title="Table Title Here"
|
|
103
|
-
titleProps={{
|
|
104
|
-
paddingLeft:{
|
|
105
|
-
xs: "sm",
|
|
106
|
-
sm: "sm",
|
|
107
|
-
md: "xl",
|
|
108
|
-
lg: "xl",
|
|
109
|
-
xl: "xl",
|
|
110
|
-
default: "xl",
|
|
111
|
-
}
|
|
112
|
-
}}
|
|
113
|
-
variant="withFilter"
|
|
114
|
-
>
|
|
115
|
-
<Table.Head>
|
|
116
|
-
<Table.Row>
|
|
117
|
-
<Table.Header>{'Territory ID'}</Table.Header>
|
|
118
|
-
<Table.Header>{'Name'}</Table.Header>
|
|
119
|
-
<Table.Header>{'Title'}</Table.Header>
|
|
120
|
-
<Table.Header>{'Department'}</Table.Header>
|
|
121
|
-
<Table.Header>{'Branch'}</Table.Header>
|
|
122
|
-
<Table.Header textAlign="right">{'Start Date'}</Table.Header>
|
|
123
|
-
</Table.Row>
|
|
124
|
-
</Table.Head>
|
|
125
|
-
<Table.Body>
|
|
126
|
-
{users.map((user) => (
|
|
127
|
-
<Table.Row key={user.id}>
|
|
128
|
-
<Table.Cell
|
|
129
|
-
marginX={{ xs: "sm" }}
|
|
130
|
-
numberSpacing="tabular"
|
|
131
|
-
>
|
|
132
|
-
{user.id}
|
|
133
|
-
</Table.Cell>
|
|
134
|
-
<Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
|
|
135
|
-
<Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
|
|
136
|
-
<Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
|
|
137
|
-
<Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
|
|
138
|
-
<Table.Cell marginX={{ xs: "sm" }}>
|
|
139
|
-
<DateKit
|
|
140
|
-
alignment="right"
|
|
141
|
-
showCurrentYear
|
|
142
|
-
value={user.startDate}
|
|
143
|
-
/>
|
|
144
|
-
</Table.Cell>
|
|
145
|
-
</Table.Row>
|
|
146
|
-
))}
|
|
147
|
-
</Table.Body>
|
|
148
|
-
</Table>
|
|
149
|
-
)
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
export default TableWithFilterWithCardTitleProps
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
The `withFilter` variant also offers 2 additional optional props:
|
|
2
|
-
|
|
3
|
-
`cardProps`: An object containing Card-specific props.
|
|
4
|
-
`titleProps`: An object containing Title-specific props.
|
|
5
|
-
|
|
6
|
-
#### Default Card Props
|
|
7
|
-
|
|
8
|
-
The Table kit automatically sets these Card defaults (which you can override via `cardProps`):
|
|
9
|
-
|
|
10
|
-
- `padding="none"`
|
|
11
|
-
|
|
12
|
-
#### Default Title Props
|
|
13
|
-
|
|
14
|
-
The Table kit automatically sets these Title defaults (which you can override via `titleProps`):
|
|
15
|
-
|
|
16
|
-
- `size={3}`
|
|
17
|
-
- `paddingY="md"`
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb
DELETED
|
@@ -1,121 +0,0 @@
|
|
|
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
|
-
card_props: {
|
|
61
|
-
margin_x: {
|
|
62
|
-
xs: "sm",
|
|
63
|
-
sm: "sm",
|
|
64
|
-
md: "xl",
|
|
65
|
-
lg: "xl",
|
|
66
|
-
xl: "xl",
|
|
67
|
-
default: "xl",
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
variant: "with_filter",
|
|
71
|
-
title: "Table Title Here",
|
|
72
|
-
title_props: {
|
|
73
|
-
padding_left:{
|
|
74
|
-
xs: "sm",
|
|
75
|
-
sm: "sm",
|
|
76
|
-
md: "xl",
|
|
77
|
-
lg: "xl",
|
|
78
|
-
xl: "xl",
|
|
79
|
-
default: "xl",
|
|
80
|
-
}
|
|
81
|
-
},
|
|
82
|
-
filter_content: filter_content,
|
|
83
|
-
filter_props: {
|
|
84
|
-
id: "user-table-filters-1",
|
|
85
|
-
results: 9,
|
|
86
|
-
sort_menu: [
|
|
87
|
-
{ item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
|
|
88
|
-
{ item: "First Name", link: "?q[sorts]=name+asc", active: false },
|
|
89
|
-
{ item: "Title", link: "?q[sorts]=title+asc", active: false },
|
|
90
|
-
{ item: "Department", link: "?q[sorts]=department+asc", active: false },
|
|
91
|
-
{ item: "Branch", link: "?q[sorts]=branch+asc", active: false },
|
|
92
|
-
{ item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
|
|
93
|
-
],
|
|
94
|
-
}
|
|
95
|
-
}) do %>
|
|
96
|
-
<%= pb_rails("table/table_head") do %>
|
|
97
|
-
<%= pb_rails("table/table_row") do %>
|
|
98
|
-
<%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
|
|
99
|
-
<%= pb_rails("table/table_header", props: { text: "Name" }) %>
|
|
100
|
-
<%= pb_rails("table/table_header", props: { text: "Title" }) %>
|
|
101
|
-
<%= pb_rails("table/table_header", props: { text: "Department" }) %>
|
|
102
|
-
<%= pb_rails("table/table_header", props: { text: "Branch" }) %>
|
|
103
|
-
<%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
|
|
104
|
-
<% end %>
|
|
105
|
-
<% end %>
|
|
106
|
-
|
|
107
|
-
<%= pb_rails("table/table_body") do %>
|
|
108
|
-
<% users.each do |user| %>
|
|
109
|
-
<%= pb_rails("table/table_row") do %>
|
|
110
|
-
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
|
|
111
|
-
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
|
|
112
|
-
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
|
|
113
|
-
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
|
|
114
|
-
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
|
|
115
|
-
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
|
|
116
|
-
<%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>
|
|
117
|
-
<% end %>
|
|
118
|
-
<% end %>
|
|
119
|
-
<% end %>
|
|
120
|
-
<% end %>
|
|
121
|
-
<% end %>
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
The `with_filter` variant also offers 2 additional optional props:
|
|
2
|
-
|
|
3
|
-
`card_props`: An object containing Card-specific props.
|
|
4
|
-
`title_props`: An object containing Title-specific props.
|
|
5
|
-
|
|
6
|
-
#### Default Card Props
|
|
7
|
-
|
|
8
|
-
The Table kit automatically sets these Card defaults (which you can override via `card_props`):
|
|
9
|
-
|
|
10
|
-
- `padding:"none"`
|
|
11
|
-
|
|
12
|
-
#### Default Title Props
|
|
13
|
-
|
|
14
|
-
The Table kit automatically sets these Title defaults (which you can override via `title_props`):
|
|
15
|
-
|
|
16
|
-
- `size:3`
|
|
17
|
-
- `paddingY:"md"`
|