playbook_ui 7.14.0.pre.alpha1 → 7.16.0.pre.alpha2

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx

@@ -28,7 +28,6 @@ const TableAlignmentShiftData = (props) => {
           </td>
         </tr>
       </tbody>
-      <br />
       <thead>
         <tr>
           <th>{'Espresso Drinks'}</th>

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_table/{_table.html.erb → table.html.erb}

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

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

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

data/app/pb_kits/playbook/pb_table/{_table_row.html.erb → table_row.html.erb}

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

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTable
-    class TableRow
-      include Playbook::Props
-
-      partial "pb_table/table_row"
-
+    class TableRow < Playbook::KitBase
       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,13 +5,9 @@
   <% 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 object.children.present? %>
-      <%= capture(&object.children) %>
-      <% if object.error %>
-        <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
-      <% end %>
+  <%= content_tag(:div, class: "text_input_wrapper") do %>
+    <% if content.present? %>
+      <%= content %>
     <% else %>
       <%= tag(:input,
           autocomplete: object.autocomplete ? nil : "off",
@@ -25,9 +21,9 @@
           required: object.required,
           type: object.type,
           value: object.value) %>
-      <% if object.error %>
-        <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
-      <% end %>
+    <% end %>
+    <% if object.error %>
+      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
     <% end %>
   <% end %>
 <% end %>

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

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

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -1,10 +1,11 @@
 /* @flow */
 
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import { Body, Caption, Flex, FlexItem } from '../'
 import type { InputCallback } from '../types.js'
 import { globalProps } from '../utilities/globalProps.js'
+import PbTextarea from './'
 
 type TextareaProps = {
   characterCount?: string,
@@ -22,7 +23,7 @@ type TextareaProps = {
   name?: string,
   required?: boolean,
   rows?: number,
-  resize: 'none' | 'both' | 'horizontal' | 'vertical',
+  resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
@@ -43,6 +44,13 @@ const Textarea = ({
   value,
   ...props
 }: TextareaProps, ref: React.ElementRef<"textarea">) => {
+  ref = ref || useRef(false)
+  useEffect(() => {
+    if (ref.current && resize === 'auto') {
+      PbTextarea.addMatch(ref.current)
+    }
+  })
+
   const errorClass = error ? 'error' : null
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb

@@ -1,6 +1,6 @@
+<%= pb_rails("textarea", props: { label: "auto", placeholder: "Resize Auto", resize: "auto" }) %>
 
-
-
+<br/>
 
 <%= pb_rails("textarea", props: { label: "vertical", placeholder: "Resize Vertical", resize: "vertical" }) %>
 

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx

@@ -4,6 +4,15 @@ import { Textarea } from '../../'
 const TextareaResize = (props) => {
   return (
     <div>
+      <Textarea
+          label="auto"
+          placeholder="Resize Auto"
+          resize="auto"
+          {...props}
+      />
+
+      <br />
+
       <Textarea
           label="vertical"
           placeholder="Resize Vertical"
@@ -28,7 +37,6 @@ const TextareaResize = (props) => {
           resize="horizontal"
           {...props}
       />
-
     </div>
   )
 }

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

@@ -0,0 +1,17 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+export default class PbTextarea extends PbEnhancedElement {
+  static get selector() {
+    return '.resize_auto textarea'
+  }
+
+  onInput() {
+    this.style.height = 'auto'
+    this.style.height = (this.scrollHeight) + 'px'
+  }
+
+  connect() {
+    this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
+    this.element.addEventListener('input', this.onInput, false)
+  }
+}

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 object.children %>
-    <%= capture(&object.children) %>
+  <% if content.present? %>
+    <%= content %>
     <% 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,22 +2,17 @@
 
 module Playbook
   module PbTextarea
-    class Textarea
-      include Playbook::Props
-
-      partial "pb_textarea/textarea"
-
+    class Textarea < Playbook::KitBase
       prop :error
-      prop :object
       prop :label
       prop :method
       prop :name
       prop :placeholder
       prop :resize, type: Playbook::Props::Enum,
-            values: %w[none both horizontal vertical],
-            default: "none"
+                    values: %w[none both horizontal vertical auto],
+                    default: "none"
       prop :rows, type: Playbook::Props::Number,
-            default: 4
+                  default: 4
       prop :value
       prop :character_count
       prop :onkeyup
@@ -40,7 +35,6 @@ module Playbook
       def resize_class
         " resize_#{resize}"
       end
-
     end
   end
 end

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTime
-    class Time
-      include Playbook::Props
-
-      partial "pb_time/time"
-
+    class Time < Playbook::KitBase
       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,11 +2,7 @@
 
 module Playbook
   module PbTimeRangeInline
-    class TimeRangeInline
-      include Playbook::Props
-
-      partial "pb_time_range_inline/time_range_inline"
-
+    class TimeRangeInline < Playbook::KitBase
       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,14 +2,7 @@
 
 module Playbook
   module PbTimeStacked
-    class TimeStacked
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-      include Playbook::Props
-
-      partial "pb_time_stacked/time_stacked"
-
+    class TimeStacked < Playbook::KitBase
       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">
-    <%= capture(&object.children) %>
+    <%= content.presence %>
   </div>
-
 <% end %>

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

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

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

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

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

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

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

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