playbook_ui_docs 14.6.0.pre.rc.20 → 14.6.0.pre.rc.22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 74f53edb1151d984103ca83d5a03c7f20255f141102a5c50b8ef7505f51f78bb
-  data.tar.gz: 1757b22198c54e16a17af435aa674b93375fb406157e5d2ece36469cb0427f49
+  metadata.gz: a19049ed47cd3246a79beaa93c6e3c9080e6500d517fa6c436574a205fd66ba7
+  data.tar.gz: abc9e42f14cfcff13dde1d8ae1aa8a327d604fbfcc5762d0aef4d2712c9f3112
 SHA512:
-  metadata.gz: bd0aee2f6c40e55e2273b1b19bca0f3f622a14893fcc50c9f3bb6cf28f7e7af659766080ea18c5f5ace80a8c4f91f325ee13ef85692059898817d621866531d7
-  data.tar.gz: 23ad9b041006a2acee90ae1f0047b96eba4eef5ed45956ab78e9e08fbc92728121944fb7e3384a3b0a8276254ccf3fadf28822f6306cbc13b186191780ab4159
+  metadata.gz: 6f480c41cce3295a22f23f293af0a76c7bc72c4bfc7f6113dd4f049bff4d9b3ef9a8e3fac7f21c852b318eefe4f9071afc21fa24bfa5139c710b712f02a5b4cc
+  data.tar.gz: 2af4d41e1e8314a94c54ded237905ee8d433ce56c2c550469fbdcf462e02981cea2750c9177a144210b76a7aeed24fe97710c8c2971d7b2666e069e87ab80311

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb

@@ -1,13 +1,36 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-loading", 
-    size: "sm", 
-    title: "Loading Exmaple", 
-    text: "Make a loading request?", 
-    cancel_button: "Cancel Button", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-loading",
+    size: "sm",
+    title: "Loading Example",
+    text: "Make a loading request?",
+    cancel_button: "Cancel Button",
     cancel_button_id: "cancel-button-loading",
-    confirm_button: "Okay", 
+    confirm_button: "Okay",
     confirm_button_id: "confirm-button-loading",
     loading: true,
 }) %>
+
+<script>
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+        loadingButton.addEventListener("click", function() {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+
+        setTimeout(function() {
+            okayLoadingButton.disabled = false;
+            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+
+            if (cancelButton) {
+            cancelButton.disabled = false;
+            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            }
+        }, 5000);
+
+        });
+  }
+</script>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md

@@ -1,3 +1 @@
 Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
-
-Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb

@@ -0,0 +1,9 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+<%= pb_rails("dropdown", props: {options: options, separators: false}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownSeparatorsHidden = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        options={options}
+        separators={false}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownSeparatorsHidden

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: { options: options, variant: "subtle", separators: false }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownSubtleVariant = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+  <>
+     <Dropdown
+         options={options}
+         separators={false}
+         variant="subtle"
+         {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownSubtleVariant

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md

@@ -0,0 +1 @@
+For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
@@ -10,9 +11,11 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_separators_hidden: Separators Hidden
 
   react:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
@@ -23,6 +26,7 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
+  - dropdown_separators_hidden: Separators Hidden
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

data/app/pb_kits/playbook/pb_dropdown/docs/index.js

@@ -13,3 +13,5 @@ export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
+export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
+export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb

@@ -0,0 +1,39 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>
+
+<script>
+    const loadingForm = document.querySelector(".pb_form_loading")
+    if (loadingForm) {
+        loadingForm.addEventListener("submit", function(event) {
+            event.preventDefault();
+
+            const submitButton = event['submitter'];
+            const cancelButton = event['target'].querySelector('button[type="reset"]');
+
+            if (submitButton) {
+                let currentClass = submitButton.className;
+                let newClass = currentClass.replace("_disabled_loading", "_enabled");
+
+                let cancelClass = cancelButton ? cancelButton.className : "";
+                let newCancelClass = cancelClass.replace("_disabled", "_enabled");
+
+                setTimeout(function() {
+                    submitButton.disabled = false;
+                    submitButton.className = currentClass;
+
+                    if (cancelButton) {
+                        cancelButton.disabled = false;
+                        cancelButton.className = cancelClass;
+                    }
+                }, 5000);
+            }
+        });
+    }
+</script>
+

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md

@@ -0,0 +1 @@
+Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.

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

@@ -3,3 +3,4 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
+  - form_form_with_loading: Default + Loading