playbook_ui 14.25.0.pre.alpha.testingcss10239 → 14.25.0.pre.rc.0

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

@@ -1,147 +1,52 @@
-// Fixed size
-.pb_flex_item_kit_fixed_size {
-  flex-grow: 0;
-  flex-shrink: 0;
+[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;
+    }
+  }
 }
-
-// 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,8 +9,7 @@ type FlexItemPropTypes = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
   shrink?: boolean,
   className?: string,
-  flex?: string | number,
-  order?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
+  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
   alignSelf?: "start" | "end" | "center" | "stretch" | null,
   displayFlex?: boolean
 } & GlobalProps
@@ -28,14 +27,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     alignSelf,
     displayFlex
   } = props
-  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 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 fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
-  const orderClass = order !== 'none' ? `pb_flex_item_kit_order_${order}` : ''
+  const orderClass = order !== 'none' ? `order_${order}` : null
   const dynamicInlineProps = globalInlineProps(props)
   const combinedStyles = {
     ...fixedStyle,
@@ -48,17 +47,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   return (
     <div
         {...htmlProps}
-        className={classnames(
-          'pb_flex_item_kit',
-          growClass,
-          shrinkClass,
-          flexClass,
-          displayFlexClass,
-          orderClass,
-          alignSelfClass,
-          globalProps(props),
-          className
-        )}
+        className={classnames(buildCss('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: "Gap"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
 <br/>
 <div class="flex-doc-example">
   <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
@@ -31,14 +31,3 @@
    <%= 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,7 +1,6 @@
 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 = () => {
@@ -14,8 +13,6 @@ const FlexGap = (props) => {
 
   return (
     <>
-      <Title size={4}>Gap</Title>
-      <br />
       <div className="flex-doc-example">
         <Flex
             gap="xxs"
@@ -30,10 +27,8 @@ const FlexGap = (props) => {
         </Flex>
       </div>
 
-      <br /><br />
-
-      <Title size={4}>Column Gap</Title>
       <br />
+
       <div className="flex-doc-example">
         <Flex
             columnGap="lg"
@@ -53,9 +48,6 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
-      <br /><br />
-
-      <Title size={4}>Row Gap</Title>
       <br />
       <div className="flex-doc-example">
         <Flex
@@ -77,23 +69,6 @@ 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.md

@@ -0,0 +1,9 @@
+##### Prop
+
+*  `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xxs | xs | sm | md | lg | xl | none
+
+- Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
+
+- Setting the row_gap || rowGap prop creates space between rows in a flex container.
+
+- Setting the column_gap || columnGap prop creates space between columns in a flex container.

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

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