playbook_ui_docs 16.0.0.pre.alpha.PLAY2684iconbuttonvariant13518 → 16.0.0.pre.alpha.PLAY267213608
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/example.yml +0 -2
- data/app/pb_kits/playbook/pb_button/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb +30 -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 +1 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb +25 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md +1 -0
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -0
- metadata +5 -6
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant.html.erb +0 -21
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant.jsx +0 -180
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_rails.md +0 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_react.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 204769a9dd91f097c6b51f6c40905bd2f9fc38fdc78cc2fa341e93e220bad5cf
|
|
4
|
+
data.tar.gz: bb6e1e0cccdb2449ef41475171217103f43f57af1a20cd5aa0fdaa5b4595a7cc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e06b46d42e53adbf3d1f2ece4e87145a6a1cd170bc5ff6bb66879b1ea1792e864f60a1d9dec23bf9f0004739b7f2fe6b869acfc6f0b16e392564114714ab6768
|
|
7
|
+
data.tar.gz: f9e7110cd7c0515c8f1db888ed8121e533ea8656a23d03165f81d6650c3d96cfc25c032152c34fb2c4b0a045d6ff5f6955c5ec3197f16829f5157c8a0b66a497
|
|
@@ -13,7 +13,6 @@ 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
|
|
17
16
|
|
|
18
17
|
react:
|
|
19
18
|
- button_default: Button Variants
|
|
@@ -28,7 +27,6 @@ examples:
|
|
|
28
27
|
- button_size: Button Size
|
|
29
28
|
- button_form: Button Form Attribute
|
|
30
29
|
- button_hover: Button Hover
|
|
31
|
-
- button_icon_variant: Icon Button Variant
|
|
32
30
|
|
|
33
31
|
swift:
|
|
34
32
|
- button_default_swift: Button Variants
|
|
@@ -4,7 +4,6 @@ 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'
|
|
8
7
|
export { default as ButtonAccessibility } from './_button_accessibility.jsx'
|
|
9
8
|
export { default as ButtonOptions } from './_button_options.jsx'
|
|
10
9
|
export { default as ButtonSize } from './_button_size.jsx'
|
|
@@ -0,0 +1,30 @@
|
|
|
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
|
+
}) %>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
|
|
1
|
+
Use the `withTooltip` / `with_tooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<%= pb_rails("textarea", props: {
|
|
2
|
+
label: "ID on Container",
|
|
3
|
+
id: "container-id",
|
|
4
|
+
name: "comment",
|
|
5
|
+
rows: 4
|
|
6
|
+
}) %>
|
|
7
|
+
|
|
8
|
+
<br/>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("textarea", props: {
|
|
11
|
+
label: "ID on Textarea via input_options",
|
|
12
|
+
input_options: { id: "textarea-id" },
|
|
13
|
+
name: "comment",
|
|
14
|
+
rows: 4
|
|
15
|
+
}) %>
|
|
16
|
+
|
|
17
|
+
<br/>
|
|
18
|
+
|
|
19
|
+
<%= pb_rails("textarea", props: {
|
|
20
|
+
label: "Both Container and Textarea IDs",
|
|
21
|
+
id: "container-id-2",
|
|
22
|
+
input_options: { id: "textarea-id-2" },
|
|
23
|
+
name: "comment",
|
|
24
|
+
rows: 4
|
|
25
|
+
}) %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the `id` prop to set an id on the container wrapper, or use `input_options: { id: ... }` to set an id directly on the textarea element. Both can be used together if needed.
|
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.PLAY267213608
|
|
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-19 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -305,10 +305,6 @@ 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
|
|
312
308
|
- app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
|
|
313
309
|
- app/pb_kits/playbook/pb_button/docs/_button_link.jsx
|
|
314
310
|
- app/pb_kits/playbook/pb_button/docs/_button_link.md
|
|
@@ -1455,6 +1451,7 @@ files:
|
|
|
1455
1451
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
|
|
1456
1452
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
|
|
1457
1453
|
- 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
|
|
1458
1455
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
|
|
1459
1456
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
|
|
1460
1457
|
- app/pb_kits/playbook/pb_multiple_users/docs/example.yml
|
|
@@ -2325,6 +2322,8 @@ files:
|
|
|
2325
2322
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md
|
|
2326
2323
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
|
|
2327
2324
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
|
|
2325
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
|
|
2326
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
|
|
2328
2327
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
|
|
2329
2328
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
|
|
2330
2329
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
|
@@ -1,21 +0,0 @@
|
|
|
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" }) %>
|
|
@@ -1,180 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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.
|
|
@@ -1 +0,0 @@
|
|
|
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.
|