playbook_ui 13.18.0.pre.alpha.useexactnodejsversionghactions2183 → 13.19.0.pre.alpha.PBNTR207tabledivsupport2245

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -10,6 +10,7 @@ module Playbook
                       values: %w[default single filter_only sort_only],
                       default: "default"
       prop :background, type: Playbook::Props::Boolean, default: true
+      prop :max_height
       prop :min_width, default: "auto"
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
@@ -31,7 +32,7 @@ module Playbook
       end
 
       def wrapper(&block)
-        if object.background
+        if background
           pb_rails("card", props: { padding: "none" }, &block)
         else
           capture(&block)

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -57,6 +57,10 @@
     margin-bottom: 16px;
   }
 
+  &[class*=rails] > [class^=pb_date_picker_kit] {
+    margin-bottom: 0px;
+  }
+
   & > [class^=pb_date_picker_kit]:not(:last-child) {
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
       border-bottom-right-radius: 0;

data/app/pb_kits/playbook/pb_form_group/form_group.rb

@@ -7,7 +7,7 @@ module Playbook
                         default: false
 
       def classname
-        generate_classname("pb_form_group_kit", full_width_class)
+        generate_classname("pb_form_group_kit", full_width_class) + form_group_rails
       end
 
     private
@@ -15,6 +15,10 @@ module Playbook
       def full_width_class
         full_width ? "full" : nil
       end
+
+      def form_group_rails
+        " rails"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
+  <div class="thead">
+    <div class="tr">
+      <div class="th">Column 1</div>
+      <div class="th">Column 2</div>
+      <div class="th">Column 3</div>
+      <div class="th">Column 4</div>
+      <div class="th">Column 5</div>
+    </div>
+  </div>
+  <div class="tbody">
+    <div class="tr">
+      <div class="td">Value 1</div>
+      <div class="td">Value 2</div>
+      <div class="td">Value 3</div>
+      <div class="td">Value 4</div>
+      <div class="td">Value 5</div>
+    </div>
+    <div class="tr">
+      <div class="td">Value 1</div>
+      <div class="td">Value 2</div>
+      <div class="td">Value 3</div>
+      <div class="td">Value 4</div>
+      <div class="td">Value 5</div>
+    </div>
+    <div class="tr">
+      <div class="td">Value 1</div>
+      <div class="td">Value 2</div>
+      <div class="td">Value 3</div>
+      <div class="td">Value 4</div>
+      <div class="td">Value 5</div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableDiv = (props) => {
+  return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <div className="thead">
+        <div className="tr">
+          <div className="th">{'Column 1'}</div>
+          <div className="th">{'Column 2'}</div>
+          <div className="th">{'Column 3'}</div>
+          <div className="th">{'Column 4'}</div>
+          <div className="th">{'Column 5'}</div>
+        </div>
+      </div>
+      <div className="tbody">
+        <div className="tr">
+          <div className="td">{'Value 1'}</div>
+          <div className="td">{'Value 2'}</div>
+          <div className="td">{'Value 3'}</div>
+          <div className="td">{'Value 4'}</div>
+          <div className="td">{'Value 5'}</div>
+        </div>
+        <div className="tr">
+          <div className="td">{'Value 1'}</div>
+          <div className="td">{'Value 2'}</div>
+          <div className="td">{'Value 3'}</div>
+          <div className="td">{'Value 4'}</div>
+          <div className="td">{'Value 5'}</div>
+        </div>
+        <div className="tr">
+          <div className="td">{'Value 1'}</div>
+          <div className="td">{'Value 2'}</div>
+          <div className="td">{'Value 3'}</div>
+          <div className="td">{'Value 4'}</div>
+          <div className="td">{'Value 5'}</div>
+        </div>
+      </div>
+    </Table>
+  )
+}
+
+export default TableDiv

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -1,5 +1,6 @@
 examples:
   rails:
+    - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -26,6 +27,7 @@ examples:
     - table_striped: Striped Table
 
   react:
+    - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -21,3 +21,4 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
 export { default as TableStriped } from './_table_striped.jsx'
+export { default as TableDiv } from './_table_div.jsx'

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

@@ -19,3 +19,4 @@
 @import "vertical_border";
 @import "table_header";
 @import "striped";
+@import "div_support";

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

