playbook_ui 13.18.0 → 13.19.0.pre.alpha.PBNTR207tabledivsupport2261

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/_table.tsx

@@ -5,67 +5,60 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 
 type TableProps = {
-  aria?: { [key: string]: string },
-  children: React.ReactNode[] | React.ReactNode,
-  className: string,
-  collapse?: "sm" | "md" | "lg",
-  container?: boolean,
-  dark?: boolean,
-  data?: { [key: string]: string },
-  dataTable: boolean,
-  disableHover?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  responsive?: "collapse" | "scroll" | "none",
-  singleLine?: boolean,
-  size?: "sm" | "md" | "lg",
-  sticky?: boolean,
-  striped?: boolean,
-  verticalBorder?: boolean,
+    aria?: { [key: string]: string },
+    children: React.ReactNode[] | React.ReactNode,
+    className: string,
+    collapse?: "sm" | "md" | "lg",
+    container?: boolean,
+    dark?: boolean,
+    data?: { [key: string]: string },
+    dataTable: boolean,
+    disableHover?: boolean,
+    htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+    id?: string,
+    responsive?: "collapse" | "scroll" | "none",
+    singleLine?: boolean,
+    size?: "sm" | "md" | "lg",
+    sticky?: boolean,
+    striped?: boolean,
+    tag?: "table" | "div",
+    verticalBorder?: boolean,
 } & GlobalProps
 
 const Table = (props: TableProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    collapse = 'sm',
-    container = true,
-    dark,
-    data = {},
-    dataTable = false,
-    disableHover = false,
-    htmlOptions = {},
-    id,
-    responsive = 'collapse',
-    singleLine = false,
-    size = 'sm',
-    sticky = false,
-    striped = false,
-    verticalBorder = false,
-  } = props
+    const {
+        aria = {},
+        children,
+        className,
+        collapse = 'sm',
+        container = true,
+        dark,
+        data = {},
+        dataTable = false,
+        disableHover = false,
+        htmlOptions = {},
+        id,
+        responsive = 'collapse',
+        singleLine = false,
+        size = 'sm',
+        sticky = false,
+        striped = false,
+        tag = 'table',
+        verticalBorder = false,
+    } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
-  const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
+    const ariaProps = buildAriaProps(aria)
+    const dataProps = buildDataProps(data)
+    const htmlProps = buildHtmlProps(htmlOptions)
+    const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
+    const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
+    const isTableTag = tag === 'table'
 
