playbook_ui 13.20.0 → 13.21.0.pre.alpha.pbntr220improveexpansionspeed2431

data/app/pb_kits/playbook/pb_table/table_body.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableBody < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
+
+      def classname
+        generate_classname("pb_table_tbody")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_table/table_cell.html.erb

@@ -0,0 +1,17 @@
+<% if object.tag == "table" %>
+    <%= content_tag(:td,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence || object.text %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence || object.text %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_cell.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableCell < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
+      prop :text, type: Playbook::Props::String,
+                  default: ""
+
+      def classname
+        generate_classname("pb_table_td")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_table/table_head.html.erb

@@ -0,0 +1,17 @@
+<% if object.tag == "table" %>
+    <%= content_tag(:thead,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_head.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableHead < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
+
+      def classname
+        generate_classname("pb_table_thead")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -1,47 +1,57 @@
-<%= content_tag(:th,
-    colspan: object.colspan,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: "pb-th#{object.id}" ) do %>
-  <% unless sorting_style? %>
-    <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
-      <%= content.presence || object.text %>
-    <% end %>
-  <% else %>
-    <%= link_to next_link, style: link_style do %>
-      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
+<% if object.tag == "table" %>  
+  <%= content_tag(:th,
+      colspan: object.colspan,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: "pb-th#{object.id}" ) do %>
+    <% unless sorting_style? %>
+      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
         <%= content.presence || object.text %>
-          <% if sorting_style? %>
-            <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
-                                          fixed_width: true,
-                                          classname: active_item.any? ? "pb_th_active" : "",
-                                          padding_left: "xs" }) %>
+      <% end %>
+    <% else %>
+      <%= link_to next_link, style: link_style do %>
+        <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
+          <%= content.presence || object.text %>
+            <% if sorting_style? %>
+              <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
+                                            fixed_width: true,
+                                            classname: active_item.any? ? "pb_th_active" : "",
+                                            padding_left: "xs" }) %>
+          <% end %>
         <% end %>
       <% end %>
-    <% end %>
-    <% if use_dropdown_select %>
-      <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
-                                      close_on_click: "outside",
-                                      trigger_element_id: "pb-th#{object.id}",
-                                      tooltip_id: "sort-filter-btn-tooltip#{object.id}",
-                                      position: object.placement ,
-                                      padding: 'none'}) do %>
-        <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_items.each do |sort_item| %>
-            <% item = active_or_first_item(sort_items_for(sort_item)) %>
-            <%= pb_rails("nav/item", props: {
-              text: item[:item],
-              link: next_link(sort_item: sort_item),
-              highlighted_border: false,
-              padding: "xs",
-              icon_right: sort_icon(item[:direction], item[:active]),
-              active: item[:active],
-              classname: "header_nav_item"
-            }) %>
+      <% if use_dropdown_select %>
+        <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
+                                        close_on_click: "outside",
+                                        trigger_element_id: "pb-th#{object.id}",
+                                        tooltip_id: "sort-filter-btn-tooltip#{object.id}",
+                                        position: object.placement ,
+                                        padding: 'none'}) do %>
+          <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
+            <% object.sort_items.each do |sort_item| %>
+              <% item = active_or_first_item(sort_items_for(sort_item)) %>
+              <%= pb_rails("nav/item", props: {
+                text: item[:item],
+                link: next_link(sort_item: sort_item),
+                highlighted_border: false,
+                padding: "xs",
+                icon_right: sort_icon(item[:direction], item[:active]),
+                active: item[:active],
+                classname: "header_nav_item"
+              }) %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>
     <% end %>
   <% end %>
-<% end %>
+<% else %>
+  <%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+      <%= content.presence || object.text %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -23,9 +23,16 @@ module Playbook
                   default: ""
       prop :sort_dropdown, type: Playbook::Props::Boolean,
                            default: false
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
 
       def classname
