playbook_ui 14.10.0.pre.rc.20 → 14.10.0.pre.rc.22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8004b611a0e7ed5891628daf08be8b7560b22d0faa48631442fc94116f6fba30
-  data.tar.gz: 5e7b1d10c69dc6148f1778ea2d9c912cc220d199a54db0d9f9179c75ba5bfdd2
+  metadata.gz: ad9038fa0ac4d11cbf3a80ddbe6ffc79d05361f05f7c29d53313bb93d1e369d4
+  data.tar.gz: cb438e2f888326e3df9dc9fe8bb7f00114284e57b74bf95e7425c1c0f449768a
 SHA512:
-  metadata.gz: 79e6cc10512af3e174eb5a6e11b9b638c63af121d7c9a398aaae6086e083bd3569dbcd2ab11dc0f436858a3c4c2aefe2d7677252c8cff64d5f60b75c211e4281
-  data.tar.gz: 2405a386d65dc6880cc5ffb3dc835a7556caa55ce59eea569cf42205a6f090d1f9ad413fc29b52c210fef9e7d51c0d84e19aaf8eec7215746f1d847086ea08e9
+  metadata.gz: 27c3775b16e5b9dbfb037253c8cab3fb2c2b8658454249bba0bee3b19b2010fa4329e2c6c94046ad35655f7c2e2676a7ba0aef5cca6c734cb719b078f4a6e487
+  data.tar.gz: 909b33325ea6f7a48a7b4c6037428115d4f451a2bcd8faa814f2310b39cd4a57935aa88cb95ea904cd273c00b441b38f2fee15e3674208f0b892fcd3675a5e94

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -120,7 +120,7 @@
 
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {  
-    &[class*="table-responsive-scroll"] {
+    &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
                   -1px 0 0 0px $border_light;
@@ -158,7 +158,7 @@
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
-    &[class*="table-responsive-scroll"] {
+    &[class*="advanced-table-responsive-scroll"] {
       overflow-x: visible;
     }
   }
@@ -208,7 +208,7 @@
     }
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
-      &[class*="table-responsive-scroll"] {
+      &[class*="advanced-table-responsive-scroll"] {
         border-radius: 4px;
         box-shadow: 1px 0 0 0px $border_dark,
                     -1px 0 0 0px $border_dark;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -240,7 +240,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
-    `table-responsive-${responsive}`,
+    `advanced-table-responsive-${responsive}`,
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -468,7 +468,7 @@ test("responsive prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
+  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-scroll")
 })
 
 test("responsive none prop functions as expected", () => {
@@ -483,7 +483,7 @@ test("responsive none prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
+  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-none")
 })
 
 test("customRenderer prop functions as expected", () => {

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -1,12 +1,33 @@
+@import "../tokens/colors";
+
 [class^=pb_gauge_kit] {
 
+  .fix {
+    fill: $text_lt_default;
+    stroke: none;
+
+    &[class*=dark] {
+      fill: $text_dk_default;
+    }
+  }
+
   .suffix {
     fill: $text_lt_light;
+    stroke: none;
     font: $regular $font_larger $font_family_base;
+
+    &[class*=dark] {
+      fill: $text_dk_light;
+    }
   }
   .prefix {
     fill: $text_lt_light;
+    stroke: none;
     font: $regular $font_base $font_family_base;
+
+    &[class*=dark] {
+      fill: $text_dk_light;
+    }
   }
 
   rect.highcharts-background {
@@ -16,4 +37,13 @@
   .gauge-pane {
     stroke-linejoin: round;
   }
-}
+
+  &[class*=dark] {
+    color: $text_dk_default;
+
+    .pb_title_kit_size_1,
+    .pb_caption_kit_xs {
+        color: $text_dk_light;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -164,9 +164,9 @@ const Gauge = ({
             color: defaultColors.text_lt_default,
             enabled: true,
             format:
-              `<span class="prefix">${prefix}</span>` +
-              '<span class="fix">{y:,f}</span>' +
-              `<span class="suffix">${suffix}</span>`,
+              `<span class="prefix${dark ? " dark" : ""}">${prefix}</span>` +
+              `<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` +
+              `<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
             style: {
               fontFamily: typography.font_family_base,
               fontWeight: typography.regular,

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -17,47 +17,60 @@ const GaugeComplex = (props) => (
       gap="sm"
       padding="xl"
       wrap
+      {...props}
   >
     <FlexItem
         flex={1}
         grow
+        {...props}
     >
       <Card
           maxWidth="xs"
           padding="md"
+          {...props}
       >
         <Title
             paddingBottom="sm"
             size={4}
             text="Abandoned Calls"
+            {...props}
         />
-        <Flex align="stretch">
+        <Flex
+            align="stretch"
+            {...props}
+        >
           <Flex
               marginRight="sm"
               orientation="column"
+              {...props}
           >
             <Body
                 color="light"
                 paddingBottom="sm"
                 text="Total Abandoned"
+                {...props}
             />
             <Flex
                 align="baseline"
                 paddingBottom="xs"
+                {...props}
             >
               <Title
                   size={1}
                   text="39"
+                  {...props}
               />
               <Title
                   color="light"
                   size={3}
                   text="calls"
+                  {...props}
               />
             </Flex>
             <Caption
                 size="xs"
                 text="of 390"
+                {...props}
             />
           </Flex>
 
@@ -65,22 +78,29 @@ const GaugeComplex = (props) => (
               alignSelf="stretch"
               marginRight="sm"
               orientation="vertical"
+              {...props}
           />
 
           <Flex
               orientation="column"
               wrap
+              {...props}
           >
               <Body
                   color="light"
                   text="% Abandoned"
-               />
-            <Flex wrap>
+                  {...props}
+              />
+            <Flex
+                wrap
+                {...props}
+            >
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-              > 
+                  {...props}
+              >
                 <Gauge
                     chartData={data}
                     disableAnimation
@@ -90,7 +110,7 @@ const GaugeComplex = (props) => (
                     {...props}
                 />
                </FlexItem>
-            </Flex>  
+            </Flex>
           </Flex>
         </Flex>
       </Card>

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

@@ -92,16 +92,16 @@ const Table = (props: TableProps): React.ReactElement => {
     useEffect(() => {
         const handleStickyColumns = () => {
             let accumulatedWidth = 0;
-    
+
             stickyLeftcolumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftcolumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
-    
+
                 if (header) {
                     header.classList.add('sticky');
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-    
+
                     if (!isLastColumn) {
                         header.classList.add('with-border');
                         header.classList.remove('sticky-shadow');
@@ -109,14 +109,14 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.remove('with-border');
                         header.classList.add('sticky-shadow');
                     }
-    
+
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
                 }
-    
+
                 cells.forEach((cell) => {
                     cell.classList.add('sticky');
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-                    
+
                     if (!isLastColumn) {
                         cell.classList.add('with-border');
                         cell.classList.remove('sticky-shadow');

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

@@ -25,16 +25,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
 
     </tr>
     <tr>
@@ -43,16 +43,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
 
     </tr>
     <tr>
@@ -61,34 +61,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
-
-    </tr>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
 
     </tr>
   </tbody>

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

@@ -0,0 +1 @@
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.

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

@@ -4,6 +4,7 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
+    - table_sticky_left_columns: Sticky Left Column
     - table_header: Table Header
     - table_alignment_row_rails: Row Alignment
     - table_alignment_column_rails: Cell Alignment
@@ -33,6 +34,7 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
+    - table_sticky_left_columns: Sticky Left Column
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift

data/app/pb_kits/playbook/pb_table/index.ts

@@ -51,9 +51,11 @@ export default class PbTable extends PbEnhancedElement {
               .split('-');
 
           if (this.stickyLeftColumns.length > 0) {
-            this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
-            this.handleStickyColumns();
-            window.addEventListener('resize', this.handleStickyColumnsRef);
+            setTimeout(() => {
+              this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
+              this.handleStickyColumns();
+              window.addEventListener('resize', this.handleStickyColumnsRef);
+            }, 10);
           }
         }
       });

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

@@ -1,4 +1,29 @@
-    .table-responsive-scroll {
-        display: block;
-        overflow-x: auto;
+@import "../../tokens/screen_sizes";
+
+.table-responsive-scroll {
+    display: block;
+    overflow-x: scroll;
+
+    // Responsive Styles
+    @media (max-width: 1600px) {
+        &[class*="table-responsive-scroll"] {
+            border-radius: 4px;
+            box-shadow: 1px 0 0 0px $border_light
+          }
+
+        &[class^=pb_table].table-sm.table-card thead tr th:last-child,
+        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+            border-right-width: 0px;
+        }
+
+        &[class^=pb_table].table-md.table-card thead tr th:last-child,
+        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
+            border-right-width: 0px;
+        }
+
+        &[class^=pb_table].table-lg.table-card thead tr th:last-child,
+        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
+            border-right-width: 0px;
+        }
     }
+}

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

@@ -3,7 +3,6 @@
 [class^="pb_table"] {
     .sticky {
         position: sticky !important;
-        left: 0;
         z-index: 1;
         background-color: white;
     }

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -1,4 +1,10 @@
-<%= content_tag(:div) do %>
+<% if object.responsive_classname %>
+  <% responsive_class = object.responsive_classname %>
+<% else %>
+  <% responsive_class = nil %>
+<% end %>
+
+<%= content_tag(:div, class: responsive_class) do %>
   <% if object.tag == "table" %>
     <%= content_tag(:table,
       aria: object.aria,

data/app/pb_kits/playbook/pb_table/table.rb

@@ -45,6 +45,10 @@ module Playbook
         )
       end
 
+      def responsive_classname
+        responsive ? "table-responsive-#{responsive}" : nil
+      end
+
     private
 
       def dark_class