playbook_ui_docs 15.1.0.pre.alpha.PLAY2468phonenuminputvalidation10803 → 15.1.0.pre.alpha.PLAY2468phonenuminputvalidation10958

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 477655998ed307269e6b5d2ef410557d1c67836016bf14b941b579d6b517cd0d
-  data.tar.gz: 930404e3840aebbe517438d549c47067d3e3c6e6874df2ffdc0ceb891878b246
+  metadata.gz: 1d0aa9b0b48f8d5e3b5ba6c98f36d48842eff3519a8438da59bdc158d0bd85a7
+  data.tar.gz: 388ab0c8528e2edd818ce1e166831d25eec8f00a29dd9eb25eca19757018f8b7
 SHA512:
-  metadata.gz: 24a662901328bc407c331b54588c0e110a2f41c51e7f123947b518f2cb48846bec43c457216fd65b160776ba89c29ed43d061ef5b934c53666477e8af21101c9
-  data.tar.gz: 52d6be6211562aa8b1b8a872269104e24dfe2ccb64c3af704ab3493877b3297efed1790a105e20361ad276f7ddd871840ec235f2d6e35bf6f279147ffb9cfa6e
+  metadata.gz: f9f486784b37066dcf211f15b30347885e0caa0125bf8d5084e3ce298d4500763725257682056500788debbc6a74f1818b8c81b0e6bdf2cdd7ff87c01b83d76f
+  data.tar.gz: cee9bf049268f9a00c5183b80f1c227d10dcded441072110336ade399c20eef3cad606a130aec63a66e31de87bdb6197724e6665aca1c40723c763089165339d

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb

@@ -0,0 +1,31 @@
+  <%= pb_rails("body", props: { text: "Click to disable the Buttons below", id: "toggle-disabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+  <%= pb_rails("body", props: { text: "Click to enable the Buttons below", id: "toggle-enabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+
+<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
+<%= pb_rails("button", props: { text: "I am a Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_right: "lg" }) %>
+<%= 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"}) %>
+<% end %>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disableTrigger = document.querySelector('#toggle-disabled-demo')
+    const enableTrigger = document.querySelector('#toggle-enabled-demo')
+
+    // Find the Buttons you want to 'manage'
+    const btn = document.querySelector('#normal_managed_button');
+    const link = document.querySelector('#a_tag_managed_button');
+
+    disableTrigger.addEventListener('click', (e) => {
+        // Disable default button
+        btn.setAttribute('disabled', true)
+        // Disable a tag button
+        link.setAttribute('aria-disabled', 'true')
+    });
+
+    enableTrigger.addEventListener('click', (e) => {
+        // Enable default button
+        btn.removeAttribute('disabled')
+        // Enable a tag button
+        link.removeAttribute('aria-disabled')
+    });
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md

@@ -0,0 +1,7 @@
+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. 
+
+1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
+
+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.  
+
+Click to enable or disable the buttons above and view the code snippet below for details!

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb

@@ -0,0 +1,21 @@
+  <%= pb_rails("body", props: { text: "Click to disable the Button below", id: "toggle-disabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+  <%= pb_rails("body", props: { text: "Click to enable the Button below", id: "toggle-enabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+<br/>
+<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
+<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
+<% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disable = document.querySelector('#toggle-disabled-demo-with-helper')
+    const enable = document.querySelector('#toggle-enabled-demo-with-helper')
+
+    // Find the Button you want to 'manage'
+    const demoBtn = document.querySelector('#managed_button_with_helper')
+
+    // Use the pbButton object created by the kit to call the enable/disable methods
+    disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
+    enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
+
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md

@@ -0,0 +1,7 @@
+The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute. 
+
+1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
+
+2) Toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shown in the code snippet below.
+
+Click to enable or disable the buttons above to see this in action!

data/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -11,6 +11,8 @@ examples:
   - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_managed_disabled: Button Toggle Disabled State
+  - button_managed_disabled_helper: Button Toggle Disabled State Helper
   
   react:
   - button_default: Button Variants