-        generate_classname("pb_table_header_kit", align_class)
+        generate_classname("pb_table_header_kit", align_class) + tag_class
+      end
+
+      def tag_class
+        " pb_table_th"
       end
 
       def align_class

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -1,7 +1,17 @@
-<%= content_tag(:tr,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <%= content.presence %>
-<% end %>
+<% if object.tag == "table" %>
+    <%= content_tag(:tr,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_row.rb

@@ -5,14 +5,21 @@ module Playbook
     class TableRow < Playbook::KitBase
       prop :side_highlight_color, type: Playbook::Props::String,
                                   default: "none"
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
 
       def classname
-        generate_classname("pb_table_row_kit", side_highlight_class)
+        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
       end
 
       def side_highlight_class
         side_highlight_color.present? ? "side_highlight_#{side_highlight_color}" : nil
       end
+
+      def tag_class
+        " pb_table_tr"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -27,7 +27,7 @@ type TextInputProps = {
   required?: boolean,
   type: string,
   value: string | number,
-  children: Node,
+  children: React.ReactElement,
   addOn?: {
     icon?: string,
     alignment?: "right" | "left",
@@ -85,8 +85,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         icon={icon}
     />
   )
+
+  const childInput = children ? children.type === "input" : undefined
+
   const textInput = (
-    <input
+    childInput ? React.cloneElement(children, { className: "text_input" }) :
+    (<input
         {...domSafeProps(props)}
         className="text_input"
         disabled={disabled}
@@ -99,7 +103,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         required={required}
         type={type}
         value={value}
-    />
+    />)
   )
 
   const addOnInput = (
@@ -131,7 +135,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   )
 
   const render = (() => {
-    if(children) return children
+    if (children && !childInput) return children
     if (shouldShowAddOn) return addOnInput
 
     return textInput
@@ -144,7 +148,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label && 
+      {label &&
         <Caption
             className="pb_text_input_kit_label"
             text={label}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -58,6 +58,16 @@ const TextInputAddOn = (props) => {
             {...props}
         />
       </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'frog', alignment: 'right', border: true }}
+            label="Right-Aligned Add On With Child Input"
+            onChange={handleUpdateFourthInput}
+            {...props}
+        >
+          <input />
+        </TextInput>
+      </div>
       <div>
         <TextInput
             addOn={{ icon: 'percent', alignment: 'left', border: false }}
@@ -76,6 +86,16 @@ const TextInputAddOn = (props) => {
             {...props}
         />
       </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'frog', alignment: 'left', border: true }}
+            label="Left-Aligned Add On With Child Input"
+            onChange={handleUpdateFourthInput}
+            {...props}
+        >
+          <input />
+        </TextInput>
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md

@@ -0,0 +1,30 @@
+![user-presence-indicator)](https://github.com/powerhome/playbook/assets/112719604/96ee8408-2e21-4aaf-ae65-9f023515cf8d)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBUser(
+    name: name,
+
+    image: img,
+    size: .small,
+    territory: "PHL",
+    title: title,
+    status: .online
+  )
+  PBUser(
+    name: name,
+    image: img,
+    territory: "PHL",
+    title: title,
+    status: .away
+  )
+  PBUser(
+    name: name,
+    image: img,
+    size: .large,
+    territory: "PHL",
+    title: title,
+    status: .offline
+  )
+}
+```

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -7,4 +7,5 @@
 | **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
 | **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
 | **territory** | `String` | Adds the User's territory |  |  |
-| **title** | `String` | Adds a title |  |  |
+| **title** | `String` | Adds a title |  |  |
+| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |

data/app/pb_kits/playbook/pb_user/docs/example.yml

@@ -23,4 +23,5 @@ examples:
   - user_vertical_size_swift: Vertical
   - user_text_only_swift: Text Only
   - user_size_swift: Horizontal Size
+  - user_presence_indicator_swift: Presence Indicator
   - user_props_table: ""

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

@@ -21,44 +21,85 @@
 .z_index_1 {
   z-index: 100;
 }
+
 .z_index_2 {
   z-index: 200;
 }
+
 .z_index_3 {
   z-index: 300;
 }
+
 .z_index_4 {
   z-index: 400;
 }
+
 .z_index_5 {
   z-index: 500;
 }
+
 .z_index_6 {
   z-index: 600;
 }
+
 .z_index_7 {
   z-index: 700;
 }
+
 .z_index_8 {
   z-index: 800;
 }
+
 .z_index_9 {
   z-index: 900;
 }
+
 .z_index_10 {
   z-index: 1000;
 }
 
 $zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
-    
+
 @each $size, $size_value in $breakpoints_grid {
   @each $zIndex_value in $zIndex_values {
-      $min_size: map-get($size_value, "min");
-      $max_size: map-get($size_value, "max");
-      .z_index_#{$size}_#{$zIndex_value} {
-        @include break_on($min_size, $max_size) {
-          z-index: #{$zIndex_value * 100} !important;
-        }
+    $min_size: map-get($size_value, "min");
+    $max_size: map-get($size_value, "max");
+
+    .z_index_#{$size}_#{$zIndex_value} {
+      @include break_on($min_size, $max_size) {
+        z-index: #{$zIndex_value * 100} !important;
+      }
+    }
+  }
+}
+
+$space_classes: (
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+  0: 0,
+  auto: auto,
+  initial: initial,
+  inherit: inherit
+);
+
+$positions: "top", "right", "bottom", "left";
+
+@each $position in $positions {
+  @each $space_name, $space in $space_classes {
+    .#{$position}_#{$space_name} {
+      @if $space_name == "0" {
+        #{$position}: 0 !important;
+      }
+      @else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" {
+        #{$position}: #{$space} !important;
+      }
+      @else {
+        #{$position}: #{-$space} !important;
       }
+    }
   }
 }

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

@@ -118,6 +118,22 @@ type Position = {
   position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
 }
 
+type Top = {
+  top?: Sizes,
+}
+
+type Right = {
+  right?: Sizes,
+}
+
+type Bottom = {
+  bottom?: Sizes,
+}
+
+type Left = {
+  left?: Sizes,
+}
+
 type Shadow = {
   shadow?: "none" | "deep" | "deeper" | "deepest",
 }
@@ -151,7 +167,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string };
+  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -424,6 +440,12 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += position && position !== 'static' ? `position_${position}` : ''
     return css
   },
+
+  topProps: ({ top }: Top) => top ? `top_${top}` : '',
+  rightProps: ({ right }: Right) => right ? `right_${right}` : '',
+  bottomProps: ({ bottom }: Bottom) => bottom ? `bottom_${bottom}` : '',
+  leftProps: ({ left }: Left) => left ? `left_${left}` : '',
+
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')