playbook_ui 15.5.0.pre.alpha.draggableask12815 → 15.5.0.pre.alpha.draggablefix12557

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98841feb5b969eb7f672a47ff38e7c729f8182c0edaaa684e844a38782a3ef68
-  data.tar.gz: 36e41e6566badbd4d7e9d6aa2761500a5d2404d11f23acb1bf809fba82fb55e4
+  metadata.gz: 919f3350cdd7c157371fd1f02395ef40868156156bc20dda59bdca671ba525b0
+  data.tar.gz: 5de0380c738e2aa0e341f4f1a6c20fe09e2c82b87f6f44f298dfc83ac2b3721c
 SHA512:
-  metadata.gz: 988a98130fd85025a9241d779452d609f1c6de809370aea399b08bb3af07a0a2f9465ff3fbb401f0c4cc440fa4230ef4b5d5db6b6837132ea0d96803589eac35
-  data.tar.gz: 9ba65c882d9bcbff58047e0af484b26ad3154d2b7fdd40f269b903f78bd9465c9284343b06aa0aab1688f4fe77b8058de73251349b79aef3f5c8e08868613fe2
+  metadata.gz: 07f5a7b60a390625121f739b1de7ccb57114b9701099d7c26ad56e27a1421bb9fa137fcc6212b70116d63b4becc3476bc970f6e845255558b4922e956a3a72da
+  data.tar.gz: 240c25fb702ebc6820d584fd1be2c302188a914686f5c975d0da6620218b75b9a82d6e1bd78ba0c838ca462d1309b7c2ae3ab107ada47e0bdeb7874bff240247

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

@@ -791,28 +791,6 @@
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
-    // Override last-header-cell border color in dark mode
-    .pb_advanced_table_header {
-      > tr:not(:first-child) {
-        .last-header-cell {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-
-      th[colspan]:not([colspan="1"]) {
-        border-right: 1px solid $border_dark !important;
-      }
-    }
-
-    // Override last-cell border color in dark mode for body cells
-    .pb_advanced_table_body {
-      tr {
-        .last-cell:not(:last-of-type) {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-    }
-
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
       // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
@@ -872,7 +850,7 @@
     // Restore vertical border styling in dark mode when verticalBorder is true
     .pb_table[data-vertical-border="true"] {
       .pb_advanced_table_header {
-        > tr {
+        > tr:not(:first-child) {
           th:not(:last-child) {
             border-right: 1px solid $border_dark !important;
           }
@@ -886,17 +864,11 @@
         }
       }
 
-      tr.virtualized-table-row {
-        td:not(:last-child) {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-
       // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
       // override the default border-dark with the custom color
       &.pb_advanced_table[class*="column-group-border-"] {
         .pb_advanced_table_header {
-          > tr {
+          > tr:not(:first-child) {
             th:not(:last-child) {
               border-right: 1px solid var(--column-border-color) !important;
             }
@@ -909,12 +881,6 @@
             border-right: 1px solid var(--column-border-color) !important;
           }
         }
-
-        tr.virtualized-table-row {
-          td:not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-        }
       }
     }
 
@@ -1019,90 +985,34 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      th[colspan]:not([colspan="1"]):not(:last-child) {
-        border-right: none !important;
-        box-shadow: 1px 0 0 0 $border_light !important;
-      }
-
-      .last-header-cell:not(:last-child),
-      > tr:last-child .last-header-cell:not(:last-child) {
+      .last-header-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      tr .last-cell:not(:last-of-type),
-      td.last-cell:not(:last-child),
-      .pb_table_td.last-cell:not(:last-child) {
+      .last-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
-    &[class*="column-group-border-"] {
-      .pb_advanced_table_header {
-        th[colspan]:not([colspan="1"]):not(:last-child),
-        .last-header-cell:not(:last-child),
-        > tr:last-child .last-header-cell:not(:last-child) {
-          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-        }
-      }
-
-      .pb_advanced_table_body {
-        tr .last-cell:not(:last-of-type),
-        td.last-cell:not(:last-child),
-        .pb_table_td.last-cell:not(:last-child) {
-          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-        }
-      }
-    }
-
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        // Convert all colspan headers to box-shadow with dark color
-        th[colspan]:not([colspan="1"]) {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_dark !important;
-        }
-
-        // Convert all last-header-cell borders to box-shadow with dark color
-        .last-header-cell:not(:last-child),
-        > tr:last-child .last-header-cell:not(:last-child),
-        > tr:not(:first-child) .last-header-cell:not(:last-child),
-        > tr:not(:first-child) .last-header-cell:last-child {
+        .last-header-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        tr .last-cell:not(:last-of-type),
-        td.last-cell:not(:last-child),
-        .pb_table_td.last-cell:not(:last-child) {
+        .last-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
-
-      &[class*="column-group-border-"] {
-        .pb_advanced_table_header {
-          th[colspan]:not([colspan="1"]):not(:last-child),
-          .last-header-cell:not(:last-child),
-          > tr:last-child .last-header-cell:not(:last-child) {
-            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-          }
-        }
-
-        .pb_advanced_table_body {
-          tr .last-cell:not(:last-of-type),
-          td.last-cell:not(:last-child),
-          .pb_table_td.last-cell:not(:last-child) {
-            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-          }
-        }
-      }
     }
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -102,16 +102,16 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   useEffect(() => {
     const updateResponsiveProps = () => {
       setResponsiveProps({
-        backgroundSize: getResponsiveValue(backgroundSize),
-        backgroundPosition: getResponsiveValue(backgroundPosition),
-        backgroundRepeat: getResponsiveValue(backgroundRepeat),
-        backgroundColor: getResponsiveValue(backgroundColor),
-        imageUrl: getResponsiveValue(imageUrl),
+        backgroundSize: getResponsiveValue(props.backgroundSize),
+        backgroundPosition: getResponsiveValue(props.backgroundPosition),
+        backgroundRepeat: getResponsiveValue(props.backgroundRepeat),
+        backgroundColor: getResponsiveValue(props.backgroundColor),
+        imageUrl: getResponsiveValue(props.imageUrl),
       });
     };
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
-  }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
+  }, [props]);
 
 
   // Extract currently applicable responsive values.

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -4,6 +4,7 @@ import Background from './_background'
 
 const props = {
   data: { testid: 'background' },
+  backgroundColor: null,
 }
 
 it('Should be accessible', async () => {
@@ -41,8 +42,3 @@ test('applies correct overlay class when imageOverlay prop is provided', () => {
   const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
   expect(kit).toHaveClass('imageoverlay_opacity_6');
 });
-
-test('Sets backgroundColor to light as default when no backgroundColor prop is provided', () => {
-  const kit = renderKit(Background, props);
-  expect(kit).toHaveClass('pb_background_color_light');
-});

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { padding: "xl" }) do %>
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,6 +3,7 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
+      backgroundColor="light"
       padding="xl"
       {...props}
   />

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

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

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

@@ -0,0 +1,58 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import url("https://code.highcharts.com/css/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;
+}
+
+.highcharts-point {
+  border-radius: 3px;
+}
+
+.highcharts-axis-line {
+  stroke: $border_light;
+}

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,24 +1,3 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ]
-%>
-
-
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -31,16 +10,6 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
-        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
-        <%= pb_rails("typeahead", props: {
-        id: "typeahead-default",
-        placeholder: "Select one...",
-        options: options,
-        name: :foo,
-        margin_top: "sm",
-        is_multi: false
-      })
-%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>