playbook_ui 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 → 14.10.0.pre.alpha.play1662cssbargraph5193

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff11190f99fd3526f682637bab45adc5e4c6622abc098105e921812d32865a0d
-  data.tar.gz: 82f35cf6cbaa49b39804d96662fef1f95d1bf94a6ef505d9ae629a7b55ec27bb
+  metadata.gz: f2e1aaf2cadccd158fb55ca05342e3dfefd6e2614dc37d220086b342e5df4340
+  data.tar.gz: fc03a93a9cc11765508190229426d34d507306ebf46aff0efe5ec23bb65ddb32
 SHA512:
-  metadata.gz: ddd191fb90d1c45fb7c29aa490b5468ea44d0b3f75dfcac06ec498710571a771ae15892f6629123488c979881fba11f5aa1a0dce6e40d964a45020e4bd3df181
-  data.tar.gz: 37e12958a52b826dfceb58a28a8840fceb209ad9138b54d3d192e02cee52f59a4b8bd1f7994461812aa7ebc179302a91b4069ff256101a6d0b61a848c4a4ca5d
+  metadata.gz: 88632df2e8dd9a501cd6d97a0bc60213d11a1a4f3e3b063c9318a83267177403c02adb69e60c69344c07c91e7a1915f8a3954069c8682839d8787879b3208219
+  data.tar.gz: 03f3eec3ebd3da933b162a985c72fde36109c4f2e01ad4d732f73cf27a1eae8fb633823af6859f659470d0dca062b8f1dba1777e172a05be30af19b19cc063a4

data/app/pb_kits/playbook/pb_dashboard/BarGraphStyles.scss

