playbook_ui 7.13.0 → 7.16.0.pre.alpha1

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

@@ -0,0 +1,136 @@
+@import "../../tokens/border_radius";
+@import "../../tokens/positioning";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-xs-max) {
+  [class^=pb_table] {
+    &.table-sm.table-collapse-sm,
+    &.table-md.table-collapse-sm,
+    &.table-lg.table-collapse-sm {
+      width: 100%;
+      background: none !important;
+
+      thead {
+        tr {
+          left: $offscreen;
+          position: absolute;
+          top: $offscreen;
+
+          th {
+            display: block;
+            visibility: visible;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            display: block;
+            visibility: visible;
+            border-left-width: 1px !important;
+            border-right-width: 1px !important;
+            border-bottom-width: 0 !important;
+            border-color: $border_light !important;
+            min-height: 2.2em;
+            position: relative;
+            text-align:left;
+            white-space: normal;
+            &:before {
+              content: attr(data-title);
+              @include caption;
+              width: 100% !important;
+              white-space: nowrap !important;
+              text-overflow: ellipsis !important;
+              position: relative !important;
+              top: 0 !important;
+              left: 0 !important;
+              height: 100% !important;
+              padding-left: 0 !important;
+              display: block !important;
+            }
+
+            &:first-child {
+              margin-top: $space_md !important;
+              border-top-width: 1px !important;
+              border-top-color: $border_light !important;
+              border-radius: $border_rad_light $border_rad_light 0 0;
+            }
+
+            &:last-child {
+              border-radius: 0 0 $border_rad_light $border_rad_light;
+              border-bottom-width: 1px !important;
+            }
+          }
+
+          &:first-child {
+            td {
+              &:first-child {
+                margin-top: $space-xs !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $white !important;
+              border-left-width: 1px !important;
+              border-right-width: 1px !important;
+              border-top-width: 1px !important;
+
+              &:first-child {
+                border-radius: $border_rad_light $border_rad_light 0 0 !important;
+              }
+              &:last-child {
+                border-radius: 0 0 $border_rad_light $border_rad_light !important;
+              }
+            }
+          }
+        }
+      }
+      @media (hover:hover) {
+        &:hover {
+          tbody {
+            tr {
+              box-shadow: 0 0 0 $white !important;
+            }
+          }
+        }
+      }
+      // reset the first and last to normalize
+      @each $name, $value in $cell-pad-list {
+        &.#{$name} {
+          tbody {
+            tr {
+              td {
+                &:first-child,
+                &:last-child {
+                  padding: $value $cell-gutter !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.hide-labels {
+    tbody {
+      tr {
+        td {
+          &::before {
+            content: '';
+            left: 0;
+            padding-right: 0;
+            position: relative;
+            width: 0;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,136 @@
+@import "../../tokens/border_radius";
+@import "../../tokens/positioning";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-lg-min) {
+  [class^=pb_table] {
+    &.table-sm.table-collapse-md,
+    &.table-md.table-collapse-md,
+    &.table-lg.table-collapse-md {
+      width: 100%;
+      background: none !important;
+
+      thead {
+        tr {
+          left: $offscreen;
+          position: absolute;
+          top: $offscreen;
+
+          th {
+            display: block;
+            visibility: visible;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            display: block;
+            visibility: visible;
+            border-left-width: 1px !important;
+            border-right-width: 1px !important;
+            border-bottom-width: 0 !important;
+            border-color: $border_light !important;
+            min-height: 2.2em;
+            position: relative;
+            text-align:left;
+            white-space: normal;
+            &:before {
+              content: attr(data-title);
+              @include caption;
+              width: 100% !important;
+              white-space: nowrap !important;
+              text-overflow: ellipsis !important;
+              position: relative !important;
+              top: 0 !important;
+              left: 0 !important;
+              height: 100% !important;
+              padding-left: 0 !important;
+              display: block !important;
+            }
+
+            &:first-child {
+              margin-top: $space_md !important;
+              border-top-width: 1px !important;
+              border-top-color: $border_light !important;
+              border-radius: $border_rad_light $border_rad_light 0 0;
+            }
+
+            &:last-child {
+              border-radius: 0 0 $border_rad_light $border_rad_light;
+              border-bottom-width: 1px !important;
+            }
+          }
+
+          &:first-child {
+            td {
+              &:first-child {
+                margin-top: $space-xs !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $white !important;
+              border-left-width: 1px !important;
+              border-right-width: 1px !important;
+              border-top-width: 1px !important;
+
+              &:first-child {
+                border-radius: $border_rad_light $border_rad_light 0 0 !important;
+              }
+              &:last-child {
+                border-radius: 0 0 $border_rad_light $border_rad_light !important;
+              }
+            }
+          }
+        }
+      }
+      @media (hover:hover) {
+        &:hover {
+          tbody {
+            tr {
+              box-shadow: 0 0 0 $white !important;
+            }
+          }
+        }
+      }
+      // reset the first and last to normalize
+      @each $name, $value in $cell-pad-list {
+        &.#{$name} {
+          tbody {
+            tr {
+              td {
+                &:first-child,
+                &:last-child {
+                  padding: $value $cell-gutter !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.hide-labels {
+    tbody {
+      tr {
+        td {
+          &::before {
+            content: '';
+            left: 0;
+            padding-right: 0;
+            position: relative;
+            width: 0;
+          }
+        }
+      }
+    }
+  }
+}

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"
@@ -21,12 +17,15 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[collapse scroll none],
                         default: "collapse"
+      prop :collapse, type: Playbook::Props::Enum,
+                      values: %w[sm md lg],
+                      default: "sm"
       prop :text
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
-          disable_hover_class, container_class, data_table_class,
+          disable_hover_class, container_class, data_table_class, collapse_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -52,6 +51,10 @@ module Playbook
       def container_class
         container ? "table-card" : nil
       end
+
+      def collapse_class
+        responsive != "none" ? "table-collapse-#{collapse}" : ""
+      end
     end
   end
 end

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" }) %>