playbook_ui 7.11.1 → 7.14.0.pre.alpha1

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

@@ -0,0 +1 @@
+Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

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.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_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

@@ -17,3 +17,4 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_min_width: Min Width for Popover Inside of Filter
+  - filter_close_popover: Close Popover

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

@@ -5,3 +5,4 @@ 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'
+export { default as FilterClosePopover } from './_filter_close_popover.jsx'

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

@@ -6,12 +6,24 @@
       <div class="maskContainer">
         <div class="filters">
           <div class="left_gradient"></div>
-          <% object.filters.each do |filter| %>
-            <div class="filter">
-              <%= pb_rails("caption", props: { text: filter[:name]}) %>
-              <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
-            </div>
-          <% end %>
+            <% object.filters.each do |filter| %>
+              <% if filter[:name]== "" %>
+                  <div>
+                    <%= pb_rails("body", props: {
+                      color: "light",
+                      padding_left: "xs",
+                      size: 4,
+                      tag:"h4",
+                      text: "No Filter Selected"
+                    }) %>
+                  </div>
+              <% else %>
+                  <div class="filter">
+                    <%= 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>
@@ -20,7 +32,6 @@
       <% end %>
     <% end %>
 
-
     <% if (object.template == "single" ) || (object.template == "sort_only") %>
       <% unless object.sort_menu == [{}] %>
         <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>

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_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/example.yml

@@ -4,13 +4,8 @@ examples:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
-  - fixed_confirmation_toast_dark: Dark
-  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
   
   react:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
-  - fixed_confirmation_toast_dark: Dark
-  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
-  

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

@@ -1,5 +1,3 @@
 export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
 export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
 export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
-export { default as FixedConfirmationToastDark } from './_fixed_confirmation_toast_dark.jsx'
-export { default as FixedConfirmationToastMultiLineDark } from './_fixed_confirmation_toast_multi_line_dark.jsx'

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -7,35 +7,48 @@ import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
-  horizontal?: "left" | "center" | "right" | "stretch",
+  horizontal?: "left" | "center" | "right" | "stretch" | "none",
+  justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
   id?: string,
   inline?: boolean,
   orientation?: "row" | "column",
   spacing?: "around" | "between" | "evenly" | "none",
   reverse?: boolean,
-  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline",
+  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
+  align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
+  rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
+  columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
   wrap?: boolean,
 }
 
 const Flex = (props: FlexProps) => {
   const {
+    align = 'none',
     children,
     className,
     inline = false,
     horizontal = 'left',
+    justify = 'none',
     orientation = 'row',
     spacing = 'none',
+    gap = 'none',
+    rowGap = 'none',
+    columnGap = 'none',
     reverse = false,
     vertical = 'top',
     wrap = false,
   } = props
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
-  const horizontalClass =
-    horizontal !== undefined ? `justify_content_${horizontal}` : ''
-  const verticalClass = vertical !== undefined ? `align_items_${vertical}` : ''
+  const justifyClass =
+    justify !== 'none' ? `justify_content_${justify}` : `justify_content_${horizontal}`
+  const alignClass = align !== 'none' ? `align_items_${align}` : `align_items_${vertical}`
   const inlineClass = inline === true ? 'inline' : ''
   const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
+  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
+  const rowGapClass = rowGap !== 'none' ? `rowGap_${rowGap}` : ''
+  const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
   return (
@@ -44,12 +57,15 @@ const Flex = (props: FlexProps) => {
         buildCss(
           'pb_flex_kit',
           orientationClass,
-          horizontalClass,
-          verticalClass,
+          justifyClass,
+          alignClass,
           inlineClass,
-          spacingClass,
           reverseClass,
-          wrapClass
+          wrapClass,
+          spacingClass,
+          gapClass,
+          rowGapClass,
+          columnGapClass
         ),
         globalProps(props),
         className