@@ -0,0 +1,53 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import url("https://code.highcharts.com/css/highcharts.css");
+// @import "highcharts/css/highcharts";
+// @import "highcharts/highcharts.css";
+
+:root {
+    --highcharts-color-0: #{$data_1};
+    --highcharts-color-1: #{$data_2};
+    --highcharts-color-2: #{$data_3};
+    --highcharts-color-3: #{$data_4};
+    --highcharts-color-4: #{$data_5};
+    --highcharts-color-5: #{$data_6};
+    --highcharts-color-6: #{$data_7};
+    --highcharts-color-7: #{$data_8};
+}
+
+.highcharts-title {
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $heading_3;
+    color: $text_lt_default;
+    fill: $text_lt_default;
+}
+
+.highcharts-subtitle {
+    font-family: $font_family_base;
+    color: $text_lt_light;
+    fill: $text_lt_light;
+    font-weight: $regular;
+    font-size: $text_base;
+}
+
+.highcharts-yaxis > .highcharts-axis-title {
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-axis-labels {
+    font-family: $font_family_base;
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-grid-line {
+    stroke: $border_light;
+}
+

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

@@ -28,8 +28,7 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftColumn?: string[],
-    stickyRightColumn?: string[],
+    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -53,8 +52,7 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftColumn = [],
-        stickyRightColumn= [],
+        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -81,8 +79,7 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftColumn,
-            'sticky-right-column': stickyRightColumn,
+            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -93,12 +90,11 @@ const Table = (props: TableProps): React.ReactElement => {
     )
 
     useEffect(() => {
-        const handleStickyLeftColumns = () => {
-            if (!stickyLeftColumn.length) return;
+        const handleStickyColumns = () => {
             let accumulatedWidth = 0;
 
-            stickyLeftColumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftColumn.length - 1;
+            stickyLeftcolumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftcolumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
 
@@ -107,11 +103,11 @@ const Table = (props: TableProps): React.ReactElement => {
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
                     if (!isLastColumn) {
-                        header.classList.add('with-border-right');
-                        header.classList.remove('sticky-left-shadow');
+                        header.classList.add('with-border');
+                        header.classList.remove('sticky-shadow');
                     } else {
-                        header.classList.remove('with-border-right');
-                        header.classList.add('sticky-left-shadow');
+                        header.classList.remove('with-border');
+                        header.classList.add('sticky-shadow');
                     }
 
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -122,71 +118,26 @@ const Table = (props: TableProps): React.ReactElement => {
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
                     if (!isLastColumn) {
-                        cell.classList.add('with-border-right');
-                        cell.classList.remove('sticky-left-shadow');
+                        cell.classList.add('with-border');
+                        cell.classList.remove('sticky-shadow');
                     } else {
-                        cell.classList.remove('with-border-right');
-                        cell.classList.add('sticky-left-shadow');
+                        cell.classList.remove('with-border');
+                        cell.classList.add('sticky-shadow');
                     }
                 });
             });
         };
 
         setTimeout(() => {
-            handleStickyLeftColumns();
+            handleStickyColumns();
         }, 10);
 
-        window.addEventListener('resize', handleStickyLeftColumns);
+        window.addEventListener('resize', handleStickyColumns);
 
         return () => {
-            window.removeEventListener('resize', handleStickyLeftColumns);
+            window.removeEventListener('resize', handleStickyColumns);
         };
-    }, [stickyLeftColumn]);
-
-    useEffect(() => {
-        const handleStickyRightColumns = () => {
-            if (!stickyRightColumn.length) return;
-            let accumulatedWidth = 0;
-
-            stickyRightColumn.reverse().forEach((colId, index) => {
-                const isLastColumn = index === stickyRightColumn.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.right = `${accumulatedWidth}px`;
-
-                    if (!isLastColumn) {
-                        header.classList.add('with-border-left');
-                        header.classList.remove('sticky-right-shadow');
-                    } else {
-                        header.classList.remove('with-border-left');
-                        header.classList.add('sticky-right-shadow');
-                    }
-
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
-
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-left');
-                        cell.classList.remove('sticky-right-shadow');
-                    } else {
-                        cell.classList.remove('with-border-left');
-                        cell.classList.add('sticky-right-shadow');
-                    }
-                });
-            });
-        };
-
-        setTimeout(() => {
-            handleStickyRightColumns();
-        }, 10);
-    }, [stickyRightColumn]);
+    }, [stickyLeftcolumn]);
 
     useEffect(() => {
         const instance = new PbTable()

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

@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
         <Table
             responsive="scroll"
             size="md"
-            stickyLeftColumn={["1", "2", "3"]}
+            stickyLeftcolumn={["1", "2", "3"]}
         >
             <thead>
                 <tr>

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

@@ -1,3 +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>`.
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

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

@@ -1,5 +1,2 @@
 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>`.
-
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

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

@@ -2,7 +2,7 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
     private stickyLeftColumns: string[] = [];
-    private handleStickyLeftColumnsRef: () => void;
+    private handleStickyColumnsRef: () => void;
 
     static get selector(): string {
       return '.table-responsive-collapse'
@@ -31,10 +31,10 @@ export default class PbTable extends PbEnhancedElement {
       });
 
       // New sticky columns logic
-      this.initStickyLeftColumns();
+      this.initStickyColumns();
     }
 
-    private initStickyLeftColumns(): void {
+    private initStickyColumns(): void {
       // Find tables with sticky-left-column class
       const tables = document.querySelectorAll('.sticky-left-column');
 
@@ -52,16 +52,16 @@ export default class PbTable extends PbEnhancedElement {
 
           if (this.stickyLeftColumns.length > 0) {
             setTimeout(() => {
-              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
-              this.handleStickyLeftColumns();
-              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
+              this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
+              this.handleStickyColumns();
+              window.addEventListener('resize', this.handleStickyColumnsRef);
             }, 10);
           }
         }
       });
     }
 
