playbook_ui 13.18.0.pre.alpha.PLAY12062192 → 13.18.0.pre.alpha.PLAY12062203

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 94f589b86b30ab8ce2fc2a6efde754d3c0858127cd98de756f7a5988a270fb98
-  data.tar.gz: 65f4377c3a940d0ebe99287aab5d264cef225ce71b39fd82ad3206947d0b3647
+  metadata.gz: 8f6b0ff54cf9716e16036e927548c56d9ed3bf864dc067049c400fa8e2688619
+  data.tar.gz: 5c95f55e88034b7c6d0af437441413074fee4159556bbc012783ad3783199ecf
 SHA512:
-  metadata.gz: 920f3031b3b57dacc1f20099c3fd5f63133f90cec68608967a9b243d0f4fc939613642224e04d0d81dcf66e53690a3e031d6da5efba401ab12923b7b28e4f33f
-  data.tar.gz: 1813f4f68ea6e197b6bfe10414128582e30cd3b6eafc18bf29942b9c82aec32ca7f0eb594de67de7c4024616ffb4283ef3a66f6cc1b733f8edd95d0da30df6c8
+  metadata.gz: 8c2608c178635d11d9aa6a1a9e47a5a4b730acae9ba2375677d0d3a4c36469c84a3346dec3c3622d9d4140820ce1890f34bf1daa29cb23f1f94fe3f733e68700
+  data.tar.gz: 6fa6c282889d8e7e7a7f51ae5a3903c4ccfc861c9d05e4668dc2bb07322cfb4b96091cfe9140cd0656d72f7005655393a088eb805a75b3c1e2b780e866e0063a

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx

@@ -15,7 +15,7 @@ import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 export type FilterDoubleProps = {
-  children?: React.ReactChild[] | React.ReactChild, 
+  children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
   onSortChange?: SortingChangeCallback,
   results?: number,
@@ -31,6 +31,7 @@ const FilterDouble = ({
   results,
   children,
   dark,
+  maxHeight,
   minWidth,
   placement,
   ...bgProps
@@ -45,6 +46,7 @@ const FilterDouble = ({
     >
       <FiltersPopover
           dark={dark}
+          maxHeight={maxHeight}
           minWidth={minWidth}
           placement={placement}
       >

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -14,7 +14,7 @@ import SortMenu, {
 } from './SortMenu'
 
 export type FilterSingleProps = {
-  children?: React.ReactChild[] | React.ReactChild, 
+  children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
   onSortChange?: SortingChangeCallback,
   results?: number,
@@ -30,6 +30,7 @@ const FilterSingle = ({
   results,
   children,
   dark,
+  maxHeight,
   minWidth,
   placement,
   ...bgProps
@@ -48,6 +49,7 @@ const FilterSingle = ({
           <>
             <FiltersPopover
                 dark={dark}
+                maxHeight={maxHeight}
                 minWidth={minWidth}
                 placement={placement}
             >

data/app/pb_kits/playbook/pb_filter/Filter/index.tsx

@@ -8,7 +8,7 @@ type FilterProps =
       double?: boolean,
     })
 
-const Filter = ({ 
+const Filter = ({
   double = false,
   ...templateProps
   }: FilterProps): React.ReactElement => {

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

@@ -0,0 +1,42 @@
+<%=
+  pb_rails("filter", props: {
+    max_height: "360px",
+    id: "filter_max_height_rails",
+    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,
+  }) 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.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= 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: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
+
+const FilterMaxHeight = (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...' },
+  ]
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        maxHeight="360px"
+        minWidth="360px"
+        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>
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
+        />
+        <TextInput
+            label="First Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Email"
+            placeholder="Enter email"
+            {...props}
+        />
+        <TextInput
+            label="Address"
+            placeholder="Enter address"
+            {...props}
+        />
+        <Flex
+            spacing="between"
+        >
+          <Button
+              onClick={closePopover}
+              text="Apply"
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+          />
+        </Flex>
+      </form>
+    )}
+    </Filter>
+  )
+}
+
+export default FilterMaxHeight

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

@@ -8,6 +8,7 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
 
   react:
@@ -18,4 +19,5 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement

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

@@ -5,4 +5,5 @@ export { default as FilterNoBackground } from './_filter_no_background.jsx'
 export { default as FilterOnly } from './_filter_only.jsx'
 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'

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -69,14 +69,14 @@
       <% end %>
     <% end %>
 
-    <% if object.template != "sort_only" %>
-      <%= pb_rails("popover", props: object.popover_props) do %>
+    <% if object.template != "sort_only"%>
+      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
         <%= content %>
       <% end %>
     <%end%>
 
-    <% if object.template != "filter_only" %>
-      <%= pb_rails("popover", props: object.popover_props) do %>
+    <% if object.template != "filter_only"%>
+      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -49,29 +49,6 @@ module Playbook
           ""
         end
       end
-
-      def popover_props
-        if template != "sort_only"
-          {
-            max_height: max_height,
-            min_width: min_width,
-            close_on_click: "outside",
-            trigger_element_id: "filter#{id}",
-            tooltip_id: "filter-form#{id}",
-            position: placement,
-          }
-        elsif template != "filter_only"
-          {
-            max_height: max_height,
-            classname: "pb_filter_sort_menu",
-            close_on_click: "outside",
-            trigger_element_id: "sort-button#{id}",
-            tooltip_id: "sort-filter-btn-tooltip#{id}",
-            position: placement,
-            padding: "none",
-          }
-        end
-      end
     end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.18.0"
-  VERSION = "13.18.0.pre.alpha.PLAY12062192"
+  VERSION = "13.18.0.pre.alpha.PLAY12062203"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.18.0.pre.alpha.PLAY12062192
+  version: 13.18.0.pre.alpha.PLAY12062203
 platform: ruby
 authors:
 - Power UX
@@ -1064,6 +1064,8 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.md
+- app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb
+- app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md