playbook_ui 7.13.0 → 7.16.0.pre.alpha1

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

@@ -52,17 +52,17 @@ const StarRating = ({
         className={css}
         id={id}
     >
-      <div className="pb_star_rating_number">
-        <If condition={!hideRating}>
+      <If condition={!hideRating}>
+        <div className="pb_star_rating_number">
           {rating}
-        </If>
-      </div>
+        </div>
+      </If>
 
       <div className="pb_star_rating_wrapper">
         <div className="pb_star_rating_highlight">
           {starCount().map((_, index) => (
             <Icon
-                fixedWidth
+                fixedWidth={false}
                 icon="star"
                 key={index}
             />
@@ -70,7 +70,7 @@ const StarRating = ({
 
           <If condition={hasHalfStar()}>
             <Icon
-                fixedWidth
+                fixedWidth={false}
                 icon="star-half"
             />
           </If>
@@ -78,23 +78,23 @@ const StarRating = ({
 
         <div className="pb_star_rating_base">
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
         </div>

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 
 $pb_star_rating_number_width: 30px;
-$pb_star_rating_wrapper_width: 150px;
+$pb_star_rating_wrapper_width: 90px;
 $pb_star_rating_height: 26px;
 
 [class^=pb_star_rating_kit] {
@@ -35,16 +35,18 @@ $pb_star_rating_height: 26px;
     min-height: $pb_star_rating_height;
 
     .pb_star_rating_highlight {
+      display: flex;
       position: absolute;
-      top: 0;
+      top: 5px;
       left: 0;
       z-index: 5;
       color: $yellow;
       line-height: $pb_star_rating_height;
     }
     .pb_star_rating_base {
+      display: flex;
       position: absolute;
-      top: 0;
+      top: 5px;
       left: 0;
       z-index: 0;
       color: rgba($slate, $opacity-4);

data/app/pb_kits/playbook/pb_star_rating/{_star_rating.html.erb → star_rating.html.erb}

@@ -3,9 +3,7 @@
     data: object.data,
     class: object.classname) do %>
     <%# Rating value %>
-    <% if object.hide_rating %>
-      <%= content_tag(:div, "", class: "pb_star_rating_number") %>
-    <% else %>
+    <% if !object.hide_rating %>
       <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
     <% end %>
 
@@ -13,20 +11,21 @@
       <%# Gold stars generated by rating value %>
       <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
         <% object.star_count.times do %>
-          <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+          <%= pb_rails("icon", props: { icon: "star" }) %>
         <% end %>
         <% unless object.star_full %>
-          <%= pb_rails("icon", props: { icon: "star-half", fixed_width: true }) %>
+          <%= pb_rails("icon", props: { icon: "star-half" }) %>
         <% end %>
       <% end %>
 
       <%# Grey background stars as base %>
       <%= content_tag(:div, class: "pb_star_rating_base") do %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
       <% end %>
+
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbStarRating
-    class StarRating
-      include Playbook::Props
-
-      partial "pb_star_rating/star_rating"
-
+    class StarRating < Playbook::KitBase
       prop :hide_rating, type: Playbook::Props::Boolean,
                          default: false
 

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbStatChange
-    class StatChange
-      include Playbook::Props
-
-      partial "pb_stat_change/stat_change"
-
+    class StatChange < Playbook::KitBase
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"

data/app/pb_kits/playbook/pb_stat_value/stat_value.rb

@@ -2,12 +2,7 @@
 
 module Playbook
   module PbStatValue
-    class StatValue
-      include Playbook::Props
-      include ActionView::Helpers::NumberHelper
-
-      partial "pb_stat_value/stat_value"
-
+    class StatValue < Playbook::KitBase
       prop :unit
       prop :value, type: Playbook::Props::Number
 

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_alignment_shift_data.jsx

@@ -28,7 +28,6 @@ const TableAlignmentShiftData = (props) => {
           </td>
         </tr>
       </tbody>
-      <br />
       <thead>
         <tr>
           <th>{'Espresso Drinks'}</th>

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,136 @@
+@import "../../tokens/border_radius";
+@import "../../tokens/positioning";
+@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: $offscreen;
+          position: absolute;
+          top: $offscreen;
+
+          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;
+          }
+        }
+      }
+    }
+  }
+}