playbook_ui_docs 14.6.0.pre.rc.22 → 14.6.0.pre.rc.23

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a19049ed47cd3246a79beaa93c6e3c9080e6500d517fa6c436574a205fd66ba7
-  data.tar.gz: abc9e42f14cfcff13dde1d8ae1aa8a327d604fbfcc5762d0aef4d2712c9f3112
+  metadata.gz: 8da8f83f714fa3d87ddedec77337e2433b1abc7a3a06fcacd09d9a64a1eeeef1
+  data.tar.gz: 724ebff9b18cad7190c8e50e9f5467158ef6621912ec80c283969e6de1065da1
 SHA512:
-  metadata.gz: 6f480c41cce3295a22f23f293af0a76c7bc72c4bfc7f6113dd4f049bff4d9b3ef9a8e3fac7f21c852b318eefe4f9071afc21fa24bfa5139c710b712f02a5b4cc
-  data.tar.gz: 2af4d41e1e8314a94c54ded237905ee8d433ce56c2c550469fbdcf462e02981cea2750c9177a144210b76a7aeed24fe97710c8c2971d7b2666e069e87ab80311
+  metadata.gz: d00dc22eed633ed3b83f24dffc932ec9a6c8059adde389dd2ce89aed1668bf5ae13c442d6803a44590725770493d073a98e329d494e6834e76de2f3dc6bd5e7f
+  data.tar.gz: 5949a4b2d346f6898b57957a8cccf153a662d4216eab89bc62ba1a55fd48c53840f2e95a7d6ab16d9cf72b5ca3056e777ac3a409943cc124c1e34ad5f16091d4

data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb

@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_popover_props",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+    popover_props: { width: "250px" },
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+const FilterPopoverProps = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
+  ]
+
+  const popoverProps = {
+    width: "250px"
+  }
+
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        popoverProps={popoverProps}
+        results={1}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+      {({ closePopover }) => (
+        <form>
+          <TextInput
+              label="Example Text Field"
+              placeholder="Enter Text"
+              {...props}
+          />
+          <Select
+              blankSelection="Select One..."
+              label="Example Collection Select"
+              name="Collection Select"
+              options={options}
+              {...props}
+          />
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  )
+}
+
+export default FilterPopoverProps

data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md

@@ -0,0 +1 @@
+This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popover_props` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover).

data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md

@@ -0,0 +1 @@
+This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover/react) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popoverProps` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover/react).

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

@@ -10,6 +10,7 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
+  - filter_popover_props: Popover Props
 
   react:
   - filter_default: Default
@@ -21,3 +22,5 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
+  - filter_popover_props: Popover Props
+

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

@@ -7,3 +7,4 @@ export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
+export { default as FilterPopoverProps } from './_filter_popover_props.jsx'

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb

@@ -14,7 +14,7 @@
         trigger_element_id: "regular-popover-1",
         tooltip_id: "tooltip-1",
         offset: true,
-        position: "top"
+        position: "top",
     }) do %>
         I'm a popover. I can show content of any size.
     <% end %>