playbook_ui 7.11.1 → 7.14.0.pre.alpha1

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,22 @@ 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,
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow } = props
+  const { children, className, fixedSize, grow, shrink, flex } = props
   const growClass = grow === true ? 'grow' : ''
+  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
+  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), globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

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

@@ -7,4 +7,14 @@
   &[class*=_grow] {
     flex-grow: 1;
   }
+
+  &[class*=_shrink] {
+    flex-shrink: 1;
+  }
+
+  @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_vertical.jsx → _flex_align.jsx}

@@ -1,23 +1,21 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexVertical = () => {
+const FlexAlign = (props) => {
   return (
     <>
-      <div className="flex-doc-example">
-        <Title
-            size={3}
-            text="Row"
-        />
-        <br />
-        <Title
-            size={4}
-            text="Top"
-        />
-        <br />
+
+      <Title
+          size={4}
+          text="Row"
+          {...props}
+      />
+      <br />
+
+      <div className="flex-doc-example ">
         <Flex
-            className="bg_light tall"
-            vertical="top"
+            align="start"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -25,24 +23,21 @@ const FlexVertical = () => {
           <FlexItem>
             {'2'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="xl">
             {'3'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="md">
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
+      <br />
 
-        <Title
-            size={4}
-            text="Center"
-        />
-        <br />
+      <div className="flex-doc-example ">
         <Flex
-            className="bg_light tall"
-            vertical="center"
+            align="center"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -50,24 +45,21 @@ const FlexVertical = () => {
           <FlexItem>
             {'2'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="xl">
             {'3'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="md">
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
+      <br />
 
-        <Title
-            size={4}
-            text="Bottom"
-        />
-        <br />
+      <div className="flex-doc-example ">
         <Flex
-            className="bg_light tall"
-            vertical="bottom"
+            align="end"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -75,26 +67,52 @@ const FlexVertical = () => {
           <FlexItem>
             {'2'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="xl">
             {'3'}
           </FlexItem>
-          <FlexItem>
+          <FlexItem padding="md">
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
+      <br />
 
-        <Title
-            size={4}
-            text="Stretch"
-        />
-        <br />
+      <div className="flex-doc-example ">
         <Flex
-            className="bg_light tall"
-            horizontal="stretch"
+            align="stretch"
             orientation="row"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="xl">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
 
+      <br />
+
+      <Title
+          size={4}
+          text="Column"
+          {...props}
+      />
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            align="start"
+            orientation="column"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -109,24 +127,15 @@ const FlexVertical = () => {
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
-        <Title
-            size={3}
-            text="Column"
-        />
-        <br />
-        <Title
-            size={4}
-            text="Top"
-        />
-        <br />
+      <br />
+
+      <div className="flex-doc-example ">
         <Flex
-            className="bg_light tall"
-            horizontal="left"
+            align="center"
             orientation="column"
-            vertical="top"
-
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -141,19 +150,15 @@ const FlexVertical = () => {
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
-        <Title
-            size={4}
-            text="Center"
-        />
-        <br />
+      <br />
+
+      <div className="flex-doc-example ">
         <Flex
-            className="bg_light tall"
-            horizontal="center"
+            align="end"
             orientation="column"
-            vertical="left"
-
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -168,19 +173,15 @@ const FlexVertical = () => {
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
+
+      <br />
 
-        <br />
-        <Title
-            size={4}
-            text="Bottom"
-        />
-        <br />
+      <div className="flex-doc-example ">
         <Flex
-            className="bg_light tall"
-            horizontal="bottom"
+            align="stretch"
             orientation="column"
-            vertical="left"
-
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -196,8 +197,9 @@ const FlexVertical = () => {
           </FlexItem>
         </Flex>
       </div>
+
     </>
   )
 }
 
-export default FlexVertical
+export default FlexAlign