playbook_ui 3.1.0 → 3.2.0

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

@@ -1,4 +1,4 @@
-<%= pb_rails("table", props: { size: "md", container: false }) do %>
+<%= pb_rails("table", props: { size: "md" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>

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

@@ -1,43 +1,43 @@
-import React from "react"
-import {Table} from "../../"
+import React from 'react'
+import { Table } from '../../'
 
-function TableMd() {
+const TableMd = () => {
   return (
-    <Table size="md" container={false}>
+    <Table size="md">
       <thead>
         <tr>
-          <th>{`Column 1`}</th>
-          <th>{`Column 2`}</th>
-          <th>{`Column 3`}</th>
-          <th>{`Column 4`}</th>
-          <th>{`Column 5`}</th>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
         <tr>
-          <td>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
         <tr>
-          <td>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
       </tbody>
     </Table>
   )
 }
 
-export default TableMd;
+export default TableMd

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

@@ -1,4 +1,4 @@
-<%= pb_rails("table", props: { size: "md", container: false }) do %>
+<%= pb_rails("table", props: { size: "md"}) do %>
   <thead>
     <tr>
       <th>Column 1</th>

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

@@ -1,43 +1,73 @@
-import React from "react"
-import {Table} from "../../"
+import React from 'react'
+import { Table } from '../../'
 
-function TableMultiline() {
+const TableMultiline = () => {
   return (
-    <Table size="sm" container={false}>
+    <Table size="sm">
       <thead>
         <tr>
-          <th>{`Column 1`}</th>
-          <th>{`Column 2`}</th>
-          <th>{`Column 3`}</th>
-          <th>{`Column 4`}</th>
-          <th>{`Column 5`}</th>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}<br/>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+          </td>
+          <td>{'Value 2'}</td>
+          <td>
+            {'Value 3'}
+            <br />
+            {'Value 3'}
+          </td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
         <tr>
-          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}<br/>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+          </td>
+          <td>{'Value 2'}</td>
+          <td>
+            {'Value 3'}
+            <br />
+            {'Value 3'}
+          </td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
         <tr>
-          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}<br/>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+          </td>
+          <td>{'Value 2'}</td>
+          <td>
+            {'Value 3'}
+            <br />
+            {'Value 3'}
+          </td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
       </tbody>
     </Table>
   )
 }
 
-export default TableMultiline;
+export default TableMultiline

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

@@ -1,4 +1,4 @@
-<%= pb_rails("table", props: { size: "md", single_line: true, container: false }) do %>
+<%= pb_rails("table", props: { size: "md", single_line: true }) do %>
   <thead>
     <tr>
       <th>Column 1</th>

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

@@ -1,45 +1,76 @@
-import React from "react"
-import {Table} from "../../"
+import React from 'react'
+import { Table } from '../../'
 
-function TableSingleLine() {
+const TableSingleLine = () => {
   return (
-    <Table single_line container={false}
+    <Table
+        singleLine
         size="sm"
     >
       <thead>
         <tr>
-          <th>{`Column 1`}</th>
-          <th>{`Column 2`}</th>
-          <th>{`Column 3`}</th>
-          <th>{`Column 4`}</th>
-          <th>{`Column 5`}</th>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}<br/>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+          </td>
+          <td>{'Value 2'}</td>
+          <td>
+            {'Value 3'}
+            <br />
+            {'Value 3'}
+          </td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
         <tr>
-          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}<br/>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+          </td>
+          <td>{'Value 2'}</td>
+          <td>
+            {'Value 3'}
+            <br />
+            {'Value 3'}
+          </td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
         <tr>
-          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}<br/>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+            <br />
+            {'Value 1'}
+          </td>
+          <td>{'Value 2'}</td>
+          <td>
+            {'Value 3'}
+            <br />
+            {'Value 3'}
+          </td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
       </tbody>
     </Table>
   )
 }
 
-export default TableSingleLine;
+export default TableSingleLine

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

