playbook_ui_docs 16.3.0.pre.rc.0 → 16.3.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a694db56aacc5436fa59819005732f6a32392c0ca9f720790b0cc51611e7419
-  data.tar.gz: e7a116cbb6a3d0c0d31bcba99397b0640d3161f0f5c9cf94e5d70bb661f7bf81
+  metadata.gz: 5d5d61333f80fb96fab58159d8abc57d7676c60ed2d42f195862d03a8d2b5ca6
+  data.tar.gz: b87eea888ab208af57e025c222f26be6ae74d8106be10b7546ea6eec3202fbce
 SHA512:
-  metadata.gz: 87349c939a9b429c5fabbf022d701a65f6e2637586110fd0d8db24f8d9627ca72644d36286c4c0c165476993db58606e0e8448b68c6c7ec491097494ea6171cc
-  data.tar.gz: 8939f388423407192f7c686c4d9b9b3db89ad977504fed6c167465c26cad06e83c1a8340ec13abaec130f9ca9416b0bcb49979aa2a1866095c8f2ab9e969a74e
+  metadata.gz: 3c76be7069e5fb07cf80ffb954e8158c6a48bbf9acebe65ba316567ca25e06ec18aedeff1f692082fbb493e36a2d2f1dd3a72f75139b2a2baddd4f18bd3294fa
+  data.tar.gz: a4e735b11185ef0a1d6fc46a7d8be784a8fec77a8b6aff3fe5e851ca6b40407bc47658f5d2e07295043a35a00c907484652efefd93e6af7d075193e14a71f060

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md

@@ -1,6 +1,7 @@
 Datepicker supports `position` options from [Flatpickr Options Documentation](https://flatpickr.js.org/options/). There are multiple positioning options to choose from.
 
 **Note:** In order for the above prop to work properly, you must also send `staticPosition={false}` to your Datepicker kit instance.
+If you are using the Datepicker within a Dialog, you cannot use the `staticPosition`/`static_position` prop.
 
 #### Affix Datepicker Upon Scrolling
 

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

@@ -1,4 +1,6 @@
 The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
 This allows for greater flexibility and more complex dialogs.
 
-For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.
+
+If you are using the datepicker within the Rails dialog, do not use the `static_position` prop on the datepicker.

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

@@ -0,0 +1,63 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Caption from '../../pb_caption/_caption'
+
+const DropdownClosingOptions = (props) => {
+    const options = [
+        {
+            label: "United States",
+            value: "unitedStates",
+            id: "us"
+        },
+        {
+            label: "Canada",
+            value: "canada",
+            id: "ca"
+        },
+        {
+            label: "Pakistan",
+            value: "pakistan",
+            id: "pk"
+        }
+    ];
+
+    return (
+        <>
+            <Caption 
+                marginBottom="xs" 
+                text="Any"
+            />
+            <Dropdown
+                closeOnClick='any'
+                options={options}
+                {...props}
+            />
+
+            <br />
+                
+            <Caption 
+                marginBottom="xs" 
+                text="Outside"
+            />
+            <Dropdown
+                closeOnClick='outside'
+                options={options}
+                {...props}
+            />
+
+            <br />
+
+            <Caption 
+                marginBottom="xs" 
+                text="Inside"
+            />
+            <Dropdown
+                closeOnClick='inside'
+                options={options}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default DropdownClosingOptions

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

@@ -0,0 +1 @@
+The `closeOnClick` prop allows you to control when the Dropdown closes in response to click interactions. The value `any` reflects the default behavior, where the dropdown will close after any click. Set it to `outside` to ensure interactive elements as dropdown options are able to be interacted with or modified. Set it to `inside` for a dropdown that only closes when the input or dropdown menu is clicked.

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

@@ -62,6 +62,7 @@ examples:
   - dropdown_with_constrain_height: Constrain Height
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_closing_options: Closing Options
   - dropdown_quickpick: Quick Pick Variant
   - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)

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

@@ -31,4 +31,5 @@ export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpi
 export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
 export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
 export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
+export { default as DropdownClosingOptions } from './_dropdown_closing_options.jsx'
 export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.3.0.pre.rc.0
+  version: 16.3.0.pre.rc.1
 platform: ruby
 authors:
 - Power UX
@@ -857,6 +857,8 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb