playbook_ui_docs 15.0.0.pre.alpha.stimulusbutton10763 → 15.1.0.pre.alpha.PLAY2320advancedtablepaginationPropsbug10943
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_managed_disabled.html.erb +12 -10
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md +4 -2
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb +8 -5
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md +4 -2
- data/dist/playbook-doc.js +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b188a73c33b796e3d20d4fe4abba9781afac2e5a17ee13b0e9b53b24d6829220
|
|
4
|
+
data.tar.gz: 9508b5a60d8ca776401494f560166112a6e14f887e9cfd7bc4726f857e6fc48f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e9fbd3150d8c812110fda5117ab8e215152bdd0d5d79c1b55536292202fb67bbabed58b3aff02aa337a2c8fefdf96efe2ca9a91ef1a7495fcc51d6d6d5d416ea
|
|
7
|
+
data.tar.gz: c466c86984cfae3bed534f1899e7018586ba9e08c80287d10d8800fb07d0e1ae563df96bf07c5f5536e72c11e9c73687ed2255894c199d2e2e35db4309ba4a6d
|
|
@@ -1,28 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
<%= pb_rails("
|
|
3
|
-
<%= pb_rails("button", props: { text: "Enable Buttons", variant: "link", id: "toggle-enabled-demo" }) %>
|
|
4
|
-
<br/>
|
|
5
|
-
<%= pb_rails("button", props: { text: "I am a Normal Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_bottom: "lg" }) %>
|
|
6
|
-
<br/>
|
|
7
|
-
<%= 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", margin_right: "lg" }) %>
|
|
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" }) %>
|
|
8
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 %>
|
|
9
8
|
<script>
|
|
10
9
|
document.addEventListener('DOMContentLoaded', function () {
|
|
11
10
|
const disableTrigger = document.querySelector('#toggle-disabled-demo')
|
|
12
11
|
const enableTrigger = document.querySelector('#toggle-enabled-demo')
|
|
13
12
|
|
|
14
|
-
//
|
|
13
|
+
// Find the Buttons you want to 'manage'
|
|
15
14
|
const btn = document.querySelector('#normal_managed_button');
|
|
16
15
|
const link = document.querySelector('#a_tag_managed_button');
|
|
17
16
|
|
|
18
17
|
disableTrigger.addEventListener('click', (e) => {
|
|
19
|
-
// Disable
|
|
18
|
+
// Disable default button
|
|
20
19
|
btn.setAttribute('disabled', true)
|
|
20
|
+
// Disable a tag button
|
|
21
21
|
link.setAttribute('aria-disabled', 'true')
|
|
22
22
|
});
|
|
23
|
+
|
|
23
24
|
enableTrigger.addEventListener('click', (e) => {
|
|
24
|
-
// Enable
|
|
25
|
+
// Enable default button
|
|
25
26
|
btn.removeAttribute('disabled')
|
|
27
|
+
// Enable a tag button
|
|
26
28
|
link.removeAttribute('aria-disabled')
|
|
27
29
|
});
|
|
28
30
|
});
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
If needing to toggle the disabled state of the Button
|
|
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
2
|
|
|
3
|
-
|
|
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.
|
|
4
6
|
|
|
5
7
|
Click to enable or disable the buttons above and view the code snippet below for details!
|
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
<%= pb_rails("
|
|
2
|
-
<%= pb_rails("
|
|
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
3
|
<br/>
|
|
4
|
+
<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
|
|
4
5
|
<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
|
|
6
|
+
<% end %>
|
|
5
7
|
|
|
6
8
|
<script>
|
|
7
9
|
document.addEventListener('DOMContentLoaded', function () {
|
|
8
|
-
const demoBtn = document.querySelector('#managed_button_with_helper')
|
|
9
|
-
|
|
10
10
|
const disable = document.querySelector('#toggle-disabled-demo-with-helper')
|
|
11
11
|
const enable = document.querySelector('#toggle-enabled-demo-with-helper')
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
// Find the Button you want to 'manage'
|
|
14
|
+
const demoBtn = document.querySelector('#managed_button_with_helper')
|
|
14
15
|
|
|
16
|
+
// Use the pbButton object created by the kit to call the enable/disable methods
|
|
17
|
+
disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
|
|
15
18
|
enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
|
|
16
19
|
|
|
17
20
|
});
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute.
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
|
|
4
4
|
|
|
5
|
-
|
|
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!
|