playbook_ui 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438 → 13.21.0.pre.alpha.PBNTR243globalpositioningpropinset2504

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence || object.text %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence || object.text %>
     <% end %>
-<% end %>
+<% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
-<% end %>
+<% end %>

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

@@ -4,7 +4,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: "pb-th#{object.id}" ) do %>
+      id: "pb-th#{object.id}",
+      **combined_html_options) 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 %>
@@ -51,7 +52,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
       <%= content.presence || object.text %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
-<% end %>
+<% end %>

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

@@ -3,7 +3,6 @@
 @import "../tokens/colors";
 
 [class^="pb_text_input_kit"] {
-  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;

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

@@ -60,6 +60,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const filteredProps = {...props}
+  if (filteredProps.marginBottom === undefined) {
+     filteredProps.marginBottom = "sm"
+  }
 
   const { alignment, border, icon } = addOn
   const addOnAlignment = alignment === 'left' ? 'left' : 'right'
@@ -74,7 +78,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     'pb_text_input_kit',
     inline ? 'inline' : "",
     error ? 'error' : "",
-    globalProps(props),
+    globalProps(filteredProps),
     className,
   ])
   const addOnIcon = (

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     aria: object.aria,
     class: object.classname,
-    data: object.data) do %>
+    data: object.data,
+    **combined_html_options) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -26,7 +26,8 @@ module Playbook
                     nested_kit: Playbook::PbTextInput::AddOn
 
       def classname
-        generate_classname("pb_text_input_kit") + error_class + inline_class
+        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
+        generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
       end
 
       def input_tag

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -16,7 +16,7 @@ test('returns namespaced class name', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(kitClass)
+  expect(kit).toHaveClass(`${kitClass} mb_sm`)
 })
 
 test('returns additional class name', () => {

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%
     # convert deprecated prop values
     size = object.size

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
@@ -13,4 +14,4 @@
           <%= pb_rails(object.text_kit, props: { tag: "span", color: object.text_timezone_color, classname:"pb_time_range_inline_timezone", text: object.pb_date_end_time.to_timezone.upcase }) %>
         <% end %>
       </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
 
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -2,7 +2,8 @@
   aria: object.aria,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -2,5 +2,6 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %><%= content.presence || object.text %><% end %>
-    
+    class: object.classname,
+    **combined_html_options) do %><%= content.presence || object.text %><% end %>
+    

data/app/pb_kits/playbook/pb_title_count/title_count.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: {
     dark: object.dark,
     size: object.title_size,

data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.title, size: 4 }) %>
   <%= pb_rails("body", props: { text: object.detail, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     aria: object.aria,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
   <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -4,7 +4,8 @@
   <%= content_tag(:div,
                 id: object.id,
                 data: object.data,
-                class: object.classname + object.inline_class) do %>
+                class: object.classname + object.inline_class,
+                **combined_html_options) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

@@ -2,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
 <% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
     <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
 <% end %>

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

@@ -88,18 +88,31 @@ $space_classes: (
 
 $positions: "top", "right", "bottom", "left";
 
+
+@mixin position-property($position, $space_name, $space, $is_inset: false) {
+  @if $space_name == "0" {
+    #{$position}: 0 !important;
+  }
+  @else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" {
+    #{$position}: #{$space} !important;
+  }
+  @else {
+    @if $is_inset {
+      #{$position}: #{$space} !important;
+    } @else {
+      #{$position}: #{-$space} !important;
+    }
+  }
+}
+
 @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;
-      }
+    $space_name_str: "#{ $space_name }";
+    .#{$position}_#{$space_name_str} {
+      @include position-property($position, $space_name_str, $space)
+    }
+    .#{$position}_#{$space_name_str}_inset {
+      @include position-property($position, $space_name_str, $space, true)
     }
   }
 }

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

@@ -119,19 +119,19 @@ type Position = {
 }
 
 type Top = {
-  top?: Sizes,
+  top?: Sizes | {value: string, inset: boolean},
 }
 
 type Right = {
-  right?: Sizes,
+  right?: Sizes | {value: string, inset: boolean},
 }
 
 type Bottom = {
-  bottom?: Sizes,
+  bottom?: Sizes | {value: string, inset: boolean},
 }
 
 type Left = {
-  left?: Sizes,
+  left?: Sizes | {value: string, inset: boolean},
 }
 
 type Shadow = {
@@ -441,11 +441,54 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     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}` : '',
-
+  topProps: ({ top }) => {
+    let css = "";
+    if (typeof top === 'string') {
+      css += `top_${top}`;
+    } else if (typeof top === 'object' && top.inset) {
+      css += `top_${top.value}_inset`;
+    } else if (typeof top === 'object' && !top.inset) {
+      css += `top_${top.value}`;
+    }
+    return css;
+  },
+  
+  rightProps: ({ right }) => {
+    let css = "";
+    if (typeof right === 'string') {
+      css += `right_${right}`;
+    } else if (typeof right === 'object' && right.inset) {
+      css += `right_${right.value}_inset`;
+    } else if (typeof right === 'object' && !right.inset) {
+      css += `right_${right.value}`;
+    }
+    return css;
+  },
+  
+  bottomProps: ({ bottom }) => {
+    let css = "";
+    if (typeof bottom === 'string') {
+      css += `bottom_${bottom}`;
+    } else if (typeof bottom === 'object' && bottom.inset) {
+      css += `bottom_${bottom.value}_inset`;
+    } else if (typeof bottom === 'object' && !bottom.inset) {
+      css += `bottom_${bottom.value}`;
+    }
+    return css;
+  },
+  
+  leftProps: ({ left }) => {
+    let css = "";
+    if (typeof left === 'string') {
+      css += `left_${left}`;
+    } else if (typeof left === 'object' && left.inset) {
+      css += `left_${left.value}_inset`;
+    }else if (typeof left === 'object' && !left.inset) {
+      css += `left_${left.value}`;
+    }
+    return css;
+  },
+  
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')