playbook_ui_docs 16.0.0.pre.alpha.PLAY2668multipleuserstooltiprails13556 → 16.0.0.pre.alpha.PLAY2684iconbuttonvariant13518
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_with_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -1
- metadata +6 -3
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb +0 -30
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e0f6fb608f9c49fd84e6a53c86483a3ffb04d97fe93d018ea893357d6f5a4025
|
|
4
|
+
data.tar.gz: 3464b0d4e45d3ab422023b32a7e02bdf0d23c31aa49f178f565a2e70c7fbec61
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ef3acb30ffe98eea6564831a2bca5ea6b928db630c5b971bd65342581799dd6a226301c9199eb3583018339047fce99a3a25a009a30195ef1e71f240544ad63b
|
|
7
|
+
data.tar.gz: 1c2e30e6b9b088a433524945e8afe27641db590e83a3406fb25b0273f6615512ab9adb4045e8c7a743d6879b5bf0c358f04db1f7a6cbcfc4b0616b7cb1a44d47
|
|
@@ -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'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use the `withTooltip`
|
|
1
|
+
Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
|
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.0.0.pre.alpha.
|
|
4
|
+
version: 16.0.0.pre.alpha.PLAY2684iconbuttonvariant13518
|
|
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-01-
|
|
12
|
+
date: 2026-01-13 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -305,6 +305,10 @@ files:
|
|
|
305
305
|
- app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx
|
|
306
306
|
- app/pb_kits/playbook/pb_button/docs/_button_icon_options.md
|
|
307
307
|
- app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md
|
|
308
|
+
- app/pb_kits/playbook/pb_button/docs/_button_icon_variant.html.erb
|
|
309
|
+
- app/pb_kits/playbook/pb_button/docs/_button_icon_variant.jsx
|
|
310
|
+
- app/pb_kits/playbook/pb_button/docs/_button_icon_variant_rails.md
|
|
311
|
+
- app/pb_kits/playbook/pb_button/docs/_button_icon_variant_react.md
|
|
308
312
|
- app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
|
|
309
313
|
- app/pb_kits/playbook/pb_button/docs/_button_link.jsx
|
|
310
314
|
- app/pb_kits/playbook/pb_button/docs/_button_link.md
|
|
@@ -1451,7 +1455,6 @@ files:
|
|
|
1451
1455
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
|
|
1452
1456
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
|
|
1453
1457
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
|
|
1454
|
-
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb
|
|
1455
1458
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
|
|
1456
1459
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
|
|
1457
1460
|
- app/pb_kits/playbook/pb_multiple_users/docs/example.yml
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("multiple_users", props: {
|
|
2
|
-
with_tooltip: true,
|
|
3
|
-
users: [
|
|
4
|
-
{
|
|
5
|
-
name: "Patrick Welch",
|
|
6
|
-
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
7
|
-
tooltip: "Patrick Welch - Online"
|
|
8
|
-
},
|
|
9
|
-
{
|
|
10
|
-
name: "Lucille Sanchez",
|
|
11
|
-
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
12
|
-
tooltip: "Lucille Sanchez - Offline"
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
name: "Beverly Reyes",
|
|
16
|
-
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
17
|
-
tooltip: "Beverly Reyes - Online"
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
name: "Keith Craig",
|
|
21
|
-
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
22
|
-
tooltip: "Keith Craig - Away"
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
name: "Alicia Cooper",
|
|
26
|
-
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
27
|
-
tooltip: "Alicia Cooper - Busy"
|
|
28
|
-
}
|
|
29
|
-
]
|
|
30
|
-
}) %>
|