playbook_ui_docs 15.1.0 → 15.2.0.pre.alpha.PLAY2428advancedtablerailscellpadding11387
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_background_control_rails.html.erb +113 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.html.erb +51 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb +40 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb +7 -3
- data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +29 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb +31 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md +7 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb +21 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md +7 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb +16 -16
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +2 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb +31 -31
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +4 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb +8 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +5 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md +1 -0
- data/dist/playbook-doc.js +2 -2
- metadata +13 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c331b6a0e3fd532e88183ff4203fd035222484d8a8cb2aecc9825dc7a78edfa5
|
|
4
|
+
data.tar.gz: aac480a99b070036ce93b1496180c260e432e8c17d6d3f49f53d18a6e690196b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4f82ea570c17e9a72f4869751ef5efad1768a27e5e30061ff97ef7dbdd2c6d411acd4c0f7e4f7b75810be716ac352f785d138e1acd8d095df051a0a3a6f436f0
|
|
7
|
+
data.tar.gz: 1ba14446258a8d9f07cfe64dc4b745ac1bf9bcef7119b0ffe9e2d41284cadabd4131b8042202019c25d0ac8f8837f33774b9250c105a2f73fc6b95be8c5cf230
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
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
|
+
column_styling: {
|
|
11
|
+
cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
accessor: "scheduledMeetings",
|
|
16
|
+
label: "Scheduled Meetings",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
accessor: "attendanceRate",
|
|
20
|
+
label: "Attendance Rate",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
accessor: "completedClasses",
|
|
24
|
+
label: "Completed Classes",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
accessor: "classCompletionRate",
|
|
28
|
+
label: "Class Completion Rate",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
accessor: "graduatedStudents",
|
|
32
|
+
label: "Graduated Students",
|
|
33
|
+
}
|
|
34
|
+
] %>
|
|
35
|
+
|
|
36
|
+
<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
37
|
+
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
|
38
|
+
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
|
|
39
|
+
<% end %>
|
|
40
|
+
|
|
41
|
+
<% multi_header_column_definitions = [
|
|
42
|
+
{
|
|
43
|
+
accessor: "year",
|
|
44
|
+
label: "Year",
|
|
45
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: "Enrollment Data",
|
|
49
|
+
columns: [
|
|
50
|
+
{
|
|
51
|
+
label: "Enrollment Stats",
|
|
52
|
+
columns: [
|
|
53
|
+
{
|
|
54
|
+
accessor: "newEnrollments",
|
|
55
|
+
label: "New Enrollments",
|
|
56
|
+
column_styling: {
|
|
57
|
+
cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
accessor: "scheduledMeetings",
|
|
62
|
+
label: "Scheduled Meetings",
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
label: "Performance Data",
|
|
70
|
+
columns: [
|
|
71
|
+
{
|
|
72
|
+
label: "Completion Metrics",
|
|
73
|
+
columns: [
|
|
74
|
+
{
|
|
75
|
+
accessor: "completedClasses",
|
|
76
|
+
label: "Completed Classes",
|
|
77
|
+
column_styling: {
|
|
78
|
+
cell_background_color: ->(row) { row[:completedClasses].to_i > 15 ? "info_secondary" : "neutral_secondary" }
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
accessor: "classCompletionRate",
|
|
83
|
+
label: "Class Completion Rate",
|
|
84
|
+
column_styling: {
|
|
85
|
+
cell_background_color: ->(row) { row[:completedClasses].to_i > 15 ? "neutral_secondary" : "info_secondary" }
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
],
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
label: "Attendance",
|
|
92
|
+
columns: [
|
|
93
|
+
{
|
|
94
|
+
accessor: "attendanceRate",
|
|
95
|
+
label: "Attendance Rate",
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
accessor: "graduatedStudents",
|
|
99
|
+
label: "Graduated Students",
|
|
100
|
+
column_styling: {
|
|
101
|
+
cell_background_color: ->(row) { row[:graduatedStudents].to_i > 10 ? "primary_secondary" : "error_secondary" }
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
},
|
|
106
|
+
],
|
|
107
|
+
},
|
|
108
|
+
] %>
|
|
109
|
+
|
|
110
|
+
<%= pb_rails("advanced_table", props: { id: "padding-control-multi-header", table_data: @table_data, column_definitions: multi_header_column_definitions, padding_top: "lg" }) do %>
|
|
111
|
+
<%= pb_rails("advanced_table/table_header", props: { column_definitions: multi_header_column_definitions }) %>
|
|
112
|
+
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: multi_header_column_definitions }) %>
|
|
113
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has
|
|
1
|
+
The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
|
|
2
2
|
|
|
3
3
|
1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below.
|
|
1
|
+
The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
|
|
2
2
|
|
|
3
3
|
1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
|
|
4
4
|
|
|
@@ -0,0 +1,51 @@
|
|
|
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
|
+
<% row_styling = [
|
|
34
|
+
{
|
|
35
|
+
row_id: "1",
|
|
36
|
+
cell_padding: "md"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
row_id: "3",
|
|
40
|
+
cell_padding: "lg"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
row_id: "5",
|
|
44
|
+
cell_padding: "none"
|
|
45
|
+
},
|
|
46
|
+
] %>
|
|
47
|
+
|
|
48
|
+
<%= pb_rails("advanced_table", props: { id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) do %>
|
|
49
|
+
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
|
50
|
+
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
|
|
51
|
+
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`row_styling` can also be used to control padding on all cells in a given row via the use of the `cell_padding` key/value pair as shown here. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
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
|
+
column_styling: {
|
|
11
|
+
cell_padding: "none",
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
accessor: "scheduledMeetings",
|
|
16
|
+
label: "Scheduled Meetings",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
accessor: "attendanceRate",
|
|
20
|
+
label: "Attendance Rate",
|
|
21
|
+
column_styling: { cell_padding: "md" },
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
accessor: "completedClasses",
|
|
25
|
+
label: "Completed Classes",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "classCompletionRate",
|
|
29
|
+
label: "Class Completion Rate",
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
accessor: "graduatedStudents",
|
|
33
|
+
label: "Graduated Students",
|
|
34
|
+
}
|
|
35
|
+
] %>
|
|
36
|
+
|
|
37
|
+
<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
38
|
+
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
|
39
|
+
<%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
|
|
40
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`column_styling` can also be used to control padding on all cells in a given column via the use of the `cell_padding` key/value pair. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows.
|
|
1
|
+
The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
|
|
2
2
|
|
|
3
3
|
- `background_color` : use this to control the background color of the row
|
|
4
4
|
- `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows.
|
|
1
|
+
The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
|
|
2
2
|
|
|
3
3
|
- `backgroundColor` : use this to control the background color of the row
|
|
4
4
|
- `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
|
|
@@ -21,8 +21,11 @@ examples:
|
|
|
21
21
|
- advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
|
|
22
22
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
|
23
23
|
- advanced_table_row_styling: Row Styling
|
|
24
|
+
- advanced_table_padding_control_per_row_rails: Padding Control using Row Styling
|
|
24
25
|
- advanced_table_column_styling_rails: Column Styling
|
|
25
26
|
- advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
|
|
27
|
+
- advanced_table_padding_control_rails: Padding Control using Column Styling
|
|
28
|
+
- advanced_table_background_control_rails: Background Control using Column Styling
|
|
26
29
|
- advanced_table_column_border_color_rails: Column Group Border Color
|
|
27
30
|
|
|
28
31
|
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
<%= pb_rails("
|
|
2
|
-
<%= pb_rails("button", props: { aria: { label: "Loading" },
|
|
3
|
-
<%= pb_rails("button", props: { aria: { label: "Loading" },
|
|
1
|
+
<%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
|
|
2
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
|
|
3
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
|
|
4
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
|
|
5
|
+
<%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
|
|
6
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
|
|
7
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import Button from "../../pb_button/_button"
|
|
3
|
+
import Caption from "../../pb_caption/_caption"
|
|
3
4
|
|
|
4
5
|
const ButtonLoading = (props) => (
|
|
5
6
|
<div>
|
|
7
|
+
<Caption
|
|
8
|
+
marginY="md"
|
|
9
|
+
text="Button variants with loading"
|
|
10
|
+
/>
|
|
6
11
|
<Button
|
|
7
12
|
aria={{ label: 'Loading' }}
|
|
8
13
|
loading
|
|
@@ -31,6 +36,30 @@ const ButtonLoading = (props) => (
|
|
|
31
36
|
variant="link"
|
|
32
37
|
{...props}
|
|
33
38
|
/>
|
|
39
|
+
<br/>
|
|
40
|
+
<Caption
|
|
41
|
+
marginY="md"
|
|
42
|
+
text="Button sizes with loading"
|
|
43
|
+
/>
|
|
44
|
+
<Button
|
|
45
|
+
aria={{ label: 'Loading' }}
|
|
46
|
+
loading
|
|
47
|
+
marginRight='lg'
|
|
48
|
+
size="sm"
|
|
49
|
+
tabIndex={0}
|
|
50
|
+
text="Small Button"
|
|
51
|
+
{...props}
|
|
52
|
+
/>
|
|
53
|
+
{' '}
|
|
54
|
+
<Button
|
|
55
|
+
aria={{ label: 'Loading' }}
|
|
56
|
+
loading
|
|
57
|
+
marginRight='lg'
|
|
58
|
+
size="lg"
|
|
59
|
+
tabIndex={0}
|
|
60
|
+
text="Small Button"
|
|
61
|
+
{...props}
|
|
62
|
+
/>
|
|
34
63
|
</div>
|
|
35
64
|
)
|
|
36
65
|
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<%= pb_rails("body", props: { text: "Click to disable the Buttons below", id: "toggle-disabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
2
|
+
<%= pb_rails("body", props: { text: "Click to enable the Buttons below", id: "toggle-enabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
|
|
5
|
+
<%= pb_rails("button", props: { text: "I am a Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_right: "lg" }) %>
|
|
6
|
+
<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com"}) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<script>
|
|
9
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
10
|
+
const disableTrigger = document.querySelector('#toggle-disabled-demo')
|
|
11
|
+
const enableTrigger = document.querySelector('#toggle-enabled-demo')
|
|
12
|
+
|
|
13
|
+
// Find the Buttons you want to 'manage'
|
|
14
|
+
const btn = document.querySelector('#normal_managed_button');
|
|
15
|
+
const link = document.querySelector('#a_tag_managed_button');
|
|
16
|
+
|
|
17
|
+
disableTrigger.addEventListener('click', (e) => {
|
|
18
|
+
// Disable default button
|
|
19
|
+
btn.setAttribute('disabled', true)
|
|
20
|
+
// Disable a tag button
|
|
21
|
+
link.setAttribute('aria-disabled', 'true')
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
enableTrigger.addEventListener('click', (e) => {
|
|
25
|
+
// Enable default button
|
|
26
|
+
btn.removeAttribute('disabled')
|
|
27
|
+
// Enable a tag button
|
|
28
|
+
link.removeAttribute('aria-disabled')
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
</script>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
If needing to toggle the disabled state of the Button dynamically (for example, within a Turbo or Stimulus context), you can now do so in rails using the `pb-button-managed` data attribute.
|
|
2
|
+
|
|
3
|
+
1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
|
|
4
|
+
|
|
5
|
+
2) To toggle enabled/disabled state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.
|
|
6
|
+
|
|
7
|
+
Click to enable or disable the buttons above and view the code snippet below for details!
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<%= pb_rails("body", props: { text: "Click to disable the Button below", id: "toggle-disabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
2
|
+
<%= pb_rails("body", props: { text: "Click to enable the Button below", id: "toggle-enabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
3
|
+
<br/>
|
|
4
|
+
<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
|
|
5
|
+
<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
|
|
6
|
+
<% end %>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
10
|
+
const disable = document.querySelector('#toggle-disabled-demo-with-helper')
|
|
11
|
+
const enable = document.querySelector('#toggle-enabled-demo-with-helper')
|
|
12
|
+
|
|
13
|
+
// Find the Button you want to 'manage'
|
|
14
|
+
const demoBtn = document.querySelector('#managed_button_with_helper')
|
|
15
|
+
|
|
16
|
+
// Use the pbButton object created by the kit to call the enable/disable methods
|
|
17
|
+
disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
|
|
18
|
+
enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
|
|
19
|
+
|
|
20
|
+
});
|
|
21
|
+
</script>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute.
|
|
2
|
+
|
|
3
|
+
1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
|
|
4
|
+
|
|
5
|
+
2) Toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shown in the code snippet below.
|
|
6
|
+
|
|
7
|
+
Click to enable or disable the buttons above to see this in action!
|
|
@@ -11,6 +11,8 @@ examples:
|
|
|
11
11
|
- button_options: Button Additional Options
|
|
12
12
|
- button_size: Button Size
|
|
13
13
|
- button_form: Button Form Attribute
|
|
14
|
+
- button_managed_disabled: Button Toggle Disabled State
|
|
15
|
+
- button_managed_disabled_helper: Button Toggle Disabled State Helper
|
|
14
16
|
|
|
15
17
|
react:
|
|
16
18
|
- button_default: Button Variants
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
<%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
<%= pb_rails("dialog", props: {
|
|
7
|
-
id:"dialog-stacked-default",
|
|
6
|
+
<%= pb_rails("dialog", props: {
|
|
7
|
+
id:"dialog-stacked-default",
|
|
8
8
|
status: "default",
|
|
9
|
-
size: "sm",
|
|
10
|
-
title: "Are you sure?",
|
|
11
|
-
text: "Text explaining why there is an alert",
|
|
9
|
+
size: "sm",
|
|
10
|
+
title: "Are you sure?",
|
|
11
|
+
text: "Text explaining why there is an alert",
|
|
12
12
|
}) do %>
|
|
13
13
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
14
14
|
<%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
<% end %>
|
|
19
19
|
<% end %>
|
|
20
20
|
|
|
21
|
-
<%= pb_rails("dialog", props: {
|
|
22
|
-
id:"dialog-stacked-caution",
|
|
21
|
+
<%= pb_rails("dialog", props: {
|
|
22
|
+
id:"dialog-stacked-caution",
|
|
23
23
|
status: "caution",
|
|
24
|
-
size: "sm",
|
|
25
|
-
title: "Are you sure?",
|
|
26
|
-
text: "This is the action you will be taking",
|
|
24
|
+
size: "sm",
|
|
25
|
+
title: "Are you sure?",
|
|
26
|
+
text: "This is the action you will be taking",
|
|
27
27
|
}) do %>
|
|
28
28
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
29
29
|
<%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
|
|
@@ -33,16 +33,16 @@
|
|
|
33
33
|
<% end %>
|
|
34
34
|
<% end %>
|
|
35
35
|
|
|
36
|
-
<%= pb_rails("dialog", props: {
|
|
37
|
-
id:"dialog-stacked-delete",
|
|
36
|
+
<%= pb_rails("dialog", props: {
|
|
37
|
+
id:"dialog-stacked-delete",
|
|
38
38
|
status: "delete",
|
|
39
|
-
size: "sm",
|
|
40
|
-
title: "Delete",
|
|
41
|
-
text: "You are about to delete ...",
|
|
39
|
+
size: "sm",
|
|
40
|
+
title: "Delete",
|
|
41
|
+
text: "You are about to delete ...",
|
|
42
42
|
}) do %>
|
|
43
43
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
44
44
|
<%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
|
|
45
|
-
<%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
|
|
45
|
+
<%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
|
|
46
46
|
<%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
|
|
47
47
|
<% end %>
|
|
48
48
|
<% end %>
|
|
@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
|
|
|
51
51
|
return (
|
|
52
52
|
<div>
|
|
53
53
|
<Flex
|
|
54
|
-
rowGap="xs"
|
|
54
|
+
rowGap="xs"
|
|
55
55
|
wrap
|
|
56
56
|
>
|
|
57
57
|
<Button
|
|
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
|
|
|
93
93
|
<Button
|
|
94
94
|
fullWidth
|
|
95
95
|
onClick={dialog.toggle}
|
|
96
|
+
variant= {dialog.status == "delete" ? "danger" : "primary"}
|
|
96
97
|
>
|
|
97
98
|
{dialog.buttonOneText}
|
|
98
99
|
</Button>
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
<%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
|
|
9
9
|
<% end %>
|
|
10
10
|
|
|
11
|
-
<%= pb_rails("dialog", props: {
|
|
12
|
-
id:"dialog-status-default",
|
|
11
|
+
<%= pb_rails("dialog", props: {
|
|
12
|
+
id:"dialog-status-default",
|
|
13
13
|
status: "default",
|
|
14
|
-
size: "status_size",
|
|
15
|
-
title: "Are you sure?",
|
|
16
|
-
text: "Text explaining why there is an alert",
|
|
14
|
+
size: "status_size",
|
|
15
|
+
title: "Are you sure?",
|
|
16
|
+
text: "Text explaining why there is an alert",
|
|
17
17
|
}) do %>
|
|
18
18
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
19
19
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
<% end %>
|
|
24
24
|
<% end %>
|
|
25
25
|
|
|
26
|
-
<%= pb_rails("dialog", props: {
|
|
27
|
-
id:"dialog-status-info",
|
|
26
|
+
<%= pb_rails("dialog", props: {
|
|
27
|
+
id:"dialog-status-info",
|
|
28
28
|
status: "info",
|
|
29
|
-
size: "status_size",
|
|
30
|
-
title: "Information",
|
|
31
|
-
text: "Text explaining why there is an alert",
|
|
29
|
+
size: "status_size",
|
|
30
|
+
title: "Information",
|
|
31
|
+
text: "Text explaining why there is an alert",
|
|
32
32
|
}) do %>
|
|
33
33
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
34
34
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
<% end %>
|
|
38
38
|
<% end %>
|
|
39
39
|
|
|
40
|
-
<%= pb_rails("dialog", props: {
|
|
41
|
-
id:"dialog-status-caution",
|
|
40
|
+
<%= pb_rails("dialog", props: {
|
|
41
|
+
id:"dialog-status-caution",
|
|
42
42
|
status: "caution",
|
|
43
|
-
size: "status_size",
|
|
44
|
-
title: "Are you Sure?",
|
|
45
|
-
text: "This is the action you will be taking",
|
|
43
|
+
size: "status_size",
|
|
44
|
+
title: "Are you Sure?",
|
|
45
|
+
text: "This is the action you will be taking",
|
|
46
46
|
}) do %>
|
|
47
47
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
48
48
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -52,27 +52,27 @@
|
|
|
52
52
|
<% end %>
|
|
53
53
|
<% end %>
|
|
54
54
|
|
|
55
|
-
<%= pb_rails("dialog", props: {
|
|
56
|
-
id:"dialog-status-delete",
|
|
55
|
+
<%= pb_rails("dialog", props: {
|
|
56
|
+
id:"dialog-status-delete",
|
|
57
57
|
status: "delete",
|
|
58
|
-
size: "status_size",
|
|
59
|
-
title: "Delete",
|
|
60
|
-
text: "You are about to delete ...",
|
|
58
|
+
size: "status_size",
|
|
59
|
+
title: "Delete",
|
|
60
|
+
text: "You are about to delete ...",
|
|
61
61
|
}) do %>
|
|
62
62
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
63
63
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
64
|
-
<%= pb_rails("button", props: { text: "Yes, Delete" }) %>
|
|
64
|
+
<%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
|
|
65
65
|
<%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
|
|
66
66
|
<% end %>
|
|
67
67
|
<% end %>
|
|
68
68
|
<% end %>
|
|
69
69
|
|
|
70
|
-
<%= pb_rails("dialog", props: {
|
|
71
|
-
id:"dialog-status-error",
|
|
70
|
+
<%= pb_rails("dialog", props: {
|
|
71
|
+
id:"dialog-status-error",
|
|
72
72
|
status: "error",
|
|
73
|
-
size: "status_size",
|
|
74
|
-
title: "Error Message",
|
|
75
|
-
text: "Text explaining the error",
|
|
73
|
+
size: "status_size",
|
|
74
|
+
title: "Error Message",
|
|
75
|
+
text: "Text explaining the error",
|
|
76
76
|
}) do %>
|
|
77
77
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
78
78
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -81,12 +81,12 @@
|
|
|
81
81
|
<% end %>
|
|
82
82
|
<% end %>
|
|
83
83
|
|
|
84
|
-
<%= pb_rails("dialog", props: {
|
|
85
|
-
id:"dialog-status-success",
|
|
84
|
+
<%= pb_rails("dialog", props: {
|
|
85
|
+
id:"dialog-status-success",
|
|
86
86
|
status: "success",
|
|
87
|
-
size: "status_size",
|
|
88
|
-
title: "Success!",
|
|
89
|
-
text: "Text explaining what is successful",
|
|
87
|
+
size: "status_size",
|
|
88
|
+
title: "Success!",
|
|
89
|
+
text: "Text explaining what is successful",
|
|
90
90
|
}) do %>
|
|
91
91
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
92
92
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -83,8 +83,8 @@ const DialogStatus = () => {
|
|
|
83
83
|
|
|
84
84
|
return (
|
|
85
85
|
<div>
|
|
86
|
-
<Flex
|
|
87
|
-
rowGap="xs"
|
|
86
|
+
<Flex
|
|
87
|
+
rowGap="xs"
|
|
88
88
|
wrap
|
|
89
89
|
>
|
|
90
90
|
<Button
|
|
@@ -117,7 +117,7 @@ const DialogStatus = () => {
|
|
|
117
117
|
>
|
|
118
118
|
{"Success Status"}
|
|
119
119
|
</Button>
|
|
120
|
-
<Button
|
|
120
|
+
<Button
|
|
121
121
|
marginRight="md"
|
|
122
122
|
onClick={toggleErrorAlert}
|
|
123
123
|
>
|
|
@@ -152,6 +152,7 @@ const DialogStatus = () => {
|
|
|
152
152
|
<Button
|
|
153
153
|
onClick={dialog.toggle}
|
|
154
154
|
paddingRight="xl"
|
|
155
|
+
variant={dialog.status == "delete" ? "danger" : "primary"}
|
|
155
156
|
>
|
|
156
157
|
{dialog.buttonOneText}
|
|
157
158
|
</Button>
|