playbook_ui 10.21.0.pre.alpha.na1 → 10.21.0.pre.alpha.rg1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c91379a8ff1fbd4421f2d351cfd11cd08cf5dac3b00d275e2b8312b64ab983a9
-  data.tar.gz: 80f1bcd2b434b6213116668028aadbce11ef28b54d5ab758aea3d87c00eee109
+  metadata.gz: 0a6ea164e06111d003426c3549cb4173cdb07a1161f61552c1bdf8b08b217656
+  data.tar.gz: a4c26076cbc2d2710d481dd8a29b574a8eb1abbe3e411bee6010ff2049a1d313
 SHA512:
-  metadata.gz: 10bd2dc160d0cc7ad0cfc921b20b0429611bb628b6203cfa75528bfa32c4a3bf2a57506f4922dbb8fdfc2e75df4e0698759d21312a9a78dac41b3c044a5eea6e
-  data.tar.gz: c372e8a2490809b8345cb99230a49cb3c2420bdeec256a05cad5d10688a16ca447b44cbc582ab5cebd1af8517f7a3fc0ed63fdc7f22c54316461930baff3161f
+  metadata.gz: 38c5657dd72a901913c9e537d435481ee0c43c48eed6380430e75fd74b5a6486d178de64a47f5ac2e9bff572b553e22eea7657b0dbd71f5494ad0afaf779c261
+  data.tar.gz: 5d348958c7c6fbc22cdd8e04a0e11c0d55725182e36d5e1e4a478abd50550a7e910e26c56524ab08c43e31dd6d412abfc0a4965fc7894cd90e9ff882724cda26

data/app/pb_kits/playbook/_playbook.scss

@@ -100,3 +100,14 @@
 @import './utilities/shadow';
 @import './utilities/line_height';
 @import './utilities/display';
