playbook_ui_docs 16.0.0.pre.alpha.PLAY2684iconbuttonvariant13518 → 16.0.0.pre.alpha.PLAY2722advancedtableinlinerowloadingrails13598
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_advanced_table/docs/_advanced_table_inline_row_loading.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md +18 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- 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
- 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: 29354927436c796ae7baa3b87c13e829b6a4ebe898e9726c268652de0a34e586
|
|
4
|
+
data.tar.gz: 3179fc9fa7cff40ef2c4aa08e4e624fc94185723b3c00b2442ef0049d08553f8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '049e8324f8769dea0031cdd58949de387823d86c48f853fb3100598822cddef8d87b95d8b340a154b685d57ee6db0551a956135f29e07ab8b02d821930b6145a'
|
|
7
|
+
data.tar.gz: d21fe4352e541395ecaca6313eadc7ccf3e75d078aa4ce81ae6a3608e9f0b20f505be4d3c68aaa1d812714fd08c2edf922ab703e24e9f47a9a77b47b4ca9455a
|
|
@@ -6,9 +6,9 @@ In the first Advanced Table in this code example, 2021 has an empty children arr
|
|
|
6
6
|
This prop is set to `false` by default.
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
###
|
|
9
|
+
### persistToggleExpansionButton
|
|
10
10
|
The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
|
|
11
11
|
|
|
12
12
|
In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`.
|
|
13
13
|
|
|
14
|
-
This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
|
|
14
|
+
This prop is set to `false` by default and should only be used in conjunction with `inlineRowLoading`.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<% column_definitions = [
|
|
2
|
+
{
|
|
3
|
+
accessor: "year",
|
|
4
|
+
label: "Year",
|
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
accessor: "newEnrollments",
|
|
9
|
+
label: "New Enrollments",
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
accessor: "scheduledMeetings",
|
|
13
|
+
label: "Scheduled Meetings",
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
accessor: "attendanceRate",
|
|
17
|
+
label: "Attendance Rate",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
accessor: "completedClasses",
|
|
21
|
+
label: "Completed Classes",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
accessor: "classCompletionRate",
|
|
25
|
+
label: "Class Completion Rate",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "graduatedStudents",
|
|
29
|
+
label: "Graduated Students",
|
|
30
|
+
}
|
|
31
|
+
] %>
|
|
32
|
+
|
|
33
|
+
<%= pb_rails("caption", props: { text: "Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" }) %>
|
|
34
|
+
|
|
35
|
+
<%= pb_rails("advanced_table", props: {
|
|
36
|
+
id: "inline-loading-table-1",
|
|
37
|
+
table_data: @table_data_inline_loading,
|
|
38
|
+
column_definitions: column_definitions,
|
|
39
|
+
enable_toggle_expansion: "all",
|
|
40
|
+
inline_row_loading: true,
|
|
41
|
+
margin_bottom: "md"
|
|
42
|
+
}) %>
|
|
43
|
+
|
|
44
|
+
<%= pb_rails("caption", props: { text: "Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" }) %>
|
|
45
|
+
|
|
46
|
+
<%= pb_rails("advanced_table", props: {
|
|
47
|
+
id: "inline-loading-table-2",
|
|
48
|
+
table_data: @table_data_inline_loading_empty_children,
|
|
49
|
+
column_definitions: column_definitions,
|
|
50
|
+
enable_toggle_expansion: "all",
|
|
51
|
+
inline_row_loading: true,
|
|
52
|
+
margin_bottom: "md"
|
|
53
|
+
}) %>
|
|
54
|
+
|
|
55
|
+
<%= pb_rails("caption", props: { text: "Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" }) %>
|
|
56
|
+
|
|
57
|
+
<%= pb_rails("advanced_table", props: {
|
|
58
|
+
id: "inline-loading-table-3",
|
|
59
|
+
table_data: @table_data_inline_loading_empty_children,
|
|
60
|
+
column_definitions: column_definitions,
|
|
61
|
+
enable_toggle_expansion: "all",
|
|
62
|
+
inline_row_loading: true,
|
|
63
|
+
persist_toggle_expansion_button: true
|
|
64
|
+
}) %>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
### inline_row_loading
|
|
2
|
+
By default, the kit assumes that the initial dataset is complete, rendering expansion controls only when children are present. If, however, you want to implement lazy-loading patterns where children are fetched only when a parent is expanded, use the `inline_row_loading` prop.
|
|
3
|
+
|
|
4
|
+
When `inline_row_loading` is set to `true`:
|
|
5
|
+
- Expansion controls are rendered for rows with empty `children` arrays (you must pass `children: []` to any row that will have children loaded later)
|
|
6
|
+
- When such a row is expanded, an inline loading indicator appears until the child data is loaded
|
|
7
|
+
- This enables lazy-loading patterns without one-off hacks
|
|
8
|
+
|
|
9
|
+
In the first table above, row "2021" has an empty `children` array. Click to expand it and see the inline loading state. Rows 2 and 3 have actual child data.
|
|
10
|
+
|
|
11
|
+
This prop is set to `false` by default.
|
|
12
|
+
|
|
13
|
+
### persist_toggle_expansion_button
|
|
14
|
+
The `persist_toggle_expansion_button` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
|
|
15
|
+
|
|
16
|
+
In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persist_toggle_expansion_button` in place. The third Advanced Table shows the toggle all button due to `persist_toggle_expansion_button`.
|
|
17
|
+
|
|
18
|
+
This prop is set to `false` by default and should only be used in conjunction with `inline_row_loading`.
|
|
@@ -29,6 +29,7 @@ examples:
|
|
|
29
29
|
- advanced_table_background_control_rails: Column Styling Background Color
|
|
30
30
|
- advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
|
|
31
31
|
- advanced_table_column_border_color_rails: Column Group Border Color
|
|
32
|
+
- advanced_table_inline_row_loading_rails: Inline Row Loading
|
|
32
33
|
|
|
33
34
|
|
|
34
35
|
react:
|
|
@@ -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.
|
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.PLAY2722advancedtableinlinerowloadingrails13598
|
|
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
|
|
@@ -100,6 +100,8 @@ files:
|
|
|
100
100
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
|
|
101
101
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
|
|
102
102
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
|
|
103
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb
|
|
104
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md
|
|
103
105
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
|
|
104
106
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
|
|
105
107
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md
|
|
@@ -305,10 +307,6 @@ files:
|
|
|
305
307
|
- app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx
|
|
306
308
|
- app/pb_kits/playbook/pb_button/docs/_button_icon_options.md
|
|
307
309
|
- 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
310
|
- app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
|
|
313
311
|
- app/pb_kits/playbook/pb_button/docs/_button_link.jsx
|
|
314
312
|
- app/pb_kits/playbook/pb_button/docs/_button_link.md
|
|
@@ -1455,6 +1453,7 @@ files:
|
|
|
1455
1453
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
|
|
1456
1454
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
|
|
1457
1455
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
|
|
1456
|
+
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb
|
|
1458
1457
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
|
|
1459
1458
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
|
|
1460
1459
|
- app/pb_kits/playbook/pb_multiple_users/docs/example.yml
|
|
@@ -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.
|