@@ -2,9 +2,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    tbody {
-      tr {
-        td {
+    tbody, .tbody {
+      tr, .tr {
+        td, .td {
           font-size: $default-font-size;
         }
       }

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

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead {
-        tr {
+      thead, .thead {
+        tr, .tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          td {
+      tbody, .tbody {
+        tr, .tr {
+          td, .td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td {
+            td, .td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            td {
+        tbody, .tbody {
+          tr, .tr {
+            td, .td {
               background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
@@ -98,8 +98,8 @@
       }
       @media (hover:hover) {
         &:hover {
-          tbody {
-            tr {
+          tbody, .tbody {
+            tr, .tr {
               box-shadow: 0 0 0 $white !important;
             }
           }
@@ -108,9 +108,9 @@
       // reset the first and last to normalize
       @each $name, $value in $cell-pad-list {
         &.#{$name} {
-          tbody {
-            tr {
-              td {
+          tbody, .tbody {
+            tr, .tr {
+              td, .td {
                 &:first-child,
                 &:last-child {
                   padding: $value $cell-gutter !important;

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

@@ -0,0 +1,22 @@
+[class^=pb_table] {
+  .div-table {
+    display: table;
+    width: 100%;
+  }
+
+  .thead {
+    display: table-header-group;
+  }
+
+  .tbody {
+    display: table-row-group;
+  }
+
+  .tr {
+    display: table-row;
+  }
+
+  .th, .td {
+    display: table-cell;
+  }
+}

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

@@ -4,9 +4,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    thead {
-      tr {
-        th {
+    thead, .thead {
+      tr, .tr {
+        th, .th {
           @include caption;
           border-bottom: 1px solid $border_light;
         }

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

@@ -9,17 +9,17 @@ $border_hover_color_dark: lighten($border_dark, 5%);
   &.table-lg {
     &:not(.no-hover) {
       border-collapse: collapse;
-      tbody {
-        tr {
+      tbody, .tbody {
+        tr, .tr {
           box-shadow: 0 0 0 $white;
           transition: box-shadow $transition-speed ease;
-          td {
+          td, .td {
             border-top-color: transparent;
             border-top-width: 0;
             transition: all $transition-speed ease;
           }
           @media (hover:hover) {
-            td {
+            td, .td {
               position: relative;
               &:after {
                 transition: background-color $transition-speed ease, height $transition-speed ease;
@@ -41,7 +41,7 @@ $border_hover_color_dark: lighten($border_dark, 5%);
             }
             &:hover {
               box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
-              td {
+              td, .td {
                 border-color: darken($border_light, 10%);
                 border-top-width: 0;
                 border-top-color: transparent;
@@ -57,9 +57,9 @@ $border_hover_color_dark: lighten($border_dark, 5%);
       }
       &.table-card {
         border-collapse: separate;
-        tbody {
-          tr {
-            td {
+        tbody, .tbody {
+          tr, .tr {
+            td, .td {
               &:first-child {
                 border-left-width: 1px;
               }
@@ -72,12 +72,12 @@ $border_hover_color_dark: lighten($border_dark, 5%);
       }
 
       &.dark  {
-        tbody {
-          tr {
+        tbody, .tbody {
+          tr, .tr {
             @media (hover:hover) {
               &:hover {
                 box-shadow: 0 2px 10px 0 $shadow_dark;
-                td {
+                td, .td {
                   border-top-width: 0;
                   border-top-color: transparent;
                   border-color: $border_hover_color_dark !important;

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

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead {
-        tr {
+      thead, .thead {
+        tr, .tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          td {
+      tbody, .tbody {
+        tr, .tr {
+          td, .td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td {
+            td, .td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            td {
+        tbody, .tbody {
+          tr, .tr {
+            td, .td {
               background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
@@ -98,8 +98,8 @@
       }
       @media (hover:hover) {
         &:hover {
-          tbody {
-            tr {
+          tbody, .tbody {
+            tr, .tr {
               box-shadow: 0 0 0 $white !important;
             }
           }
@@ -108,9 +108,9 @@
       // reset the first and last to normalize
       @each $name, $value in $cell-pad-list {
         &.#{$name} {
-          tbody {
-            tr {
-              td {
+          tbody, .tbody {
+            tr, .tr {
+              td, .td {
                 &:first-child,
                 &:last-child {
                   padding: $value $cell-gutter !important;

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

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead {
-        tr {
+      thead, .thead {
+        tr, .tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          td {
+      tbody, .tbody {
+        tr, .tr {
+          td, .td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td {
+            td, .td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            td {
+        tbody, .tbody {
+          tr, .tr {
+            td, .td {
               background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
@@ -98,8 +98,8 @@
       }
       @media (hover:hover) {
         &:hover {
-          tbody {
-            tr {
+          tbody, .tbody {
+            tr, .tr {
               box-shadow: 0 0 0 $white !important;
             }
           }
@@ -108,9 +108,9 @@
       // reset the first and last to normalize
       @each $name, $value in $cell-pad-list {
         &.#{$name} {
-          tbody {
-            tr {
-              td {
+          tbody, .tbody {
+            tr, .tr {
+              td, .td {
                 &:first-child,
                 &:last-child {
                   padding: $value $cell-gutter !important;

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

@@ -6,9 +6,9 @@
     background-color: unset;
     background: unset;
 
-    thead {
-      tr {
-        th {
+    thead, .thead {
+      tr, .tr {
+        th, .th {
           text-align: left;
         }
       }

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

@@ -8,11 +8,11 @@ $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $pr
 }
 
 [class^=pb_table] {
-  tbody {
+  tbody, .tbody {
     [class^=pb_table_row_kit] {
       @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
         &[class*=_side_highlight_#{$color_name}] {
-          td {
+          td, .td {
             &:first-child {
               @include pb_table_row_kit_side_highlight($color_value);
             }

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -4,9 +4,9 @@
     max-width: 100vw;
     table-layout: fixed;
 
-    tbody {
-      tr {
-        td {
+    tbody, .tbody {
+      tr, .tr {
+        td, .td {
           white-space: nowrap;
           text-overflow: ellipsis;
 
@@ -20,7 +20,7 @@
             display: block !important;
           }
 
-          br {
+          br, .br {
             content:' ' !important;
 
             &::after {

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

@@ -2,7 +2,7 @@
 
 [class^="pb_table"] {
   &.sticky-header {
-    thead {
+    thead, .thead {
       background: $white;
       position: sticky;
       top: 0;
@@ -12,7 +12,7 @@
 
   &.dark {
     &.sticky-header {
-      thead {
+      thead, .thead {
         background: $bg_dark;
         position: sticky;
         top: 0;

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

@@ -1,7 +1,7 @@
 [class^=pb_table] {
   &.striped {
-    tbody {
-      tr:nth-child(odd) {
+    tbody, .tbody {
+      tr:nth-child(odd), .tr:nth-child(odd) {
         background-color: $bg_light;
       }
     }
@@ -9,8 +9,8 @@
 
   &.dark {
     &.striped {
-      tbody {
-        tr:nth-child(odd) {
+      tbody, .tbody {
+        tr:nth-child(odd), .tr:nth-child(odd) {
           background-color: $bg_dark;
         }
       }

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

@@ -4,9 +4,9 @@
   @each $name, $value in $cell-pad-list {
     &.#{$name} {
       width: 100%;
-      thead {
-        tr {
-          th {
+      thead, .thead {
+        tr, .tr {
+          th, .th {
             padding: $cell-pad-md $cell-gutter;
 
             &:first-child {
@@ -18,9 +18,9 @@
           }
         }
       }
-      tbody {
-        tr {
-          td {
+      tbody, .tbody {
+        tr, .tr {
+          td, .td {
             border-color: $border_light;
             border-style: solid;
             border-width: 0 0 1px;

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -7,9 +7,9 @@
       border-spacing: 0;
       background: $white;
 
-      thead {
-        tr {
-          th {
+      thead, .thead {
+        tr, .tr {
+          th, .th {
             border-color: $border_light;
             border-style: solid;
             border-width: 1px 0 1px 0;
@@ -26,9 +26,9 @@
         }
       }
 
-      tbody {
-        tr {
-          td {
+      tbody, .tbody {
+        tr, .tr {
+          td, .td {
             border-color: $border_light;
             border-style: solid;
             border-width: 0 0 1px 0;
@@ -42,7 +42,7 @@
           }
 
           &:last-child {
-            td {
+            td, .td {
               border-width: 0 0 1px 0;
 
               &:first-child {