playbook_ui 7.14.0 → 7.16.0.pre.alpha3

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

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

@@ -0,0 +1,7 @@
+##### Prop
+
+*ATTENTION* - the vertical prop will be deprecated & renamed in the future. 
+
+* **Deprecated Prop**: `vertical` | **Type**: String | **Values**: top | center | bottom | stretch | baseline | none
+
+* **New Prop**: `align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none

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

@@ -1,23 +1,23 @@
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<br/>
 <div class="flex-doc-example">
-  
-  <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
-
   <%= pb_rails("flex") do %>
-    <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
-    <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
-    <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
-    <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
+    <%= 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/>
-
-  <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
+<br/><br/>
 
+<%= pb_rails("title", props: {size: 4, text: "Column"}) %>
+<br/>
+<div class="flex-doc-example">
   <%= pb_rails("flex", props: {orientation: "column"}) do %>
-    <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
-    <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
-    <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
-    <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
+    <%= 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>