-    private handleStickyLeftColumns(): void {
+    private handleStickyColumns(): void {
       let accumulatedWidth = 0;
 
       this.stickyLeftColumns.forEach((colId, index) => {
@@ -74,11 +74,11 @@ export default class PbTable extends PbEnhancedElement {
           (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
           if (!isLastColumn) {
-            header.classList.add('with-border-right');
-            header.classList.remove('sticky-left-shadow');
+            header.classList.add('with-border');
+            header.classList.remove('sticky-shadow');
           } else {
-            header.classList.remove('with-border-right');
-            header.classList.add('sticky-left-shadow');
+            header.classList.remove('with-border');
+            header.classList.add('sticky-shadow');
           }
 
           accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -89,11 +89,11 @@ export default class PbTable extends PbEnhancedElement {
           (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
           if (!isLastColumn) {
-            cell.classList.add('with-border-right');
-            cell.classList.remove('sticky-left-shadow');
+            cell.classList.add('with-border');
+            cell.classList.remove('sticky-shadow');
           } else {
-            cell.classList.remove('with-border-right');
-            cell.classList.add('sticky-left-shadow');
+            cell.classList.remove('with-border');
+            cell.classList.add('sticky-shadow');
           }
         });
       });
@@ -101,8 +101,8 @@ export default class PbTable extends PbEnhancedElement {
 
     // Cleanup method to remove event listener
     disconnect(): void {
-      if (this.handleStickyLeftColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
+      if (this.handleStickyColumnsRef) {
+        window.removeEventListener('resize', this.handleStickyColumnsRef);
       }
     }
 }

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

@@ -8,24 +8,8 @@
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
             border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_light,
-                        -1px 0 0 0px $border_light
-        }
-
-        &[class^=pb_table].table-sm.table-card thead tr th:first-child,
-        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
-
-        &[class^=pb_table].table-md.table-card thead tr th:first-child,
-        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
-
-        &[class^=pb_table].table-lg.table-card thead tr th:first-child,
-        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
+            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 {

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

@@ -7,25 +7,11 @@
         background-color: white;
     }
 
-    // For use with sticky left columns
-    .sticky-left-shadow {
-        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
-        left: 0;
-    }
-
-    .with-border-right {
+    .with-border {
         border-right: 1px solid $border_light !important;
-        left: 0;
     }
 
-    // For use with sticky right columns
-    .sticky-right-shadow {
-        box-shadow: -4px 0 10px rgba(60, 106, 172, 0.16) !important;
-        right: 0;
-    }
-
-    .with-border-left {
-        border-left: 1px solid $border_light !important;
-        right: 0;
+    .sticky-shadow {
+        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
     }
 }

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -123,6 +123,13 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
 
   const childInput = children ? children.type === "input" : undefined
 
+  let formattedValue;
+  if (isMaskedInput && value) {
+    formattedValue = INPUTMASKS[mask].formatDefaultValue(value.toString())
+  } else {
+    formattedValue = value
+  }
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
@@ -138,7 +145,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         ref={ref}
         required={required}
         type={type}
-        value={value}
+        value={formattedValue}
      />)
   )
 

data/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -1,5 +1,6 @@
 type InputMask = {
     format: (value: string) => string
+    formatDefaultValue: (value: string) => string
     pattern: string
     placeholder: string
 }
@@ -8,6 +9,24 @@ type InputMaskDictionary = {
     [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
 }
 
+const formatCurrencyDefaultValue = (value: string): string => {
+    // Remove non-numeric characters except for the decimal point
+    const numericValue = value.replace(/[^0-9.]/g, '')
+
+    if (!numericValue) return ''
+
+    // Parse the numeric value as a float to handle decimals
+    const dollars = parseFloat(numericValue)
+    if (isNaN(dollars) || dollars === 0) return ''
+
+    // Format as currency
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 2,
+    }).format(dollars)
+}
+
 const formatCurrency = (value: string): string => {
     const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
 
@@ -42,22 +61,26 @@ const formatSSN = (value: string): string => {
 export const INPUTMASKS: InputMaskDictionary = {
     currency: {
         format: formatCurrency,
+        formatDefaultValue: formatCurrencyDefaultValue,
         // eslint-disable-next-line no-useless-escape
         pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
         placeholder: '$0.00',
     },
     zipCode: {
         format: formatBasicPostal,
+        formatDefaultValue: formatBasicPostal,
         pattern: '\\d{5}',
         placeholder: '12345',
     },
     postalCode: {
         format: formatExtendedPostal,
+        formatDefaultValue: formatExtendedPostal,
         pattern: '\\d{5}-\\d{4}',
         placeholder: '12345-6789',
     },
     ssn: {
         format: formatSSN,
+        formatDefaultValue: formatSSN,
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
     },