playbook_ui 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9713

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

@@ -14,129 +14,135 @@ $gapTypes: (
   gap: gap,
   columnGap: column-gap,
   rowGap: row-gap
-  );
+);
 
-[class^=pb_flex_kit] {
+// Base flex kit
+.pb_flex_kit {
   display: flex;
   flex-wrap: nowrap;
+}
 
-  // Inline
-  &[class*=_inline] {
-    display: inline-flex;
-  }
+// Inline variant
+.pb_flex_kit_inline {
+  display: inline-flex;
+}
 
-  // Wrap
-  &[class*=_wrap] {
-    flex-wrap: wrap;
-  }
+// Wrap variant
+.pb_flex_kit_wrap {
+  flex-wrap: wrap;
+}
 
-  // Orientation
-  &[class*=_orientation_row] {
-    flex-direction: row;
+// Orientation
+.pb_flex_kit_orientation_row {
+  flex-direction: row;
+}
 
-    &[class*=_reverse] {
-      flex-direction: row-reverse;
-    }
-  }
+.pb_flex_kit_orientation_column {
+  flex-direction: column;
+}
 
-  &[class*=_orientation_column] {
-    flex-direction: column;
+// Reverse (works with orientation)
+.pb_flex_kit_orientation_row.pb_flex_kit_reverse {
+  flex-direction: row-reverse;
+}
 
-    &[class*=_reverse] {
-      flex-direction: column-reverse;
-    }
-  }
+.pb_flex_kit_orientation_column.pb_flex_kit_reverse {
+  flex-direction: column-reverse;
+}
 
-  // Alignment: Justify Content
-  &[class*=justify_content_left],
-  &[class*=justify_content_top],
-  &[class*=justify_content_start] {
-    justify-content: flex-start;
-    &[class*=_reverse] {
-      justify-content: flex-end;
-    }
-  }
+// Justify Content
+.pb_flex_kit_justify_content_left,
+.pb_flex_kit_justify_content_top,
+.pb_flex_kit_justify_content_start {
+  justify-content: flex-start;
+}
 
-  &[class*=justify_content_right],
-  &[class*=justify_content_bottom],
-  &[class*=justify_content_end] {
-    justify-content: flex-end;
-     &[class*=_reverse] {
-      justify-content: flex-start;
-    }
-  }
+.pb_flex_kit_justify_content_right,
+.pb_flex_kit_justify_content_bottom,
+.pb_flex_kit_justify_content_end {
+  justify-content: flex-end;
+}
 
-  &[class*=justify_content_center] {
-    justify-content: center;
-  }
+.pb_flex_kit_justify_content_center {
+  justify-content: center;
+}
 
+// Justify Content with Reverse
+.pb_flex_kit_justify_content_left.pb_flex_kit_reverse,
+.pb_flex_kit_justify_content_top.pb_flex_kit_reverse,
+.pb_flex_kit_justify_content_start.pb_flex_kit_reverse {
+  justify-content: flex-end;
+}
 
-  // Alignment: Align Items
-  &[class*=align_items_left],
-  &[class*=align_items_top],
-  &[class*=align_items_start] {
-    align-items: flex-start;
-  }
+.pb_flex_kit_justify_content_right.pb_flex_kit_reverse,
+.pb_flex_kit_justify_content_bottom.pb_flex_kit_reverse,
+.pb_flex_kit_justify_content_end.pb_flex_kit_reverse {
+  justify-content: flex-start;
+}
 
-  &[class*=align_items_right],
-  &[class*=align_items_bottom],
-  &[class*=align_items_end] {
-    align-items: flex-end;
-  }
+// Align Items
+.pb_flex_kit_align_items_left,
+.pb_flex_kit_align_items_top,
+.pb_flex_kit_align_items_start {
+  align-items: flex-start;
+}
 
-  &[class*=align_items_center] {
-    align-items: center;
-  }
+.pb_flex_kit_align_items_right,
+.pb_flex_kit_align_items_bottom,
+.pb_flex_kit_align_items_end {
+  align-items: flex-end;
+}
 
-  &[class*=align_items_stretch] {
-    align-items: stretch;
-  }
+.pb_flex_kit_align_items_center {
+  align-items: center;
+}
 
-  &[class*=align_items_baseline] {
-    align-items: baseline;
-  }
+.pb_flex_kit_align_items_stretch {
+  align-items: stretch;
+}
 
-  // 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;
-  }
+.pb_flex_kit_align_items_baseline {
+  align-items: baseline;
+}
 
-  // Spacing
-  &[class*=spacing_around],
-  &[class*=justify_content_around] {
-    justify-content: space-around;
-  }
+// Align Self
+.pb_flex_kit_align_self_start {
+  align-self: flex-start;
+}
 
-  &[class*=spacing_between],
-  &[class*=justify_content_between] {
-    justify-content: space-between;
-  }
+.pb_flex_kit_align_self_end {
+  align-self: flex-end;
+}
 
