playbook_ui 7.13.0 → 7.16.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/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/_fixed_confirmation_toast.jsx

@@ -31,11 +31,15 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   )
   const icon = iconMap[status]
 
+  const handleClick = () => {
+    toggleToast(!closeable)
+  }
+
   return (
     <If condition={showToast}>
       <div
           className={css}
-          onClick={closeable && (() => toggleToast(false))}
+          onClick={handleClick}
       >
         <If condition={icon}>
           <Icon

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_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFixedConfirmationToast
-    class FixedConfirmationToast
-      include Playbook::Props
-
-      partial "pb_fixed_confirmation_toast/fixed_confirmation_toast"
-
+    class FixedConfirmationToast < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
                     values: %w[success error neutral tip],
                     default: "neutral"

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

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

@@ -1,4 +1,19 @@
 @import "flex_item";
+@import "../tokens/spacing";
+
+$gapSpaces:(
+  xs:   $space_xs,
+  sm:   $space_sm,
+  md:   $space_md,
+  lg:   $space_lg,
+  xl:   $space_xl
+);
+
+$gapTypes: (
+  gap: gap, 
+  columnGap: column-gap, 
+  rowGap: row-gap
+  );
 
 [class^=pb_flex_kit] {
   display: flex;
@@ -33,7 +48,8 @@
 
   // Alignment: Justify Content
   &[class*=justify_content_left],
-  &[class*=justify_content_top] {
+  &[class*=justify_content_top],
+  &[class*=justify_content_start] {
     justify-content: flex-start;
     &[class*=_reverse] {
       justify-content: flex-end;
@@ -41,7 +57,8 @@
   }
 
   &[class*=justify_content_right],
-  &[class*=justify_content_bottom] {
+  &[class*=justify_content_bottom],
+  &[class*=justify_content_end] {
     justify-content: flex-end;
      &[class*=_reverse] {
       justify-content: flex-start;
@@ -54,12 +71,14 @@
 
   // Alignment: Align Items
   &[class*=align_items_left],
-  &[class*=align_items_top] {
+  &[class*=align_items_top],
+  &[class*=align_items_start] {
     align-items: flex-start;
   }
 
   &[class*=align_items_right],
-  &[class*=align_items_bottom] {
+  &[class*=align_items_bottom],
+  &[class*=align_items_end] {
     align-items: flex-end;
   }
 
@@ -76,15 +95,29 @@
   }
 
   // Spacing
-  &[class*=spacing_around] {
+  &[class*=spacing_around],
+  &[class*=justify_content_around] {
     justify-content: space-around;
   }
 
-  &[class*=spacing_between] {
+  &[class*=spacing_between],
+  &[class*=justify_content_between] {
     justify-content: space-between;
   }
 
-  &[class*=spacing_evenly] {
+  &[class*=spacing_evenly],
+  &[class*=justify_content_evenly] {
     justify-content: space-evenly;
   }
+
+  //Gap
+  @each $gapType, $gapValue in $gapTypes{
+    @each $sizeName, $sizeValue in $gapSpaces {
+      &[class*=_#{$gapType}_#{$sizeName}]{
+        #{$gapValue}: $sizeValue;
+      }
+    }
+  }
+
+
 }

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

@@ -7,18 +7,24 @@ type FlexItemPropTypes = {
   children: array<React.ReactNode> | React.ReactNode,
   fixedSize: string,
   grow: boolean,
+  shrink: boolean,
+  flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
   className: string,
+  overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex } = props
   const growClass = grow === true ? 'grow' : ''
+  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
+  const overflowClass = overflow ? `overflow_${overflow}` : ''
+  const shrinkClass = shrink === true ? 'shrink' : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -7,4 +7,23 @@
   &[class*=_grow] {
     flex-grow: 1;
   }
+
+  &[class*=_shrink] {
+    flex-shrink: 1;
+  }
+
+
+  $overflow_values: auto, hidden, inherit, initial, scroll, visible;
+
+  @each $value in $overflow_values {
+    &.overflow_#{$value} {
+      overflow: #{$value}
+    }
+  }
+
+  @for $i from 0 through 12 {
+    &[class*=_flex_#{$i}]{
+      flex: $i;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_flex/docs/_description.md

@@ -1 +1,7 @@
 This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
+
+##### !!!Attention these props will be deprecated in the future please use new props in their place
+
+* `horizontal` - Will be replaced with `justify` 
+* `vertical` - Will be replaced with `align` 
+* `spacing` - Will be removed. Use `justify` 

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb

@@ -0,0 +1,101 @@
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "start" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "center" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "end" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "baseline" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+
+  <br/><br/>
+
+   <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "stretch" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+
+  <br/><br/>
+
+
+  <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{orientation: "column", align: "start" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+    <%= pb_rails("flex/flex_item") do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{orientation: "column", align: "center" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+    <%= pb_rails("flex/flex_item") do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{orientation: "column", align: "end" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+    <%= pb_rails("flex/flex_item") do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+  <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{orientation: "column", align: "stretch" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+    <%= pb_rails("flex/flex_item") do %>4<% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_flex/docs/{_flex_horizontal.jsx → _flex_align.jsx}

@@ -1,25 +1,20 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexHorizontal = (props) => {
+const FlexAlign = (props) => {
   return (
     <>
-      <div className="flex-doc-example">
-        <Title
-            size={3}
-            text="Row"
-            {...props}
-        />
-        <br />
-        <Title
-            size={4}
-            text="Left"
-            {...props}
-        />
-        <br />
+
+      <Title
+          size={4}
+          text="Row"
+          {...props}
+      />
+      <br />
+
+      <div className="flex-doc-example ">
         <Flex
-            horizontal="left"
-            orientation="row"
+            align="start"
             {...props}
         >
           <FlexItem>
@@ -28,25 +23,20 @@ const FlexHorizontal = (props) => {
           <FlexItem>
             {'2'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="xl">
             {'3'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="md">
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
+      <br />
 
-        <Title
-            size={4}
-            text="Center"
-            {...props}
-        />
-        <br />
+      <div className="flex-doc-example ">
         <Flex
-            horizontal="center"
-            orientation="row"
+            align="center"
             {...props}
         >
           <FlexItem>
@@ -55,24 +45,42 @@ const FlexHorizontal = (props) => {
           <FlexItem>
             {'2'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="xl">
             {'3'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="md">
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
+      <br />
 
-        <Title
-            size={4}
-            text="Right"
+      <div className="flex-doc-example ">
+        <Flex
+            align="end"
             {...props}
-        />
-        <br />
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="xl">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
         <Flex
-            horizontal="right"
+            align="stretch"
             orientation="row"
             {...props}
         >
@@ -82,31 +90,28 @@ const FlexHorizontal = (props) => {
           <FlexItem>
             {'2'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="xl">
             {'3'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="md">
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
+      <br />
 
-        <Title
-            size={3}
-            text="Column"
-            {...props}
-        />
-        <br />
-        <Title
-            size={4}
-            text="Left"
-            {...props}
-        />
-        <br />
+      <Title
+          size={4}
+          text="Column"
+          {...props}
+      />
+      <br />
+
+      <div className="flex-doc-example ">
         <Flex
+            align="start"
             orientation="column"
-            vertical="left"
             {...props}
         >
           <FlexItem>
@@ -122,18 +127,14 @@ const FlexHorizontal = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
+      <br />
 
-        <Title
-            size={4}
-            text="Center"
-            {...props}
-        />
-        <br />
+      <div className="flex-doc-example ">
         <Flex
+            align="center"
             orientation="column"
-            vertical="center"
             {...props}
         >
           <FlexItem>
@@ -149,18 +150,14 @@ const FlexHorizontal = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
+      <br />
 
-        <Title
-            size={4}
-            text="Right"
-            {...props}
-        />
-        <br />
+      <div className="flex-doc-example ">
         <Flex
+            align="end"
             orientation="column"
-            vertical="right"
             {...props}
         >
           <FlexItem>
@@ -176,18 +173,14 @@ const FlexHorizontal = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
+      <br />
 
-        <Title
-            size={4}
-            text="Stretch"
-            {...props}
-        />
-        <br />
+      <div className="flex-doc-example ">
         <Flex
+            align="stretch"
             orientation="column"
-            vertical="stretch"
             {...props}
         >
           <FlexItem>
@@ -204,8 +197,9 @@ const FlexHorizontal = (props) => {
           </FlexItem>
         </Flex>
       </div>
+
     </>
   )
 }
 
-export default FlexHorizontal
+export default FlexAlign