-  useEffect(() => {
-    const instance = new PbTable()
-    instance.connect()
-  }, [])
-
-  return (
-    <table
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(
-          'pb_table',
-          `table-${size}`,
-          `table-responsive-${responsive}`,
-          {
+    const classNames = classnames(
+        'pb_table',
+        `table-${size}`,
+        `table-responsive-${responsive}`,
+        {
             'table-card': container,
             'table-dark': dark,
             'data_table': dataTable,
@@ -73,17 +66,43 @@ const Table = (props: TableProps) => {
             'no-hover': disableHover,
             'sticky-header': sticky,
             'striped': striped,
-          },
-          globalProps(props),
-          tableCollapseCss,
-          verticalBorderCss,
-          className
-        )}
-        id={id}
-    >
-        {children}
-    </table>
-  )
+        },
+        globalProps(props),
+        tableCollapseCss,
+        verticalBorderCss,
+        className
+    )
+
+    useEffect(() => {
+        const instance = new PbTable()
+        instance.connect()
+    }, [])
+
+    return (
+        <>
+            {isTableTag ? (
+                <table
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </table>
+            ) : (
+                <div
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </div>
+            )}
+        </>
+    )
 }
 
 export default Table

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="pb_table_thead">
+    <div class="pb_table_tr">
+      <div class="pb_table_th">Column 1</div>
+      <div class="pb_table_th">Column 2</div>
+      <div class="pb_table_th">Column 3</div>
+      <div class="pb_table_th">Column 4</div>
+      <div class="pb_table_th">Column 5</div>
+    </div>
+  </div>
+  <div class="pb_table_tbody">
+    <div class="pb_table_tr">
+      <div class="pb_table_td">Value 1</div>
+      <div class="pb_table_td">Value 2</div>
+      <div class="pb_table_td">Value 3</div>
+      <div class="pb_table_td">Value 4</div>
+      <div class="pb_table_td">Value 5</div>
+    </div>
+    <div class="pb_table_tr">
+      <div class="pb_table_td">Value 1</div>
+      <div class="pb_table_td">Value 2</div>
+      <div class="pb_table_td">Value 3</div>
+      <div class="pb_table_td">Value 4</div>
+      <div class="pb_table_td">Value 5</div>
+    </div>
+    <div class="pb_table_tr">
+      <div class="pb_table_td">Value 1</div>
+      <div class="pb_table_td">Value 2</div>
+      <div class="pb_table_td">Value 3</div>
+      <div class="pb_table_td">Value 4</div>
+      <div class="pb_table_td">Value 5</div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableDiv = (props) => {
+  return (
+    <Table
+        size="sm"
+        tag="div"
+        {...props}
+    >
+      <div className="pb_table_thead">
+        <div className="pb_table_tr">
+          <div className="pb_table_th">{'Column 1'}</div>
+          <div className="pb_table_th">{'Column 2'}</div>
+          <div className="pb_table_th">{'Column 3'}</div>
+          <div className="pb_table_th">{'Column 4'}</div>
+          <div className="pb_table_th">{'Column 5'}</div>
+        </div>
+      </div>
+      <div className="pb_table_tbody">
+        <div className="pb_table_tr">
+          <div className="pb_table_td">{'Value 1'}</div>
+          <div className="pb_table_td">{'Value 2'}</div>
+          <div className="pb_table_td">{'Value 3'}</div>
+          <div className="pb_table_td">{'Value 4'}</div>
+          <div className="pb_table_td">{'Value 5'}</div>
+        </div>
+        <div className="pb_table_tr">
+          <div className="pb_table_td">{'Value 1'}</div>
+          <div className="pb_table_td">{'Value 2'}</div>
+          <div className="pb_table_td">{'Value 3'}</div>
+          <div className="pb_table_td">{'Value 4'}</div>
+          <div className="pb_table_td">{'Value 5'}</div>
+        </div>
+        <div className="pb_table_tr">
+          <div className="pb_table_td">{'Value 1'}</div>
+          <div className="pb_table_td">{'Value 2'}</div>
+          <div className="pb_table_td">{'Value 3'}</div>
+          <div className="pb_table_td">{'Value 4'}</div>
+          <div className="pb_table_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/_content.scss

@@ -2,9 +2,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    tbody {
-      tr {
-        td {
+    tbody, .pb_table_tbody {
+      tr, .pb_table_tr {
+        td, .pb_table_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, .pb_table_thead {
+        tr, .pb_table_tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .pb_table_th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          td {
+      tbody, .pb_table_tbody {
+        tr, .pb_table_tr {
+          td, .pb_table_td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td {
+            td, .pb_table_td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            td {
+        tbody, .pb_table_tbody {
+          tr, .pb_table_tr {
+            td, .pb_table_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, .pb_table_tbody {
+            tr, .pb_table_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, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
                 &:first-child,
                 &:last-child {
                   padding: $value $cell-gutter !important;

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

@@ -4,9 +4,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    thead {
-      tr {
-        th {
+    thead, .pb_table_thead {
+      tr, .pb_table_tr {
+        th, .pb_table_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, .pb_table_tbody {
+        tr, .pb_table_tr {
           box-shadow: 0 0 0 $white;
           transition: box-shadow $transition-speed ease;
-          td {
+          td, .pb_table_td {
             border-top-color: transparent;
             border-top-width: 0;
             transition: all $transition-speed ease;
           }
           @media (hover:hover) {
-            td {
+            td, .pb_table_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, .pb_table_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, .pb_table_tbody {
+          tr, .pb_table_tr {
+            td, .pb_table_td {
               &:first-child {
                 border-left-width: 1px;
               }
@@ -72,12 +72,12 @@ $border_hover_color_dark: lighten($border_dark, 5%);
       }
 
       &.dark  {
-        tbody {
-          tr {
+        tbody, .pb_table_tbody {
+          tr, .pb_table_tr {
             @media (hover:hover) {
               &:hover {
                 box-shadow: 0 2px 10px 0 $shadow_dark;
-                td {
+                td, .pb_table_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, .pb_table_thead {
+        tr, .pb_table_tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .pb_table_th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          td {
+      tbody, .pb_table_tbody {
+        tr, .pb_table_tr {
+          td, .pb_table_td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td {
+            td, .pb_table_td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            td {
+        tbody, .pb_table_tbody {
+          tr, .pb_table_tr {
+            td, .pb_table_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, .pb_table_tbody {
+            tr, .pb_table_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, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_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, .pb_table_thead {
+        tr, .pb_table_tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .pb_table_th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          td {
+      tbody, .pb_table_tbody {
+        tr, .pb_table_tr {
+          td, .pb_table_td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td {
+            td, .pb_table_td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            td {
+        tbody, .pb_table_tbody {
+          tr, .pb_table_tr {
+            td, .pb_table_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, .pb_table_tbody {
+            tr, .pb_table_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, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_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, .pb_table_thead {
+      tr, .pb_table_tr {
+        th, .pb_table_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, .pb_table_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, .pb_table_td {
             &:first-child {
               @include pb_table_row_kit_side_highlight($color_value);
             }