+@import './utilities/flex_direction';
+@import './utilities/justify_content';
+@import './utilities/flex_wrap';
+@import './utilities/justify_self';
+@import './utilities/align_items';
+@import './utilities/align_content';
+@import './utilities/align_self';
+@import './utilities/flex';
+@import './utilities/flex_grow';
+@import './utilities/flex_shrink';
+@import './utilities/order';

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -44,7 +44,7 @@ const Avatar = (props: AvatarProps) => {
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_avatar_kit', `size_${size}`),
+    buildCss('pb_avatar_kit', size),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -16,8 +16,8 @@ $avatar-sizes: (
   position: relative;
 
   @each $name, $size in $avatar-sizes {
-    &[class*=_size_#{$name}],
-    &[class*=_size_#{$name}_thumb] {
+    &[class*=_#{$name}],
+    &[class*=_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -18,7 +18,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_avatar_kit", "size_#{size}")
+        generate_classname("pb_avatar_kit", size)
       end
 
       def online_status_props

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -22,7 +22,7 @@ test('loads the given image url and name', () => {
   const image    = screen.getByAltText(imageAlt)
   const initials = name.split(/\s/)[0].substr(0, 1) + name.split(/\s/)[1].substr(0, 1)
 
-  expect(kit).toHaveClass('pb_avatar_kit_size_md')
+  expect(kit).toHaveClass('pb_avatar_kit_md')
   expect(kit).toHaveAttribute('data-initials', initials)
   expect(image).toHaveAttribute('data-src', imageUrl)
   expect(image).toHaveAttribute('src', imageUrl)

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-  <%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
+  <%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
     <%= content %>
   <% end if content.present? %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.rb

@@ -36,6 +36,94 @@ module Playbook
         end
       end
 
+      def body_flex_direction
+        if flex_direction.present?
+          "flex_direction_#{flex_direction}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_wrap
+        if flex_wrap.present?
+          "flex_wrap_#{flex_wrap}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_content
+        if justify_content.present?
+          "justify_content_#{justify_content}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_self
+        if justify_self.present?
+          "justify_self_#{justify_self}"
+        else
+          ""
+        end
+      end
+
+      def body_align_items
+        if align_items.present?
+          "align_items_#{align_items}"
+        else
+          ""
+        end
+      end
+
+      def body_align_content
+        if align_content.present?
+          "align_content_#{align_content}"
+        else
+          ""
+        end
+      end
+
+      def body_align_self
+        if align_self.present?
+          "align_self_#{align_self}"
+        else
+          ""
+        end
+      end
+
+      def body_flex
+        if flex.present?
+          "flex_#{flex}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_grow
+        if flex_grow.present?
+          "flex_grow_#{flex_grow}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_shrink
+        if flex_shrink.present?
+          "flex_shrink_#{flex_shrink}"
+        else
+          ""
+        end
+      end
+
+      def body_order
+        if order.present?
+          "order_#{order}"
+        else
+          ""
+        end
+      end
+
     private
 
       def selected_class

data/app/pb_kits/playbook/pb_card/card_body.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbCard
     class CardBody < Playbook::KitBase
       def classname
-        generate_classname("pb_card_body_kit", padding, separator: " ")
+        generate_classname("pb_card_body_kit", padding, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
       end
     end
   end

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

@@ -7,7 +7,7 @@ const FlexAlign = (props) => {
 
       <Title
           size={4}
-          text="Row"
+          text="row"
           {...props}
       />
       <br />

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

@@ -8,17 +8,11 @@ module Playbook
                   default: false
       prop :shrink, type: Playbook::Props::Boolean,
                     default: false
-      prop :flex, type: Playbook::Props::Enum,
-                  values: %w[0 1 2 3 4 5 6 7 8 9 10 11 12 none],
-                  default: "none"
+
       prop :overflow, type: Playbook::Props::Enum,
                       values: %w[auto hidden inherit initial scroll visible] + [nil],
                       default: nil
 
-      prop :order, type: Playbook::Props::Enum,
-                   values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
-                   default: "none"
-
       prop :align_self, type: Playbook::Props::Enum,
                         values: %w[start center end stretch] + [nil],
                         default: nil
@@ -27,7 +21,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class, display_flex_class) + overflow_class + order_class + align_self_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + overflow_class + align_self_class
       end
 
       def style_value
@@ -59,22 +53,6 @@ module Playbook
       def shrink_class
         shrink ? "shrink" : nil
       end
-
-      def flex_class
-        if flex == "none"
-          nil
-        else
-          "flex_#{flex}"
-        end
-      end
-
-      def order_class
-        if order == "none"
-          ""
-        else
-          "order_#{order}"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -150,16 +150,14 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null
 
-      if (targetIsReference) return
-
       switch (closeOnClick) {
       case 'outside':
-        if (!targetIsPopover) {
+        if (!targetIsPopover || targetIsReference) {
           shouldClosePopover(true)
         }
         break
       case 'inside':
-        if (targetIsPopover) {
+        if (targetIsPopover || targetIsReference) {
           shouldClosePopover(true)
         }
         break

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb

@@ -1,23 +1,23 @@
 <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
   <span>
-    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: 'inside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "inside",
       trigger_element_id: "inside-popover-1",
       tooltip_id: "inside-tooltip-1",
-      position: 'bottom',
+      position: "bottom",
       offset: true
     }) do %>
       Click on me!
     <% end %>
   </span>
   <span>
-    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: 'outside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "outside",
       trigger_element_id: "outside-popover-1",
       tooltip_id: "outside-tooltip-1",
-      position: 'left',
+      position: "left",
       offset: true
     }) do %>
         Click anywhere but me!
@@ -27,16 +27,16 @@
     <%= pb_rails("button", props: {
       text: "Click Anywhere",
       variant: "secondary",
-      id: 'any-popover-1'
+      id: "any-popover-1"
     }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "any",
       trigger_element_id: "any-popover-1",
       tooltip_id: "any-tooltip-1",
-      position: 'top',
+      position: "top",
       offset: true
     }) do %>
       Click anything!
     <% end %>
   </span>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/index.js

@@ -36,15 +36,14 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.popper.update()
         this.toggleTooltip()
+        this.popper.update()
       }, 0)
     })
   }
 
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target }) => {
-      const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
       const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
@@ -52,21 +51,17 @@ export default class PbPopover extends PbEnhancedElement {
         this.hideTooltip()
         break
       case 'outside':
-        if (isTooltipElement) {
-          this.checkCloseTooltip()
-        } else {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break
       case 'inside':
-        if (isTooltipElement || isTriggerElement) {
+        if (isTooltipElement) {
           this.hideTooltip()
-        } else {
-          this.checkCloseTooltip()
         }
         break
       }
-    }, { once: true })
+    }, true)
   }
 
   hideTooltip() {

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -3,7 +3,7 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>
     </div>

data/app/pb_kits/playbook/utilities/_align_content.scss

@@ -0,0 +1,29 @@
+.align_content_start {
+  display: flex;
+  align-content: start;
+}
+
+.align_content_end {
+  display: flex;
+  align-content: end;
+}
+
+.align_content_center {
+  display: flex;
+  align-content: center;
+}
+
+.align_content_space_between {
+  display: flex;
+  align-content: space-between;
+}
+
+.align_content_space_around {
+  display: flex;
+  align-content: space-around;
+}
+
+.align_content_space_evenly {
+  display: flex;
+  align-content: space-evenly;
+}

data/app/pb_kits/playbook/utilities/_align_items.scss

@@ -0,0 +1,24 @@
+.align_items_start {
+  display: flex;
+  align-items: flex-start;
+}
+
+.align_items_end {
+  display: flex;
+  align-items: flex-end;
+}
+
+.align_items_center {
+  display: flex;
+  align-items: center;
+}
+
+.align_items_baseline {
+  display: flex;
+  align-items: baseline;
+}
+
+.align_items_stretch {
+  display: flex;
+  align-items: stretch;
+}

data/app/pb_kits/playbook/utilities/_align_self.scss

@@ -0,0 +1,29 @@
+.align_self_start {
+  display: flex;
+  align-self: start;
+}
+
+.align_self_end {
+  display: flex;
+  align-self: end;
+}
+
+.align_self_auto {
+  display: flex;
+  align-self: auto;
+}
+
+.align_self_center {
+  display: flex;
+  align-self: center;
+}
+
+.align_self_stretch {
+  display: flex;
+  align-self: stretch;
+}
+
+.align_self_baseline {
+  display: flex;
+  align-self: baseline;
+}

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

@@ -0,0 +1,15 @@
+.flex_auto {
+  flex: auto;
+}
+
+.flex_initial {
+  flex: initial;
+}
+
+.flex_none {
+  flex: none;
+}
+
+.flex_1 {
+  flex: 1;
+}

data/app/pb_kits/playbook/utilities/_flex_direction.scss

@@ -0,0 +1,19 @@
+.flex_direction_row {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex_direction_column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex_direction_row_reverse {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.flex_direction_column_reverse {
+  display: flex;
+  flex-direction: column-reverse;
+}

data/app/pb_kits/playbook/utilities/_flex_grow.scss

@@ -0,0 +1,9 @@
+.flex_grow_1 {
+  display: flex;
+  flex-grow: 1;
+}
+
+.flex_grow_0 {
+  display: flex;
+  flex-grow: 0;
+}

data/app/pb_kits/playbook/utilities/_flex_shrink.scss

@@ -0,0 +1,9 @@
+.flex_shrink_1 {
+  display: flex;
+  flex-shrink: 1;
+}
+
+.flex_shrink_0 {
+  display: flex;
+  flex-shrink: 0;
+}

data/app/pb_kits/playbook/utilities/_flex_wrap.scss

@@ -0,0 +1,14 @@
+.flex_wrap_wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex_wrap_nowrap {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.flex_wrap_wrap_reverse {
+  display: flex;
+  flex-wrap: wrap-reverse;
+}

data/app/pb_kits/playbook/utilities/_justify_content.scss

@@ -0,0 +1,23 @@
+.justify_content_start {
+  justify-content: start;
+}
+
+.justify_content_end {
+  justify-content: end;
+}
+
+.justify_content_center {
+  justify-content: center;
+}
+
+.justify_content_space_between {
+  justify-content: space-between;
+}
+
+.justify_content_space_around {
+  justify-content: space-around;
+}
+
+.justify_content_space_evenly {
+  justify-content: space-evenly;
+}

data/app/pb_kits/playbook/utilities/_justify_self.scss

@@ -0,0 +1,19 @@
+.justify_self_auto {
+  justify-self: auto;
+}
+
+.justify_self_start {
+  justify-self: start;
+}
+
+.justify_self_end {
+  justify-self: end;
+}
+
+.justify_self_center {
+  justify-self: center;
+}
+
+.justify_self_stretch {
+  justify-self: stretch;
+}

data/app/pb_kits/playbook/utilities/_order.scss

@@ -0,0 +1,55 @@
+.order_1 {
+  order: 1;
+}
+
+.order_2 {
+  order: 2;
+}
+
+.order_3 {
+  order: 3;
+}
+
+.order_4 {
+  order: 4;
+}
+
+.order_5 {
+  order: 5;
+}
+
+.order_6 {
+  order: 6;
+}
+
+.order_7 {
+  order: 7;
+}
+
+.order_8 {
+  order: 8;
+}
+
+.order_9 {
+  order: 9;
+}
+
+.order_10 {
+  order: 10;
+}
+
+.order_11 {
+  order: 11;
+}
+
+.order_12 {
+  order: 12;
+}
+
+.order_none {
+  order: none;
+}
+
+.order_first {
+  order: -1;
+}

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -47,13 +47,13 @@ const numberSpacingProps = ({ numberSpacing }) => {
 
 const maxWidthProps = ({ maxWidth }) => {
   let css = ''
-  css += maxWidth ? `max_width_${maxWidth } ` : ''
+  css += maxWidth ? `max_width_${maxWidth} ` : ''
   return css
 }
 
 const zIndexProps = ({ zIndex }) => {
   let css = ''
-  css += zIndex ? `z_index_${zIndex } ` : ''
+  css += zIndex ? `z_index_${zIndex} ` : ''
   return css
 }
 
@@ -81,10 +81,88 @@ const cursorProps = ({ cursor }) => {
   return css
 }
 
+const flexDirectionProps = ({ flexDirection }) => {
+  let css = ''
+  css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
+    flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
+      flexDirection ? `flex_direction_${flexDirection} ` : ''
+  return css
+}
+
+const flexWrapProps = ({ flexWrap }) => {
+  let css = ''
+  css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
+    flexWrap == 'noWrap' ? 'flex_nowrap' :
+      flexWrap ? `flex_wrap_${flexWrap} ` : ''
+  return css
+}
+
+const justifyContentProps = ({ justifyContent }) => {
+  let css = ''
+  css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
+    justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
+      justifyContent == 'spaceAround' ? 'justify_content_space_around' :
+        justifyContent ? `justify_content_${justifyContent}` : ''
+  return css
+}
+
+const justifySelfProps = ({ justifySelf }) => {
+  let css = ''
+  css += justifySelf ? `justify_self_${justifySelf}` : ''
+  return css
+}
+
+const alignItemsProps = ({ alignItems }) => {
+  let css = ''
+  css += alignItems == 'flexStart' ? 'align_items_flex_start' :
+    alignItems == 'flexEnd' ? 'align_items_flex_end' :
+      alignItems ? `align_items_${alignItems}` : ''
+  return css
+}
+
+const alignContentProps = ({ alignContent }) => {
+  let css = ''
+  css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
+    alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
+      alignContent == 'spaceAround' ? 'align_content_space_around' :
+        alignContent ? `align_content_${alignContent}` : ''
+  return css
+}
+
+const alignSelfProps = ({ alignSelf }) => {
+  let css = ''
+  css += alignSelf ? `align_self_${alignSelf}` : ''
+  return css
+}
+
+const flexProps = ({ flex }) => {
+  let css = ''
+  css += flex ? `flex_${flex}` : ''
+  return css
+}
+
+const flexGrowProps = ({ flexGrow }) => {
+  let css = ''
+  css += flexGrow ? `flex_grow_${flexGrow}` : ''
+  return css
+}
+
+const flexShrinkProps = ({ flexShrink }) => {
+  let css = ''
+  css += flexShrink ? `flex_shrink_${flexShrink}` : ''
+  return css
+}
+
+const orderProps = ({ order }) => {
+  let css = ''
+  css += order ? `order_${order}` : ''
+  return css
+}
+
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps) + flexDirectionProps(allProps) + flexWrapProps(allProps) + justifyContentProps(allProps) + justifySelfProps(allProps) + alignItemsProps(allProps) + alignContentProps(allProps) + alignSelfProps(allProps) + flexProps(allProps) + flexGrowProps(allProps) + flexShrinkProps(allProps) + orderProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {

data/lib/playbook/align_content.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignContent
+    def self.included(base)
+      base.prop :align_content
+    end
+
+    def align_content_props
+      selected_props = align_content_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_content_value = send(k)
+        "align_content_#{align_content_value}" if align_content_values.include? align_content_value
+      end.compact.join(" ")
+    end
+
+    def align_content_options
+      {
+        align_content: "align_content",
+      }
+    end
+
+    def align_content_values
+      %w[start end center space_between space_around space_evenly]
+    end
+  end
+end

data/lib/playbook/align_items.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignItems
+    def self.included(base)
+      base.prop :align_items
+    end
+
+    def align_items_props
+      selected_props = align_items_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_items_value = send(k)
+        "align_items_#{align_items_value}" if align_items_values.include? align_items_value
+      end.compact.join(" ")
+    end
+
+    def align_items_options
+      {
+        align_items: "align_items",
+      }
+    end
+
+    def align_items_values
+      %w[start end center baseline stretch]
+    end
+  end
+end

data/lib/playbook/align_self.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignSelf
+    def self.included(base)
+      base.prop :align_self
+    end
+
+    def align_self_props
+      selected_props = align_self_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_self_value = send(k)
+        "align_self_#{align_self_value}" if align_self_values.include? align_self_value
+      end.compact.join(" ")
+    end
+
+    def align_self_options
+      {
+        align_self: "align_self",
+      }
+    end
+
+    def align_self_values
+      %w[auto start end center stretch baseline]
+    end
+  end
+end

data/lib/playbook/classnames.rb

@@ -20,6 +20,17 @@ module Playbook
         line_height_props,
         display_props,
         cursor_props,
+        flex_direction_props,
+        flex_wrap_props,
+        justify_content_props,
+        justify_self_props,
+        align_items_props,
+        align_content_props,
+        align_self_props,
+        flex_props,
+        flex_grow_props,
+        flex_shrink_props,
+        order_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/flex.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Flex
+    def self.included(base)
+      base.prop :flex
+    end
+
+    def flex_props
+      selected_props = flex_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_value = send(k)
+        "flex_#{flex_value}" if flex_values.include? flex_value
+      end.compact.join(" ")
+    end
+
+    def flex_options
+      {
+        flex: "flex",
+      }
+    end
+
+    def flex_values
+      %w[auto initial 0 1 2 3 4 5 6 7 8 9 10 11 12 none]
+    end
+  end
+end

data/lib/playbook/flex_direction.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexDirection
+    def self.included(base)
+      base.prop :flex_direction
+    end
+
+    def flex_direction_props
+      selected_props = flex_direction_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_direction_value = send(k)
+        "flex_direction_#{flex_direction_value}" if flex_direction_values.include? flex_direction_value
+      end.compact.join(" ")
+    end
+
+    def flex_direction_options
+      {
+        flex_direction: "flex_direction",
+      }
+    end
+
+    def flex_direction_values
+      %w[row column row_reverse column_reverse]
+    end
+  end
+end

data/lib/playbook/flex_grow.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexGrow
+    def self.included(base)
+      base.prop :flex_grow
+    end
+
+    def flex_grow_props
+      selected_props = flex_grow_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_grow_value = send(k)
+        "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value
+      end.compact.join(" ")
+    end
+
+    def flex_grow_options
+      {
+        flex_grow: "flex_grow",
+      }
+    end
+
+    def flex_grow_values
+      %w[1 0]
+    end
+  end
+end

data/lib/playbook/flex_shrink.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexShrink
+    def self.included(base)
+      base.prop :flex_shrink
+    end
+
+    def flex_shrink_props
+      selected_props = flex_shrink_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_shrink_value = send(k)
+        "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value
+      end.compact.join(" ")
+    end
+
+    def flex_shrink_options
+      {
+        flex_shrink: "flex_shrink",
+      }
+    end
+
+    def flex_shrink_values
+      %w[1 0]
+    end
+  end
+end

data/lib/playbook/flex_wrap.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexWrap
+    def self.included(base)
+      base.prop :flex_wrap
+    end
+
+    def flex_wrap_props
+      selected_props = flex_wrap_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_wrap_value = send(k)
+        "flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
+      end.compact.join(" ")
+    end
+
+    def flex_wrap_options
+      {
+        flex_wrap: "flex_wrap",
+      }
+    end
+
+    def flex_wrap_values
+      %w[wrap nowrap wrap_reverse]
+    end
+  end
+end

data/lib/playbook/justify_content.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module JustifyContent
+    def self.included(base)
+      base.prop :justify_content
+    end
+
+    def justify_content_props
+      selected_props = justify_content_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        justify_content_value = send(k)
+        "justify_content_#{justify_content_value}" if justify_content_values.include? justify_content_value
+      end.compact.join(" ")
+    end
+
+    def justify_content_options
+      {
+        justify_content: "justify_content",
+      }
+    end
+
+    def justify_content_values
+      %w[start end center space_between space_around space_evenly]
+    end
+  end
+end

data/lib/playbook/justify_self.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module JustifySelf
+    def self.included(base)
+      base.prop :justify_self
+    end
+
+    def justify_self_props
+      selected_props = justify_self_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        justify_self_value = send(k)
+        "justify_self_#{justify_self_value}" if justify_self_values.include? justify_self_value
+      end.compact.join(" ")
+    end
+
+    def justify_self_options
+      {
+        justify_self: "justify_self",
+      }
+    end
+
+    def justify_self_values
+      %w[auto start end center stretch]
+    end
+  end
+end

data/lib/playbook/kit_base.rb

@@ -8,6 +8,17 @@ require "playbook/shadow"
 require "playbook/line_height"
 require "playbook/display"
 require "playbook/cursor"
+require "playbook/flex_direction"
+require "playbook/flex_wrap"
+require "playbook/justify_content"
+require "playbook/justify_self"
+require "playbook/align_items"
+require "playbook/align_content"
+require "playbook/align_self"
+require "playbook/flex"
+require "playbook/flex_grow"
+require "playbook/flex_shrink"
+require "playbook/order"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -21,6 +32,17 @@ module Playbook
     include Playbook::LineHeight
     include Playbook::Display
     include Playbook::Cursor
+    include Playbook::FlexDirection
+    include Playbook::FlexWrap
+    include Playbook::JustifyContent
+    include Playbook::JustifySelf
+    include Playbook::AlignItems
+    include Playbook::AlignContent
+    include Playbook::AlignSelf
+    include Playbook::Flex
+    include Playbook::FlexGrow
+    include Playbook::FlexShrink
+    include Playbook::Order
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/order.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Order
+    def self.included(base)
+      base.prop :order
+    end
+
+    def order_props
+      selected_props = order_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        order_value = send(k)
+        "order_#{order_value}" if order_values.include? order_value
+      end.compact.join(" ")
+    end
+
+    def order_options
+      {
+        order: "order",
+      }
+    end
+
+    def order_values
+      %w[1 2 3 4 5 6 7 8 9 10 11 12 first none]
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.20.0"
-  VERSION = "10.21.0.pre.alpha.na1"
+  VERSION = "10.21.0.pre.alpha.rg1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.21.0.pre.alpha.na1
+  version: 10.21.0.pre.alpha.rg1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-02-02 00:00:00.000000000 Z
+date: 2022-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2054,13 +2054,24 @@ files:
 - app/pb_kits/playbook/tokens/exports/_typography.scss
 - app/pb_kits/playbook/tokens/index.scss
 - app/pb_kits/playbook/types.js
+- app/pb_kits/playbook/utilities/_align_content.scss
+- app/pb_kits/playbook/utilities/_align_items.scss
+- app/pb_kits/playbook/utilities/_align_self.scss
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
 - app/pb_kits/playbook/utilities/_cursor.scss
 - app/pb_kits/playbook/utilities/_display.scss
+- app/pb_kits/playbook/utilities/_flex.scss
+- app/pb_kits/playbook/utilities/_flex_direction.scss
+- app/pb_kits/playbook/utilities/_flex_grow.scss
+- app/pb_kits/playbook/utilities/_flex_shrink.scss
+- app/pb_kits/playbook/utilities/_flex_wrap.scss
+- app/pb_kits/playbook/utilities/_justify_content.scss
+- app/pb_kits/playbook/utilities/_justify_self.scss
 - app/pb_kits/playbook/utilities/_line_height.scss
 - app/pb_kits/playbook/utilities/_max_width.scss
 - app/pb_kits/playbook/utilities/_number_spacing.scss
+- app/pb_kits/playbook/utilities/_order.scss
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_shadow.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
@@ -2072,10 +2083,18 @@ files:
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
 - lib/playbook.rb
+- lib/playbook/align_content.rb
+- lib/playbook/align_items.rb
+- lib/playbook/align_self.rb
 - lib/playbook/classnames.rb
 - lib/playbook/cursor.rb
 - lib/playbook/display.rb
 - lib/playbook/engine.rb
+- lib/playbook/flex.rb
+- lib/playbook/flex_direction.rb
+- lib/playbook/flex_grow.rb
+- lib/playbook/flex_shrink.rb
+- lib/playbook/flex_wrap.rb
 - lib/playbook/forms.rb
 - lib/playbook/forms/builder.rb
 - lib/playbook/forms/builder/action_area.rb
@@ -2085,6 +2104,8 @@ files:
 - lib/playbook/forms/builder/form_field_builder.rb
 - lib/playbook/forms/builder/select_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
+- lib/playbook/justify_content.rb
+- lib/playbook/justify_self.rb
 - lib/playbook/kit_base.rb
 - lib/playbook/kit_resolver.rb
 - lib/playbook/line_height.rb
@@ -2092,6 +2113,7 @@ files:
 - lib/playbook/markdown/helper.rb
 - lib/playbook/markdown/template_handler.rb
 - lib/playbook/number_spacing.rb
+- lib/playbook/order.rb
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb