playbook_ui 7.11.1 → 7.14.0.pre.alpha1

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

@@ -1,10 +1,13 @@
 import React from 'react'
 import { Table, TableRow } from '../../'
 
-const TableSideHighlight = () => {
+const TableSideHighlight = (props) => {
   return (
     <div>
-      <Table size="sm">
+      <Table
+          size="sm"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Product colors'}</th>
@@ -15,28 +18,40 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="solar">
+          <TableRow
+              sideHighlightColor="solar"
+              {...props}
+          >
             <td>{'Solar'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="roofing">
+          <TableRow
+              sideHighlightColor="roofing"
+              {...props}
+          >
             <td>{'Roofing'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="gutters">
+          <TableRow
+              sideHighlightColor="gutters"
+              {...props}
+          >
             <td>{'Gutters'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="none">
+          <TableRow
+              sideHighlightColor="none"
+              {...props}
+          >
             <td>{'None'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
@@ -48,7 +63,10 @@ const TableSideHighlight = () => {
 
       <br />
 
-      <Table size="sm">
+      <Table
+          size="sm"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Status colors'}</th>
@@ -59,28 +77,40 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="success">
+          <TableRow
+              sideHighlightColor="success"
+              {...props}
+          >
             <td>{'Success'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="warning">
+          <TableRow
+              sideHighlightColor="warning"
+              {...props}
+          >
             <td>{'Warning'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="error">
+          <TableRow
+              sideHighlightColor="error"
+              {...props}
+          >
             <td>{'Error'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="none">
+          <TableRow
+              sideHighlightColor="none"
+              {...props}
+          >
             <td>{'None'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
@@ -92,7 +122,10 @@ const TableSideHighlight = () => {
 
       <br />
 
-      <Table size="sm">
+      <Table
+          size="sm"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Category Colors'}</th>
@@ -103,28 +136,40 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="category_1">
+          <TableRow
+              sideHighlightColor="category_1"
+              {...props}
+          >
             <td>{'Category Color 1'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="category_2">
+          <TableRow
+              sideHighlightColor="category_2"
+              {...props}
+          >
             <td>{'Category Color 2'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="category_3">
+          <TableRow
+              sideHighlightColor="category_3"
+              {...props}
+          >
             <td>{'Category Color 3'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="none">
+          <TableRow
+              sideHighlightColor="none"
+              {...props}
+          >
             <td>{'None'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>

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

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableSingleLine = () => {
+const TableSingleLine = (props) => {
   return (
     <Table
         singleLine
         size="sm"
+        {...props}
     >
       <thead>
         <tr>

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

@@ -1,9 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableSm = () => {
+const TableSm = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>

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

@@ -1 +1,3 @@
 Use table size `"sm"` when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.
+
+Table can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

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

@@ -2,9 +2,12 @@ import React from 'react'
 import { Table } from '../..'
 import { Button } from '../../'
 
-const TableOneAction = () => {
+const TableOneAction = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>
@@ -26,11 +29,13 @@ const TableOneAction = () => {
                 paddingLeft="none"
                 text="Tetriary Action"
                 variant="link"
+                {...props}
             />
             <Button
                 onClick={() => alert('button clicked!')}
                 text="Secondary Action"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>
@@ -45,11 +50,13 @@ const TableOneAction = () => {
                 paddingLeft="none"
                 text="Tetriary Action"
                 variant="link"
+                {...props}
             />
             <Button
                 onClick={() => alert('button clicked!')}
                 text="Secondary Action"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>
@@ -64,11 +71,13 @@ const TableOneAction = () => {
                 paddingLeft="none"
                 text="Tetriary Action"
                 variant="link"
+                {...props}
             />
             <Button
                 onClick={() => alert('button clicked!')}
                 text="Secondary Action"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>

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

@@ -2,9 +2,12 @@ import React from 'react'
 import { Table } from '../..'
 import { CircleIconButton } from '../../'
 
-const TableTwoPlusActions = () => {
+const TableTwoPlusActions = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>
@@ -25,6 +28,7 @@ const TableTwoPlusActions = () => {
             <CircleIconButton
                 icon="ellipsis-h"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>
@@ -38,6 +42,7 @@ const TableTwoPlusActions = () => {
             <CircleIconButton
                 icon="ellipsis-h"
                 variant="secondary"
+                {...props}
             />
           </td>
 
@@ -52,6 +57,7 @@ const TableTwoPlusActions = () => {
             <CircleIconButton
                 icon="ellipsis-h"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>

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

@@ -13,3 +13,6 @@
 @import "single-line";
 @import "table-dark";
 @import "mobile";
+@import "mobile_collapse";
+@import "tablet_collapse";
+@import "desktop_collapse";

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

@@ -0,0 +1,135 @@
+@import "../../tokens/border_radius";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-xl-min) {
+  [class^=pb_table] {
+    &.table-sm.table-collapse-lg,
+    &.table-md.table-collapse-lg,
+    &.table-lg.table-collapse-lg {
+      width: 100%;
+      background: none !important;
+
+      thead {
+        tr {
+          left: -9999px;
+          position: absolute;
+          top: -9999px;
+
+          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/_mobile_collapse.scss

@@ -0,0 +1,135 @@
+@import "../../tokens/border_radius";
+@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: -9999px;
+          position: absolute;
+          top: -9999px;
+
+          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;
+          }
+        }
+      }
+    }
+  }
+}