playbook_ui 7.13.0 → 7.14.0.pre.alpha1

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

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

@@ -0,0 +1,135 @@
+@import "../../tokens/border_radius";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-lg-min) {
+  [class^=pb_table] {
+    &.table-sm.table-collapse-md,
+    &.table-md.table-collapse-md,
+    &.table-lg.table-collapse-md {
+      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;
+          }
+        }
+      }
+    }
+  }
+}