playbook_ui 7.12.1 → 7.15.1

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss

@@ -5,18 +5,18 @@
 
 	input[type="checkbox"],
 	input[type="radio"] {
-    
+
     transition-duration: $transition_short;
-    
+
 		&:checked ~ label {
       transition-timing-function: $easeIn;
 			color: $primary;
-		
+
 				h4 {
 					color: $primary;
 				}
 			}
-        
+
     &:not(:checked) ~ label {
       transition-timing-function: $easeOut;
         color: $slate;
@@ -26,7 +26,7 @@
     &[class*=_disabled] {
       opacity: $opacity_6;
       cursor: not-allowed;
-      
+
       * {
           cursor: not-allowed;
       }
@@ -35,10 +35,10 @@
   &.dark {
 
     input[type="checkbox"],
-    input[type="radio"] {       
-      
+    input[type="radio"] {
+
       transition-duration: $transition_short;
-      
+
       &:checked ~ label {
         transition-timing-function: $easeIn;
         color: $active_dark;

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -4,11 +4,13 @@ import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
+import PbTable from './'
 
 type TableProps = {
   aria?: object,
   children: array<Node> | Node,
   className: string,
+  collapse?: "sm" | "md" | "lg",
   container: boolean,
   dark?: boolean,
   data?: object,
@@ -25,6 +27,7 @@ const Table = (props: TableProps) => {
     aria = {},
     children,
     className,
+    collapse = 'sm',
     container = true,
     dark,
     data = {},
@@ -38,6 +41,10 @@ const Table = (props: TableProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
+
+  const instance = new PbTable()
+  instance.connect()
 
   return (
     <table
@@ -55,6 +62,7 @@ const Table = (props: TableProps) => {
           'no-hover': disableHover,
         },
         globalProps(props),
+        tableCollapseCss,
         className
       )}
         id={id}

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

@@ -1,6 +1,6 @@
-<%= pb_rails("title", props: { size: 4, text: "Default" }) %>
+<%= pb_rails("title", props: { size: 4, text: "Not Responsive" }) %>
 
-<%= pb_rails("table", props: { responsive: "collapse" }) do %>
+<%= pb_rails("table", props: { responsive: "none" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -23,9 +23,34 @@
 
 <br>
 
-<%= pb_rails("title", props: { size: 4, text: "Responsive Off" }) %>
+<%= pb_rails("title", props: { size: 4, text: "Collapse Mobile" }) %>
 
-<%= pb_rails("table", props: { responsive: "none" }) do %>
+<%= pb_rails("table", props: { collapse: "sm" }) do %>
+  <thead>
+    <tr>
+      <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>
+    </tr>
+  </tbody>
+<% end %>
+
+<br>
+
+<%= pb_rails("title", props: { size: 4, text: "Collapse Tablet" }) %>
+
+<%= pb_rails("table", props: { collapse: "md" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -45,3 +70,30 @@
     </tr>
   </tbody>
 <% end %>
+
+<br>
+
+<%= pb_rails("title", props: { size: 4, text: "Collapse Desktop" }) %>
+
+<%= pb_rails("table", props: { collapse: "lg" }) do %>
+  <thead>
+    <tr>
+      <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>
+    </tr>
+  </tbody>
+<% end %>
+
+

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

@@ -6,10 +6,11 @@ const TableResponsiveTable = (props) => {
     <div>
       <Title
           size={4}
-          text="Default"
+          text="Not Responsive"
           {...props}
       />
       <Table
+          responsive="none"
           {...props}
       >
         <thead>
@@ -35,11 +36,71 @@ const TableResponsiveTable = (props) => {
       <br />
       <Title
           size={4}
-          text="Default"
+          text="Collapse Mobile"
           {...props}
       />
       <Table
-          responsive="none"
+          collapse="sm"
+          {...props}
+      >
+        <thead>
+          <tr>
+            <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>
+          </tr>
+        </tbody>
+      </Table>
+      <br />
+      <br />
+      <Title
+          size={4}
+          text="Collapse Tablet"
+          {...props}
+      />
+      <Table
+          collapse="md"
+          {...props}
+      >
+        <thead>
+          <tr>
+            <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>
+          </tr>
+        </tbody>
+      </Table>
+      <br />
+      <br />
+      <Title
+          size={4}
+          text="Collapse Desktop"
+          {...props}
+      />
+      <Table
+          collapse="lg"
           {...props}
       >
         <thead>

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/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;
+          }
+        }
+      }
+    }
+  }
+}