-  &[class*=spacing_evenly],
-  &[class*=justify_content_evenly] {
-    justify-content: space-evenly;
-  }
+.pb_flex_kit_align_self_center {
+  align-self: center;
+}
 
-  //Gap
-  @each $gapType, $gapValue in $gapTypes{
-    @each $sizeName, $sizeValue in $gapSpaces {
-      &[class*=_#{$gapType}_#{$sizeName}]{
-        #{$gapValue}: $sizeValue;
-      }
-    }
-  }
+.pb_flex_kit_align_self_stretch {
+  align-self: stretch;
+}
 
+// Spacing
+.pb_flex_kit_spacing_around,
+.pb_flex_kit_justify_content_around {
+  justify-content: space-around;
+}
+
+.pb_flex_kit_spacing_between,
+.pb_flex_kit_justify_content_between {
+  justify-content: space-between;
+}
 
+.pb_flex_kit_spacing_evenly,
+.pb_flex_kit_justify_content_evenly {
+  justify-content: space-evenly;
 }
+
+// Gap utility classes
+@each $gapType, $gapValue in $gapTypes {
+  @each $sizeName, $sizeValue in $gapSpaces {
+    .pb_flex_kit_#{$gapType}_#{$sizeName} {
+      #{$gapValue}: $sizeValue;
+    }
+  }
+}

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

@@ -4,6 +4,9 @@ import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
+type SizeType = Sizes | "none"
+type SizeResponsiveType = { [key: string]: SizeType }
+
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
@@ -18,9 +21,9 @@ type FlexProps = {
   reverse?: boolean,
   vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
   align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
-  gap?: Sizes | "none",
-  rowGap?: Sizes| "none",
-  columnGap?: Sizes| "none",
+  gap?: SizeType | SizeResponsiveType,
+  rowGap?: SizeType | SizeResponsiveType,
+  columnGap?: SizeType | SizeResponsiveType,
   wrap?: boolean,
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
@@ -47,18 +50,24 @@ const Flex = (props: FlexProps): React.ReactElement => {
   } = props
 
   const orientationClass =
-    orientation !== undefined ? `orientation_${orientation}` : ''
+    orientation !== undefined ? `pb_flex_kit_orientation_${orientation}` : ''
   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' : ''
-  const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
+    justify !== 'none' ? `pb_flex_kit_justify_content_${justify}` : `pb_flex_kit_justify_content_${horizontal}`
+  const alignClass = align !== 'none' ? `pb_flex_kit_align_items_${align}` : `pb_flex_kit_align_items_${vertical}`
+  const inlineClass = inline === true ? 'pb_flex_kit_inline' : ''
+  const spacingClass = spacing !== undefined ? `pb_flex_kit_spacing_${spacing}` : ''
+  const gapClass = gap !== 'none' && typeof gap === 'string' ? `pb_flex_kit_gap_${gap}` : ''
+  const rowGapClass = rowGap !== 'none' && typeof rowGap === 'string' ? `pb_flex_kit_rowGap_${rowGap}` : ''
+  const columnGapClass = columnGap !== 'none' && typeof columnGap === 'string' ? `pb_flex_kit_columnGap_${columnGap}` : ''
+  
+  // Responsive gap classes
+  const responsiveGapClass = (gap !== 'none' && typeof gap === 'object' && gap !== null && !Array.isArray(gap)) ? 'pb_flex_kit_gap_responsive' : ''
+  const responsiveRowGapClass = (rowGap !== 'none' && typeof rowGap === 'object' && rowGap !== null && !Array.isArray(rowGap)) ? 'pb_flex_kit_rowGap_responsive' : ''
+  const responsiveColumnGapClass = (columnGap !== 'none' && typeof columnGap === 'object' && columnGap !== null && !Array.isArray(columnGap)) ? 'pb_flex_kit_columnGap_responsive' : ''
+  
+  const wrapClass = wrap === true ? 'pb_flex_kit_wrap' : ''
+  const reverseClass = reverse === true ? 'pb_flex_kit_reverse' : ''
+  const alignSelfClass = alignSelf !== 'none' ? `pb_flex_kit_align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dynamicInlineProps = globalInlineProps(props)
@@ -67,20 +76,21 @@ const Flex = (props: FlexProps): React.ReactElement => {
   return (
     <div
         className={classnames(
-        buildCss(
-          'pb_flex_kit',
-          orientationClass,
-          justifyClass,
-          alignClass,
-          inlineClass,
-          reverseClass,
-          wrapClass,
-          spacingClass,
-          gapClass,
-          rowGapClass,
-          columnGapClass,
-          alignSelfClass
-        ),
+        'pb_flex_kit',
+        orientationClass,
+        justifyClass,
+        alignClass,
+        inlineClass,
+        reverseClass,
+        wrapClass,
+        spacingClass,
+        gapClass,
+        rowGapClass,
+        columnGapClass,
+        responsiveGapClass,
+        responsiveRowGapClass,
+        responsiveColumnGapClass,
+        alignSelfClass,
         globalProps(props),
         className
       )}

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?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
+  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.