playbook_ui 14.25.0 → 15.0.0

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

@@ -1,52 +1,147 @@
-[class^=pb_flex_item_kit] {
-  &[class*=_fixed_size] {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-
-  &[class*=_grow] {
-    flex-grow: 1;
-  }
-
-  &[class*=_shrink] {
-    flex-shrink: 1;
-  }
-
-  // Display Flex - Rails & React
-  &[class*=display_flex] {
-    display: flex;
-  }
-
-  // Alignment: Align Self - Rails & React
-  &[class*=align_self_start] {
-    align-self: flex-start;
-  }
-  
-  &[class*=align_self_end] {
-    align-self: flex-end;
-  }
-  
-  &[class*=align_self_center] {
-    align-self: center;
-  }
-  
-  &[class*=align_self_stretch] {
-    align-self: stretch;
-  }
-
-  //Order Items
-  @for $i from 0 through 12 {
-    &[class*=order_#{$i}]{
-      order: $i;
-    }
-  }
-  &[class*=order_first]{
-    order: -1;
-  }
-
-  @for $i from 0 through 12 {
-    &[class*=_flex_#{$i}]{
-      flex: $i;
-    }
-  }
+// Fixed size
+.pb_flex_item_kit_fixed_size {
+  flex-grow: 0;
+  flex-shrink: 0;
 }
+
+// Grow
+.pb_flex_item_kit_grow {
+  flex-grow: 1;
+}
+
+// Shrink
+.pb_flex_item_kit_shrink {
+  flex-shrink: 1;
+}
+
+// Display Flex
+.pb_flex_item_kit_display_flex {
+  display: flex;
+}
+
+// Align Self
+.pb_flex_item_kit_align_self_start {
+  align-self: flex-start;
+}
+
+.pb_flex_item_kit_align_self_end {
+  align-self: flex-end;
+}
+
+.pb_flex_item_kit_align_self_center {
+  align-self: center;
+}
+
+.pb_flex_item_kit_align_self_stretch {
+  align-self: stretch;
+}
+
+// Order classes
+.pb_flex_item_kit_order_0 {
+  order: 0;
+}
+
+.pb_flex_item_kit_order_1 {
+  order: 1;
+}
+
+.pb_flex_item_kit_order_2 {
+  order: 2;
+}
+
+.pb_flex_item_kit_order_3 {
+  order: 3;
+}
+
+.pb_flex_item_kit_order_4 {
+  order: 4;
+}
+
+.pb_flex_item_kit_order_5 {
+  order: 5;
+}
+
+.pb_flex_item_kit_order_6 {
+  order: 6;
+}
+
+.pb_flex_item_kit_order_7 {
+  order: 7;
+}
+
+.pb_flex_item_kit_order_8 {
+  order: 8;
+}
+
+.pb_flex_item_kit_order_9 {
+  order: 9;
+}
+
+.pb_flex_item_kit_order_10 {
+  order: 10;
+}
+
+.pb_flex_item_kit_order_11 {
+  order: 11;
+}
+
+.pb_flex_item_kit_order_12 {
+  order: 12;
+}
+
+.pb_flex_item_kit_order_first {
+  order: -1;
+}
+
+// Flex values
+.pb_flex_item_kit_flex_0 {
+  flex: 0;
+}
+
+.pb_flex_item_kit_flex_1 {
+  flex: 1;
+}
+
+.pb_flex_item_kit_flex_2 {
+  flex: 2;
+}
+
+.pb_flex_item_kit_flex_3 {
+  flex: 3;
+}
+
+.pb_flex_item_kit_flex_4 {
+  flex: 4;
+}
+
+.pb_flex_item_kit_flex_5 {
+  flex: 5;
+}
+
+.pb_flex_item_kit_flex_6 {
+  flex: 6;
+}
+
+.pb_flex_item_kit_flex_7 {
+  flex: 7;
+}
+
+.pb_flex_item_kit_flex_8 {
+  flex: 8;
+}
+
+.pb_flex_item_kit_flex_9 {
+  flex: 9;
+}
+
+.pb_flex_item_kit_flex_10 {
+  flex: 10;
+}
+
+.pb_flex_item_kit_flex_11 {
+  flex: 11;
+}
+
+.pb_flex_item_kit_flex_12 {
+  flex: 12;
+}

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

@@ -9,7 +9,8 @@ type FlexItemPropTypes = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
   shrink?: boolean,
   className?: string,
-  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
+  flex?: string | number,
+  order?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
   alignSelf?: "start" | "end" | "center" | "stretch" | null,
   displayFlex?: boolean
 } & GlobalProps
@@ -27,14 +28,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     alignSelf,
     displayFlex
   } = props