@@ -1,4 +1,4 @@
-<%= pb_rails("table", props: { size: "sm", container: false }) do %>
+<%= pb_rails("table", props: { size: "sm" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>

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

@@ -1,43 +1,43 @@
-import React from "react"
-import {Table} from "../../"
+import React from 'react'
+import { Table } from '../../'
 
-function TableSm() {
+const TableSm = () => {
   return (
-    <Table size="sm" container={false}>
+    <Table size="sm">
       <thead>
         <tr>
-          <th>{`Column 1`}</th>
-          <th>{`Column 2`}</th>
-          <th>{`Column 3`}</th>
-          <th>{`Column 4`}</th>
-          <th>{`Column 5`}</th>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
         <tr>
-          <td>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
         <tr>
-          <td>{`Value 1`}</td>
-          <td>{`Value 2`}</td>
-          <td>{`Value 3`}</td>
-          <td>{`Value 4`}</td>
-          <td>{`Value 5`}</td>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
         </tr>
       </tbody>
     </Table>
   )
 }
 
-export default TableSm;
+export default TableSm

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

@@ -3,19 +3,21 @@ examples:
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
-    - table_container: Table Container
+    - table_container: Table Container Off
     - table_disable_hover: Disable Hover
     - table_multiline: Multi-line
     - table_single_line: Force Single Line
+    - table_data_table: Data Table
     - table_dark: Table Dark
-    - table_container_dark: Table Container Dark
+    - table_container_dark: Table Container Off Dark
   react:
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
-    - table_container: Table Container
+    - table_container: Table Container Off
     - table_disable_hover: Disable Hover
     - table_multiline: Multi-line
     - table_single_line: Force Single Line
+    - table_data_table: Data Table
     - table_dark: Table Dark
-    - table_container_dark: Table Container Dark
+    - table_container_dark: Table Container Off Dark

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

@@ -1,9 +1,10 @@
-export {default as TableSm} from './_table_sm.jsx';
-export {default as TableMd} from './_table_md.jsx';
-export {default as TableLg} from './_table_lg.jsx';
-export {default as TableContainer} from './_table_container.jsx';
-export {default as TableDark} from './_table_dark.jsx';
-export {default as TableContainerDark} from './_table_container_dark.jsx';
-export {default as TableDisableHover} from './_table_disable_hover.jsx'
-export {default as TableSingleLine} from './_table_single_line.jsx'
-export {default as TableMultiline} from './_table_multiline.jsx'
+export { default as TableSm } from './_table_sm.jsx'
+export { default as TableMd } from './_table_md.jsx'
+export { default as TableLg } from './_table_lg.jsx'
+export { default as TableContainer } from './_table_container.jsx'
+export { default as TableDataTable } from './_table_data_table.jsx'
+export { default as TableDark } from './_table_dark.jsx'
+export { default as TableContainerDark } from './_table_container_dark.jsx'
+export { default as TableDisableHover } from './_table_disable_hover.jsx'
+export { default as TableSingleLine } from './_table_single_line.jsx'
+export { default as TableMultiline } from './_table_multiline.jsx'

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

@@ -8,7 +8,6 @@ $transition-speed: 0.2s;
   &.table-lg {
     &:not(.no-hover) {
       border-collapse: collapse;
-
       tbody {
         tr {
           box-shadow: 0 0 0 $white;
@@ -50,6 +49,7 @@ $transition-speed: 0.2s;
         }
       }
       &.table-card {
+        border-collapse: separate;
         tbody {
           tr {
             td {

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

@@ -4,7 +4,6 @@
   @each $name, $value in $cell-pad-list {
     &.#{$name} {
       width: 100%;
-
       thead {
         tr {
           th {
@@ -36,6 +35,16 @@
           }
         }
       }
+      &.data_table {
+        thead tr th {
+          padding-top: $cell-pad-sm;
+          padding-bottom: $cell-pad-sm;
+        }
+        tbody tr td {
+          padding-top: $cell-pad-sm;
+          padding-bottom: $cell-pad-sm;
+        }
+      }
     }
   }
 }