playbook_ui 7.11.0.pre.alpha1 → 7.13.0

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

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= render partial: "pb_filter/templates/default", locals: {object: object}%>
+    <%= render partial: "pb_filter/templates/default", locals: {object: object, min_width: object.min_width}%>
 <% end %>

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

@@ -11,7 +11,6 @@ const FilterDefault = (props) => {
   ]
   return (
     <Filter
-        {...props}
         double
         filters={{
           'Full Name': 'John Wick',
@@ -26,10 +25,12 @@ const FilterDefault = (props) => {
           manager_name: 'Manager\'s Name',
         }}
         sortValue={[{ name: 'popularity', dir: 'desc' }]}
+        {...props}
     >
       <TextInput
           label="Full Name"
           placeholder="Enter name"
+          {...props}
       />
 
       <Select
@@ -37,16 +38,20 @@ const FilterDefault = (props) => {
           label="Territory"
           name="location"
           options={options}
+          {...props}
       />
       <Flex
           spacing="between"
+          {...props}
       >
         <Button
             text="Apply"
+            {...props}
         />
         <Button
             text="Clear"
             variant="secondary"
+            {...props}
         />
       </Flex>
     </Filter>

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

@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    min_width: "600px",
+    id: "25",
+    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: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+  <%= 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: { 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_min_width.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
+
+const FilterMinWidth = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+  ]
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        minWidth="600px"
+        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' }]}
+    >
+      <TextInput
+          label="Full Name"
+          placeholder="Enter name"
+      />
+
+      <Select
+          blankSelection="Select One..."
+          label="Territory"
+          name="location"
+          options={options}
+      />
+      <Flex
+          spacing="between"
+      >
+        <Button
+            text="Apply"
+        />
+        <Button
+            text="Clear"
+            variant="secondary"
+        />
+      </Flex>
+    </Filter>
+  )
+}
+
+export default FilterMinWidth

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

@@ -12,7 +12,52 @@ const FilterNoBackground = (props) => {
   return (
     <>
       <Filter
+          background={false}
+          filters={{
+          'Full Name': 'John Wick',
+          'City': 'Las Vegas',
+        }}
+          results={3}
+          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' }]}
           {...props}
+      >
+        <TextInput
+            label="Full Name"
+            placeholder="Enter name"
+            {...props}
+        />
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
+            {...props}
+        />
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </Filter>
+
+      <Filter
           background={false}
           double
           filters={{
@@ -28,10 +73,12 @@ const FilterNoBackground = (props) => {
           manager_name: 'Manager\'s Name',
         }}
           sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          {...props}
       >
         <TextInput
             label="Full Name"
             placeholder="Enter name"
+            {...props}
         />
 
         <Select
@@ -39,16 +86,20 @@ const FilterNoBackground = (props) => {
             label="Territory"
             name="location"
             options={options}
+            {...props}
         />
         <Flex
             spacing="between"
+            {...props}
         >
           <Button
               text="Apply"
+              {...props}
           />
           <Button
               text="Clear"
               variant="secondary"
+              {...props}
           />
         </Flex>
       </Filter>

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

@@ -1,11 +1,11 @@
 <%=
   pb_rails("filter", props: {
-    id: "2",
+    id: "nosort",
     filters: [
       { name: "name", value: "John Wick" }
     ],
     results: 546,
-    template: "single"
+    template: "filter_only",
   }) do
 %>
   <%

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

@@ -11,16 +11,17 @@ const FilterNoSort = (props) => {
   ]
   return (
     <Filter
-        {...props}
         filters={{
           'Full Name': 'John Wick',
         }}
         results={546}
         sortValue={[{ name: 'popularity', dir: 'desc' }]}
+        {...props}
     >
       <TextInput
           label="Full Name"
           placeholder="Enter name"
+          {...props}
       />
 
       <Select
@@ -28,16 +29,20 @@ const FilterNoSort = (props) => {
           label="Territory"
           name="location"
           options={options}
+          {...props}
       />
       <Flex
           spacing="between"
+          {...props}
       >
         <Button
             text="Apply"
+            {...props}
         />
         <Button
             text="Clear"
             variant="secondary"
+            {...props}
         />
       </Flex>
     </Filter>

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

@@ -0,0 +1 @@
+To display results, use templates `single` or `default`. 

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

@@ -4,7 +4,7 @@
     filters: [
       { name: "name", value: "John Wick" }
     ],
-    template:"filter_only"
+    template:"filter_only",
   }) do
 %>
   <%

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

@@ -11,12 +11,13 @@ const FilterOnly = (props) => {
   ]
   return (
     <Filter
-        {...props}
         filters={{ 'Full Name': 'John Wick' }}
+        {...props}
     >
       <TextInput
           label="Full Name"
           placeholder="Enter name"
+          {...props}
       />
 
       <Select
@@ -24,16 +25,20 @@ const FilterOnly = (props) => {
           label="Territory"
           name="location"
           options={options}
+          {...props}
       />
       <Flex
           spacing="between"
+          {...props}
       >
         <Button
             text="Apply"
+            {...props}
         />
         <Button
             text="Clear"
             variant="secondary"
+            {...props}
         />
       </Flex>
     </Filter>

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

@@ -11,7 +11,6 @@ const FilterSingle = (props) => {
   ]
   return (
     <Filter
-        {...props}
         filters={{
           'Full Name': 'John Wick',
         }}
@@ -24,10 +23,12 @@ const FilterSingle = (props) => {
           manager_name: 'Manager\'s Name',
         }}
         sortValue={[{ name: 'popularity', dir: 'desc' }]}
+        {...props}
     >
       <TextInput
           label="Full Name"
           placeholder="Enter name"
+          {...props}
       />
 
       <Select
@@ -35,16 +36,20 @@ const FilterSingle = (props) => {
           label="Territory"
           name="location"
           options={options}
+          {...props}
       />
       <Flex
           spacing="between"
+          {...props}
       >
         <Button
             text="Apply"
+            {...props}
         />
         <Button
             text="Clear"
             variant="secondary"
+            {...props}
         />
       </Flex>
     </Filter>

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

@@ -3,7 +3,6 @@ import { Filter } from '../../'
 
 const SortOnly = (props) => (
   <Filter
-      {...props}
       sortOptions={{
         popularity: 'Popularity',
         // eslint-disable-next-line
@@ -12,6 +11,7 @@ const SortOnly = (props) => (
         manager_name: 'Manager\'s Name',
       }}
       sortValue={[{ name: 'popularity', dir: 'desc' }]}
+      {...props}
   />
 )
 

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

@@ -7,6 +7,7 @@ examples:
   - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only
+  - filter_min_width: Min Width for Popover Inside of Filter
 
   react:
   - filter_default: Default
@@ -15,3 +16,4 @@ examples:
   - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only
+  - filter_min_width: Min Width for Popover Inside of Filter

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

@@ -4,3 +4,4 @@ export { default as FilterNoSort } from './_filter_no_sort.jsx'
 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 FilterMinWidth } from './_filter_min_width.jsx'

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

@@ -14,6 +14,7 @@ module Playbook
                       values: %w[default single filter_only sort_only],
                       default: "default"
       prop :background, type: Playbook::Props::Boolean, default: true
+      prop :min_width, default: "auto"
 
       def classname
         generate_classname("pb_filter_kit")

data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb

@@ -15,11 +15,13 @@
           <div class="right_gradient"></div>
         </div>
       </div>
+      <% if (object.template != "default") %>
+        <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
+      <% end %>
     <% end %>
 
 
     <% if (object.template == "single" ) || (object.template == "sort_only") %>
-      <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
       <% unless object.sort_menu == [{}] %>
         <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
           <% object.sort_menu.each do |item| %>

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -7,7 +7,7 @@
 <% end %>
 
 <% if object.template != "sort_only"%>
-  <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
+  <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
     <%= capture(&object.children) %>
   <% end %>
 <%end%>