-  const growClass = grow === true ? 'grow' : ''
-  const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
-  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
-  const shrinkClass = shrink === true ? 'shrink' : ''
-  const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
+  const growClass = grow === true ? 'pb_flex_item_kit_grow' : ''
+  const displayFlexClass = displayFlex === true ? 'pb_flex_item_kit_display_flex' : ''
+  const flexClass = flex !== 'none' ? `pb_flex_item_kit_flex_${flex}` : ''
+  const shrinkClass = shrink === true ? 'pb_flex_item_kit_shrink' : ''
+  const alignSelfClass = alignSelf ? `pb_flex_item_kit_align_self_${alignSelf}` : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
-  const orderClass = order !== 'none' ? `order_${order}` : null
+  const orderClass = order !== 'none' ? `pb_flex_item_kit_order_${order}` : ''
   const dynamicInlineProps = globalInlineProps(props)
   const combinedStyles = {
     ...fixedStyle,
@@ -47,7 +48,17 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   return (
     <div
         {...htmlProps}
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
+        className={classnames(
+          'pb_flex_item_kit',
+          growClass,
+          shrinkClass,
+          flexClass,
+          displayFlexClass,
+          orderClass,
+          alignSelfClass,
+          globalProps(props),
+          className
+        )}
         style={combinedStyles}
     >
       {children}

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

@@ -1,4 +1,4 @@
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Gap"}) %>
 <br/>
 <div class="flex-doc-example">
   <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
@@ -31,3 +31,14 @@
    <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
+
+<br/><br/>
+<%= pb_rails("title", props: {size: 4, text: "Responsive"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: { xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }, wrap: true }) do %>
+   <% 40.times do |i| %>
+    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
+   <% end %>
+  <% end %>
+</div>

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexGap = (props) => {
   const count = () => {
@@ -13,6 +14,8 @@ const FlexGap = (props) => {
 
   return (
     <>
+      <Title size={4}>Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             gap="xxs"
@@ -27,8 +30,10 @@ const FlexGap = (props) => {
         </Flex>
       </div>
 
-      <br />
+      <br /><br />
 
+      <Title size={4}>Column Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             columnGap="lg"
@@ -48,6 +53,9 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+      <br /><br />
+
+      <Title size={4}>Row Gap</Title>
       <br />
       <div className="flex-doc-example">
         <Flex
@@ -69,6 +77,23 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+
+      <br /><br />
+      <Title size={4}>Responsive</Title>
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap={{ xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }}
+            wrap
+            {...props}
+        >
+          {count().map((v, key) => (
+            <FlexItem key={key}>
+              {v}
+            </FlexItem>
+            ))}
+        </Flex>
+      </div>
     </>
   )
 }

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

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `row_gap` | `column_gap` | **Type**: String | Hash | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `row_gap` and the `column_gap` props to the same size and creates equal space within a flex container.
+
+Setting the `row_gap` prop creates space between rows in a flex container.
+
+Setting the `column_gap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing a hash with device sizes and values. 

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

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `rowGap` | `columnGap` | **Type**: String | Object | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `rowGap` and the `columnGap` props to the same size and creates equal space within a flex container.
+
+Setting the `rowGap` prop creates space between rows in a flex container.
+
+Setting the `columnGap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing an object with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -24,17 +24,11 @@ module Playbook
                      default: "none",
                      deprecated: true
 
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xxs xs sm md lg xl none],
-                 default: "none"
+      prop :gap
 
-      prop :row_gap, type: Playbook::Props::Enum,
-                     values: %w[xxs xs sm md lg xl none],
-                     default: "none"
+      prop :row_gap
 
-      prop :column_gap, type: Playbook::Props::Enum,
-                        values: %w[xxs xs sm md lg xl none],
-                        default: "none"
+      prop :column_gap
 
       prop :reverse, type: Playbook::Props::Boolean,
                      default: false
@@ -67,20 +61,20 @@ module Playbook
                            gap_class,
                            row_gap_class,
                            column_gap_class,
-                           align_self_class)
+                           align_self_class, separator: " ")
       end
 
     private
 
       def orientation_class
-        "orientation_#{orientation}"
+        "pb_flex_kit_orientation_#{orientation}"
       end
 
       def horizontal_class
         if orientation == "row"
-          "justify_content_#{horizontal}"
+          "pb_flex_kit_justify_content_#{horizontal}"
         elsif align == "none"
-          "align_items_#{horizontal}"
+          "pb_flex_kit_align_items_#{horizontal}"
         end
       end
 
@@ -88,27 +82,27 @@ module Playbook
         if justify == "none"
           horizontal_class
         else
-          "justify_content_#{justify}"
+          "pb_flex_kit_justify_content_#{justify}"
         end
       end
 
       def inline_class
-        inline ? "inline" : nil
+        inline ? "pb_flex_kit_inline" : nil
       end
 
       def spacing_class
-        "spacing_#{spacing}"
+        spacing != "none" ? "pb_flex_kit_spacing_#{spacing}" : nil
       end
 
       def reverse_class
-        reverse ? "reverse" : nil
+        reverse ? "pb_flex_kit_reverse" : nil
       end
 
       def vertical_class
         if orientation == "row"
-          "align_items_#{vertical}"
+          "pb_flex_kit_align_items_#{vertical}"
         elsif justify == "none"
-          "justify_content_#{vertical}"
+          "pb_flex_kit_justify_content_#{vertical}"
         end
       end
 
@@ -116,7 +110,7 @@ module Playbook
         if align == "none"
           vertical_class
         else
-          "align_items_#{align}"
+          "pb_flex_kit_align_items_#{align}"
         end
       end
 
@@ -124,35 +118,35 @@ module Playbook
         if align_self == "none"
           nil
         else
-          "align_self_#{align_self}"
+          "pb_flex_kit_align_self_#{align_self}"
         end
       end
 
       def wrap_class
-        wrap ? "wrap" : nil
+        wrap ? "pb_flex_kit_wrap" : nil
       end
 
       def gap_class
-        if gap == "none"
+        if gap == "none" || gap.nil? || gap.is_a?(Hash)
           nil
         else
-          "gap_#{gap}"
+          "pb_flex_kit_gap_#{gap}"
         end
       end
 
       def row_gap_class
-        if row_gap == "none"
+        if row_gap == "none" || row_gap.nil? || row_gap.is_a?(Hash)
           nil
         else
-          "rowGap_#{row_gap}"
+          "pb_flex_kit_rowGap_#{row_gap}"
         end
       end
 
       def column_gap_class
-        if column_gap == "none"
+        if column_gap == "none" || column_gap.nil? || column_gap.is_a?(Hash)
           nil
         else
-          "columnGap_#{column_gap}"
+          "pb_flex_kit_columnGap_#{column_gap}"
         end
       end
     end

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -17,7 +17,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class, align_self_class, separator: " ")
       end
 
       def inline_styles
@@ -32,23 +32,23 @@ module Playbook
     private
 
       def align_self_class
-        align_self ? "align_self_#{align_self}" : ""
+        align_self ? "pb_flex_item_kit_align_self_#{align_self}" : nil
       end
 
       def display_flex_class
-        display_flex ? "display_flex" : nil
+        display_flex ? "pb_flex_item_kit_display_flex" : nil
       end
 
       def fixed_size_class
-        fixed_size.present? ? "fixed_size" : nil
+        fixed_size.present? ? "pb_flex_item_kit_fixed_size" : nil
       end
 
       def grow_class
-        grow ? "grow" : nil
+        grow ? "pb_flex_item_kit_grow" : nil
       end
 
       def shrink_class
-        shrink ? "shrink" : nil
+        shrink ? "pb_flex_item_kit_shrink" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -247,4 +247,4 @@
   &:has(> [class^="pb_select"]):has(> .pb_passphrase) [class^="pb_select"] {
       align-self: baseline;
   }
-}
+}