playbook_ui 7.10.0 → 7.12.1

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

@@ -1,5 +1,5 @@
 
-<%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+<%= pb_rails("flex", props: {orientation: "row", padding_right: "lg", vertical: "center"}) do %>
 
     <% if (object.template != "sort_only") %>
       <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter#{object.id}"}) %>
@@ -11,23 +11,26 @@
               <%= pb_rails("caption", props: { text: filter[:name]}) %>
               <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
             </div>
-          <% end %>   
+          <% end %>
           <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"})%> 
-      <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}"}) do %>
+      <% 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| %>
             <% if item[:active] == true %>
               <%= item[:item] %>
               <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
             <% end %>
           <% end %>
+        <% end %>
       <% end %>
     <% end %>
 
@@ -40,7 +43,7 @@
     <%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
       <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
         <%= pb_rails("caption", props: { text: "sort by:"}) %>
-        <%= pb_rails("button", props: {variant: "link" ,classname: "p-0 ml-3",id: "sort-button#{object.id}"}) do %>
+        <%= pb_rails("button", props: {variant: "link", padding_right: "none", id: "sort-button#{object.id}"}) do %>
           <% object.sort_menu.each do |item| %>
             <% if item[:active] == true %>
               <%= item[:item] %>
@@ -51,6 +54,3 @@
       <% end %>
   <% end %>
 <% end %>
-  
-
-

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%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../../'
 
-const FixedConfirmationToastClose = () => {
+const FixedConfirmationToastClose = (props) => {
   return (
     <div>
       <div>
@@ -9,6 +9,7 @@ const FixedConfirmationToastClose = () => {
             closeable
             status="error"
             text="Error Message"
+            {...props}
         />
       </div>
 
@@ -19,6 +20,7 @@ const FixedConfirmationToastClose = () => {
             closeable
             status="success"
             text="Items Successfully Moved"
+            {...props}
         />
       </div>
 
@@ -29,6 +31,7 @@ const FixedConfirmationToastClose = () => {
             closeable
             status="neutral"
             text="Scan to Assign Selected Items"
+            {...props}
         />
       </div>
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../..'
 
-const FixedConfirmationToastDark = () => {
+const FixedConfirmationToastDark = (props) => {
   return (
     <div>
       <div>
@@ -9,6 +9,7 @@ const FixedConfirmationToastDark = () => {
             dark
             status="error"
             text="Error Message"
+            {...props}
         />
       </div>
 
@@ -20,6 +21,7 @@ const FixedConfirmationToastDark = () => {
             dark
             status="success"
             text="Items Successfully Moved"
+            {...props}
         />
       </div>
 
@@ -31,6 +33,7 @@ const FixedConfirmationToastDark = () => {
             dark
             status="neutral"
             text="Scan to Assign Selected Items"
+            {...props}
         />
       </div>
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../../'
 
-const FixedConfirmationToastDefault = () => {
+const FixedConfirmationToastDefault = (props) => {
   return (
     <div>
       <div>
@@ -9,6 +9,7 @@ const FixedConfirmationToastDefault = () => {
             closeable
             status="error"
             text="Error Message"
+            {...props}
         />
       </div>
 
@@ -18,6 +19,7 @@ const FixedConfirmationToastDefault = () => {
         <FixedConfirmationToast
             status="success"
             text="Items Successfully Moved"
+            {...props}
         />
       </div>
 
@@ -27,6 +29,7 @@ const FixedConfirmationToastDefault = () => {
         <FixedConfirmationToast
             status="neutral"
             text="Scan to Assign Selected Items"
+            {...props}
         />
       </div>
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../../'
 
-const FixedConfirmationToastMultiLine = () => {
+const FixedConfirmationToastMultiLine = (props) => {
   return (
     <div>
       <FixedConfirmationToast
           status="tip"
           text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../../'
 
-const FixedConfirmationToastMultiLineDark = () => {
+const FixedConfirmationToastMultiLineDark = (props) => {
   return (
     <div>
       <FixedConfirmationToast
           dark
           status="tip"
           text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../../'
 
-const FlexDefault = () => {
+const FlexDefault = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="Row"
+            {...props}
         />
         <br />
         <Flex
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -31,11 +33,13 @@ const FlexDefault = () => {
         <Title
             size={4}
             text="Column"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="left"
+            {...props}
         >
           <FlexItem>
             {'1'}

data/app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.jsx

@@ -1,23 +1,26 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexHorizontal = () => {
+const FlexHorizontal = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={3}
             text="Row"
+            {...props}
         />
         <br />
         <Title
             size={4}
             text="Left"
+            {...props}
         />
         <br />
         <Flex
             horizontal="left"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -38,11 +41,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Center"
+            {...props}
         />
         <br />
         <Flex
             horizontal="center"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -63,11 +68,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Right"
+            {...props}
         />
         <br />
         <Flex
             horizontal="right"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -88,16 +95,19 @@ const FlexHorizontal = () => {
         <Title
             size={3}
             text="Column"
+            {...props}
         />
         <br />
         <Title
             size={4}
             text="Left"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="left"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -118,11 +128,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Center"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="center"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -143,11 +155,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Right"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="right"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -168,11 +182,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Stretch"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="stretch"
+            {...props}
         >
           <FlexItem>
             {'1'}

data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexInline = () => {
+const FlexInline = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="Row"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             inline
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -32,12 +34,14 @@ const FlexInline = () => {
         <Title
             size={4}
             text="Column"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             inline
             orientation="column"
+            {...props}
         >
           <FlexItem>
             {'1'}

data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexReverse = () => {
+const FlexReverse = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="Row"
+            {...props}
         />
         <br />
         <Flex
@@ -15,6 +16,7 @@ const FlexReverse = () => {
             horizontal="left"
             orientation="row"
             reverse
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -34,6 +36,7 @@ const FlexReverse = () => {
         <Title
             size={4}
             text="Column"
+            {...props}
         />
         <br />
         <Flex
@@ -41,6 +44,7 @@ const FlexReverse = () => {
             orientation="column"
             reverse
             vertical="left"
+            {...props}
         >
           <FlexItem>
             {'1'}

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexSpacing = () => {
+const FlexSpacing = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="None"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             spacing="none"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -33,11 +35,13 @@ const FlexSpacing = () => {
         <Title
             size={4}
             text="Around"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             spacing="around"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -58,11 +62,13 @@ const FlexSpacing = () => {
         <Title
             size={4}
             text="Between"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             spacing="between"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -83,11 +89,13 @@ const FlexSpacing = () => {
         <Title
             size={4}
             text="Evenly"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             spacing="evenly"
+            {...props}
         >
           <FlexItem>
             {'1'}