playbook_ui_docs 16.4.0.pre.alpha.PLAY2863railsselectlabelsfor15352 → 16.4.0.pre.alpha.PLAY2864circleiconbuttonloadingalignrails15138
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_button/docs/_button_full_width.md +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb +25 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx +97 -38
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_blank.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_required.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.html.erb +0 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_sections.yml +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md +1 -2
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +8 -20
- metadata +3 -10
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width_rails.md +0 -19
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md +0 -23
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb +0 -109
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx +0 -127
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.html.erb +0 -45
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md +0 -39
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.md +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5f445aa174e5279062b03dd04f87872fea3d366d1d46bc7c5516408593336fdc
|
|
4
|
+
data.tar.gz: 723c15f2f7680a9424bc92c95e8c6af1386d1a880260b4096b62cb020138465d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 348b84bc7491f38e7cdb75822ec1c829fdce88f790d8102f294a918bb1e6d07b45a0b0b715b068db6b79ffc93ef3a1ea2743e15b294ddf00769566f0ab2027cb
|
|
7
|
+
data.tar.gz: 927be562b1b02541a7ea79d2143d30bb37797e8470846d628e0a9f1b808f07925147241d60b9eadd2d1bd4e45a5a6e60a926d7ccee3225041cac5e441b213d7c
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
This button is used many times for mobile or other things like cards and sidebars.
|
|
@@ -27,3 +27,28 @@
|
|
|
27
27
|
icon: "user",
|
|
28
28
|
loading: true
|
|
29
29
|
}) %>
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
<%= pb_rails("button", props: { margin_top: "md", text: "Open Dialog to confirm PLAY-2837 fix still works", data: {"open-dialog": "dialog-1"} }) %>
|
|
33
|
+
|
|
34
|
+
<%= pb_rails("dialog", props: {
|
|
35
|
+
id:"dialog-1",
|
|
36
|
+
size: "md",
|
|
37
|
+
title: "Header Title is the Title Prop"
|
|
38
|
+
}) do %>
|
|
39
|
+
<%= pb_rails("dialog/dialog_body") do %>
|
|
40
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg", text: "Button Primary" }) %>
|
|
41
|
+
<%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
|
|
42
|
+
<div style="height: 800px; background-color: lightgray;"></div>
|
|
43
|
+
<%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
|
|
44
|
+
<%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
|
|
45
|
+
<% end %>
|
|
46
|
+
|
|
47
|
+
<%= pb_rails("dialog/dialog_footer") do %>
|
|
48
|
+
<%= pb_rails("flex", props: { spacing: "between", padding_x: "md", padding_bottom: "md", padding: "sm" }) do %>
|
|
49
|
+
<%= pb_rails("button", props: { loading: true, text: "Send My Issue" }) %>
|
|
50
|
+
<%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
|
|
51
|
+
<%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
|
|
52
|
+
<% end %>
|
|
53
|
+
<% end %>
|
|
54
|
+
<% end %>
|
|
@@ -1,43 +1,102 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
2
|
|
|
3
3
|
import CircleIconButton from '../_circle_icon_button'
|
|
4
|
+
import Dialog from '../../pb_dialog/_dialog'
|
|
5
|
+
import Button from '../../pb_button/_button'
|
|
4
6
|
|
|
5
|
-
const CircleIconButtonLoading = (props) =>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
7
|
+
const CircleIconButtonLoading = (props) => {
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
const [isOpen, setIsOpen] = useState(false)
|
|
11
|
+
const close = () => setIsOpen(false)
|
|
12
|
+
const open = () => setIsOpen(true)
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<div>
|
|
16
|
+
<CircleIconButton
|
|
17
|
+
icon="plus"
|
|
18
|
+
loading
|
|
19
|
+
variant="primary"
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
<br />
|
|
24
|
+
|
|
25
|
+
<CircleIconButton
|
|
26
|
+
icon="pen"
|
|
27
|
+
loading
|
|
28
|
+
variant="secondary"
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
|
|
32
|
+
<br />
|
|
33
|
+
|
|
34
|
+
<CircleIconButton
|
|
35
|
+
disabled
|
|
36
|
+
icon="times"
|
|
37
|
+
loading
|
|
38
|
+
{...props}
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
<br />
|
|
42
|
+
|
|
43
|
+
<CircleIconButton
|
|
44
|
+
icon="user"
|
|
45
|
+
loading
|
|
46
|
+
variant="link"
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
<>
|
|
50
|
+
<Button marginTop="md"
|
|
51
|
+
onClick={open}
|
|
52
|
+
>
|
|
53
|
+
{'Open Dialog to confirm PLAY-2837 fix still works for circle icon buttons'}
|
|
54
|
+
</Button>
|
|
55
|
+
<Dialog
|
|
56
|
+
onCancel={close}
|
|
57
|
+
onClose={close}
|
|
58
|
+
onConfirm={close}
|
|
59
|
+
opened={isOpen}
|
|
60
|
+
size="md"
|
|
61
|
+
title="Header Title is the Title Prop"
|
|
62
|
+
>
|
|
63
|
+
<Dialog.Body>
|
|
64
|
+
<Button
|
|
65
|
+
aria={{ label: 'Loading' }}
|
|
66
|
+
loading
|
|
67
|
+
text="Button Primary"
|
|
68
|
+
/>
|
|
69
|
+
<CircleIconButton
|
|
70
|
+
icon="plus"
|
|
71
|
+
loading
|
|
72
|
+
/>
|
|
73
|
+
<div style={{height: '800px', backgroundColor: 'lightgray'}} />
|
|
74
|
+
<Button
|
|
75
|
+
loading
|
|
76
|
+
text="Loading..."
|
|
77
|
+
/>
|
|
78
|
+
<CircleIconButton
|
|
79
|
+
icon="plus"
|
|
80
|
+
loading
|
|
81
|
+
/>
|
|
82
|
+
</Dialog.Body>
|
|
83
|
+
<Dialog.Footer>
|
|
84
|
+
<Button
|
|
85
|
+
loading
|
|
86
|
+
text="Send My Issue"
|
|
87
|
+
/>
|
|
88
|
+
<CircleIconButton
|
|
89
|
+
icon="plus"
|
|
90
|
+
loading
|
|
91
|
+
/>
|
|
92
|
+
<Button variant="link">
|
|
93
|
+
{"Back"}
|
|
94
|
+
</Button>
|
|
95
|
+
</Dialog.Footer>
|
|
96
|
+
</Dialog>
|
|
97
|
+
</>
|
|
98
|
+
</div>
|
|
99
|
+
)
|
|
100
|
+
}
|
|
42
101
|
|
|
43
102
|
export default CircleIconButtonLoading
|
|
@@ -18,7 +18,6 @@ examples:
|
|
|
18
18
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
19
19
|
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
20
20
|
- multi_level_select_required_indicator: Required Indicator
|
|
21
|
-
- multi_level_select_placeholder: Placeholder
|
|
22
21
|
|
|
23
22
|
react:
|
|
24
23
|
- multi_level_select_default: Default
|
|
@@ -41,4 +40,3 @@ examples:
|
|
|
41
40
|
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
42
41
|
- multi_level_select_required_indicator: Required Indicator
|
|
43
42
|
- multi_level_select_react_reset_key: Reset with Key (React)
|
|
44
|
-
- multi_level_select_placeholder: Placeholder
|
|
@@ -18,4 +18,3 @@ export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.js
|
|
|
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
20
|
export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"
|
|
21
|
-
export { default as MultiLevelSelectPlaceholder } from "./_multi_level_select_placeholder.jsx"
|
|
@@ -26,9 +26,8 @@ The Table kit automatically sets these Filter defaults (which you can override v
|
|
|
26
26
|
- `min_width: "xs"`
|
|
27
27
|
- `popover_props: { width: "350px" }`
|
|
28
28
|
|
|
29
|
-
Alternatively, you can pass pre-rendered filter markup via the `filter` prop (e.g. for manual submission or custom filter helpers)—scroll down for that approach.
|
|
30
29
|
|
|
31
30
|
**IMPORTANT NOTE**:
|
|
32
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.
|
|
33
32
|
|
|
34
|
-
If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as
|
|
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).
|
|
@@ -41,7 +41,6 @@ examples:
|
|
|
41
41
|
- table_with_header_style_borderless: Header Style Borderless
|
|
42
42
|
- table_with_header_style_floating: Header Style Floating
|
|
43
43
|
- table_with_filter_variant_rails: Variant with Filter
|
|
44
|
-
- table_with_filter_variant_external_filter_rails: Variant with Filter (External Filter)
|
|
45
44
|
- table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
|
|
46
45
|
- table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
|
|
47
46
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable react/no-danger */
|
|
1
2
|
/* eslint-disable react/no-multi-comp */
|
|
2
3
|
|
|
3
4
|
import React, { useState } from 'react'
|
|
@@ -37,26 +38,14 @@ const TypeaheadWithHighlight = (props) => {
|
|
|
37
38
|
const [selectedUser, setSelectedUser] = useState()
|
|
38
39
|
|
|
39
40
|
const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
|
|
40
|
-
const escapeRegExp = (value = "") => (
|
|
41
|
-
value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
|
|
42
|
-
)
|
|
43
41
|
|
|
44
|
-
const highlighted = (text
|
|
42
|
+
const highlighted = (text) => {
|
|
45
43
|
if (!inputValue.length) return text
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
return parts.map((part, index) => {
|
|
52
|
-
if (part.toLowerCase() === inputValue.toLowerCase()) {
|
|
53
|
-
return <mark key={`${part}-${index}`}>{part}</mark>
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
return <React.Fragment key={`${part}-${index}`}>{part}</React.Fragment>
|
|
57
|
-
})
|
|
44
|
+
return text.replace(
|
|
45
|
+
new RegExp(inputValue, 'gi'),
|
|
46
|
+
(highlighted) => `<mark>${highlighted}</mark>`
|
|
47
|
+
)
|
|
58
48
|
}
|
|
59
|
-
|
|
60
49
|
return (
|
|
61
50
|
<Flex>
|
|
62
51
|
<FlexItem>
|
|
@@ -72,12 +61,11 @@ const TypeaheadWithHighlight = (props) => {
|
|
|
72
61
|
size={4}
|
|
73
62
|
{...props}
|
|
74
63
|
>
|
|
75
|
-
{highlighted(name)}
|
|
76
|
-
</Title>
|
|
64
|
+
<span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
|
|
77
65
|
<Body color="light"
|
|
78
66
|
{...props}
|
|
79
67
|
>
|
|
80
|
-
{highlighted(title)}{" • "}
|
|
68
|
+
<span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
|
|
81
69
|
{territory}
|
|
82
70
|
</Body>
|
|
83
71
|
</FlexItem>
|
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.4.0.pre.alpha.
|
|
4
|
+
version: 16.4.0.pre.alpha.PLAY2864circleiconbuttonloadingalignrails15138
|
|
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-03-
|
|
12
|
+
date: 2026-03-19 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -309,8 +309,7 @@ files:
|
|
|
309
309
|
- app/pb_kits/playbook/pb_button/docs/_button_form.jsx
|
|
310
310
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
|
|
311
311
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
|
|
312
|
-
- app/pb_kits/playbook/pb_button/docs/
|
|
313
|
-
- app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md
|
|
312
|
+
- app/pb_kits/playbook/pb_button/docs/_button_full_width.md
|
|
314
313
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md
|
|
315
314
|
- app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb
|
|
316
315
|
- app/pb_kits/playbook/pb_button/docs/_button_hover.jsx
|
|
@@ -1462,9 +1461,6 @@ files:
|
|
|
1462
1461
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1463
1462
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
1464
1463
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
|
|
1465
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb
|
|
1466
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx
|
|
1467
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md
|
|
1468
1464
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
1469
1465
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
|
1470
1466
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx
|
|
@@ -2304,8 +2300,6 @@ files:
|
|
|
2304
2300
|
- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md
|
|
2305
2301
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx
|
|
2306
2302
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md
|
|
2307
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.html.erb
|
|
2308
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md
|
|
2309
2303
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.html.erb
|
|
2310
2304
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md
|
|
2311
2305
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.jsx
|
|
@@ -2662,7 +2656,6 @@ files:
|
|
|
2662
2656
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
|
|
2663
2657
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
|
|
2664
2658
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx
|
|
2665
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.md
|
|
2666
2659
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
|
|
2667
2660
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
|
|
2668
2661
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
This button is used many times for mobile or other things like cards and sidebars.
|
|
2
|
-
|
|
3
|
-
### Responsive `display` and `full_width`
|
|
4
|
-
|
|
5
|
-
`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
|
|
6
|
-
|
|
7
|
-
Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
|
|
8
|
-
|
|
9
|
-
**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `full_width` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
|
|
10
|
-
|
|
11
|
-
```erb
|
|
12
|
-
<%= pb_rails("flex", props: {
|
|
13
|
-
display: { xs: "flex", default: "none" },
|
|
14
|
-
orientation: "column",
|
|
15
|
-
width: "100%",
|
|
16
|
-
}) do %>
|
|
17
|
-
<%= pb_rails("button", props: { full_width: true, text: "Add" }) %>
|
|
18
|
-
<% end %>
|
|
19
|
-
```
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
This button is used many times for mobile or other things like cards and sidebars.
|
|
2
|
-
|
|
3
|
-
### Responsive `display` and `full_width`
|
|
4
|
-
|
|
5
|
-
`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
|
|
6
|
-
|
|
7
|
-
Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
|
|
8
|
-
|
|
9
|
-
**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `fullWidth` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
|
|
10
|
-
|
|
11
|
-
```jsx
|
|
12
|
-
import { Flex, Button } from "playbook-ui"
|
|
13
|
-
|
|
14
|
-
const Example = () => (
|
|
15
|
-
<Flex
|
|
16
|
-
display={{ xs: "flex", default: "none" }}
|
|
17
|
-
orientation="column"
|
|
18
|
-
width="100%"
|
|
19
|
-
>
|
|
20
|
-
<Button fullWidth text="Add" />
|
|
21
|
-
</Flex>
|
|
22
|
-
)
|
|
23
|
-
```
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb
DELETED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
tree_base = [{
|
|
3
|
-
label: "Power Home Remodeling",
|
|
4
|
-
value: "powerHomeRemodeling",
|
|
5
|
-
id: "100",
|
|
6
|
-
expanded: true,
|
|
7
|
-
children: [
|
|
8
|
-
{
|
|
9
|
-
label: "People",
|
|
10
|
-
value: "people",
|
|
11
|
-
id: "101",
|
|
12
|
-
expanded: true,
|
|
13
|
-
children: [
|
|
14
|
-
{
|
|
15
|
-
label: "Talent Acquisition",
|
|
16
|
-
value: "talentAcquisition",
|
|
17
|
-
id: "102",
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
label: "Business Affairs",
|
|
21
|
-
value: "business Affairs",
|
|
22
|
-
id: "103",
|
|
23
|
-
children: [
|
|
24
|
-
{
|
|
25
|
-
label: "Initiatives",
|
|
26
|
-
value: "initiatives",
|
|
27
|
-
id: "104",
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
label: "Learning & Development",
|
|
31
|
-
value: "learningAndDevelopment",
|
|
32
|
-
id: "105",
|
|
33
|
-
},
|
|
34
|
-
],
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
label: "People Experience",
|
|
38
|
-
value: "peopleExperience",
|
|
39
|
-
id: "106",
|
|
40
|
-
},
|
|
41
|
-
],
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
label: "Contact Center",
|
|
45
|
-
value: "contactCenter",
|
|
46
|
-
id: "107",
|
|
47
|
-
children: [
|
|
48
|
-
{
|
|
49
|
-
label: "Appointment Management",
|
|
50
|
-
value: "appointmentManagement",
|
|
51
|
-
id: "108",
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
label: "Customer Service",
|
|
55
|
-
value: "customerService",
|
|
56
|
-
id: "109",
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
label: "Energy",
|
|
60
|
-
value: "energy",
|
|
61
|
-
id: "110",
|
|
62
|
-
},
|
|
63
|
-
],
|
|
64
|
-
},
|
|
65
|
-
],
|
|
66
|
-
}]
|
|
67
|
-
|
|
68
|
-
prefix_mls_ids = nil
|
|
69
|
-
prefix_mls_ids = ->(nodes, pfx) {
|
|
70
|
-
nodes.map do |n|
|
|
71
|
-
h = n.dup
|
|
72
|
-
h[:id] = "#{pfx}#{n[:id]}"
|
|
73
|
-
h[:children] = prefix_mls_ids.call(n[:children], pfx) if n[:children].present?
|
|
74
|
-
h
|
|
75
|
-
end
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
tree_multi = prefix_mls_ids.call(tree_base, "phm_")
|
|
79
|
-
tree_return_all = prefix_mls_ids.call(tree_base, "phr_")
|
|
80
|
-
tree_single = prefix_mls_ids.call(tree_base, "phs_")
|
|
81
|
-
%>
|
|
82
|
-
|
|
83
|
-
<%= pb_rails("multi_level_select", props: {
|
|
84
|
-
id: "multi-level-select-placeholder-multi-rails",
|
|
85
|
-
label: "Multi (default)",
|
|
86
|
-
margin_bottom: "sm",
|
|
87
|
-
name: "placeholder_multi",
|
|
88
|
-
tree_data: tree_multi,
|
|
89
|
-
placeholder: "Search or choose options…",
|
|
90
|
-
}) %>
|
|
91
|
-
|
|
92
|
-
<%= pb_rails("multi_level_select", props: {
|
|
93
|
-
id: "multi-level-select-placeholder-return-all-rails",
|
|
94
|
-
label: "Multi (return all selected)",
|
|
95
|
-
margin_bottom: "sm",
|
|
96
|
-
name: "placeholder_return_all",
|
|
97
|
-
placeholder: "Departments...",
|
|
98
|
-
return_all_selected: true,
|
|
99
|
-
tree_data: tree_return_all,
|
|
100
|
-
}) %>
|
|
101
|
-
|
|
102
|
-
<%= pb_rails("multi_level_select", props: {
|
|
103
|
-
id: "multi-level-select-placeholder-single-rails",
|
|
104
|
-
label: "Single",
|
|
105
|
-
name: "placeholder_single",
|
|
106
|
-
placeholder: "Select one option…",
|
|
107
|
-
tree_data: tree_single,
|
|
108
|
-
variant: "single",
|
|
109
|
-
}) %>
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
import MultiLevelSelect from "../_multi_level_select";
|
|
4
|
-
|
|
5
|
-
const treeTemplate = [
|
|
6
|
-
{
|
|
7
|
-
label: "Power Home Remodeling",
|
|
8
|
-
value: "powerHomeRemodeling",
|
|
9
|
-
id: "powerhome1",
|
|
10
|
-
expanded: true,
|
|
11
|
-
children: [
|
|
12
|
-
{
|
|
13
|
-
label: "People",
|
|
14
|
-
value: "people",
|
|
15
|
-
id: "people1",
|
|
16
|
-
expanded: true,
|
|
17
|
-
children: [
|
|
18
|
-
{
|
|
19
|
-
label: "Talent Acquisition",
|
|
20
|
-
value: "talentAcquisition",
|
|
21
|
-
id: "talent1",
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
label: "Business Affairs",
|
|
25
|
-
value: "businessAffairs",
|
|
26
|
-
id: "business1",
|
|
27
|
-
children: [
|
|
28
|
-
{
|
|
29
|
-
label: "Initiatives",
|
|
30
|
-
value: "initiatives",
|
|
31
|
-
id: "initiative1",
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
label: "Learning & Development",
|
|
35
|
-
value: "learningAndDevelopment",
|
|
36
|
-
id: "development1",
|
|
37
|
-
},
|
|
38
|
-
],
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
label: "People Experience",
|
|
42
|
-
value: "peopleExperience",
|
|
43
|
-
id: "experience1",
|
|
44
|
-
},
|
|
45
|
-
],
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
label: "Contact Center",
|
|
49
|
-
value: "contactCenter",
|
|
50
|
-
id: "contact1",
|
|
51
|
-
children: [
|
|
52
|
-
{
|
|
53
|
-
label: "Appointment Management",
|
|
54
|
-
value: "appointmentManagement",
|
|
55
|
-
id: "appointment1",
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
label: "Customer Service",
|
|
59
|
-
value: "customerService",
|
|
60
|
-
id: "customer1",
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
label: "Energy",
|
|
64
|
-
value: "energy",
|
|
65
|
-
id: "energy1",
|
|
66
|
-
},
|
|
67
|
-
],
|
|
68
|
-
},
|
|
69
|
-
],
|
|
70
|
-
},
|
|
71
|
-
];
|
|
72
|
-
|
|
73
|
-
function prefixTreeIds(nodes, prefix) {
|
|
74
|
-
return nodes.map((node) => ({
|
|
75
|
-
...node,
|
|
76
|
-
id: `${prefix}${node.id}`,
|
|
77
|
-
children:
|
|
78
|
-
node.children && node.children.length > 0
|
|
79
|
-
? prefixTreeIds(node.children, prefix)
|
|
80
|
-
: node.children,
|
|
81
|
-
}));
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
const treeDataMulti = prefixTreeIds(treeTemplate, "phm_");
|
|
85
|
-
const treeDataReturnAll = prefixTreeIds(treeTemplate, "phr_");
|
|
86
|
-
const treeDataSingle = prefixTreeIds(treeTemplate, "phs_");
|
|
87
|
-
|
|
88
|
-
const MultiLevelSelectPlaceholder = () => (
|
|
89
|
-
<>
|
|
90
|
-
<MultiLevelSelect
|
|
91
|
-
id="multi-level-select-placeholder-multi"
|
|
92
|
-
label="Multi (default)"
|
|
93
|
-
marginBottom="sm"
|
|
94
|
-
name="placeholder_multi"
|
|
95
|
-
onSelect={(selectedNodes) =>
|
|
96
|
-
console.log("Multi — default", selectedNodes)
|
|
97
|
-
}
|
|
98
|
-
placeholder="Search or choose options…"
|
|
99
|
-
treeData={treeDataMulti}
|
|
100
|
-
/>
|
|
101
|
-
<MultiLevelSelect
|
|
102
|
-
id="multi-level-select-placeholder-return-all"
|
|
103
|
-
label="Multi (return all selected)"
|
|
104
|
-
marginBottom="sm"
|
|
105
|
-
name="placeholder_return_all"
|
|
106
|
-
onSelect={(selectedNodes) =>
|
|
107
|
-
console.log("Multi — return all selected", selectedNodes)
|
|
108
|
-
}
|
|
109
|
-
placeholder="Departments..."
|
|
110
|
-
returnAllSelected
|
|
111
|
-
treeData={treeDataReturnAll}
|
|
112
|
-
/>
|
|
113
|
-
<MultiLevelSelect
|
|
114
|
-
id="multi-level-select-placeholder-single"
|
|
115
|
-
label="Single"
|
|
116
|
-
name="placeholder_single"
|
|
117
|
-
onSelect={(selectedNodes) =>
|
|
118
|
-
console.log("Single", selectedNodes)
|
|
119
|
-
}
|
|
120
|
-
placeholder="Select one option…"
|
|
121
|
-
treeData={treeDataSingle}
|
|
122
|
-
variant="single"
|
|
123
|
-
/>
|
|
124
|
-
</>
|
|
125
|
-
);
|
|
126
|
-
|
|
127
|
-
export default MultiLevelSelectPlaceholder;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Use the `placeholder` prop to customize the initial text shown in the input when nothing is selected. The default is `Start typing...`.
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.html.erb
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
<%# External filter: capture any filter markup and pass it via the filter prop.
|
|
2
|
-
Use your own helper (e.g. a search/filter form) or pb_rails("filter") as shown here. %>
|
|
3
|
-
<% users = [
|
|
4
|
-
{ name: "Alex", role: "Engineer" },
|
|
5
|
-
{ name: "Sam", role: "Designer" },
|
|
6
|
-
{ name: "Jordan", role: "Manager" },
|
|
7
|
-
] %>
|
|
8
|
-
|
|
9
|
-
<% filter_output = capture do %>
|
|
10
|
-
<%= pb_rails("filter", props: {
|
|
11
|
-
id: "external-filter-demo",
|
|
12
|
-
template: "single",
|
|
13
|
-
results: 3,
|
|
14
|
-
background: false,
|
|
15
|
-
sort_menu: [
|
|
16
|
-
{ item: "Name", link: "#", active: true, direction: "asc" },
|
|
17
|
-
{ item: "Role", link: "#", active: false },
|
|
18
|
-
],
|
|
19
|
-
}) do %>
|
|
20
|
-
<%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
|
|
21
|
-
<%= pb_rails("text_input", props: { label: "Role", placeholder: "e.g. Engineer, Designer" }) %>
|
|
22
|
-
<%= pb_rails("button", props: { text: "Apply" }) %>
|
|
23
|
-
<% end %>
|
|
24
|
-
<% end %>
|
|
25
|
-
|
|
26
|
-
<%= pb_rails("table", props: {
|
|
27
|
-
variant: "with_filter",
|
|
28
|
-
title: "Table with External Filter",
|
|
29
|
-
filter: filter_output,
|
|
30
|
-
}) do %>
|
|
31
|
-
<%= pb_rails("table/table_head") do %>
|
|
32
|
-
<%= pb_rails("table/table_row") do %>
|
|
33
|
-
<%= pb_rails("table/table_header", props: { text: "Name" }) %>
|
|
34
|
-
<%= pb_rails("table/table_header", props: { text: "Role" }) %>
|
|
35
|
-
<% end %>
|
|
36
|
-
<% end %>
|
|
37
|
-
<%= pb_rails("table/table_body") do %>
|
|
38
|
-
<% users.each do |user| %>
|
|
39
|
-
<%= pb_rails("table/table_row") do %>
|
|
40
|
-
<%= pb_rails("table/table_cell") { user[:name] } %>
|
|
41
|
-
<%= pb_rails("table/table_cell") { user[:role] } %>
|
|
42
|
-
<% end %>
|
|
43
|
-
<% end %>
|
|
44
|
-
<% end %>
|
|
45
|
-
<% end %>
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
Use the **"with_filter"** variant with an **external filter** (Option B): pass pre-rendered filter markup via the `filter` prop. Same layout as Variant with Filter (card, title, separator, flex); only the filter slot is supplied by you. Use this when you need:
|
|
2
|
-
|
|
3
|
-
- **Manual filter submission** – Apply / Filter button instead of automatic application
|
|
4
|
-
- **Full control** – Over filter props, template, sort menu, and submission
|
|
5
|
-
- **Custom or app-specific filter helpers** – Any helper that returns filter markup (e.g. search/filter forms)
|
|
6
|
-
|
|
7
|
-
#### Required props
|
|
8
|
-
|
|
9
|
-
- `variant: "with_filter"`
|
|
10
|
-
- `filter` – Pre-rendered filter HTML (e.g. from `capture { ... }`)
|
|
11
|
-
|
|
12
|
-
When `filter` is present, `filter_content` and `filter_props` are ignored.
|
|
13
|
-
|
|
14
|
-
#### How to do it
|
|
15
|
-
|
|
16
|
-
1. **Render your filter** (e.g. `pb_rails("filter", ...)` or any helper that returns filter markup).
|
|
17
|
-
2. **Capture the output** with `capture do ... end`.
|
|
18
|
-
3. **Pass it to the Table** as the `filter` prop.
|
|
19
|
-
|
|
20
|
-
**Example (generic pattern):**
|
|
21
|
-
|
|
22
|
-
```erb
|
|
23
|
-
<% filter_output = capture do %>
|
|
24
|
-
<%= pb_rails("filter", props: { template: "single", results: 10, background: false }) do %>
|
|
25
|
-
<%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
|
|
26
|
-
<%= pb_rails("button", props: { text: "Apply" }) %>
|
|
27
|
-
<% end %>
|
|
28
|
-
<% end %>
|
|
29
|
-
|
|
30
|
-
<%= pb_rails("table", props: {
|
|
31
|
-
variant: "with_filter",
|
|
32
|
-
title: "My Table",
|
|
33
|
-
filter: filter_output,
|
|
34
|
-
}) do %>
|
|
35
|
-
<%# table_head / table_body ... %>
|
|
36
|
-
<% end %>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
Use `formatOptionLabel` to customize each option row and highlight text that matches the current search input. Split each field (for example, `name` and `title`) by the typed value, then render matching parts inside `<mark>` so users can quickly see why a result matched.
|
|
2
|
-
|
|
3
|
-
See the code snippet below for more details.
|