playbook_ui_docs 16.2.0.pre.rc.5 → 16.2.0.pre.rc.6
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_icon_variant.html.erb +21 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant.jsx +180 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_rails.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_react.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_max_displayed_users.jsx +71 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb +1 -1
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.jsx +1 -0
- metadata +7 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f57679a2f7a626cfa67aa830dd5cf34d89ad472021381e40fa5b70abd0c0f094
|
|
4
|
+
data.tar.gz: 7d36e8fe65b9992d39851679eea04673b0268dcfe5a6a3618002cd7ac359e6e2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bc2e737e356fa7918b491c295d524081a7338c334ec4dbbf8689b112a3f5d22a7d02d3de1bfb906d84f7b353aa0483c087383615a13bceee889d576ce8c45aab
|
|
7
|
+
data.tar.gz: 640481433bea1f965084f7cbfa87c6b1a284a69eef504b26d0ac71ee2fdfbc2b9dcf8fde51ee1d510efd8253fab3b82863bd182f2c7b337e833e2f3548d9b5ae
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<%= pb_rails("caption", props: { margin_y: "md", text: "Small Size (sm)" }) %>
|
|
2
|
+
<%= pb_rails("button", props: { icon: "plus", size: "sm", margin_right: "lg" }) %>
|
|
3
|
+
<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "secondary", margin_right: "lg" }) %>
|
|
4
|
+
<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "link", margin_right: "lg" }) %>
|
|
5
|
+
<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "danger", margin_right: "lg" }) %>
|
|
6
|
+
<%= pb_rails("button", props: { icon: "plus", size: "sm", disabled: true, margin_right: "lg" }) %>
|
|
7
|
+
<%= pb_rails("button", props: { icon: "plus", size: "sm", loading: true, margin_right: "lg" }) %>
|
|
8
|
+
<%= pb_rails("caption", props: { margin_y: "md", text: "Medium Size (md)" }) %>
|
|
9
|
+
<%= pb_rails("button", props: { icon: "plus", size: "md", margin_right: "lg" }) %>
|
|
10
|
+
<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "secondary", margin_right: "lg" }) %>
|
|
11
|
+
<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "link", margin_right: "lg" }) %>
|
|
12
|
+
<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "danger", margin_right: "lg" }) %>
|
|
13
|
+
<%= pb_rails("button", props: { icon: "plus", size: "md", disabled: true, margin_right: "lg" }) %>
|
|
14
|
+
<%= pb_rails("button", props: { icon: "plus", size: "md", loading: true, margin_right: "lg" }) %>
|
|
15
|
+
<%= pb_rails("caption", props: { margin_y: "md", text: "Large Size (lg)" }) %>
|
|
16
|
+
<%= pb_rails("button", props: { icon: "plus", size: "lg", margin_right: "lg" }) %>
|
|
17
|
+
<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "secondary", margin_right: "lg" }) %>
|
|
18
|
+
<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "link", margin_right: "lg" }) %>
|
|
19
|
+
<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "danger", margin_right: "lg" }) %>
|
|
20
|
+
<%= pb_rails("button", props: { icon: "plus", size: "lg", disabled: true, margin_right: "lg" }) %>
|
|
21
|
+
<%= pb_rails("button", props: { icon: "plus", size: "lg", loading: true, margin_right: "lg" }) %>
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Button from "../../pb_button/_button"
|
|
3
|
+
import Caption from "../../pb_caption/_caption"
|
|
4
|
+
|
|
5
|
+
const ButtonIconVariant = (props) => (
|
|
6
|
+
<div>
|
|
7
|
+
<Caption
|
|
8
|
+
marginY="md"
|
|
9
|
+
text="Small Size (sm)"
|
|
10
|
+
/>
|
|
11
|
+
<Button
|
|
12
|
+
icon="plus"
|
|
13
|
+
marginRight='lg'
|
|
14
|
+
size="sm"
|
|
15
|
+
tabIndex={0}
|
|
16
|
+
{...props}
|
|
17
|
+
/>
|
|
18
|
+
{' '}
|
|
19
|
+
<Button
|
|
20
|
+
icon="plus"
|
|
21
|
+
marginRight='lg'
|
|
22
|
+
size="sm"
|
|
23
|
+
tabIndex={0}
|
|
24
|
+
variant="secondary"
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
{' '}
|
|
28
|
+
<Button
|
|
29
|
+
icon="plus"
|
|
30
|
+
marginRight='lg'
|
|
31
|
+
size="sm"
|
|
32
|
+
tabIndex={0}
|
|
33
|
+
variant="link"
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
{' '}
|
|
37
|
+
<Button
|
|
38
|
+
icon="plus"
|
|
39
|
+
marginRight='lg'
|
|
40
|
+
size="sm"
|
|
41
|
+
tabIndex={0}
|
|
42
|
+
variant="danger"
|
|
43
|
+
{...props}
|
|
44
|
+
/>
|
|
45
|
+
{' '}
|
|
46
|
+
<Button
|
|
47
|
+
disabled
|
|
48
|
+
icon="plus"
|
|
49
|
+
marginRight='lg'
|
|
50
|
+
size="sm"
|
|
51
|
+
tabIndex={0}
|
|
52
|
+
{...props}
|
|
53
|
+
/>
|
|
54
|
+
{' '}
|
|
55
|
+
<Button
|
|
56
|
+
icon="plus"
|
|
57
|
+
loading
|
|
58
|
+
marginRight='lg'
|
|
59
|
+
size="sm"
|
|
60
|
+
tabIndex={0}
|
|
61
|
+
{...props}
|
|
62
|
+
/>
|
|
63
|
+
<br/>
|
|
64
|
+
<Caption
|
|
65
|
+
marginY="md"
|
|
66
|
+
text="Medium Size (md)"
|
|
67
|
+
/>
|
|
68
|
+
<Button
|
|
69
|
+
icon="plus"
|
|
70
|
+
marginRight='lg'
|
|
71
|
+
size="md"
|
|
72
|
+
tabIndex={0}
|
|
73
|
+
{...props}
|
|
74
|
+
/>
|
|
75
|
+
{' '}
|
|
76
|
+
<Button
|
|
77
|
+
icon="plus"
|
|
78
|
+
marginRight='lg'
|
|
79
|
+
size="md"
|
|
80
|
+
tabIndex={0}
|
|
81
|
+
variant="secondary"
|
|
82
|
+
{...props}
|
|
83
|
+
/>
|
|
84
|
+
{' '}
|
|
85
|
+
<Button
|
|
86
|
+
icon="plus"
|
|
87
|
+
marginRight='lg'
|
|
88
|
+
size="md"
|
|
89
|
+
tabIndex={0}
|
|
90
|
+
variant="link"
|
|
91
|
+
{...props}
|
|
92
|
+
/>
|
|
93
|
+
{' '}
|
|
94
|
+
<Button
|
|
95
|
+
icon="plus"
|
|
96
|
+
marginRight='lg'
|
|
97
|
+
size="md"
|
|
98
|
+
tabIndex={0}
|
|
99
|
+
variant="danger"
|
|
100
|
+
{...props}
|
|
101
|
+
/>
|
|
102
|
+
{' '}
|
|
103
|
+
<Button
|
|
104
|
+
disabled
|
|
105
|
+
icon="plus"
|
|
106
|
+
marginRight='lg'
|
|
107
|
+
size="md"
|
|
108
|
+
tabIndex={0}
|
|
109
|
+
{...props}
|
|
110
|
+
/>
|
|
111
|
+
{' '}
|
|
112
|
+
<Button
|
|
113
|
+
icon="plus"
|
|
114
|
+
loading
|
|
115
|
+
marginRight='lg'
|
|
116
|
+
size="md"
|
|
117
|
+
tabIndex={0}
|
|
118
|
+
{...props}
|
|
119
|
+
/>
|
|
120
|
+
<br/>
|
|
121
|
+
<Caption
|
|
122
|
+
marginY="md"
|
|
123
|
+
text="Large Size (lg)"
|
|
124
|
+
/>
|
|
125
|
+
<Button
|
|
126
|
+
icon="plus"
|
|
127
|
+
marginRight='lg'
|
|
128
|
+
size="lg"
|
|
129
|
+
tabIndex={0}
|
|
130
|
+
{...props}
|
|
131
|
+
/>
|
|
132
|
+
{' '}
|
|
133
|
+
<Button
|
|
134
|
+
icon="plus"
|
|
135
|
+
marginRight='lg'
|
|
136
|
+
size="lg"
|
|
137
|
+
tabIndex={0}
|
|
138
|
+
variant="secondary"
|
|
139
|
+
{...props}
|
|
140
|
+
/>
|
|
141
|
+
{' '}
|
|
142
|
+
<Button
|
|
143
|
+
icon="plus"
|
|
144
|
+
marginRight='lg'
|
|
145
|
+
size="lg"
|
|
146
|
+
tabIndex={0}
|
|
147
|
+
variant="link"
|
|
148
|
+
{...props}
|
|
149
|
+
/>
|
|
150
|
+
{' '}
|
|
151
|
+
<Button
|
|
152
|
+
icon="plus"
|
|
153
|
+
marginRight='lg'
|
|
154
|
+
size="lg"
|
|
155
|
+
tabIndex={0}
|
|
156
|
+
variant="danger"
|
|
157
|
+
{...props}
|
|
158
|
+
/>
|
|
159
|
+
{' '}
|
|
160
|
+
<Button
|
|
161
|
+
disabled
|
|
162
|
+
icon="plus"
|
|
163
|
+
marginRight='lg'
|
|
164
|
+
size="lg"
|
|
165
|
+
tabIndex={0}
|
|
166
|
+
{...props}
|
|
167
|
+
/>
|
|
168
|
+
{' '}
|
|
169
|
+
<Button
|
|
170
|
+
icon="plus"
|
|
171
|
+
loading
|
|
172
|
+
marginRight='lg'
|
|
173
|
+
size="lg"
|
|
174
|
+
tabIndex={0}
|
|
175
|
+
{...props}
|
|
176
|
+
/>
|
|
177
|
+
</div>
|
|
178
|
+
)
|
|
179
|
+
|
|
180
|
+
export default ButtonIconVariant
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The icon button variant automatically renders when you provide an `icon` prop without a corresponding `text` prop. The button will only display an icon (no text) and will be wrapped with the icon button styling. This works with all button variants including "link", "primary", "secondary", etc. Simply use `<%= pb_rails("button", props: { icon: "plus", variant: "secondary" }) %>` to get an icon button.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The icon button variant automatically renders when you provide an `icon` prop without a corresponding `text` prop. The button will only display an icon (no text) and will be wrapped with the icon button styling. This works with all button variants including "link", "primary", "secondary", etc. Simply use `<Button icon="rocket" variant="primary" />` to get an icon button.
|
|
@@ -13,6 +13,7 @@ examples:
|
|
|
13
13
|
- button_form: Button Form Attribute
|
|
14
14
|
- button_managed_disabled: Button Toggle Disabled State
|
|
15
15
|
- button_managed_disabled_helper: Button Toggle Disabled State Helper
|
|
16
|
+
- button_icon_variant: Icon Button Variant
|
|
16
17
|
|
|
17
18
|
react:
|
|
18
19
|
- button_default: Button Variants
|
|
@@ -27,6 +28,7 @@ examples:
|
|
|
27
28
|
- button_size: Button Size
|
|
28
29
|
- button_form: Button Form Attribute
|
|
29
30
|
- button_hover: Button Hover
|
|
31
|
+
- button_icon_variant: Icon Button Variant
|
|
30
32
|
|
|
31
33
|
swift:
|
|
32
34
|
- button_default_swift: Button Variants
|
|
@@ -4,6 +4,7 @@ export { default as ButtonLink } from './_button_link.jsx'
|
|
|
4
4
|
export { default as ButtonLoading } from './_button_loading.jsx'
|
|
5
5
|
export { default as ButtonBlockContent } from './_button_block_content.jsx'
|
|
6
6
|
export { default as ButtonIconOptions } from './_button_icon_options.jsx'
|
|
7
|
+
export { default as ButtonIconVariant } from './_button_icon_variant.jsx'
|
|
7
8
|
export { default as ButtonAccessibility } from './_button_accessibility.jsx'
|
|
8
9
|
export { default as ButtonOptions } from './_button_options.jsx'
|
|
9
10
|
export { default as ButtonSize } from './_button_size.jsx'
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Body from '../../pb_body/_body'
|
|
3
|
+
import MultipleUsers from '../_multiple_users'
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
const MultipleUsersMaxDisplayedUsers = (props) => {
|
|
7
|
+
const status = () => (Math.random() < 0.5 ? 'Online' : 'Offline')
|
|
8
|
+
const buildUser = (name, imageUrl) => ({ name, imageUrl, tooltip: `${name} - ${status()}` })
|
|
9
|
+
|
|
10
|
+
const users = [
|
|
11
|
+
buildUser("Patrick Welch", "https://randomuser.me/api/portraits/men/9.jpg"),
|
|
12
|
+
buildUser("Lucille Sanchez", "https://randomuser.me/api/portraits/women/6.jpg"),
|
|
13
|
+
buildUser("Beverly Reyes", "https://randomuser.me/api/portraits/women/74.jpg"),
|
|
14
|
+
buildUser("Keith Craig", "https://randomuser.me/api/portraits/men/87.jpg"),
|
|
15
|
+
buildUser("Alicia Cooper", "https://randomuser.me/api/portraits/women/20.jpg"),
|
|
16
|
+
buildUser("Michelle Ellis", "https://randomuser.me/api/portraits/women/92.jpg"),
|
|
17
|
+
buildUser("Clyde Mitchelle", "https://randomuser.me/api/portraits/men/39.jpg"),
|
|
18
|
+
buildUser("Ellen Johnson", "https://randomuser.me/api/portraits/women/59.jpg"),
|
|
19
|
+
buildUser("Eleanor Larson", "https://randomuser.me/api/portraits/women/46.jpg"),
|
|
20
|
+
buildUser("Cody Cunningham", "https://randomuser.me/api/portraits/men/40.jpg"),
|
|
21
|
+
buildUser("Thomas Parker", "https://randomuser.me/api/portraits/men/0.jpg"),
|
|
22
|
+
buildUser("Frances Baker", "https://randomuser.me/api/portraits/men/46.jpg"),
|
|
23
|
+
buildUser("Joseph Nguyen", "https://randomuser.me/api/portraits/women/42.jpg"),
|
|
24
|
+
]
|
|
25
|
+
return (
|
|
26
|
+
<div>
|
|
27
|
+
<Body
|
|
28
|
+
marginBottom={"md"}
|
|
29
|
+
text={`Total Users: ${users.length}`}
|
|
30
|
+
/>
|
|
31
|
+
<MultipleUsers
|
|
32
|
+
maxDisplayedUsers={3}
|
|
33
|
+
{...props}
|
|
34
|
+
users={users}
|
|
35
|
+
/>
|
|
36
|
+
<br />
|
|
37
|
+
<br />
|
|
38
|
+
<MultipleUsers
|
|
39
|
+
maxDisplayedUsers={6}
|
|
40
|
+
{...props}
|
|
41
|
+
users={users}
|
|
42
|
+
withTooltip
|
|
43
|
+
/>
|
|
44
|
+
<br />
|
|
45
|
+
<br />
|
|
46
|
+
<MultipleUsers
|
|
47
|
+
maxDisplayedUsers={9}
|
|
48
|
+
{...props}
|
|
49
|
+
reverse
|
|
50
|
+
users={users}
|
|
51
|
+
/>
|
|
52
|
+
<br />
|
|
53
|
+
<br />
|
|
54
|
+
<MultipleUsers
|
|
55
|
+
maxDisplayedUsers={users.length - 1}
|
|
56
|
+
{...props}
|
|
57
|
+
users={users}
|
|
58
|
+
withTooltip
|
|
59
|
+
/>
|
|
60
|
+
<br />
|
|
61
|
+
<br />
|
|
62
|
+
<MultipleUsers
|
|
63
|
+
maxDisplayedUsers={users.length + 1}
|
|
64
|
+
{...props}
|
|
65
|
+
users={users}
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default MultipleUsersMaxDisplayedUsers
|
|
@@ -12,9 +12,10 @@ examples:
|
|
|
12
12
|
- multiple_users_reverse: Reverse
|
|
13
13
|
- multiple_users_size: Size
|
|
14
14
|
- multiple_users_with_tooltip: With Tooltip
|
|
15
|
+
- multiple_users_max_displayed_users: Max Displayed Users
|
|
15
16
|
|
|
16
17
|
swift:
|
|
17
18
|
- multiple_users_default_swift: Default
|
|
18
19
|
- multiple_users_reverse_swift: Reverse
|
|
19
20
|
- multiple_users_size_swift: Small
|
|
20
|
-
- multiple_users_props_swift: ""
|
|
21
|
+
- multiple_users_props_swift: ""
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
|
|
2
2
|
export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
|
|
3
3
|
export { default as MultipleUsersSize } from './_multiple_users_size.jsx'
|
|
4
|
-
export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'
|
|
4
|
+
export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'
|
|
5
|
+
export { default as MultipleUsersMaxDisplayedUsers } from './_multiple_users_max_displayed_users.jsx'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<%= pb_rails("star_rating", props: { padding_bottom: "xs", variant: "interactive" }) %>
|
|
1
|
+
<%= pb_rails("star_rating", props: { label: "Add a Rating", padding_bottom: "xs", variant: "interactive" }) %>
|
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.rc.
|
|
4
|
+
version: 16.2.0.pre.rc.6
|
|
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-10 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -311,6 +311,10 @@ files:
|
|
|
311
311
|
- app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx
|
|
312
312
|
- app/pb_kits/playbook/pb_button/docs/_button_icon_options.md
|
|
313
313
|
- app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md
|
|
314
|
+
- app/pb_kits/playbook/pb_button/docs/_button_icon_variant.html.erb
|
|
315
|
+
- app/pb_kits/playbook/pb_button/docs/_button_icon_variant.jsx
|
|
316
|
+
- app/pb_kits/playbook/pb_button/docs/_button_icon_variant_rails.md
|
|
317
|
+
- app/pb_kits/playbook/pb_button/docs/_button_icon_variant_react.md
|
|
314
318
|
- app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
|
|
315
319
|
- app/pb_kits/playbook/pb_button/docs/_button_link.jsx
|
|
316
320
|
- app/pb_kits/playbook/pb_button/docs/_button_link.md
|
|
@@ -1478,6 +1482,7 @@ files:
|
|
|
1478
1482
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.html.erb
|
|
1479
1483
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx
|
|
1480
1484
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md
|
|
1485
|
+
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_max_displayed_users.jsx
|
|
1481
1486
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md
|
|
1482
1487
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.html.erb
|
|
1483
1488
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx
|