playbook_ui 7.16.0.pre.alpha5 → 7.16.0

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -1,5 +1,4 @@
 @import "../../tokens/border_radius";
-@import "../../tokens/positioning";
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-xs-max) {
@@ -12,9 +11,9 @@
 
       thead {
         tr {
-          left: $offscreen;
+          left: -9999px;
           position: absolute;
-          top: $offscreen;
+          top: -9999px;
 
           th {
             display: block;

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -1,5 +1,4 @@
 @import "../../tokens/border_radius";
-@import "../../tokens/positioning";
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-lg-min) {
@@ -12,9 +11,9 @@
 
       thead {
         tr {
-          left: $offscreen;
+          left: -9999px;
           position: absolute;
-          top: $offscreen;
+          top: -9999px;
 
           th {
             display: block;

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

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTable
-    class Table < Playbook::KitBase
+    class Table
+      include Playbook::Props
+
+      partial "pb_table/table"
+
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md lg],
                   default: "md"

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

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTable
-    class TableRow < Playbook::KitBase
+    class TableRow
+      include Playbook::Props
+
+      partial "pb_table/table_row"
+
       prop :side_highlight_color, type: Playbook::Props::String,
                                   default: "none"
 

data/app/pb_kits/playbook/pb_text_input/{text_input.html.erb → _text_input.html.erb}

@@ -5,9 +5,13 @@
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>
-  <%= content_tag(:div, class: "text_input_wrapper") do %>
-    <% if content.present? %>
-      <%= content %>
+  <%= content_tag(:div,
+      class: "text_input_wrapper") do %>
+    <% if object.children.present? %>
+      <%= capture(&object.children) %>
+      <% if object.error %>
+        <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <% end %>
     <% else %>
       <%= tag(:input,
           autocomplete: object.autocomplete ? nil : "off",
@@ -21,9 +25,9 @@
           required: object.required,
           type: object.type,
           value: object.value) %>
-    <% end %>
-    <% if object.error %>
-      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <% if object.error %>
+        <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTextInput
-    class TextInput < Playbook::KitBase
+    class TextInput
+      include Playbook::Props
+
+      partial "pb_text_input/text_input"
+
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: true
       prop :disabled, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_textarea/{textarea.html.erb → _textarea.html.erb}

@@ -5,10 +5,10 @@
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>
-  <% if content.present? %>
-    <%= content %>
+  <% if object.children %>
+    <%= capture(&object.children) %>
     <% if object.error %>
-      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
     <% end %>
   <% else %>
     <%= text_area(
@@ -20,7 +20,7 @@
         :onkeyup => object.onkeyup,
         :placeholder => object.placeholder,
         :rows => object.rows,
-        :value => object.value) %>
+        :value => object.value )%>
     <% if object.error %>
       <% if object.character_count %>
         <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -2,8 +2,13 @@
 
 module Playbook
   module PbTextarea
-    class Textarea < Playbook::KitBase
+    class Textarea
+      include Playbook::Props
+
+      partial "pb_textarea/textarea"
+
       prop :error
+      prop :object
       prop :label
       prop :method
       prop :name

data/app/pb_kits/playbook/pb_time/time.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTime
-    class Time < Playbook::KitBase
+    class Time
+      include Playbook::Props
+
+      partial "pb_time/time"
+
       prop :time, required: true
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md lg],

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTimeRangeInline
-    class TimeRangeInline < Playbook::KitBase
+    class TimeRangeInline
+      include Playbook::Props
+
+      partial "pb_time_range_inline/time_range_inline"
+
       prop :start_time, required: true
       prop :end_time, required: true
       prop :alignment, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb

@@ -2,7 +2,14 @@
 
 module Playbook
   module PbTimeStacked
-    class TimeStacked < Playbook::KitBase
+    class TimeStacked
+      include ActionView::Helpers::TagHelper
+      include ActionView::Context
+      include Playbook::Props
+      include Playbook::Props
+
+      partial "pb_time_stacked/time_stacked"
+
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_timeline/{item.html.erb → _item.html.erb}

@@ -2,11 +2,11 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-
+  
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>
-      <%= pb_rails("date_stacked", props: {
-        date: object.date,
+      <%= pb_rails("date_stacked", props: { 
+        date: object.date, 
         size: "sm",
         align: "center"
       }) %>
@@ -18,11 +18,11 @@
       icon: object.icon,
       variant: object.icon_color,
       size: "xs"
-    }) %>
+    }) %> 
     <div class="pb_timeline_item_connector"></div>
   </div>
-
   <div class="pb_timeline_item_right_block">
-    <%= content.presence %>
+    <%= capture(&object.children) %>
   </div>
+
 <% end %>

data/app/pb_kits/playbook/pb_timeline/{timeline.html.erb → _timeline.html.erb}

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= content.presence %>
+    <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_timeline/item.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTimeline
-    class Item < Playbook::KitBase
+    class Item
+      include Playbook::Props
+
+      partial "pb_timeline/item"
+
       prop :date
       prop :icon, type: Playbook::Props::String,
                   default: "user"

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTimeline
-    class Timeline < Playbook::KitBase
+    class Timeline
+      include Playbook::Props
+
+      partial "pb_timeline/timeline"
+
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
                          default: "horizontal"

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -2,8 +2,12 @@
 
 module Playbook
   module PbTimestamp
-    class Timestamp < Playbook::KitBase
+    class Timestamp
       include ActionView::Helpers::DateHelper
+      include Playbook::Props
+
+      partial "pb_timestamp/timestamp"
+
       prop :text
       prop :timestamp
 

data/app/pb_kits/playbook/pb_title/title.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTitle
-    class Title < Playbook::KitBase
+    class Title
+      include Playbook::Props
+
+      partial "pb_title/title"
+
       prop :size, type: Playbook::Props::Enum,
                   values: [1, 2, 3, 4],
                   default: 3

data/app/pb_kits/playbook/pb_title_count/title_count.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTitleCount
-    class TitleCount < Playbook::KitBase
+    class TitleCount
+      include Playbook::Props
+
+      partial "pb_title_count/title_count"
+
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_title_detail/title_detail.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbTitleDetail
-    class TitleDetail < Playbook::KitBase
+    class TitleDetail
+      include Playbook::Props
+
+      partial "pb_title_detail/title_detail"
+
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

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

@@ -0,0 +1,15 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria,
+    class: object.classname) do %>
+
+    <label class="pb_toggle_wrapper">
+      <% if object.children %>
+        <%= capture(&object.children) %>
+      <% else %>
+        <%= object.input %>
+      <% end %>
+      <div class="pb_toggle_control"></div>
+    </label>
+<% end %>

data/app/pb_kits/playbook/pb_toggle/toggle.rb

@@ -4,7 +4,13 @@ require "action_view"
 
 module Playbook
   module PbToggle
-    class Toggle < Playbook::KitBase
+    class Toggle
+      include ActionView::Helpers::FormTagHelper
+      include ActionView::Context
+      include Playbook::Props
+
+      partial "pb_toggle/toggle"
+
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 

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

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+    <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
+      <%= capture(&object.children) %>
+      <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
+    </div>
+
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -27,7 +27,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     display: block;
     opacity: 0;
     position: absolute;
-    left: $offscreen;
+    left: -9999px;
     top: 0;
     animation-name: fadeIn;
     animation-duration: 150ms;

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -2,7 +2,10 @@
 
 module Playbook
   module PbTooltip
-    class Tooltip < Playbook::KitBase
+    class Tooltip
+      include Playbook::Props
+      partial "pb_tooltip/tooltip"
+
       prop :position
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -2,7 +2,9 @@
 
 module Playbook
   module PbTypeahead
-    class Typeahead < Playbook::KitBase
+    class Typeahead
+      include Playbook::Props
+
       prop :async, type: Playbook::Props::Boolean,
                     default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
@@ -21,6 +23,8 @@ module Playbook
       prop :search_debounce_timeout, default: 250
       prop :value
 
+      partial "pb_typeahead/typeahead"
+
       def classname
         generate_classname("pb_typeahead_kit")
       end

data/app/pb_kits/playbook/pb_user/user.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbUser
-    class User < Playbook::KitBase
+    class User
+      include Playbook::Props
+
+      partial "pb_user/user"
+
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"