playbook_ui 13.18.0 → 13.19.0.pre.alpha.PBNTR207tabledivsupport2245

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

@@ -7,22 +7,22 @@ $table-dark-card-bg: $card_dark;
   &.table-md,
   &.table-lg {
     &.table-dark {
-      thead {
-        tr {
+      thead, .thead {
+        tr, .tr {
           border-color: $border_dark !important;
 
-          th {
+          th, .th {
             border-color: $border_dark !important;
             color: $text_dk_light;
           }
         }
       }
-      tbody {
-        tr {
+      tbody, .tbody {
+        tr, .tr {
           border-color: $border_dark;
           transition: none !important;
 
-          td {
+          td, .td {
             border-color: $border_dark !important;
             color: $white;
 
@@ -31,7 +31,7 @@ $table-dark-card-bg: $card_dark;
             }
           }
           &:first-child {
-            td {
+            td, .td {
               border-top-width: 0 !important;
             }
           }
@@ -54,9 +54,9 @@ $table-dark-card-bg: $card_dark;
         &.table-dark {
           background: none !important;
 
-          tbody {
-            tr {
-              td {
+          tbody, .tbody {
+            tr, .tr {
+              td, .td {
                 background: $table-dark-card-bg !important;
               }
             }
@@ -64,15 +64,15 @@ $table-dark-card-bg: $card_dark;
         }
       }
       &.table-dark {
-        tbody {
-          tr {
-            td {
+        tbody, .tbody {
+          tr, .tr {
+            td, .td {
               &:first-child {
                 border-top-color: $border_dark !important;
               }
             }
             &:first-child {
-              td {
+              td, .td {
                 border-top-width: 1px !important;
               }
             }

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

@@ -10,7 +10,7 @@ $text_align_values: (
 );
 
 [class^=pb_table] {
-  thead {
+  thead, .thead {
     [class^=pb_table_header_kit] {
       @each $align_name, $align_value in $text_align_values {
         &[class*=_align_#{$align_name}] {
@@ -32,7 +32,7 @@ $text_align_values: (
 }
 
 [class^=pb_table] {
-  thead {
+  thead, .thead {
     [class^=pb_th_active] {
       color: $primary !important;
     }

data/app/pb_kits/playbook/pb_table/styles/_tablet_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/_vertical_border.scss

@@ -1,13 +1,12 @@
 [class^=pb_table] {
   &.vertical-border {
-    td,
-    th {
+    td, th, .td, .th {
       border-right: 1px solid $border_light !important;
     }
 
     @media screen and (min-width: $screen-xs-min) {
-      tr:hover {
-        td:last-child {
+      tr:hover, .tr:hover {
+        td:last-child, .td:last-child {
           border-right-color: darken($border_light, 10%) !important;
         }
       }

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -1,9 +1,21 @@
 <%= content_tag(:div) do %>
-  <%= content_tag(:table,
+  <% if object.tag == "table" %>
+    <%= content_tag(:table,
       aria: object.aria,
       class: object.classname,
       data: object.data,
       id: object.id) do %>
-    <%= content.presence %>
+      <%= content.presence %>
+    <% end %>
+  <% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content_tag(:div, class: "div-table") do %>
+        <%= content.presence %>
+      <% end %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -27,6 +27,9 @@ module Playbook
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
                      default: false
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
 
       def classname
         generate_classname(

data/dist/menu.yml

@@ -55,7 +55,7 @@ kits:
       - name: "advanced_table"
         platforms: *react_only
         description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
-        status: "beta" 
+        status: "stable" 
       - name: "list"
         platforms: *web
         description: Lists display a vertical set of related content.