playbook_ui 13.27.0.pre.alpha.PBNTR294paginationstylingfix2899 → 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
      <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

data/app/pb_kits/playbook/pb_person/person.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= pb_rails("body", props: {
         tag: "span",
         classname: "pb_person_first" }) { object.first_name } %>

data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("person", props: {
       first_name: object.first_name,
       last_name: object.last_name,

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.orientation === 'horizontal' %>
         <% if content %>
             <%= content %>

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -102,6 +102,9 @@
     pointer-events: none;
   }
   &.inline {
+    svg {
+      right: 6px;
+    }
     @mixin active_arrow_style {
       svg {
         color: $primary !important;
@@ -130,6 +133,7 @@
       box-shadow: none;
       border-color: transparent;
       padding: 4px 8px;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;
@@ -213,6 +217,9 @@
     }
   }
   &.inline {
+    svg {
+      right: 6px;
+    }
     &:not(:hover) {
       svg {
         display: none;
@@ -233,6 +240,7 @@
       border-color: transparent;
       background: transparent;
       padding: 4px 8px;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;

data/app/pb_kits/playbook/pb_source/source.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb__source_layout">
     <% if !object.hide_icon %>
       <% if object.show_icon? %>

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

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

@@ -76,6 +76,25 @@
         .text_input {
           border-color: $error_dark;
         }
+        [class*=pb_body_kit_negative] {
+          color: $error_dark;
+        }
+      }
+      .text_input_wrapper_add_on {
+        .add-on {
+          &-right {
+            .add-on-card {
+              border: 1px solid $error_dark;
+              border-left: 0;
+            }
+          }
+          &-left {
+            .add-on-card {
+              border: 1px solid $error_dark;
+              border-right: 0;
+            }
+          }
+        }
       }
     }
   }

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

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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 }) }) %>

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

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

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

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

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

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

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

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag 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,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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_tooltip/index.js

@@ -58,6 +58,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',

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

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag 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/dist/menu.yml

@@ -255,9 +255,9 @@ kits:
         description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
         status: "stable"
       - name: dropdown
-        platforms: *react_only
+        platforms: *web
         description: ""
-        status: "beta"
+        status: "stable"
       - name: "multi_level_select"
         platforms: *web
         description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.